@azure/communication-react 1.12.0 → 1.12.1-alpha-202401190013

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,32 @@ 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;
+        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 }));
+    })
+    : [];
 /** @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 +59,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 +67,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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,IAAI,EAAuB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAwB,4CAAmC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,kCAAkC,EAAE,CAAC;IACrC,iCAAiC,EAAE,CAAC;IACpC,oCAAoC,EAAE,CAAC;CACxC,CAAC;AA2FF,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,wBAA4D,EAC5D,WAAoC,EACrB,EAAE;IACjB,MAAM,cAAc,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IAE9F,OAAO;QACL,OAAO,EAAE,+BAA+B,CAAC,SAAS,EAAE,cAAc,CAAC;QACnE,SAAS,EAAE,+BAA+B,CAAC,WAAW,EAAE,cAAc,CAAC;QACvE,QAAQ,EAAE,+BAA+B,CAAC,UAAU,EAAE,cAAc,CAAC;KACtE,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,+BAA+B,GAAG,CACtC,SAA2C,EAC3C,aAA8C,EACnB,EAAE,CAC7B,aAAa;IACX,CAAC,CAAC,aAAa;SACV,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS,CAAC;SAC5D,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAAa,EAAE,EAAE;;QACzC,IAAI,WAAW,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAClC,OAAO,WAAW,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,CACL,oBAAC,gBAAgB,IACf,eAAe,EAAE,MAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,eAAe,mCAAI,aAAa,CAAC,eAAe,EACtF,SAAS,EACP,MAAA,MAAA,MAAA,WAAW,CAAC,OAAO,0CAAE,SAAS,mCAAI,MAAA,WAAW,CAAC,OAAO,0CAAE,cAAc,mCAAI,aAAa,CAAC,SAAS,EAElG,QAAQ,EAAE,MAAA,WAAW,CAAC,QAAQ,mCAAI,aAAa,CAAC,QAAQ,EACxD,EAAE,EAAE,MAAA,WAAW,CAAC,EAAE,mCAAI,aAAa,CAAC,EAAE,EACtC,GAAG,EAAE,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EACpC,OAAO,EAAE,MAAA,WAAW,CAAC,WAAW,mCAAI,aAAa,CAAC,OAAO,EACzD,YAAY,EAAE,GAAG,EAAE;;gBAAC,OAAA,CAClB,oBAAC,IAAI,IAAC,QAAQ,EAAE,MAAA,MAAA,WAAW,CAAC,QAAQ,mCAAI,MAAA,aAAa,CAAC,SAAS,0CAAE,QAAQ,mCAAI,qBAAqB,GAAI,CACvG,CAAA;aAAA,EACD,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,aAAa,CAAC,SAAS,EAC3D,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,WAAW,CAAC,OAAO,GAC5B,CACH,CAAC;IACJ,CAAC,CAAC;IACN,CAAC,CAAC,EAAE,CAAC;AAET,eAAe;AACf,MAAM,2BAA2B,GAAG,CAClC,SAA2C,EAC3C,aAA8C,EACtB,EAAE,CAC1B,aAAa;IACX,CAAC,CAAC,aAAa;SACV,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS,CAAC;SAC5D,GAAG,CACF,CAAC,WAAW,EAAE,CAAC,EAAwB,EAAE;;QAAC,OAAA,iCACrC,WAAW,KACd,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAA,WAAW,CAAC,QAAQ,mCAAI,qBAAqB,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,EAC3G,EAAE,EAAE,WAAW,CAAC,EAAE,EAClB,OAAO,EAAE,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EACxC,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,IAAI,EAAE,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,IAChC,CAAA;KAAA,CACH;IACL,CAAC,CAAC,EAAE,CAAC;AAOT,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAC7C,wBAA4D,EAC5D,WAAoC,EACf,EAAE;IACvB,MAAM,aAAa,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IAC7F,OAAO;QACL,OAAO,EAAE,2BAA2B,CAAC,SAAS,EAAE,aAAa,CAAC;QAC9D,SAAS,EAAE,2BAA2B,CAAC,WAAW,EAAE,aAAa,CAAC;QAClE,QAAQ,EAAE,2BAA2B,CAAC,UAAU,EAAE,aAAa,CAAC;KACjE,CAAC;AACJ,CAAC,CAAC;AAOF,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,CACtD,wBAA4D,EAC5D,WAAoC,EACN,EAAE;IAChC,MAAM,aAAa,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IAC7F,OAAO;QACL,OAAO,EAAE,2BAA2B,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,kCAAkC,CAAC;QACtG,SAAS,EAAE,2BAA2B,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,kCAAkC,CAAC;QAC1G,QAAQ,EAAE,2BAA2B,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,GAAG,CAAC,kCAAkC,CAAC;KACzG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAA0B,EAAuB,EAAE,CAAC,iCAClG,IAAI,KACP,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW;QACvB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE;;YACL,MAAA,IAAI,CAAC,WAAW,qDAAG,EAAE,CAAC,CAAC;QACzB,CAAC;QACH,CAAC,CAAC,SAAS,EACb,YAAY,EAAE,IAAI,CAAC,YAAY;QAC7B,CAAC,CAAC;YACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,kCAAkC,CAAC;SACjE;QACH,CAAC,CAAC,SAAS,IACb,CAAC;AA+BH,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,OAAkC,EACa,EAAE;IACjD,IAAI,QAAQ,GAAkD,SAAS,CAAC;IACxE,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","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 = {\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/** @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          if (buttonProps['onRenderButton']) {\n            return buttonProps['onRenderButton'](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

@@ -11,11 +11,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 /* @conditional-compile-remove(close-captions) */
 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';
