@azure/communication-react 1.23.0-alpha-202501160016 → 1.23.0

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

@@ -1 +1 @@
-{"version":3,"file":"DtmfDialerButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/DtmfDialerButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA2B,4CAAmC;AAEvF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,mBAAmB,GAAI,CAAC;AASrF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,oBAAoB,GAA4B;QACpD,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;QAChD,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB;QAC/D,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B;KAClE,CAAC;IACF,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;IACF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,EACjD,SAAS,EAAE,WAAW,KAAK,SAAS,EACpC,QAAQ,EAAE,2BAA2B,EACrC,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.\nimport React, { useMemo } from 'react';\nimport { CallCompositeIcon } from '../icons';\nimport { ControlBarButton, ControlBarButtonStrings } from '@internal/react-components';\nimport { ControlBarButtonProps, ControlBarButtonStyles } from '@internal/react-components';\nimport { concatStyleSets, useTheme } from '@fluentui/react';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\nimport { useLocale } from '../../localization';\n\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'DtmfDialpadButton'} />;\n\n/**\n * @private\n */\nexport interface DtmfDialerButtonProps extends ControlBarButtonProps {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n}\n/**\n * Button for showing and hiding the dtmf dialer in the Call composite.\n * To be used only if the more button control is disabled. This button will replace\n * it in the control bar unless it is also disabled.\n * @private\n */\nexport const DtmfDialpadButton = (props: DtmfDialerButtonProps): JSX.Element => {\n  const { strings, onRenderOnIcon, onRenderOffIcon, onClick, displayType } = props;\n  const theme = useTheme();\n  const locale = useLocale();\n  const dialpadButtonStrings: ControlBarButtonStrings = {\n    label: locale.strings.call.dtmfDialerButtonLabel,\n    tooltipOnContent: locale.strings.call.dtmfDialerButtonTooltipOn,\n    tooltipOffContent: locale.strings.call.dtmfDialerButtonTooltipOff\n  };\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  return (\n    <ControlBarButton\n      {...props}\n      strings={strings ? strings : dialpadButtonStrings}\n      showLabel={displayType !== 'compact'}\n      labelKey={'dtmfDialpadButtonLabelKey'}\n      onRenderOnIcon={onRenderOnIcon ?? icon}\n      onRenderOffIcon={onRenderOffIcon ?? icon}\n      onClick={onClick}\n      styles={styles}\n    />\n  );\n};\n"]}
+{"version":3,"file":"DtmfDialerButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/DtmfDialerButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA2B,4CAAmC;AAEvF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,mBAAmB,GAAI,CAAC;AASrF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC7E,MAAM,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,OAAO,EACP,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,oBAAoB,GAA4B;QACpD,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;QAChD,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB;QAC/D,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B;KAClE,CAAC;IACF,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,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,SAAS,EAAE,WAAW,KAAK,SAAS,EAAE,QAAQ,EAAE,2BAA2B,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;AAC7R,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useMemo } from 'react';\nimport { CallCompositeIcon } from '../icons';\nimport { ControlBarButton, ControlBarButtonStrings } from '@internal/react-components';\nimport { ControlBarButtonProps, ControlBarButtonStyles } from '@internal/react-components';\nimport { concatStyleSets, useTheme } from '@fluentui/react';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\nimport { useLocale } from '../../localization';\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'DtmfDialpadButton'} />;\n\n/**\n * @private\n */\nexport interface DtmfDialerButtonProps extends ControlBarButtonProps {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n}\n/**\n * Button for showing and hiding the dtmf dialer in the Call composite.\n * To be used only if the more button control is disabled. This button will replace\n * it in the control bar unless it is also disabled.\n * @private\n */\nexport const DtmfDialpadButton = (props: DtmfDialerButtonProps): JSX.Element => {\n  const {\n    strings,\n    onRenderOnIcon,\n    onRenderOffIcon,\n    onClick,\n    displayType\n  } = props;\n  const theme = useTheme();\n  const locale = useLocale();\n  const dialpadButtonStrings: ControlBarButtonStrings = {\n    label: locale.strings.call.dtmfDialerButtonLabel,\n    tooltipOnContent: locale.strings.call.dtmfDialerButtonTooltipOn,\n    tooltipOffContent: locale.strings.call.dtmfDialerButtonTooltipOff\n  };\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 ? strings : dialpadButtonStrings} showLabel={displayType !== 'compact'} labelKey={'dtmfDialpadButtonLabelKey'} onRenderOnIcon={onRenderOnIcon ?? icon} onRenderOffIcon={onRenderOffIcon ?? icon} onClick={onClick} styles={styles} />;\n};"]}

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

