@azure/communication-react 1.7.0-beta.2 → 1.7.1-alpha-202308170011

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,22 +25,29 @@ 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;
-    if (buttonProps['onRenderButton']) {
-        return buttonProps['onRenderButton'](internalProps);
-    }
-    return React.createElement(ControlBarButton, { ariaDescription: (_a = buttonProps.ariaDescription) !== null && _a !== void 0 ? _a : internalProps.ariaDescription, ariaLabel: (_b = buttonProps.ariaLabel) !== null && _b !== void 0 ? _b : internalProps.ariaLabel, disabled: (_c = buttonProps.disabled) !== null && _c !== void 0 ? _c : internalProps.disabled, id: (_d = buttonProps.id) !== null && _d !== void 0 ? _d : internalProps.id, key: (_e = buttonProps.key) !== null && _e !== void 0 ? _e : `${buttonProps.placement}_${i}`, onClick: (_f = buttonProps.onItemClick) !== null && _f !== void 0 ? _f : 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 : 'ControlButtonOptions' }); }, showLabel: (_g = buttonProps.showLabel) !== null && _g !== void 0 ? _g : internalProps.showLabel, text: (_h = buttonProps.text) !== null && _h !== void 0 ? _h : internalProps.text, styles: mergeStyleSets(internalProps.styles, buttonProps.styles) });
-}) : [];
+const generateCustomControlBarButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => (internalProps) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (buttonProps['onRenderButton']) {
+            return buttonProps['onRenderButton'](internalProps);
+        }
+        return (React.createElement(ControlBarButton, { ariaDescription: (_a = buttonProps.ariaDescription) !== null && _a !== void 0 ? _a : internalProps.ariaDescription, ariaLabel: (_b = buttonProps.ariaLabel) !== null && _b !== void 0 ? _b : internalProps.ariaLabel, disabled: (_c = buttonProps.disabled) !== null && _c !== void 0 ? _c : internalProps.disabled, id: (_d = buttonProps.id) !== null && _d !== void 0 ? _d : internalProps.id, key: (_e = buttonProps.key) !== null && _e !== void 0 ? _e : `${buttonProps.placement}_${i}`, onClick: (_f = buttonProps.onItemClick) !== null && _f !== void 0 ? _f : 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 : 'ControlButtonOptions' }));
+            }, showLabel: (_g = buttonProps.showLabel) !== null && _g !== void 0 ? _g : internalProps.showLabel, text: (_h = buttonProps.text) !== null && _h !== void 0 ? _h : internalProps.text, styles: mergeStyleSets(internalProps.styles, buttonProps.styles) }));
+    })
+    : [];
 /** @private */