+/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { usePropsFor } from '../../CallComposite/hooks/usePropsFor';
 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
 import { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';
 import { MoreButton } from '../MoreButton';
@@ -35,9 +39,11 @@ import { _preventDismissOnEvent } from "../../../../../acs-ui-common/src";
  * @private
  */
 export const DesktopMoreButton = (props) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     /*@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) */
+    const holdButtonProps = usePropsFor(HoldButton);
     /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
     /* @conditional-compile-remove(close-captions) */
@@ -48,6 +54,8 @@ export const DesktopMoreButton = (props) => {
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(overflow-top-composite) */
+    const [galleryPositionTop, setGalleryPositionTop] = useState(false);
     /* @conditional-compile-remove(gallery-layouts) */
     const [focusedContentOn, setFocusedContentOn] = useState(false);
     /* @conditional-compile-remove(gallery-layouts) */
@@ -66,6 +74,19 @@ export const DesktopMoreButton = (props) => {
             width: '1.25rem'
         }
     };
+    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    moreButtonContextualMenuItems.push({
+        key: 'holdButtonKey',
+        text: localeStrings.component.strings.holdButton.tooltipOffContent,
+        onClick: () => {
+            holdButtonProps.onToggleHold();
+        },
+        iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        },
+        disabled: props.disableButtonsForHoldScreen
+    });
     // is captions feature is active
     /* @conditional-compile-remove(close-captions) */
     if (props.isCaptionsSupported) {
@@ -74,14 +95,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
             },
@@ -101,17 +115,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
@@ -126,11 +142,7 @@ export const DesktopMoreButton = (props) => {
                 onClick: props.onCaptionsSettingsClick,
                 iconProps: {
                     iconName: 'CaptionsSettingsIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
@@ -139,17 +151,28 @@ export const DesktopMoreButton = (props) => {
             });
         }
     }