@@ -34,6 +34,6 @@ export const PeopleButton = (props) => {
             event.preventDefault();
         }
     }, [chatButtonPresent, onClick, peoplePaneDismissButtonRef]);
-    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: handleClick, onKeyDown: handleTab, 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: handleClick, onKeyDown: handleTab, 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":["../../../../../../../../react-composites/src/composites/common/ControlBar/PeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAa,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAW,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAW1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACnH,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,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAuC,EAAE,EAAE;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAI,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,CAAA,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxG,0BAA0B,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAChD,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAoC,EAAE,EAAE;;QACvC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;YACxC,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,EAAE,OAAO,EAAE,0BAA0B,CAAC,CACzD,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,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, RefObject } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets, IButton } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\n\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n * props for the PeopleButton component\n */\nexport interface PeopleButtonProps extends ControlBarButtonProps {\n  peoplePaneDismissButtonRef?: RefObject<IButton>;\n  chatButtonPresent?: boolean;\n}\n\n/**\n * @private\n */\nexport const PeopleButton = (props: PeopleButtonProps): JSX.Element => {\n  const { strings, onRenderOnIcon, onRenderOffIcon, onClick, peoplePaneDismissButtonRef, chatButtonPresent } = 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  const handleTab = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Tab' && !event.shiftKey && peoplePaneDismissButtonRef?.current && !chatButtonPresent) {\n        peoplePaneDismissButtonRef.current.focus();\n        event.preventDefault();\n      }\n    },\n    [peoplePaneDismissButtonRef, chatButtonPresent]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      onClick?.(event);\n      if (chatButtonPresent) {\n        console.log(peoplePaneDismissButtonRef);\n        peoplePaneDismissButtonRef?.current?.focus();\n        event.preventDefault();\n      }\n    },\n    [chatButtonPresent, onClick, peoplePaneDismissButtonRef]\n  );\n\n  return (\n    <ControlBarButton\n      {...props}\n      strings={strings}\n      labelKey={'peopleButtonLabelKey'}\n      onRenderOnIcon={onRenderOnIcon ?? icon}\n      onRenderOffIcon={onRenderOffIcon ?? icon}\n      onClick={handleClick}\n      onKeyDown={handleTab}\n      styles={styles}\n    />\n  );\n};\n"]}
+{"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,WAAW,EAAE,OAAO,EAAa,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAW,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,MAAM,IAAI,GAAG,GAAgB,EAAE,CAAC,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,wBAAwB,GAAI,CAAC;AAW1F;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,OAAO,EACP,0BAA0B,EAC1B,iBAAiB,EAClB,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,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,KAAuC,EAAE,EAAE;QACxE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAI,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,CAAA,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxG,0BAA0B,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAoC,EAAE,EAAE;;QACvE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;YACxC,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,EAAE,0BAA0B,CAAC,CAAC,CAAC;IAC7D,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,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC3O,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, RefObject } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets, IButton } from '@fluentui/react';\nimport { CallCompositeIcon } from '../icons';\nconst icon = (): JSX.Element => <CallCompositeIcon iconName={'ControlBarPeopleButton'} />;\n\n/**\n * @private\n * props for the PeopleButton component\n */\nexport interface PeopleButtonProps extends ControlBarButtonProps {\n  peoplePaneDismissButtonRef?: RefObject<IButton>;\n  chatButtonPresent?: boolean;\n}\n\n/**\n * @private\n */\nexport const PeopleButton = (props: PeopleButtonProps): JSX.Element => {\n  const {\n    strings,\n    onRenderOnIcon,\n    onRenderOffIcon,\n    onClick,\n    peoplePaneDismissButtonRef,\n    chatButtonPresent\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  const handleTab = useCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Tab' && !event.shiftKey && peoplePaneDismissButtonRef?.current && !chatButtonPresent) {\n      peoplePaneDismissButtonRef.current.focus();\n      event.preventDefault();\n    }\n  }, [peoplePaneDismissButtonRef, chatButtonPresent]);\n  const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n    if (chatButtonPresent) {\n      console.log(peoplePaneDismissButtonRef);\n      peoplePaneDismissButtonRef?.current?.focus();\n      event.preventDefault();\n    }\n  }, [chatButtonPresent, onClick, peoplePaneDismissButtonRef]);\n  return <ControlBarButton {...props} strings={strings} labelKey={'peopleButtonLabelKey'} onRenderOnIcon={onRenderOnIcon ?? icon} onRenderOffIcon={onRenderOffIcon ?? icon} onClick={handleClick} onKeyDown={handleTab} styles={styles} />;\n};"]}

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

