@azure/communication-react 1.14.0-beta.2 → 1.14.1-alpha-202403210013

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CustomButton.js

@@ -17,9 +17,7 @@ export const CUSTOM_BUTTON_OPTIONS = {
 };
 /** @private */
 export const generateCustomCallControlBarButton = (onFetchCustomButtonProps, displayType) => {
-    const allButtonProps = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map(callback => callback({
-        displayType
-    }));
+    const allButtonProps = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
     return {
         primary: generateCustomControlBarButtons('primary', allButtonProps),
         secondary: generateCustomControlBarButtons('secondary', allButtonProps),
@@ -27,30 +25,36 @@ export const generateCustomCallControlBarButton = (onFetchCustomButtonProps, dis
     };
 };
 /** @private */
-const generateCustomControlBarButtons = (placement, customButtons) => customButtons ? customButtons.filter(buttonProps => buttonProps.placement === placement).map((buttonProps, i) => internalProps => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (buttonProps['onRenderButton']) {
-        return buttonProps['onRenderButton'](internalProps);
-    }
-    return React.createElement(ControlBarButton, { ariaDescription: (_b = (_a = buttonProps.strings) === null || _a === void 0 ? void 0 : _a.ariaDescription) !== null && _b !== void 0 ? _b : internalProps.ariaDescription, ariaLabel: (_f = (_d = (_c = buttonProps.strings) === null || _c === void 0 ? void 0 : _c.ariaLabel) !== null && _d !== void 0 ? _d : (_e = buttonProps.strings) === null || _e === void 0 ? void 0 : _e.tooltipContent) !== null && _f !== void 0 ? _f : internalProps.ariaLabel, disabled: (_g = buttonProps.disabled) !== null && _g !== void 0 ? _g : internalProps.disabled, id: (_h = buttonProps.id) !== null && _h !== void 0 ? _h : internalProps.id, key: `${buttonProps.placement}_${i}`, onClick: (_j = buttonProps.onItemClick) !== null && _j !== void 0 ? _j : internalProps.onClick, onRenderIcon: () => { var _a, _b, _c; return React.createElement(Icon, { iconName: (_c = (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : (_b = internalProps.iconProps) === null || _b === void 0 ? void 0 : _b.iconName) !== null && _c !== void 0 ? _c : 'DefaultCustomButton' }); }, showLabel: (_k = buttonProps.showLabel) !== null && _k !== void 0 ? _k : internalProps.showLabel, styles: mergeStyleSets(internalProps.styles), strings: buttonProps.strings });
-}) : [];
+const generateCustomControlBarButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => (internalProps) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        // onRenderButton is a custom prop that can be passed to override the default rendering of the button
+        // This is useful for custom buttons that need to render more than just an icon and label and is used
+        // for CallWithChat button notification badge. However, onRenderButton is not a public prop and is
+        // not documented in the API. This is a temporary solution and will need to be revisited.
+        if ('onRenderButton' in buttonProps) {
+            return buttonProps['onRenderButton'](internalProps);
+        }
+        return (React.createElement(ControlBarButton, { ariaDescription: (_b = (_a = buttonProps.strings) === null || _a === void 0 ? void 0 : _a.ariaDescription) !== null && _b !== void 0 ? _b : internalProps.ariaDescription, ariaLabel: (_f = (_d = (_c = buttonProps.strings) === null || _c === void 0 ? void 0 : _c.ariaLabel) !== null && _d !== void 0 ? _d : (_e = buttonProps.strings) === null || _e === void 0 ? void 0 : _e.tooltipContent) !== null && _f !== void 0 ? _f : internalProps.ariaLabel, disabled: (_g = buttonProps.disabled) !== null && _g !== void 0 ? _g : internalProps.disabled, id: (_h = buttonProps.id) !== null && _h !== void 0 ? _h : internalProps.id, key: `${buttonProps.placement}_${i}`, onClick: (_j = buttonProps.onItemClick) !== null && _j !== void 0 ? _j : internalProps.onClick, onRenderIcon: () => {
+                var _a, _b, _c;
+                return (React.createElement(Icon, { iconName: (_c = (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : (_b = internalProps.iconProps) === null || _b === void 0 ? void 0 : _b.iconName) !== null && _c !== void 0 ? _c : 'DefaultCustomButton' }));
+            }, showLabel: (_k = buttonProps.showLabel) !== null && _k !== void 0 ? _k : internalProps.showLabel, styles: mergeStyleSets(internalProps.styles), strings: buttonProps.strings }));
+    })
+    : [];
 /** @private */
