Custom Button Injection auto dismiss drawer menu when actioned

change-beta/@azure-communication-react-d44320f8-4979-4572-87c6-b666454a9377.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "CustomButtonInjection",
+  "comment": "Add custom button injection autohide in drawermenus",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -2901,6 +2901,7 @@ export type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'seconda
 // @public
 export interface CustomCallControlButtonProps {
     disabled?: boolean;
+    dismissDrawer?: boolean;
     iconName?: string;
     id?: string;
     onItemClick?: () => void;

packages/communication-react/review/stable/communication-react.api.md

@@ -2646,6 +2646,7 @@ export type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'seconda
 // @public
 export interface CustomCallControlButtonProps {
     disabled?: boolean;
+    dismissDrawer?: boolean;
     iconName?: string;
     id?: string;
     onItemClick?: () => void;

packages/react-components/src/components/Drawer/DrawerMenuItem.tsx

@@ -62,6 +62,10 @@ export interface _DrawerMenuItemProps {
    * Aria label for the menu item
    */
   ariaLabel?: string;
+  /**
+   * Dismiss the drawer menu when the button is clicked
+   */
+  dismissDrawer?: boolean;
 }
 
 /**

packages/react-composites/src/composites/common/ControlBar/CustomButton.tsx

@@ -83,6 +83,12 @@ export interface CustomCallControlButtonProps {
    * Optional strings to override in component
    */
   strings?: CustomCallControlButtonStrings;
+  /**
+   * Dismiss the drawer menu when the button is clicked
+   *
+   * @defaultValue true
+   */
+  dismissDrawer?: boolean;
 }
 
 /**

packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx

@@ -696,6 +696,17 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
     drawerMenuItems.push(element);
   });
   customDrawerButtons['overflow'].forEach((element) => {
+    const customButtonProps = { ...element };
+    // Default Auto dismiss drawer on click unless specified
+    if (customButtonProps.dismissDrawer !== false) {
+      element = {
+        ...customButtonProps,
+        onItemClick: () => {
+          customButtonProps.onItemClick?.();
+          onLightDismiss();
+        }
+      };
+    }
     drawerMenuItems.push(element);
   });
   return (