@@ -1 +1 @@
-{"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,8DAAI,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"]}
+{"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,8DAAI,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};"]}

package/dist/dist-esm/react-composites/src/composites/common/Drawer/CaptionLanguageSettingsDrawer.js

@@ -15,20 +15,22 @@ export const CaptionLanguageSettingsDrawer = (props) => {
     }, [props]);
     const drawerItems = useMemo(() => {
         var _a;
-        return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
+        return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map(languageCode => ({
             itemKey: languageCode,
             text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
             onItemClick: () => onDrawerItemClick(languageCode),
-            secondaryIconProps: props.currentLanguage === languageCode ? { iconName: 'Accept' } : undefined
+            secondaryIconProps: props.currentLanguage === languageCode ? {
+                iconName: 'Accept'
+            } : undefined
         }));
     }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);
     const sortedDrawerItems = useMemo(() => {
         const copy = [...drawerItems];
-        return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));
+        return copy.sort((a, b) => a.text && b.text && a.text > b.text ? 1 : -1);
     }, [drawerItems]);
-    return (React.createElement(DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
+    return React.createElement(DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
             props.setCurrentLanguage(props.currentLanguage);
             props.onLightDismiss();
-        }, styles: captionSettingsDrawerStyles(theme) }));
+        }, styles: captionSettingsDrawerStyles(theme) });
 };
 //# sourceMappingURL=CaptionLanguageSettingsDrawer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionLanguageSettingsDrawer.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/Drawer/CaptionLanguageSettingsDrawer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0B,QAAQ,EAAE,4CAAmC;AAC9E,OAAO,EACL,WAAW,IAAI,UAAU,EAG1B,4CAAmC;AACpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAYnD,eAAe;AACf,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAO7C,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,YAA0C,EAAE,EAAE;QAC7C,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,WAAW,GAA0B,OAAO,CAAC,GAAG,EAAE;;QACtD,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,wBAAwB,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3E,OAAO,EAAE,YAAY;YACrB,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;YAClG,WAAW,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC;YAClD,kBAAkB,EAAE,KAAK,CAAC,eAAe,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS;SAChG,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/E,MAAM,iBAAiB,GAA0B,OAAO,CAAC,GAAG,EAAE;QAC5D,MAAM,IAAI,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,EACjC,KAAK,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,EAAE,EAC9B,cAAc,EAAE,GAAG,EAAE;YACnB,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,EACD,MAAM,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAC1C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useMemo, useCallback } from 'react';\nimport { CaptionLanguageStrings, useTheme } from '@internal/react-components';\nimport {\n  _DrawerMenu as DrawerMenu,\n  _DrawerMenuItemProps as DrawerMenuItemProps,\n  _DrawerMenuStyles\n} from '@internal/react-components';\nimport { captionSettingsDrawerStyles } from './captionSettingsDrawer.styles';\nimport { _getKeys } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionSettingsDrawerStrings {\n  /**\n   * Label for spoken language/caption language drawerMenuItem\n   *\n   * @remarks Only displayed when in Teams call, disabled until captions is on\n   */\n  menuTitle: string;\n}\n\n/** @private */\nexport const CaptionLanguageSettingsDrawer = (props: {\n  selectLanguage: (language: keyof CaptionLanguageStrings) => void;\n  setCurrentLanguage: (language: keyof CaptionLanguageStrings) => void;\n  currentLanguage: keyof CaptionLanguageStrings;\n  onLightDismiss: () => void;\n  strings?: CaptionSettingsDrawerStrings;\n  supportedLanguageStrings?: CaptionLanguageStrings;\n}): JSX.Element => {\n  const theme = useTheme();\n\n  const onDrawerItemClick = useCallback(\n    (languageCode: keyof CaptionLanguageStrings) => {\n      props.selectLanguage(languageCode);\n    },\n    [props]\n  );\n\n  const drawerItems: DrawerMenuItemProps[] = useMemo(() => {\n    return _getKeys(props.supportedLanguageStrings ?? []).map((languageCode) => ({\n      itemKey: languageCode,\n      text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,\n      onItemClick: () => onDrawerItemClick(languageCode),\n      secondaryIconProps: props.currentLanguage === languageCode ? { iconName: 'Accept' } : undefined\n    }));\n  }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);\n\n  const sortedDrawerItems: DrawerMenuItemProps[] = useMemo(() => {\n    const copy = [...drawerItems];\n    return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));\n  }, [drawerItems]);\n\n  return (\n    <DrawerMenu\n      heading={props.strings?.menuTitle}\n      items={sortedDrawerItems ?? []}\n      onLightDismiss={() => {\n        props.setCurrentLanguage(props.currentLanguage);\n        props.onLightDismiss();\n      }}\n      styles={captionSettingsDrawerStyles(theme)}\n    />\n  );\n};\n"]}
