@azure/communication-react 1.27.0-alpha-202505020018 → 1.27.0-beta.1

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

@@ -17,7 +17,9 @@ 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),
@@ -25,36 +27,34 @@ 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;
-        // 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 }));
-    })
-    : [];
+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),
@@ -63,7 +63,9 @@ 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),
@@ -71,16 +73,12 @@ 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":["../../../../../../../../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"]}
+{"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, 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 = { [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/**\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 = (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  // 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 <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};"]}

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

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-/* @conditional-compile-remove(rtt) */
 import { CaptionsBanner } from "../../../../../react-components/src";
 import { HoldButton } from "../../../../../react-components/src";
 import { StartCaptionsButton } from "../../../../../react-components/src";
@@ -25,7 +24,6 @@ import { _preventDismissOnEvent } from "../../../../../acs-ui-common/src";
 import { showDtmfDialer } from '../../CallComposite/utils/MediaGalleryUtils';
 import { useSelector } from '../../CallComposite/hooks/useSelector';
 import { getTargetCallees } from '../../CallComposite/selectors/baseSelectors';
-/* @conditional-compile-remove(together-mode) */
 import { getIsTogetherModeActive, getCapabilites, getLocalUserId, getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';
 import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../../CallComposite/selectors/baseSelectors';
 /**
@@ -33,32 +31,25 @@ import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../../CallComposi
  * @private
  */
 export const DesktopMoreButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const localeStrings = useLocale();
     const holdButtonProps = usePropsFor(HoldButton);
     const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);
-    /* @conditional-compile-remove(rtt) */
     const realTimeTextProps = usePropsFor(CaptionsBanner);
     const startCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonProps.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
     }), [startCaptionsButtonProps]);
-    /* @conditional-compile-remove(overflow-top-composite) */
-    const [galleryPositionTop, setGalleryPositionTop] = useState(false);
     const [focusedContentOn, setFocusedContentOn] = useState(false);
     const [previousLayout, setPreviousLayout] = useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
     const callees = useSelector(getTargetCallees);
     const allowDtmfDialer = showDtmfDialer(callees);
     const isTeamsMeeting = useSelector(getIsTeamsMeeting);
     const teamsMeetingCoordinates = useSelector(getTeamsMeetingCoordinates);
-    /* @conditional-compile-remove(together-mode) */
     const isTogetherModeActive = useSelector(getIsTogetherModeActive);
-    /* @conditional-compile-remove(together-mode) */
     const participantCapability = useSelector(getCapabilites);
-    /* @conditional-compile-remove(together-mode) */
     const participantId = useSelector(getLocalUserId);