-const generateCustomDrawerButtons = (placement, customButtons) => customButtons ? customButtons.filter(buttonProps => buttonProps.placement === placement).map((buttonProps, i) => (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: {
-        iconName: buttonProps.iconName
-    }, id: buttonProps.id, itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: buttonProps.text }))) : [];
+const generateCustomDrawerButtons = (placement, customButtons) => customButtons
+    ? customButtons
+        .filter((buttonProps) => buttonProps.placement === placement)
+        .map((buttonProps, i) => (Object.assign(Object.assign({}, buttonProps), { disabled: buttonProps.disabled, iconProps: { iconName: buttonProps.iconName }, id: buttonProps.id, itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`, onItemClick: buttonProps.onItemClick, text: buttonProps.text })))
+    : [];
 /** @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),
@@ -51,9 +56,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),
@@ -61,12 +64,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) => {
     var _a;

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":"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;AAK1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,kCAAkC,EAAE,CAAC;IACrC,iCAAiC,EAAE,CAAC;IACpC,oCAAoC,EAAE,CAAC;CACxC,CAAC;AAKF,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,wBAA4D,EAAE,WAAoC,EAAiB,EAAE;IACtK,MAAM,cAAc,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC;QACxE,WAAW;KACZ,CAAC,CAAC,CAAC;IACJ,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,CAAC,SAA2C,EAAE,aAA8C,EAA6B,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE;;IACnS,IAAI,WAAW,CAAC,gBAAgB,CAAC,EAAE;QACjC,OAAO,WAAW,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;KACrD;IACD,OAAO,oBAAC,gBAAgB,IAAC,eAAe,EAAE,MAAA,WAAW,CAAC,eAAe,mCAAI,aAAa,CAAC,eAAe,EAAE,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,aAAa,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAA,WAAW,CAAC,QAAQ,mCAAI,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,MAAA,WAAW,CAAC,EAAE,mCAAI,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,MAAA,WAAW,CAAC,GAAG,mCAAI,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,MAAA,WAAW,CAAC,WAAW,mCAAI,aAAa,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,mBAAC,OAAA,oBAAC,IAAI,IAAC,QAAQ,EAAE,MAAA,MAAA,WAAW,CAAC,QAAQ,mCAAI,MAAA,aAAa,CAAC,SAAS,0CAAE,QAAQ,mCAAI,sBAAsB,GAAI,CAAA,EAAA,EAAE,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,aAAa,CAAC,SAAS,EAAE,IAAI,EAAE,MAAA,WAAW,CAAC,IAAI,mCAAI,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,GAAI,CAAC;AAC1qB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAER,eAAe;AACf,MAAM,2BAA2B,GAAG,CAAC,SAA2C,EAAE,aAA8C,EAA0B,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAwB,EAAE,CAAC,iCAC/R,WAAW,KACd,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,SAAS,EAAE;QACT,QAAQ,EAAE,WAAW,CAAC,QAAQ;KAC/B,EACD,EAAE,EAAE,WAAW,CAAC,EAAE,EAClB,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EACjF,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,IAAI,EAAE,WAAW,CAAC,IAAI,IACtB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAKT,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,wBAA4D,EAAE,WAAoC,EAAuB,EAAE;IACzK,MAAM,aAAa,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC;QACvE,WAAW;KACZ,CAAC,CAAC,CAAC;IACJ,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;AAKF,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,CAAC,wBAA4D,EAAE,WAAoC,EAAgC,EAAE;IAC3L,MAAM,aAAa,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC;QACvE,WAAW;KACZ,CAAC,CAAC,CAAC;IACJ,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,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE;;QAC/B,MAAA,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC,CAAC,SAAS,EACb,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;QAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,kCAAkC,CAAC;KACjE,CAAC,CAAC,CAAC,SAAS,IACb,CAAC;AAiDH,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,OAAkC,EAAiD,EAAE;;IACtI,IAAI,QAAQ,GAAkD,SAAS,CAAC;IACxE,QAAQ,GAAG,MAAC,OAAqC,0CAAE,wBAAwB,CAAC;IAC5E,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 { _CommonCallControlOptions, CustomCallControlButtonCallbackArgs, CustomControlButtonProps } from '../types/CommonCallControlOptions';\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/** @private */\nexport type CustomButtons = { [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined };\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.ariaDescription ?? internalProps.ariaDescription} ariaLabel={buttonProps.ariaLabel ?? internalProps.ariaLabel} disabled={buttonProps.disabled ?? internalProps.disabled} id={buttonProps.id ?? internalProps.id} key={buttonProps.key ?? `${buttonProps.placement}_${i}`} onClick={buttonProps.onItemClick ?? internalProps.onClick} onRenderIcon={() => <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'ControlButtonOptions'} />} showLabel={buttonProps.showLabel ?? internalProps.showLabel} text={buttonProps.text ?? internalProps.text} styles={mergeStyleSets(internalProps.styles, buttonProps.styles)} />;\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\n  },\n  id: buttonProps.id,\n  itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`,\n  onItemClick: buttonProps.onItemClick,\n  text: buttonProps.text\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 * @beta\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 * @beta\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n *\n * Includes the icon and placement prop necessary to indicate where to place the\n * {@link ControlBarButton} and a {@link DrawerMenuItem}\n *\n * @beta\n */\nexport interface CustomCallControlButtonProps extends CustomControlButtonProps {\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\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (options?: CommonCallControlOptions): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = (options as _CommonCallControlOptions)?.onFetchCustomButtonProps;\n  return response;\n};\"../../../../../react-components/src\""]}
+{"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, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport {\n  _CommonCallControlOptions,\n  CustomCallControlButtonCallbackArgs,\n  CustomControlButtonProps\n} from '../types/CommonCallControlOptions';\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/** @private */\nexport type CustomButtons = {\n  [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined;\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.ariaDescription ?? internalProps.ariaDescription}\n              ariaLabel={buttonProps.ariaLabel ?? internalProps.ariaLabel}\n              disabled={buttonProps.disabled ?? internalProps.disabled}\n              id={buttonProps.id ?? internalProps.id}\n              key={buttonProps.key ?? `${buttonProps.placement}_${i}`}\n              onClick={buttonProps.onItemClick ?? internalProps.onClick}\n              onRenderIcon={() => (\n                <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'ControlButtonOptions'} />\n              )}\n              showLabel={buttonProps.showLabel ?? internalProps.showLabel}\n              text={buttonProps.text ?? internalProps.text}\n              styles={mergeStyleSets(internalProps.styles, buttonProps.styles)}\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 },\n            id: buttonProps.id,\n            itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`,\n            onItemClick: buttonProps.onItemClick,\n            text: buttonProps.text\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 * @beta\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 * @beta\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n *\n * Includes the icon and placement prop necessary to indicate where to place the\n * {@link ControlBarButton} and a {@link DrawerMenuItem}\n *\n * @beta\n */\nexport interface CustomCallControlButtonProps extends CustomControlButtonProps {\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\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n  options?: CommonCallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = (options as _CommonCallControlOptions)?.onFetchCustomButtonProps;\n  return response;\n};\n\"../../../../../react-components/src\""]}

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

@@ -7,6 +7,7 @@ export interface DesktopMoreButtonProps extends ControlBarButtonProps {
     isCaptionsSupported?: boolean;
     callControls?: boolean | CommonCallControlOptions;
     onCaptionsSettingsClick?: () => void;
+    onUserSetOverflowGalleryPositionChange?: (position: 'Responsive' | 'HorizontalTop') => void;
 }
 /**
  *

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

@@ -14,6 +14,8 @@ 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) */
@@ -51,12 +53,22 @@ export const DesktopMoreButton = (props) => {
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(gallery-layouts) */
+    const [galleryPositionTop, setGalleryPositionTop] = useState(false);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
     const moreButtonContextualMenuItems = [];
+    /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(gallery-layouts) */
+    const menuSubIconStyleSet = {
+        root: {
+            height: 'unset',
+            lineHeight: '100%',
+            width: '1.25rem'
+        }
+    };
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     moreButtonContextualMenuItems.push({
         key: 'holdButtonKey',
@@ -64,14 +76,7 @@ export const DesktopMoreButton = (props) => {
         onClick: () => {
             holdButtonProps.onToggleHold();
         },
-        iconProps: {
-            iconName: 'HoldCallContextualMenuItem',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
-        },
+        iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
         },
@@ -81,25 +86,11 @@ export const DesktopMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     if (props.isCaptionsSupported) {
         const captionsContextualMenuItems = [];
-        const menuSubIconStyleSet = {
-            root: {
-                height: 'unset',
-                lineHeight: '100%',
-                width: '1.25rem'
-            }
-        };
         moreButtonContextualMenuItems.push({
             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
             },
@@ -119,17 +110,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
@@ -144,11 +137,7 @@ export const DesktopMoreButton = (props) => {
                 onClick: props.onCaptionsSettingsClick,
                 iconProps: {
                     iconName: 'CaptionsSettingsIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
@@ -165,48 +154,84 @@ export const DesktopMoreButton = (props) => {
             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) {
+        moreButtonContextualMenuItems.push({
+            key: 'overflowGalleryPositionKey',
             iconProps: {
-                iconName: 'Dialpad',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                iconName: 'GalleryOptions',
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
-            disabled: props.disableButtonsForHoldScreen
+            submenuIconProps: {
+                styles: menuSubIconStyleSet
+            },
+            text: localeStrings.strings.call.moreButtonGalleryControlLabel,
+            subMenuProps: {
+                items: [
+                    {
+                        key: 'topKey',
+                        text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
+                        canCheck: true,
+                        itemProps: {
+                            styles: buttonFlyoutIncreasedSizeStyles
+                        },
+                        isChecked: galleryPositionTop,
+                        onClick: () => {
+                            if (galleryPositionTop === false) {
+                                props.onUserSetOverflowGalleryPositionChange &&
+                                    props.onUserSetOverflowGalleryPositionChange('HorizontalTop');
+                                setGalleryPositionTop(true);
+                            }
+                            else {
+                                props.onUserSetOverflowGalleryPositionChange &&
+                                    props.onUserSetOverflowGalleryPositionChange('Responsive');
+                                setGalleryPositionTop(false);
+                            }
+                        }
+                    }
+                ]
+            }
         });
     }
     /* @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(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(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) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';\nimport { MoreButton } from '../MoreButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\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}\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(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(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: {\n      iconName: 'HoldCallContextualMenuItem',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    },\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    const menuSubIconStyleSet = {\n      root: {\n        height: 'unset',\n        lineHeight: '100%',\n        width: '1.25rem'\n      }\n    };\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\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: {\n        iconName: 'Dialpad',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: props.disableButtonsForHoldScreen\n    });\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};\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\"\"../../../../../acs-ui-common/src\""]}
+{"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(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) */\nimport { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';\nimport { MoreButton } from '../MoreButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\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}\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(gallery-layouts) */\n  const [galleryPositionTop, setGalleryPositionTop] = useState<boolean>(false);\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    moreButtonContextualMenuItems.push({\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      subMenuProps: {\n        items: [\n          {\n            key: 'topKey',\n            text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,\n            canCheck: true,\n            itemProps: {\n              styles: buttonFlyoutIncreasedSizeStyles\n            },\n            isChecked: galleryPositionTop,\n            onClick: () => {\n              if (galleryPositionTop === false) {\n                props.onUserSetOverflowGalleryPositionChange &&\n                  props.onUserSetOverflowGalleryPositionChange('HorizontalTop');\n                setGalleryPositionTop(true);\n              } else {\n                props.onUserSetOverflowGalleryPositionChange &&\n                  props.onUserSetOverflowGalleryPositionChange('Responsive');\n                setGalleryPositionTop(false);\n              }\n            }\n          }\n        ]\n      }\n    });\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\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\"\"../../../../../acs-ui-common/src\""]}

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};\"../../../../../react-components/src\""]}
+{"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\"../../../../../react-components/src\""]}

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

@@ -1 +1 @@
-{"version":3,"file":"ConvertContextualMenuItemToDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/ConvertContextualMenuItemToDrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,cAAmC,EAAE,qBAAiC,EAAwB,EAAE;IACxJ,OAAO;QACL,OAAO,EAAE,cAAc,CAAC,GAAG;QAC3B,WAAW,EAAE,GAAG,EAAE;;YAChB,MAAA,cAAc,CAAC,OAAO,+CAAtB,cAAc,CAAY,CAAC;YAC3B,qBAAqB,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,cAAc,CAAC,SAAS;QACnC,IAAI,EAAE,cAAc,CAAC,IAAI;QACzB,QAAQ,EAAE,cAAc,CAAC,QAAQ;KAClC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { _DrawerMenuItemProps } from '@internal/react-components';\n\n/**\n * Convert IContextualMenuItem to _DrawerMenuItemProps\n * @param contextualMenu - IContextualMenuItem to convert\n * @param onDrawerMenuItemClick - callback to call when converted DrawerMenuItem is clicked\n * @returns DrawerMenuItem\n * @private\n */\nexport const convertContextualMenuItemToDrawerMenuItem = (contextualMenu: IContextualMenuItem, onDrawerMenuItemClick: () => void): _DrawerMenuItemProps => {\n  return {\n    itemKey: contextualMenu.key,\n    onItemClick: () => {\n      contextualMenu.onClick?.();\n      onDrawerMenuItemClick();\n    },\n    iconProps: contextualMenu.iconProps,\n    text: contextualMenu.text,\n    disabled: contextualMenu.disabled\n  };\n};\"../../../../react-components/src\""]}
+{"version":3,"file":"ConvertContextualMenuItemToDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ConvertContextualMenuItemToDrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CACvD,cAAmC,EACnC,qBAAiC,EACX,EAAE;IACxB,OAAO;QACL,OAAO,EAAE,cAAc,CAAC,GAAG;QAC3B,WAAW,EAAE,GAAG,EAAE;;YAChB,MAAA,cAAc,CAAC,OAAO,+CAAtB,cAAc,CAAY,CAAC;YAC3B,qBAAqB,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,cAAc,CAAC,SAAS;QACnC,IAAI,EAAE,cAAc,CAAC,IAAI;QACzB,QAAQ,EAAE,cAAc,CAAC,QAAQ;KAClC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { _DrawerMenuItemProps } from '@internal/react-components';\n\n/**\n * Convert IContextualMenuItem to _DrawerMenuItemProps\n * @param contextualMenu - IContextualMenuItem to convert\n * @param onDrawerMenuItemClick - callback to call when converted DrawerMenuItem is clicked\n * @returns DrawerMenuItem\n * @private\n */\nexport const convertContextualMenuItemToDrawerMenuItem = (\n  contextualMenu: IContextualMenuItem,\n  onDrawerMenuItemClick: () => void\n): _DrawerMenuItemProps => {\n  return {\n    itemKey: contextualMenu.key,\n    onItemClick: () => {\n      contextualMenu.onClick?.();\n      onDrawerMenuItemClick();\n    },\n    iconProps: contextualMenu.iconProps,\n    text: contextualMenu.text,\n    disabled: contextualMenu.disabled\n  };\n};\n\"../../../../react-components/src\""]}