+{"version":3,"file":"CaptionLanguageSettingsDrawer.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/Drawer/CaptionLanguageSettingsDrawer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0B,QAAQ,EAAE,4CAAmC;AAC9E,OAAO,EAAE,WAAW,IAAI,UAAU,EAAkE,4CAAmC;AACvI,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAYnD,eAAe;AACf,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAO7C,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,YAA0C,EAAE,EAAE;QACnF,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,WAAW,GAA0B,OAAO,CAAC,GAAG,EAAE;;QACtD,OAAO,QAAQ,CAAC,MAAA,KAAK,CAAC,wBAAwB,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACzE,OAAO,EAAE,YAAY;YACrB,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;YAClG,WAAW,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC;YAClD,kBAAkB,EAAE,KAAK,CAAC,eAAe,KAAK,YAAY,CAAC,CAAC,CAAC;gBAC3D,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC,CAAC,SAAS;SACd,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAC/E,MAAM,iBAAiB,GAA0B,OAAO,CAAC,GAAG,EAAE;QAC5D,MAAM,IAAI,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAClB,OAAO,oBAAC,UAAU,IAAC,OAAO,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE;YACzG,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,EAAE,MAAM,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAI,CAAC;AACpD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useMemo, useCallback } from 'react';\nimport { CaptionLanguageStrings, useTheme } from '@internal/react-components';\nimport { _DrawerMenu as DrawerMenu, _DrawerMenuItemProps as DrawerMenuItemProps, _DrawerMenuStyles } from '@internal/react-components';\nimport { captionSettingsDrawerStyles } from './captionSettingsDrawer.styles';\nimport { _getKeys } from '@internal/acs-ui-common';\n\n/** @private */\nexport interface CaptionSettingsDrawerStrings {\n  /**\n   * Label for spoken language/caption language drawerMenuItem\n   *\n   * @remarks Only displayed when in Teams call, disabled until captions is on\n   */\n  menuTitle: string;\n}\n\n/** @private */\nexport const CaptionLanguageSettingsDrawer = (props: {\n  selectLanguage: (language: keyof CaptionLanguageStrings) => void;\n  setCurrentLanguage: (language: keyof CaptionLanguageStrings) => void;\n  currentLanguage: keyof CaptionLanguageStrings;\n  onLightDismiss: () => void;\n  strings?: CaptionSettingsDrawerStrings;\n  supportedLanguageStrings?: CaptionLanguageStrings;\n}): JSX.Element => {\n  const theme = useTheme();\n  const onDrawerItemClick = useCallback((languageCode: keyof CaptionLanguageStrings) => {\n    props.selectLanguage(languageCode);\n  }, [props]);\n  const drawerItems: DrawerMenuItemProps[] = useMemo(() => {\n    return _getKeys(props.supportedLanguageStrings ?? []).map(languageCode => ({\n      itemKey: languageCode,\n      text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,\n      onItemClick: () => onDrawerItemClick(languageCode),\n      secondaryIconProps: props.currentLanguage === languageCode ? {\n        iconName: 'Accept'\n      } : undefined\n    }));\n  }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);\n  const sortedDrawerItems: DrawerMenuItemProps[] = useMemo(() => {\n    const copy = [...drawerItems];\n    return copy.sort((a, b) => a.text && b.text && a.text > b.text ? 1 : -1);\n  }, [drawerItems]);\n  return <DrawerMenu heading={props.strings?.menuTitle} items={sortedDrawerItems ?? []} onLightDismiss={() => {\n    props.setCurrentLanguage(props.currentLanguage);\n    props.onLightDismiss();\n  }} styles={captionSettingsDrawerStyles(theme)} />;\n};"]}