-const generateCustomDrawerButtons = (placement, customButtons) => customButtons ? customButtons.filter(buttonProps => buttonProps.placement === placement).map((buttonProps, i) => {
-    var _a, _b;
-    return (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: {
-            iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'DefaultCustomButton',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
-        }, id: buttonProps.id, itemKey: `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: (_b = buttonProps.strings) === null || _b === void 0 ? void 0 : _b.label }));
-}) : [];
+const generateCustomDrawerButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'DefaultCustomButton', styles: { root: { lineHeight: 0 } } }, id: buttonProps.id, itemKey: `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: (_b = buttonProps.strings) === null || _b === void 0 ? void 0 : _b.label }));
+    })
+    : [];
 /** @private */
 export const generateCustomCallDrawerButtons = (onFetchCustomButtonProps, displayType) => {
-    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map(callback => callback({
-        displayType
-    }));
+    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
     return {
         primary: generateCustomDrawerButtons('primary', customButtons),
         secondary: generateCustomDrawerButtons('secondary', customButtons),
@@ -59,9 +63,7 @@ export const generateCustomCallDrawerButtons = (onFetchCustomButtonProps, displa
 };
 /** @private */
 export const generateCustomCallDesktopOverflowButtons = (onFetchCustomButtonProps, displayType) => {
-    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map(callback => callback({
-        displayType
-    }));
+    const customButtons = onFetchCustomButtonProps === null || onFetchCustomButtonProps === void 0 ? void 0 : onFetchCustomButtonProps.map((callback) => callback({ displayType }));
     return {
         primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),
         secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),
@@ -69,12 +71,16 @@ export const generateCustomCallDesktopOverflowButtons = (onFetchCustomButtonProp
     };
 };
 /** @private */
-export const drawerMenuItemToContextualMenuItem = (item) => (Object.assign(Object.assign({}, item), { key: item.itemKey, onClick: item.onItemClick ? ev => {
-        var _a;
-        (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev);
-    } : undefined, subMenuProps: item.subMenuProps ? {
-        items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)
-    } : undefined }));
+export const drawerMenuItemToContextualMenuItem = (item) => (Object.assign(Object.assign({}, item), { key: item.itemKey, onClick: item.onItemClick
+        ? (ev) => {
+            var _a;
+            (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, ev);
+        }
+        : undefined, subMenuProps: item.subMenuProps
+        ? {
+            items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)
+        }
+        : undefined }));
 /** @private */
 export const onFetchCustomButtonPropsTrampoline = (options) => {
     let response = undefined;

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CustomButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/CustomButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon, IContextualMenuItem, mergeStyleSets } from '@fluentui/react';\nimport { ControlBarButton, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n\n/**\n * Max number of Custom Buttons in primary and secondary ControlBar\n * Does not include existing buttons in the controlBar.\n *\n * @private\n */\nexport const CUSTOM_BUTTON_OPTIONS = {\n  MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: 3,\n  MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: 1,\n  MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: 2\n};\n\n/**\n * Custom Buttons array as ControlBarButtons.\n * Return type for {@link generateCustomCallControlBarButton}\n *\n * @public\n */\nexport type CustomButtons = { [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined };\n\n/**\n * Arguments for {@link CustomCallControlButtonCallback}.\n *\n * @public\n */\nexport interface CustomCallControlButtonCallbackArgs {\n  /**\n   * Buttons should reduce the size to fit a smaller viewport when `displayType` is `'compact'`.\n   *\n   * @defaultValue `'default'`\n   */\n  displayType?: CallControlDisplayType;\n}\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n * Includes the base props necessary to render a {@link ControlBarButton} or {@link DrawerMenuItem}.\n *\n * @public\n */\nexport interface CustomCallControlButtonProps {\n  /**\n   * Where to place the custom button relative to other buttons.\n   */\n  placement: CustomCallControlButtonPlacement;\n  /**\n   * Icon to render. Icon is a non-default icon name that needs to be registered as a\n   * custom icon using registerIcons through fluentui. Examples include icons from the fluentui library\n   */\n  iconName?: string;\n  /**\n   * Calback for when button is clicked\n   */\n  onItemClick?: () => void;\n  /**\n   * Whether the buttons is disabled\n   *\n   * @defaultValue true\n   */\n  disabled?: boolean;\n  /**\n   * Whether the label is displayed or not.\n   * If no value is set, showLabel will follow composite rules\n   */\n  showLabel?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: CustomCallControlButtonStrings;\n}\n\n/**\n * Strings for CustomCallControlButtons\n *\n * @public\n */\nexport interface CustomCallControlButtonStrings {\n  /**\n   * Optional label for the button\n   */\n  label?: string;\n  /**\n   * Text that is shown in Tooltip content\n   */\n  tooltipContent?: string;\n  /**\n   * The aria label of the button for the benefit of screen readers.\n   */\n  ariaLabel?: string;\n  /**\n   * Detailed description of the button for the benefit of screen readers.\n   */\n  ariaDescription?: string;\n}\n\n/** @private */\nexport const generateCustomCallControlBarButton = (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType): CustomButtons => {\n  const allButtonProps = onFetchCustomButtonProps?.map(callback => callback({\n    displayType\n  }));\n  return {\n    primary: generateCustomControlBarButtons('primary', allButtonProps),\n    secondary: generateCustomControlBarButtons('secondary', allButtonProps),\n    overflow: generateCustomControlBarButtons('overflow', allButtonProps)\n  };\n};\n\n/** @private */\nconst generateCustomControlBarButtons = (placement: CustomCallControlButtonPlacement, customButtons?: CustomCallControlButtonProps[]): typeof ControlBarButton[] => customButtons ? customButtons.filter(buttonProps => buttonProps.placement === placement).map((buttonProps, i) => internalProps => {\n  if (buttonProps['onRenderButton']) {\n    return buttonProps['onRenderButton'](internalProps);\n  }\n  return <ControlBarButton ariaDescription={buttonProps.strings?.ariaDescription ?? internalProps.ariaDescription} ariaLabel={buttonProps.strings?.ariaLabel ?? buttonProps.strings?.tooltipContent ?? internalProps.ariaLabel} disabled={buttonProps.disabled ?? internalProps.disabled} id={buttonProps.id ?? internalProps.id} key={`${buttonProps.placement}_${i}`} onClick={buttonProps.onItemClick ?? internalProps.onClick} onRenderIcon={() => <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'DefaultCustomButton'} />} showLabel={buttonProps.showLabel ?? internalProps.showLabel} styles={mergeStyleSets(internalProps.styles)} strings={buttonProps.strings} />;\n}) : [];\n\n/** @private */\nconst generateCustomDrawerButtons = (placement: CustomCallControlButtonPlacement, customButtons?: CustomCallControlButtonProps[]): _DrawerMenuItemProps[] => customButtons ? customButtons.filter(buttonProps => buttonProps.placement === placement).map((buttonProps, i): _DrawerMenuItemProps => ({\n  ...buttonProps,\n  disabled: buttonProps.disabled,\n  iconProps: {\n    iconName: buttonProps.iconName ?? 'DefaultCustomButton',\n    styles: {\n      root: {\n        lineHeight: 0\n      }\n    }\n  },\n  id: buttonProps.id,\n  itemKey: `${buttonProps.placement}_${i}`,\n  onItemClick: buttonProps.onItemClick,\n  text: buttonProps.strings?.label\n})) : [];\n\n/** @private */\nexport type CustomDrawerButtons = { [key in CustomCallControlButtonPlacement]: _DrawerMenuItemProps[] };\n\n/** @private */\nexport const generateCustomCallDrawerButtons = (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType): CustomDrawerButtons => {\n  const customButtons = onFetchCustomButtonProps?.map(callback => callback({\n    displayType\n  }));\n  return {\n    primary: generateCustomDrawerButtons('primary', customButtons),\n    secondary: generateCustomDrawerButtons('secondary', customButtons),\n    overflow: generateCustomDrawerButtons('overflow', customButtons)\n  };\n};\n\n/** @private */\nexport type CustomDesktopOverflowButtons = { [key in CustomCallControlButtonPlacement]: IContextualMenuItem[] };\n\n/** @private */\nexport const generateCustomCallDesktopOverflowButtons = (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType): CustomDesktopOverflowButtons => {\n  const customButtons = onFetchCustomButtonProps?.map(callback => callback({\n    displayType\n  }));\n  return {\n    primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),\n    secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),\n    overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)\n  };\n};\n\n/** @private */\nexport const drawerMenuItemToContextualMenuItem = (item: _DrawerMenuItemProps): IContextualMenuItem => ({\n  ...item,\n  key: item.itemKey,\n  onClick: item.onItemClick ? ev => {\n    item.onItemClick?.(ev);\n  } : undefined,\n  subMenuProps: item.subMenuProps ? {\n    items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)\n  } : undefined\n});\n\n/**\n * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.\n *\n * The response indicates where the custom button should be placed.\n *\n * Performance tip: This callback is only called when either the callback or its arguments change.\n * @public\n */\nexport type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallControlButtonProps;\n\n/**\n * Placement for a custom button injected in the {@link CommonCallControlBar}.\n *\n * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).\n * 'overflow': Place the buttons(s) on the end of the overflow Menu.\n * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).\n *\n * Multiple buttons assigned the same placement are appended in order.\n * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)\n * in the order provided.\n *\n * Only 'primary' placement works when legacy call control is enabled in call composite\n *\n * @public\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (options?: CommonCallControlOptions): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = options?.onFetchCustomButtonProps;\n  return response;\n};"]}
+{"version":3,"file":"CustomButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CustomButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon, IContextualMenuItem, mergeStyleSets } from '@fluentui/react';\nimport { ControlBarButton, ControlBarButtonProps, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n\n/**\n * Max number of Custom Buttons in primary and secondary ControlBar\n * Does not include existing buttons in the controlBar.\n *\n * @private\n */\nexport const CUSTOM_BUTTON_OPTIONS = {\n  MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: 3,\n  MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: 1,\n  MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: 2\n};\n\n/**\n * Custom Buttons array as ControlBarButtons.\n * Return type for {@link generateCustomCallControlBarButton}\n *\n * @public\n */\nexport type CustomButtons = {\n  [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined;\n};\n\n/**\n * Arguments for {@link CustomCallControlButtonCallback}.\n *\n * @public\n */\nexport interface CustomCallControlButtonCallbackArgs {\n  /**\n   * Buttons should reduce the size to fit a smaller viewport when `displayType` is `'compact'`.\n   *\n   * @defaultValue `'default'`\n   */\n  displayType?: CallControlDisplayType;\n}\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n * Includes the base props necessary to render a {@link ControlBarButton} or {@link DrawerMenuItem}.\n *\n * @public\n */\nexport interface CustomCallControlButtonProps {\n  /**\n   * Where to place the custom button relative to other buttons.\n   */\n  placement: CustomCallControlButtonPlacement;\n  /**\n   * Icon to render. Icon is a non-default icon name that needs to be registered as a\n   * custom icon using registerIcons through fluentui. Examples include icons from the fluentui library\n   */\n  iconName?: string;\n  /**\n   * Calback for when button is clicked\n   */\n  onItemClick?: () => void;\n  /**\n   * Whether the buttons is disabled\n   *\n   * @defaultValue true\n   */\n  disabled?: boolean;\n  /**\n   * Whether the label is displayed or not.\n   * If no value is set, showLabel will follow composite rules\n   */\n  showLabel?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: CustomCallControlButtonStrings;\n}\n\n/**\n * Strings for CustomCallControlButtons\n *\n * @public\n */\nexport interface CustomCallControlButtonStrings {\n  /**\n   * Optional label for the button\n   */\n  label?: string;\n  /**\n   * Text that is shown in Tooltip content\n   */\n  tooltipContent?: string;\n  /**\n   * The aria label of the button for the benefit of screen readers.\n   */\n  ariaLabel?: string;\n  /**\n   * Detailed description of the button for the benefit of screen readers.\n   */\n  ariaDescription?: string;\n}\n\n/**\n * onRenderButton is a custom prop that can be passed to override the default rendering of the button\n * This is useful for custom buttons that need to render more than just an icon and label and is used\n * for CallWithChat button notification badge.\n *\n * @private\n */\nexport type _InternalCustomButtonType = (props: ControlBarButtonProps) => JSX.Element;\n\n/** @private */\nexport const generateCustomCallControlBarButton = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomButtons => {\n  const allButtonProps = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n\n  return {\n    primary: generateCustomControlBarButtons('primary', allButtonProps),\n    secondary: generateCustomControlBarButtons('secondary', allButtonProps),\n    overflow: generateCustomControlBarButtons('overflow', allButtonProps)\n  };\n};\n\n/** @private */\nconst generateCustomControlBarButtons = (\n  placement: CustomCallControlButtonPlacement,\n  customButtons?: CustomCallControlButtonProps[]\n): typeof ControlBarButton[] =>\n  customButtons\n    ? customButtons\n        .filter((buttonProps) => buttonProps.placement === placement)\n        .map((buttonProps, i) => (internalProps) => {\n          // onRenderButton is a custom prop that can be passed to override the default rendering of the button\n          // This is useful for custom buttons that need to render more than just an icon and label and is used\n          // for CallWithChat button notification badge. However, onRenderButton is not a public prop and is\n          // not documented in the API. This is a temporary solution and will need to be revisited.\n          if ('onRenderButton' in buttonProps) {\n            return (buttonProps['onRenderButton'] as _InternalCustomButtonType)(internalProps);\n          }\n          return (\n            <ControlBarButton\n              ariaDescription={buttonProps.strings?.ariaDescription ?? internalProps.ariaDescription}\n              ariaLabel={\n                buttonProps.strings?.ariaLabel ?? buttonProps.strings?.tooltipContent ?? internalProps.ariaLabel\n              }\n              disabled={buttonProps.disabled ?? internalProps.disabled}\n              id={buttonProps.id ?? internalProps.id}\n              key={`${buttonProps.placement}_${i}`}\n              onClick={buttonProps.onItemClick ?? internalProps.onClick}\n              onRenderIcon={() => (\n                <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'DefaultCustomButton'} />\n              )}\n              showLabel={buttonProps.showLabel ?? internalProps.showLabel}\n              styles={mergeStyleSets(internalProps.styles)}\n              strings={buttonProps.strings}\n            />\n          );\n        })\n    : [];\n\n/** @private */\nconst generateCustomDrawerButtons = (\n  placement: CustomCallControlButtonPlacement,\n  customButtons?: CustomCallControlButtonProps[]\n): _DrawerMenuItemProps[] =>\n  customButtons\n    ? customButtons\n        .filter((buttonProps) => buttonProps.placement === placement)\n        .map(\n          (buttonProps, i): _DrawerMenuItemProps => ({\n            ...buttonProps,\n            disabled: buttonProps.disabled,\n            iconProps: { iconName: buttonProps.iconName ?? 'DefaultCustomButton', styles: { root: { lineHeight: 0 } } },\n            id: buttonProps.id,\n            itemKey: `${buttonProps.placement}_${i}`,\n            onItemClick: buttonProps.onItemClick,\n            text: buttonProps.strings?.label\n          })\n        )\n    : [];\n\n/** @private */\nexport type CustomDrawerButtons = {\n  [key in CustomCallControlButtonPlacement]: _DrawerMenuItemProps[];\n};\n\n/** @private */\nexport const generateCustomCallDrawerButtons = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomDrawerButtons => {\n  const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n  return {\n    primary: generateCustomDrawerButtons('primary', customButtons),\n    secondary: generateCustomDrawerButtons('secondary', customButtons),\n    overflow: generateCustomDrawerButtons('overflow', customButtons)\n  };\n};\n\n/** @private */\nexport type CustomDesktopOverflowButtons = {\n  [key in CustomCallControlButtonPlacement]: IContextualMenuItem[];\n};\n\n/** @private */\nexport const generateCustomCallDesktopOverflowButtons = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomDesktopOverflowButtons => {\n  const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n  return {\n    primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),\n    secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),\n    overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)\n  };\n};\n\n/** @private */\nexport const drawerMenuItemToContextualMenuItem = (item: _DrawerMenuItemProps): IContextualMenuItem => ({\n  ...item,\n  key: item.itemKey,\n  onClick: item.onItemClick\n    ? (ev) => {\n        item.onItemClick?.(ev);\n      }\n    : undefined,\n  subMenuProps: item.subMenuProps\n    ? {\n        items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)\n      }\n    : undefined\n});\n\n/**\n * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.\n *\n * The response indicates where the custom button should be placed.\n *\n * Performance tip: This callback is only called when either the callback or its arguments change.\n * @public\n */\nexport type CustomCallControlButtonCallback = (\n  args: CustomCallControlButtonCallbackArgs\n) => CustomCallControlButtonProps;\n\n/**\n * Placement for a custom button injected in the {@link CommonCallControlBar}.\n *\n * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).\n * 'overflow': Place the buttons(s) on the end of the overflow Menu.\n * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).\n *\n * Multiple buttons assigned the same placement are appended in order.\n * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)\n * in the order provided.\n *\n * Only 'primary' placement works when legacy call control is enabled in call composite\n *\n * @public\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n  options?: CommonCallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = options?.onFetchCustomButtonProps;\n  return response;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/DesktopMoreButton.js

@@ -14,7 +14,6 @@ import { _StartCaptionsButton } from "../../../../../react-components/src";
 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { HoldButton } from "../../../../../react-components/src";
 import React from 'react';
-/* @conditional-compile-remove(gallery-layouts) */
 import { useState } from 'react';
 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
 import { useMemo, useCallback } from 'react';
@@ -25,7 +24,6 @@ import { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Butt
 import { MoreButton } from '../MoreButton';
 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
 import { useLocale } from '../../localization';
-/* @conditional-compile-remove(control-bar-button-injection) */
 import { CUSTOM_BUTTON_OPTIONS, generateCustomCallDesktopOverflowButtons, onFetchCustomButtonPropsTrampoline } from './CustomButton';
 /* @conditional-compile-remove(close-captions) */
 import { useHandlers } from '../../CallComposite/hooks/useHandlers';
@@ -34,18 +32,15 @@ import { _startCaptionsButtonSelector } from "../../../../../calling-component-b
 /* @conditional-compile-remove(close-captions) */
 import { useAdaptedSelector } from '../../CallComposite/hooks/useAdaptedSelector';
 import { _preventDismissOnEvent } from "../../../../../acs-ui-common/src";
-/* @conditional-compile-remove(dtmf-dialer) */
 import { showDtmfDialer } from '../../CallComposite/utils/MediaGalleryUtils';
-/* @conditional-compile-remove(dtmf-dialer) */
 import { useSelector } from '../../CallComposite/hooks/useSelector';
-/* @conditional-compile-remove(dtmf-dialer) */
 import { getTargetCallees } from '../../CallComposite/selectors/baseSelectors';
 /**
  *
  * @private
  */
 export const DesktopMoreButton = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const localeStrings = useLocale();
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -60,15 +55,12 @@ export const DesktopMoreButton = (props) => {
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
-    /* @conditional-compile-remove(gallery-layouts) */
+    /* @conditional-compile-remove(overflow-top-composite) */
+    const [galleryPositionTop, setGalleryPositionTop] = useState(false);
     const [focusedContentOn, setFocusedContentOn] = useState(false);
-    /* @conditional-compile-remove(gallery-layouts) */
     const [previousLayout, setPreviousLayout] = useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
-    /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector(getTargetCallees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const allowDtmfDialer = showDtmfDialer(callees);
-    /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerChecked, setDtmfDialerChecked] = useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = useMemo(() => ({
@@ -76,7 +68,7 @@ export const DesktopMoreButton = (props) => {
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
     const moreButtonContextualMenuItems = [];
-    /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(gallery-layouts) */
+    /* @conditional-compile-remove(close-captions) */
     const menuSubIconStyleSet = {
         root: {
             height: 'unset',
@@ -91,14 +83,7 @@ export const DesktopMoreButton = (props) => {
         onClick: () => {
             holdButtonProps.onToggleHold();
         },
-        iconProps: {
-            iconName: 'HoldCallContextualMenuItem',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
-        },
+        iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
         },
@@ -112,14 +97,7 @@ export const DesktopMoreButton = (props) => {
             key: 'liveCaptionsKey',
             id: 'common-call-composite-captions-button',
             text: localeStrings.strings.call.liveCaptionsLabel,
-            iconProps: {
-                iconName: 'CaptionsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
-            },
+            iconProps: { iconName: 'CaptionsIcon', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -139,17 +117,19 @@ export const DesktopMoreButton = (props) => {
         captionsContextualMenuItems.push({
             key: 'ToggleCaptionsKey',
             id: 'common-call-composite-captions-toggle-button',
-            text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+            text: startCaptionsButtonProps.checked
+                ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+                : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
             onClick: () => {
-                startCaptionsButtonProps.checked ? startCaptionsButtonHandlers.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+                startCaptionsButtonProps.checked
+                    ? startCaptionsButtonHandlers.onStopCaptions()
+                    : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                        ? startCaptions()
+                        : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
             },
             iconProps: {
                 iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -164,11 +144,7 @@ export const DesktopMoreButton = (props) => {
                 onClick: props.onCaptionsSettingsClick,
                 iconProps: {
                     iconName: 'CaptionsSettingsIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
@@ -177,44 +153,35 @@ export const DesktopMoreButton = (props) => {
             });
         }
     }
-    /* @conditional-compile-remove(dtmf-dialer) */
     const dtmfDialerScreenOption = {
         key: 'dtmfDialerScreenKey',
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
         },
-        text: !dtmfDialerChecked ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
+        text: !dtmfDialerChecked
+            ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
+            : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
         onClick: () => {
             props.onSetDialpadPage && props.onSetDialpadPage();
             setDtmfDialerChecked(!dtmfDialerChecked);
         },
         iconProps: {
             iconName: 'DtmfDialpadButton',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         }
     };
-    /* @conditional-compile-remove(dtmf-dialer) */
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
     if (props.onSetDialpadPage && allowDtmfDialer) {
         moreButtonContextualMenuItems.push(dtmfDialerScreenOption);
     }
-    /* @conditional-compile-remove(gallery-layouts) */
     if (props.onUserSetOverflowGalleryPositionChange) {
         const galleryOptions = {
             key: 'overflowGalleryPositionKey',
             iconProps: {
                 iconName: 'GalleryOptions',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -225,7 +192,8 @@ export const DesktopMoreButton = (props) => {
             text: localeStrings.strings.call.moreButtonGalleryControlLabel,
             disabled: props.disableButtonsForHoldScreen,
             subMenuProps: {
-                items: [{
+                items: [
+                    {
                         key: 'dynamicSelectionKey',
                         text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
                         canCheck: true,
@@ -239,13 +207,10 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'FloatingLocalVideoGalleryLayout',
-                            styles: {
-                                root: {
-                                    lineHeight: 0
-                                }
-                            }
+                            styles: { root: { lineHeight: 0 } }
                         }
-                    }, {
+                    },
+                    {
                         key: 'speakerSelectionKey',
                         text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,
                         canCheck: true,
@@ -259,13 +224,10 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'SpeakerGalleryLayout',
-                            styles: {
-                                root: {
-                                    lineHeight: 0
-                                }
-                            }
+                            styles: { root: { lineHeight: 0 } }
                         }
-                    }, {
+                    },
+                    {
                         key: 'focusedContentSelectionKey',
                         text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
                         canCheck: true,
@@ -287,49 +249,109 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'FocusedContentGalleryLayout',
-                            styles: {
-                                root: {
-                                    lineHeight: 0
-                                }
-                            }
+                            styles: { root: { lineHeight: 0 } }
                         }
-                    }],
+                    }
+                ],
                 calloutProps: {
                     preventDismissOnEvent: _preventDismissOnEvent
                 }
             }
         };
-        /* @conditional-compile-remove(gallery-layouts) */
+        /* @conditional-compile-remove(gallery-layout-composite) */
+        const galleryOption = {
+            key: 'defaultSelectionKey',
+            text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
+            canCheck: true,
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            isChecked: props.userSetGalleryLayout === 'default',
+            onClick: () => {
+                props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
+                setFocusedContentOn(false);
+            },
+            iconProps: {
+                iconName: 'DefaultGalleryLayout',
+                styles: { root: { lineHeight: 0 } }
+            }
+        };
+        /* @conditional-compile-remove(large-gallery) */
+        const largeGalleryOption = {
+            key: 'largeGallerySelectionKey',
+            text: localeStrings.strings.call.moreButtonLargeGalleryDefaultLayoutLabel,
+            canCheck: true,
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            isChecked: props.userSetGalleryLayout === 'largeGallery',
+            onClick: () => {
+                props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('largeGallery');
+                setFocusedContentOn(false);
+            },
+            iconProps: {
+                iconName: 'LargeGalleryLayout',
+                styles: { root: { lineHeight: 0 } }
+            }
+        };
+        /* @conditional-compile-remove(overflow-top-composite) */
+        const overflowGalleryOption = {
+            key: 'topKey',
+            text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
+            canCheck: true,
+            topDivider: true,
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            iconProps: {
+                iconName: 'OverflowGalleryTop',
+                styles: { root: { lineHeight: 0 } }
+            },
+            isChecked: galleryPositionTop,
+            onClick: () => {
+                if (galleryPositionTop === false) {
+                    props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('horizontalTop');
+                    setGalleryPositionTop(true);
+                }
+                else {
+                    props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('Responsive');
+                    setGalleryPositionTop(false);
+                }
+            }
+        };
+        /* @conditional-compile-remove(large-gallery) */
+        (_d = (_c = galleryOptions.subMenuProps) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.push(largeGalleryOption);
+        /* @conditional-compile-remove(gallery-layout-composite) */
+        (_f = (_e = galleryOptions.subMenuProps) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f.push(galleryOption);
+        /* @conditional-compile-remove(overflow-top-composite) */
+        (_h = (_g = galleryOptions.subMenuProps) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.push(overflowGalleryOption);
         moreButtonContextualMenuItems.push(galleryOptions);
     }
-    /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
-    /* @conditional-compile-remove(control-bar-button-injection) */
-    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {
+    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
-    customDrawerButtons['secondary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {
+    customDrawerButtons['secondary']
+        .slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)
+        .forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
-    customDrawerButtons['overflow'].forEach(element => {
+    customDrawerButtons['overflow'].forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", 
-        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ strings: moreButtonStrings, menuIconProps: {
-            hidden: true
-        }, menuProps: {
+    return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", 
+        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
             }
-        } }));
+        } })));
 };
 //# sourceMappingURL=DesktopMoreButton.js.map