+    /*@conditional-compile-remove(PSTN-calls) */
+    if (props.onClickShowDialpad) {
+        moreButtonContextualMenuItems.push({
+            key: 'showDialpadKey',
+            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
+            onClick: () => {
+                props.onClickShowDialpad && props.onClickShowDialpad();
+            },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: props.disableButtonsForHoldScreen
+        });
+    }
     /* @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
@@ -160,7 +183,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,
@@ -174,13 +198,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,
@@ -194,13 +215,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,
@@ -222,49 +240,114 @@ 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(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) */
+        (_c = (_b = galleryOptions.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.push(largeGalleryOption);
+        /* @conditional-compile-remove(gallery-layout-composite) */
+        (_e = (_d = galleryOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.push(galleryOption);
+        /* @conditional-compile-remove(overflow-top-composite) */
+        (_g = (_f = galleryOptions.subMenuProps) === null || _f === void 0 ? void 0 : _f.items) === null || _g === void 0 ? void 0 : _g.push(overflowGalleryOption);
         /* @conditional-compile-remove(gallery-layouts) */
         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

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopMoreButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/DesktopMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { ControlBarButtonProps } from '@internal/react-components';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _StartCaptionsButton } from '@internal/react-components';\nimport React from 'react';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { useState } from 'react';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { useMemo, useCallback } from 'react';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';\nimport { MoreButton } from '../MoreButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CUSTOM_BUTTON_OPTIONS, generateCustomCallDesktopOverflowButtons, onFetchCustomButtonPropsTrampoline } from './CustomButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../../CallComposite/hooks/useAdaptedSelector';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface DesktopMoreButtonProps extends ControlBarButtonProps {\n  disableButtonsForHoldScreen?: boolean;\n  onClickShowDialpad?: () => void;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  callControls?: boolean | CommonCallControlOptions;\n  onCaptionsSettingsClick?: () => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout?: VideoGalleryLayout;\n}\n\n/**\n *\n * @private\n */\nexport const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element => {\n  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\n  const localeStrings = useLocale();\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n  /* @conditional-compile-remove(gallery-layouts) */\n  const [focusedContentOn, setFocusedContentOn] = useState<boolean>(false);\n  /* @conditional-compile-remove(gallery-layouts) */\n  const [previousLayout, setPreviousLayout] = useState<VideoGalleryLayout>(props.userSetGalleryLayout ?? 'floatingLocalVideo');\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\n  const moreButtonStrings = useMemo(() => ({\n    label: localeStrings.strings.call.moreButtonCallingLabel,\n    tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip\n  }), [localeStrings]);\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(gallery-layouts) */\n  const menuSubIconStyleSet = {\n    root: {\n      height: 'unset',\n      lineHeight: '100%',\n      width: '1.25rem'\n    }\n  };\n  // is captions feature is active\n  /* @conditional-compile-remove(close-captions) */\n  if (props.isCaptionsSupported) {\n    const captionsContextualMenuItems: IContextualMenuItem[] = [];\n    moreButtonContextualMenuItems.push({\n      key: 'liveCaptionsKey',\n      id: 'common-call-composite-captions-button',\n      text: localeStrings.strings.call.liveCaptionsLabel,\n      iconProps: {\n        iconName: 'CaptionsIcon',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen,\n      subMenuProps: {\n        id: 'captions-contextual-menu',\n        items: captionsContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      },\n      submenuIconProps: {\n        iconName: 'HorizontalGalleryRightButton',\n        styles: menuSubIconStyleSet\n      }\n    });\n    captionsContextualMenuItems.push({\n      key: 'ToggleCaptionsKey',\n      id: 'common-call-composite-captions-toggle-button',\n      text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n      onClick: () => {\n        startCaptionsButtonProps.checked ? startCaptionsButtonHandlers.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n      },\n      iconProps: {\n        iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen\n    });\n    if (props.onCaptionsSettingsClick) {\n      captionsContextualMenuItems.push({\n        key: 'openCaptionsSettingsKey',\n        id: 'common-call-composite-captions-settings-button',\n        text: localeStrings.strings.call.captionsSettingsLabel,\n        onClick: props.onCaptionsSettingsClick,\n        iconProps: {\n          iconName: 'CaptionsSettingsIcon',\n          styles: {\n            root: {\n              lineHeight: 0\n            }\n          }\n        },\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        },\n        disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked\n      });\n    }\n  }\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (props.onUserSetOverflowGalleryPositionChange) {\n    const galleryOptions = {\n      key: 'overflowGalleryPositionKey',\n      iconProps: {\n        iconName: 'GalleryOptions',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      submenuIconProps: {\n        styles: menuSubIconStyleSet\n      },\n      text: localeStrings.strings.call.moreButtonGalleryControlLabel,\n      disabled: props.disableButtonsForHoldScreen,\n      subMenuProps: {\n        items: [{\n          key: 'dynamicSelectionKey',\n          text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,\n          canCheck: true,\n          itemProps: {\n            styles: buttonFlyoutIncreasedSizeStyles\n          },\n          isChecked: props.userSetGalleryLayout === 'floatingLocalVideo',\n          onClick: () => {\n            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');\n            setFocusedContentOn(false);\n          },\n          iconProps: {\n            iconName: 'FloatingLocalVideoGalleryLayout',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          }\n        }, {\n          key: 'speakerSelectionKey',\n          text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,\n          canCheck: true,\n          itemProps: {\n            styles: buttonFlyoutIncreasedSizeStyles\n          },\n          isChecked: props.userSetGalleryLayout === 'speaker',\n          onClick: () => {\n            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('speaker');\n            setFocusedContentOn(false);\n          },\n          iconProps: {\n            iconName: 'SpeakerGalleryLayout',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          }\n        }, {\n          key: 'focusedContentSelectionKey',\n          text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,\n          canCheck: true,\n          itemProps: {\n            styles: buttonFlyoutIncreasedSizeStyles\n          },\n          isChecked: focusedContentOn,\n          onClick: () => {\n            if (focusedContentOn === false) {\n              setPreviousLayout(props.userSetGalleryLayout ?? 'floatingLocalVideo');\n              props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('focusedContent');\n              setFocusedContentOn(true);\n            } else {\n              props.onUserSetGalleryLayout && props.onUserSetGalleryLayout(previousLayout);\n              setFocusedContentOn(false);\n            }\n          },\n          iconProps: {\n            iconName: 'FocusedContentGalleryLayout',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          }\n        }],\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }\n    };\n    /* @conditional-compile-remove(gallery-layouts) */\n    moreButtonContextualMenuItems.push(galleryOptions);\n  }\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customDrawerButtons = useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {\n    moreButtonContextualMenuItems.push({\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      ...element\n    });\n  });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['secondary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {\n    moreButtonContextualMenuItems.push({\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      ...element\n    });\n  });\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['overflow'].forEach(element => {\n    moreButtonContextualMenuItems.push({\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      ...element\n    });\n  });\n  return <MoreButton {...props} data-ui-id=\"common-call-composite-more-button\"\n  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ strings={moreButtonStrings} menuIconProps={{\n    hidden: true\n  }} menuProps={{\n    items: moreButtonContextualMenuItems,\n    calloutProps: {\n      preventDismissOnEvent: _preventDismissOnEvent\n    }\n  }} />;\n};"]}
+{"version":3,"file":"DesktopMoreButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/DesktopMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { ControlBarButtonProps } from '@internal/react-components';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _StartCaptionsButton } from '@internal/react-components';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\nimport React from 'react';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { useState } from 'react';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { useMemo, useCallback } from 'react';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { usePropsFor } from '../../CallComposite/hooks/usePropsFor';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';\nimport { MoreButton } from '../MoreButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n  CUSTOM_BUTTON_OPTIONS,\n  generateCustomCallDesktopOverflowButtons,\n  onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _startCaptionsButtonSelector } from '@internal/calling-component-bindings';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../../CallComposite/hooks/useAdaptedSelector';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface DesktopMoreButtonProps extends ControlBarButtonProps {\n  disableButtonsForHoldScreen?: boolean;\n  onClickShowDialpad?: () => void;\n  /* @conditional-compile-remove(close-captions) */\n  isCaptionsSupported?: boolean;\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  callControls?: boolean | CommonCallControlOptions;\n  onCaptionsSettingsClick?: () => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'horizontalTop') => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;\n  /* @conditional-compile-remove(gallery-layouts) */\n  userSetGalleryLayout?: VideoGalleryLayout;\n}\n\n/**\n *\n * @private\n */\nexport const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element => {\n  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\n  const localeStrings = useLocale();\n  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptionsButtonHandlers = useHandlers(_StartCaptionsButton);\n  /* @conditional-compile-remove(close-captions) */\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonHandlers.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);\n\n  /* @conditional-compile-remove(overflow-top-composite) */\n  const [galleryPositionTop, setGalleryPositionTop] = useState<boolean>(false);\n  /* @conditional-compile-remove(gallery-layouts) */\n  const [focusedContentOn, setFocusedContentOn] = useState<boolean>(false);\n  /* @conditional-compile-remove(gallery-layouts) */\n  const [previousLayout, setPreviousLayout] = useState<VideoGalleryLayout>(\n    props.userSetGalleryLayout ?? 'floatingLocalVideo'\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.moreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(gallery-layouts) */\n  const menuSubIconStyleSet = {\n    root: {\n      height: 'unset',\n      lineHeight: '100%',\n      width: '1.25rem'\n    }\n  };\n\n  /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  moreButtonContextualMenuItems.push({\n    key: 'holdButtonKey',\n    text: localeStrings.component.strings.holdButton.tooltipOffContent,\n    onClick: () => {\n      holdButtonProps.onToggleHold();\n    },\n    iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    },\n    disabled: props.disableButtonsForHoldScreen\n  });\n\n  // is captions feature is active\n  /* @conditional-compile-remove(close-captions) */\n  if (props.isCaptionsSupported) {\n    const captionsContextualMenuItems: IContextualMenuItem[] = [];\n\n    moreButtonContextualMenuItems.push({\n      key: 'liveCaptionsKey',\n      id: 'common-call-composite-captions-button',\n      text: localeStrings.strings.call.liveCaptionsLabel,\n      iconProps: { iconName: 'CaptionsIcon', styles: { root: { lineHeight: 0 } } },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen,\n      subMenuProps: {\n        id: 'captions-contextual-menu',\n        items: captionsContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      },\n      submenuIconProps: {\n        iconName: 'HorizontalGalleryRightButton',\n        styles: menuSubIconStyleSet\n      }\n    });\n\n    captionsContextualMenuItems.push({\n      key: 'ToggleCaptionsKey',\n      id: 'common-call-composite-captions-toggle-button',\n      text: startCaptionsButtonProps.checked\n        ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent\n        : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n      onClick: () => {\n        startCaptionsButtonProps.checked\n          ? startCaptionsButtonHandlers.onStopCaptions()\n          : startCaptionsButtonProps.currentSpokenLanguage !== ''\n          ? startCaptions()\n          : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n      },\n      iconProps: {\n        iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n        styles: { root: { lineHeight: 0 } }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen\n    });\n\n    if (props.onCaptionsSettingsClick) {\n      captionsContextualMenuItems.push({\n        key: 'openCaptionsSettingsKey',\n        id: 'common-call-composite-captions-settings-button',\n        text: localeStrings.strings.call.captionsSettingsLabel,\n        onClick: props.onCaptionsSettingsClick,\n        iconProps: {\n          iconName: 'CaptionsSettingsIcon',\n          styles: { root: { lineHeight: 0 } }\n        },\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        },\n        disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked\n      });\n    }\n  }\n\n  /*@conditional-compile-remove(PSTN-calls) */\n  if (props.onClickShowDialpad) {\n    moreButtonContextualMenuItems.push({\n      key: 'showDialpadKey',\n      text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,\n      onClick: () => {\n        props.onClickShowDialpad && props.onClickShowDialpad();\n      },\n      iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen\n    });\n  }\n\n  /* @conditional-compile-remove(gallery-layouts) */\n  if (props.onUserSetOverflowGalleryPositionChange) {\n    const galleryOptions = {\n      key: 'overflowGalleryPositionKey',\n      iconProps: {\n        iconName: 'GalleryOptions',\n        styles: { root: { lineHeight: 0 } }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      submenuIconProps: {\n        styles: menuSubIconStyleSet\n      },\n      text: localeStrings.strings.call.moreButtonGalleryControlLabel,\n      disabled: props.disableButtonsForHoldScreen,\n      subMenuProps: {\n        items: [\n          {\n            key: 'dynamicSelectionKey',\n            text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,\n            canCheck: true,\n            itemProps: {\n              styles: buttonFlyoutIncreasedSizeStyles\n            },\n            isChecked: props.userSetGalleryLayout === 'floatingLocalVideo',\n            onClick: () => {\n              props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');\n              setFocusedContentOn(false);\n            },\n            iconProps: {\n              iconName: 'FloatingLocalVideoGalleryLayout',\n              styles: { root: { lineHeight: 0 } }\n            }\n          },\n          {\n            key: 'speakerSelectionKey',\n            text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,\n            canCheck: true,\n            itemProps: {\n              styles: buttonFlyoutIncreasedSizeStyles\n            },\n            isChecked: props.userSetGalleryLayout === 'speaker',\n            onClick: () => {\n              props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('speaker');\n              setFocusedContentOn(false);\n            },\n            iconProps: {\n              iconName: 'SpeakerGalleryLayout',\n              styles: { root: { lineHeight: 0 } }\n            }\n          },\n          {\n            key: 'focusedContentSelectionKey',\n            text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,\n            canCheck: true,\n            itemProps: {\n              styles: buttonFlyoutIncreasedSizeStyles\n            },\n            isChecked: focusedContentOn,\n            onClick: () => {\n              if (focusedContentOn === false) {\n                setPreviousLayout(props.userSetGalleryLayout ?? 'floatingLocalVideo');\n                props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('focusedContent');\n                setFocusedContentOn(true);\n              } else {\n                props.onUserSetGalleryLayout && props.onUserSetGalleryLayout(previousLayout);\n                setFocusedContentOn(false);\n              }\n            },\n            iconProps: {\n              iconName: 'FocusedContentGalleryLayout',\n              styles: { root: { lineHeight: 0 } }\n            }\n          }\n        ],\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }\n    };\n\n    /* @conditional-compile-remove(gallery-layout-composite) */\n    const galleryOption = {\n      key: 'defaultSelectionKey',\n      text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,\n      canCheck: true,\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      isChecked: props.userSetGalleryLayout === 'default',\n      onClick: () => {\n        props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');\n        setFocusedContentOn(false);\n      },\n      iconProps: {\n        iconName: 'DefaultGalleryLayout',\n        styles: { root: { lineHeight: 0 } }\n      }\n    };\n    /* @conditional-compile-remove(large-gallery) */\n    const largeGalleryOption = {\n      key: 'largeGallerySelectionKey',\n      text: localeStrings.strings.call.moreButtonLargeGalleryDefaultLayoutLabel,\n      canCheck: true,\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      isChecked: props.userSetGalleryLayout === 'largeGallery',\n      onClick: () => {\n        props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('largeGallery');\n        setFocusedContentOn(false);\n      },\n      iconProps: {\n        iconName: 'LargeGalleryLayout',\n        styles: { root: { lineHeight: 0 } }\n      }\n    };\n\n    /* @conditional-compile-remove(overflow-top-composite) */\n    const overflowGalleryOption = {\n      key: 'topKey',\n      text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,\n      canCheck: true,\n      topDivider: true,\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      iconProps: {\n        iconName: 'OverflowGalleryTop',\n        styles: { root: { lineHeight: 0 } }\n      },\n      isChecked: galleryPositionTop,\n      onClick: () => {\n        if (galleryPositionTop === false) {\n          props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('horizontalTop');\n          setGalleryPositionTop(true);\n        } else {\n          props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('Responsive');\n          setGalleryPositionTop(false);\n        }\n      }\n    };\n    /* @conditional-compile-remove(large-gallery) */\n    galleryOptions.subMenuProps?.items?.push(largeGalleryOption);\n    /* @conditional-compile-remove(gallery-layout-composite) */\n    galleryOptions.subMenuProps?.items?.push(galleryOption);\n    /* @conditional-compile-remove(overflow-top-composite) */\n    galleryOptions.subMenuProps?.items?.push(overflowGalleryOption);\n    /* @conditional-compile-remove(gallery-layouts) */\n    moreButtonContextualMenuItems.push(galleryOptions);\n  }\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  const customDrawerButtons = useMemo(\n    () =>\n      generateCustomCallDesktopOverflowButtons(\n        onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined),\n        typeof props.callControls === 'object' ? props.callControls.displayType : undefined\n      ),\n    [props.callControls]\n  );\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach((element) => {\n    moreButtonContextualMenuItems.push({\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      ...element\n    });\n  });\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['secondary']\n    .slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n    .forEach((element) => {\n      moreButtonContextualMenuItems.push({\n        itemProps: {\n          styles: buttonFlyoutIncreasedSizeStyles\n        },\n        ...element\n      });\n    });\n\n  /* @conditional-compile-remove(control-bar-button-injection) */\n  customDrawerButtons['overflow'].forEach((element) => {\n    moreButtonContextualMenuItems.push({\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      ...element\n    });\n  });\n\n  return (\n    <MoreButton\n      {...props}\n      data-ui-id=\"common-call-composite-more-button\"\n      /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */\n      strings={moreButtonStrings}\n      menuIconProps={{ hidden: true }}\n      menuProps={{\n        items: moreButtonContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }}\n    />\n  );\n};\n"]}

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

@@ -19,6 +19,6 @@ export const PeopleButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
 };
 //# sourceMappingURL=PeopleButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PeopleButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/PeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAe,EAAE;IACxE,MAAM,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,eAAe,CAAC;YACnE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA;KAAA,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IACpE,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,EAAE,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AACjN,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n */\nexport const PeopleButton = (props: ControlBarButtonProps): JSX.Element => {\n  const {\n    strings,\n    onRenderOnIcon,\n    onRenderOffIcon,\n    onClick\n  } = props;\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(() => concatStyleSets({\n    rootChecked: {\n      background: theme.palette.neutralLight\n    }\n  }, props.styles ?? {}), [props.styles, theme.palette.neutralLight]);\n  return <ControlBarButton {...props} strings={strings} labelKey={'peopleButtonLabelKey'} onRenderOnIcon={onRenderOnIcon ?? icon} onRenderOffIcon={onRenderOffIcon ?? icon} onClick={onClick} styles={styles} />;\n};"]}
+{"version":3,"file":"PeopleButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/PeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAe,EAAE;IACxE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAC5C,GAAG,EAAE;;QACH,OAAA,eAAe,CACb;YACE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EACD,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,IAAI,EACtC,eAAe,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAI,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\n\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n */\nexport const PeopleButton = (props: ControlBarButtonProps): JSX.Element => {\n  const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(\n    () =>\n      concatStyleSets(\n        {\n          rootChecked: {\n            background: theme.palette.neutralLight\n          }\n        },\n        props.styles ?? {}\n      ),\n    [props.styles, theme.palette.neutralLight]\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      labelKey={'peopleButtonLabelKey'}\n      onRenderOnIcon={onRenderOnIcon ?? icon}\n      onRenderOffIcon={onRenderOffIcon ?? icon}\n      onClick={onClick}\n      styles={styles}\n    />\n  );\n};\n"]}