package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js

@@ -41,7 +41,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 export const MoreDrawer = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const theme = useTheme();
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
@@ -54,7 +54,7 @@ export const MoreDrawer = (props) => {
     const [dtmfDialerChecked, setDtmfDialerChecked] = useState((_a = props.dtmfDialerPresent) !== null && _a !== void 0 ? _a : false);
     const raiseHandButtonProps = usePropsFor(RaiseHandButton);
     const onSpeakerItemClick = useCallback((_ev, itemKey) => {
-        const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
+        const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find(speaker => speaker.id === itemKey);
         if (selected) {
             // This is unsafe - we're only passing in part of the argument to the handler.
             // But this is a known issue in our state.
@@ -67,11 +67,11 @@ export const MoreDrawer = (props) => {
     if (props.reactionResources !== undefined) {
         drawerMenuItems.push({
             itemKey: 'reactions',
-            onRendererContent: () => (React.createElement(_ReactionDrawerMenuItem, { onReactionClick: (reaction) => __awaiter(void 0, void 0, void 0, function* () {
-                    var _h;
-                    (_h = props.onReactionClick) === null || _h === void 0 ? void 0 : _h.call(props, reaction);
+            onRendererContent: () => React.createElement(_ReactionDrawerMenuItem, { onReactionClick: (reaction) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _g;
+                    (_g = props.onReactionClick) === null || _g === void 0 ? void 0 : _g.call(props, reaction);
                     onLightDismiss();
-                }), reactionResources: props.reactionResources }))
+                }), reactionResources: props.reactionResources })
         });
     }
     if (props.speakers && props.speakers.length > 0) {
@@ -79,24 +79,26 @@ export const MoreDrawer = (props) => {
             itemKey: 'speakers',
             disabled: props.disableButtonsForHoldScreen,
             text: props.strings.speakerMenuTitle,
-            iconProps: { iconName: 'MoreDrawerSpeakers' },
-            subMenuProps: props.speakers.map((speaker) => ({
+            iconProps: {
+                iconName: 'MoreDrawerSpeakers'
+            },
+            subMenuProps: props.speakers.map(speaker => ({
                 itemKey: speaker.id,
                 iconProps: {
-                    iconName: isDeviceSelected(speaker, props.selectedSpeaker)
-                        ? 'MoreDrawerSelectedSpeaker'
-                        : 'MoreDrawerSpeakers'
+                    iconName: isDeviceSelected(speaker, props.selectedSpeaker) ? 'MoreDrawerSelectedSpeaker' : 'MoreDrawerSpeakers'
                 },
                 text: speaker.name,
                 onItemClick: onSpeakerItemClick,
-                secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? {
+                    iconName: 'Accept'
+                } : undefined
             })),
             secondaryText: (_b = props.selectedSpeaker) === null || _b === void 0 ? void 0 : _b.name
         });
     }
     const { microphones, onSelectMicrophone } = props;
     const onMicrophoneItemClick = useCallback((_ev, itemKey) => {
-        const selected = microphones === null || microphones === void 0 ? void 0 : microphones.find((mic) => mic.id === itemKey);
+        const selected = microphones === null || microphones === void 0 ? void 0 : microphones.find(mic => mic.id === itemKey);
         if (selected) {
             // This is unsafe - we're only passing in part of the argument to the handler.
             // But this is a known issue in our state.
@@ -115,15 +117,19 @@ export const MoreDrawer = (props) => {
             itemKey: itemKey,
             disabled: props.disableButtonsForHoldScreen,
             text: text,
-            iconProps: { iconName: iconName },
-            subMenuProps: props.microphones.map((mic) => ({
+            iconProps: {
+                iconName: iconName
+            },
+            subMenuProps: props.microphones.map(mic => ({
                 itemKey: mic.id,
                 iconProps: {
                     iconName: isDeviceSelected(mic, props.selectedMicrophone) ? selectedIconName : iconName
                 },
                 text: mic.name,
                 onItemClick: onMicrophoneItemClick,
-                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
+                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? {
+                    iconName: 'Accept'
+                } : undefined,
                 disabled: drawerSelectionOptions !== false ? isDisabled(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_c = props.selectedMicrophone) === null || _c === void 0 ? void 0 : _c.name
@@ -131,9 +137,7 @@ export const MoreDrawer = (props) => {
     }
     const dtmfDialerScreenOption = {
         itemKey: 'dtmfDialerScreenKey',
-        text: !dtmfDialerChecked
-            ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
-            : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
+        text: !dtmfDialerChecked ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
         onItemClick: () => {
             if (props.onSetDialpadPage) {
                 props.onSetDialpadPage();
@@ -143,28 +147,32 @@ export const MoreDrawer = (props) => {
         },
         iconProps: {
             iconName: 'DtmfDialpadButton',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         }
     };
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
-    if (props.onSetDialpadPage &&
-        allowDtmfDialer &&
-        drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions.dtmfDialerButton)) {
+    if (props.onSetDialpadPage && allowDtmfDialer && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.dtmfDialerButton)) {
         drawerMenuItems.push(dtmfDialerScreenOption);
     }
     const galleryLayoutOptions = {
         itemKey: 'galleryPositionKey',
         iconProps: {
             iconName: 'GalleryOptions',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         },
         disabled: props.disableButtonsForHoldScreen,
         text: localeStrings.strings.call.moreButtonGalleryControlLabel,
-        subMenuProps: [
-            {
+        subMenuProps: [{
                 itemKey: 'dynamicSelectionKey',
                 text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
                 onItemClick: () => {
@@ -173,11 +181,16 @@ export const MoreDrawer = (props) => {
                 },
                 iconProps: {
                     iconName: 'FloatingLocalVideoGalleryLayout',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
-                secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? { iconName: 'Accept' } : undefined
-            },
-            {
+                secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? {
+                    iconName: 'Accept'
+                } : undefined
+            }, {
                 itemKey: 'focusedContentSelectionKey',
                 text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
                 onItemClick: () => {
@@ -186,28 +199,17 @@ export const MoreDrawer = (props) => {
                 },
                 iconProps: {
                     iconName: 'FocusedContentGalleryLayout',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
-                secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? { iconName: 'Accept' } : undefined
-            }
-        ]
-    };
-    /* @conditional-compile-remove(gallery-layout-composite) */
-    const galleryOption = {
-        itemKey: 'defaultSelectionKey',
-        text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
-        onItemClick: () => {
-            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
-            onLightDismiss();
-        },
-        iconProps: {
-            iconName: 'DefaultGalleryLayout',
-            styles: { root: { lineHeight: 0 } }
-        },
-        secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? {
+                    iconName: 'Accept'
+                } : undefined
+            }]
     };
-    /* @conditional-compile-remove(gallery-layout-composite) */
-    (_d = galleryLayoutOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.push(galleryOption);
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.galleryControlsButton)) {
         drawerMenuItems.push(galleryLayoutOptions);
     }
@@ -216,7 +218,9 @@ export const MoreDrawer = (props) => {
             itemKey: 'people',
             id: 'call-composite-drawer-people-button',
             text: props.strings.peopleButtonLabel,
-            iconProps: { iconName: 'MoreDrawerPeople' },
+            iconProps: {
+                iconName: 'MoreDrawerPeople'
+            },
             onItemClick: props.onPeopleButtonClicked,
             disabled: isDisabled(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
         });
@@ -230,21 +234,24 @@ export const MoreDrawer = (props) => {
                 holdButtonProps.onToggleHold();
                 onLightDismiss();
             },
-            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
+            iconProps: {
+                iconName: 'HoldCallContextualMenuItem',
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
+            }
         });
     }
-    const role = (_e = callAdapter.getState().call) === null || _e === void 0 ? void 0 : _e.role;
+    const role = (_d = callAdapter.getState().call) === null || _d === void 0 ? void 0 : _d.role;
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    if (drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) &&
-        !hideRaiseHandButtonInRoomsCall) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) && !hideRaiseHandButtonInRoomsCall) {
         const raiseHandIcon = raiseHandButtonProps.checked ? 'LowerHandContextualMenuItem' : 'RaiseHandContextualMenuItem';
         drawerMenuItems.push({
             itemKey: 'raiseHandButtonKey',
             disabled: props.disableButtonsForHoldScreen || isDisabled(drawerSelectionOptions.raiseHandButton),
-            text: raiseHandButtonProps.checked
-                ? localeStrings.component.strings.raiseHandButton.onLabel
-                : localeStrings.component.strings.raiseHandButton.offLabel,
+            text: raiseHandButtonProps.checked ? localeStrings.component.strings.raiseHandButton.onLabel : localeStrings.component.strings.raiseHandButton.offLabel,
             onItemClick: () => {
                 if (raiseHandButtonProps.onToggleRaiseHand) {
                     raiseHandButtonProps.onToggleRaiseHand();
@@ -253,16 +260,17 @@ export const MoreDrawer = (props) => {
             },
             iconProps: {
                 iconName: raiseHandIcon,
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
     }
     const isTeamsMeeting = getIsTeamsMeeting(callAdapter.getState());
     const teamsMeetingCoordinates = getTeamsMeetingCoordinates(callAdapter.getState());
-    if (drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.teamsMeetingPhoneCallButton) &&
-        isTeamsMeeting &&
-        teamsMeetingCoordinates) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.teamsMeetingPhoneCallButton) && isTeamsMeeting && teamsMeetingCoordinates) {
         drawerMenuItems.push({
             itemKey: 'phoneCallInfoKey',
             disabled: isDisabled(drawerSelectionOptions.teamsMeetingPhoneCallButton),
@@ -274,7 +282,11 @@ export const MoreDrawer = (props) => {
             },
             iconProps: {
                 iconName: 'PhoneNumberButton',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
     }
@@ -286,8 +298,8 @@ export const MoreDrawer = (props) => {
     const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = useState(false);
     const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = useState(false);
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = useState((_f = captionSettingsProp.currentSpokenLanguage) !== null && _f !== void 0 ? _f : 'en-us');
-    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState((_g = captionSettingsProp.currentCaptionLanguage) !== null && _g !== void 0 ? _g : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = useState((_e = captionSettingsProp.currentSpokenLanguage) !== null && _e !== void 0 ? _e : 'en-us');
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState((_f = captionSettingsProp.currentCaptionLanguage) !== null && _f !== void 0 ? _f : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     const onToggleChange = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonProps.onStartCaptions({
@@ -300,30 +312,32 @@ export const MoreDrawer = (props) => {
     }), [captionSettingsProp.isCaptionsFeatureActive, startCaptionsButtonProps, currentSpokenLanguage]);
     if (showCaptionsButton) {
         const captionsDrawerItems = [];
-        const spokenLanguageString = supportedSpokenLanguageStrings
-            ? supportedSpokenLanguageStrings[currentSpokenLanguage]
-            : currentSpokenLanguage;
+        const spokenLanguageString = supportedSpokenLanguageStrings ? supportedSpokenLanguageStrings[currentSpokenLanguage] : currentSpokenLanguage;
         drawerMenuItems.push({
             itemKey: 'captions',
             id: 'common-call-composite-captions-button',
             disabled: props.disableButtonsForHoldScreen,
             text: props.strings.captionsMenuTitle,
-            iconProps: { iconName: 'CaptionsIcon' },
+            iconProps: {
+                iconName: 'CaptionsIcon'
+            },
             subMenuProps: captionsDrawerItems
         });
         captionsDrawerItems.push({
             itemKey: 'ToggleCaptionsKey',
-            text: captionSettingsProp.isCaptionsFeatureActive
-                ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
-                : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+            text: captionSettingsProp.isCaptionsFeatureActive ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
             iconProps: {
                 iconName: captionSettingsProp.isCaptionsFeatureActive ? 'CaptionsOffIcon' : 'CaptionsIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             onItemClick: onToggleChange,
             disabled: props.disableButtonsForHoldScreen,
-            secondaryComponent: (React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
-                React.createElement(Toggle, { id: "common-call-composite-captions-toggle-button", checked: captionSettingsProp.isCaptionsFeatureActive, styles: themedToggleButtonStyle(theme, captionSettingsProp.isCaptionsFeatureActive), onChange: onToggleChange })))
+            secondaryComponent: React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
+                React.createElement(Toggle, { id: "common-call-composite-captions-toggle-button", checked: captionSettingsProp.isCaptionsFeatureActive, styles: themedToggleButtonStyle(theme, captionSettingsProp.isCaptionsFeatureActive), onChange: onToggleChange }))
         });
         captionsDrawerItems.push({
             itemKey: 'ChangeSpokenLanguage',
@@ -332,7 +346,11 @@ export const MoreDrawer = (props) => {
             secondaryText: spokenLanguageString,
             iconProps: {
                 iconName: 'ChangeSpokenLanguageIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
             onItemClick: () => {
@@ -340,13 +358,15 @@ export const MoreDrawer = (props) => {
             },
             secondaryIconProps: {
                 iconName: 'ChevronRight',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
         if (props.useTeamsCaptions) {
-            const captionLanguageString = supportedCaptionLanguageStrings
-                ? supportedCaptionLanguageStrings[currentCaptionLanguage]
-                : currentCaptionLanguage;
+            const captionLanguageString = supportedCaptionLanguageStrings ? supportedCaptionLanguageStrings[currentCaptionLanguage] : currentCaptionLanguage;
             captionsDrawerItems.push({
                 itemKey: 'ChangeCaptionLanguage',
                 text: props.strings.captionLanguageMenuTitle,
@@ -354,7 +374,11 @@ export const MoreDrawer = (props) => {
                 secondaryText: captionLanguageString,
                 iconProps: {
                     iconName: 'ChangeCaptionLanguageIcon',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
                 disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
                 onItemClick: () => {
@@ -362,25 +386,33 @@ export const MoreDrawer = (props) => {
                 },
                 secondaryIconProps: {
                     iconName: 'ChevronRight',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 }
             });
         }
     }
     const customDrawerButtons = useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
-    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
+    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach(element => {
         drawerMenuItems.push(element);
     });
-    customDrawerButtons['secondary'].forEach((element) => {
+    customDrawerButtons['secondary'].forEach(element => {
         drawerMenuItems.push(element);
     });
-    customDrawerButtons['overflow'].forEach((element) => {
+    customDrawerButtons['overflow'].forEach(element => {
         drawerMenuItems.push(element);
     });
-    return (React.createElement(React.Fragment, null,
-        isSpokenLanguageDrawerOpen && showCaptionsButton && (React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsProp.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
-        isCaptionLanguageDrawerOpen && showCaptionsButton && (React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsProp.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: { menuTitle: props.strings.captionLanguageMenuTitle }, supportedLanguageStrings: supportedCaptionLanguageStrings })),
-        !isSpokenLanguageDrawerOpen && !isCaptionLanguageDrawerOpen && (React.createElement(DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss }))));
+    return React.createElement(React.Fragment, null,
+        isSpokenLanguageDrawerOpen && showCaptionsButton && React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsProp.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: {
+                menuTitle: props.strings.spokenLanguageMenuTitle
+            }, supportedLanguageStrings: supportedSpokenLanguageStrings }),
+        isCaptionLanguageDrawerOpen && showCaptionsButton && React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsProp.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: {
+                menuTitle: props.strings.captionLanguageMenuTitle
+            }, supportedLanguageStrings: supportedCaptionLanguageStrings }),
+        !isSpokenLanguageDrawerOpen && !isCaptionLanguageDrawerOpen && React.createElement(DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss }));
 };
 const isDeviceSelected = (speaker, selectedSpeaker) => !!selectedSpeaker && speaker.id === selectedSpeaker.id;
 const isEnabled = (option) => option !== false;