-    /* @conditional-compile-remove(together-mode) */
     const isTeamsCall = useSelector(getIsTeamsCall);
     const [dtmfDialerChecked, setDtmfDialerChecked] = useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
     const moreButtonStrings = useMemo(() => ({
@@ -80,7 +71,14 @@ export const DesktopMoreButton = (props) => {
             onClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+            iconProps: {
+                iconName: 'HoldCallContextualMenuItem',
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
+            },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -94,7 +92,14 @@ 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
             },
@@ -114,19 +119,17 @@ 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
-                    ? startCaptionsButtonProps.onStopCaptions()
-                    : startCaptionsButtonProps.currentSpokenLanguage !== ''
-                        ? startCaptions()
-                        : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+                startCaptionsButtonProps.checked ? startCaptionsButtonProps.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
@@ -141,7 +144,11 @@ export const DesktopMoreButton = (props) => {
                 onClick: props.onCaptionsSettingsClick,
                 iconProps: {
                     iconName: 'CaptionsSettingsIcon',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
@@ -151,7 +158,6 @@ export const DesktopMoreButton = (props) => {
         }
     }
     //RTT
-    /* @conditional-compile-remove(rtt) */
     if (props.isRealTimeTextSupported) {
         const realTimeTextContextualMenuItems = [];
         const rttDisabled = props.disableButtonsForHoldScreen || realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked;
@@ -159,7 +165,14 @@ export const DesktopMoreButton = (props) => {
             key: 'realTimeTextKey',
             id: 'common-call-composite-rtt-button',
             text: localeStrings.strings.call.realTimeTextLabel,
-            iconProps: { iconName: 'RealTimeTextIcon', styles: { root: { lineHeight: 0 } } },
+            iconProps: {
+                iconName: 'RealTimeTextIcon',
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
+            },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -180,13 +193,15 @@ export const DesktopMoreButton = (props) => {
             key: 'StartRealTimeTextKey',
             id: 'common-call-composite-rtt-start-button',
             text: localeStrings.strings.call.startRealTimeTextLabel,
-            ariaLabel: rttDisabled
-                ? localeStrings.strings.call.disabledStartRealTimeTextLabel
-                : localeStrings.strings.call.startRealTimeTextLabel,
+            ariaLabel: rttDisabled ? localeStrings.strings.call.disabledStartRealTimeTextLabel : localeStrings.strings.call.startRealTimeTextLabel,
             onClick: props.onStartRealTimeTextClick,
             iconProps: {
                 iconName: 'RealTimeTextIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -199,16 +214,18 @@ export const DesktopMoreButton = (props) => {
         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
+                }
+            }
         }
     };
     /**
@@ -230,7 +247,11 @@ export const DesktopMoreButton = (props) => {
         },
         iconProps: {
             iconName: 'PhoneNumberButton',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         }
     };
     /**
@@ -244,7 +265,11 @@ export const DesktopMoreButton = (props) => {
             key: 'overflowGalleryPositionKey',
             iconProps: {
                 iconName: 'GalleryOptions',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -255,8 +280,7 @@ export const DesktopMoreButton = (props) => {
             text: localeStrings.strings.call.moreButtonGalleryControlLabel,
             disabled: props.disableButtonsForHoldScreen,
             subMenuProps: {
-                items: [
-                    {
+                items: [{
                         key: 'dynamicSelectionKey',
                         text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
                         canCheck: true,
@@ -270,10 +294,13 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'FloatingLocalVideoGalleryLayout',
-                            styles: { root: { lineHeight: 0 } }
+                            styles: {
+                                root: {
+                                    lineHeight: 0
+                                }
+                            }
                         }
-                    },
-                    {
+                    }, {
                         key: 'speakerSelectionKey',
                         text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,
                         canCheck: true,
@@ -287,10 +314,13 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'SpeakerGalleryLayout',
-                            styles: { root: { lineHeight: 0 } }
+                            styles: {
+                                root: {
+                                    lineHeight: 0
+                                }
+                            }
                         }
-                    },
-                    {
+                    }, {
                         key: 'focusedContentSelectionKey',
                         text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
                         canCheck: true,
@@ -312,52 +342,18 @@ export const DesktopMoreButton = (props) => {
                         },
                         iconProps: {
                             iconName: 'FocusedContentGalleryLayout',
-                            styles: { root: { lineHeight: 0 } }
+                            styles: {
+                                root: {
+                                    lineHeight: 0
+                                }
+                            }
                         }
-                    }
-                ],
+                    }],
                 calloutProps: {
                     preventDismissOnEvent: _preventDismissOnEvent
                 }
             }
         };
-        /* @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(together-mode) */
         const togetherModeOption = {
             key: 'togetherModeSelectionKey',
             text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
@@ -370,76 +366,47 @@ export const DesktopMoreButton = (props) => {
                 props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
                 setFocusedContentOn(false);
             },
-            disabled: !(((participantId === null || participantId === void 0 ? void 0 : participantId.kind) === 'microsoftTeamsUser' && ((_e = participantCapability === null || participantCapability === void 0 ? void 0 : participantCapability.startTogetherMode) === null || _e === void 0 ? void 0 : _e.isPresent)) ||
-                isTogetherModeActive),
+            disabled: !((participantId === null || participantId === void 0 ? void 0 : participantId.kind) === 'microsoftTeamsUser' && ((_e = participantCapability === null || participantCapability === void 0 ? void 0 : participantCapability.startTogetherMode) === null || _e === void 0 ? void 0 : _e.isPresent) || isTogetherModeActive),
             iconProps: {
                 iconName: 'TogetherModeLayout',
-                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);
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
                 }
             }
         };
-        /* @conditional-compile-remove(large-gallery) */
-        (_g = (_f = galleryOptions.subMenuProps) === null || _f === void 0 ? void 0 : _f.items) === null || _g === void 0 ? void 0 : _g.push(largeGalleryOption);
-        /* @conditional-compile-remove(gallery-layout-composite) */
-        (_j = (_h = galleryOptions.subMenuProps) === null || _h === void 0 ? void 0 : _h.items) === null || _j === void 0 ? void 0 : _j.push(galleryOption);
-        /* @conditional-compile-remove(overflow-top-composite) */
-        (_l = (_k = galleryOptions.subMenuProps) === null || _k === void 0 ? void 0 : _k.items) === null || _l === void 0 ? void 0 : _l.push(overflowGalleryOption);
-        /* @conditional-compile-remove(together-mode) */
         if (isTeamsCall || isTeamsMeeting) {
-            (_o = (_m = galleryOptions.subMenuProps) === null || _m === void 0 ? void 0 : _m.items) === null || _o === void 0 ? void 0 : _o.push(togetherModeOption);
+            (_g = (_f = galleryOptions.subMenuProps) === null || _f === void 0 ? void 0 : _f.items) === null || _g === void 0 ? void 0 : _g.push(togetherModeOption);
         }
-        if (props.callControls === true || ((_p = props.callControls) === null || _p === void 0 ? void 0 : _p.galleryControlsButton) !== false) {
+        if (props.callControls === true || ((_h = props.callControls) === null || _h === void 0 ? void 0 : _h.galleryControlsButton) !== false) {
             moreButtonContextualMenuItems.push(galleryOptions);
         }
     }
     const customDrawerButtons = useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
-    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));
     });
-    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));
     });
-    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", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
+    return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: {
+            hidden: true
+        }, menuProps: {
             shouldFocusOnContainer: false,
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
             }
-        } })));
+        } }));
 };
 //# sourceMappingURL=DesktopMoreButton.js.map