@azure/communication-react 1.25.0 → 1.26.0-alpha-202503260017

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js

@@ -35,7 +35,9 @@ export const MicrophoneButton = (props) => {
     // no mics but there are speakers, then only the primary part of the button should be disabled to allow for
     // speaker change.
     const primaryDisabled = props.primaryDisabled || (isSplit && !((_b = props.microphones) === null || _b === void 0 ? void 0 : _b.length) ? true : undefined);
-    const disabled = props.disabled || isSplit && !((_c = props.microphones) === null || _c === void 0 ? void 0 : _c.length) && !((_d = props.speakers) === null || _d === void 0 ? void 0 : _d.length) || !isSplit && props.microphones && ((_e = props.microphones) === null || _e === void 0 ? void 0 : _e.length) === 0;
+    const disabled = props.disabled ||
+        (isSplit && !((_c = props.microphones) === null || _c === void 0 ? void 0 : _c.length) && !((_d = props.speakers) === null || _d === void 0 ? void 0 : _d.length)) ||
+        (!isSplit && props.microphones && ((_e = props.microphones) === null || _e === void 0 ? void 0 : _e.length) === 0);
     const onRenderMicOnIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
     };
@@ -55,7 +57,8 @@ export const MicrophoneButton = (props) => {
                 toggleAnnouncerString(!isMicOn);
                 // eslint-disable-next-line no-empty
             }
-            finally { }
+            finally {
+            }
         }
     }), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
     const deepNoiseSuppressionToggleStyles = {
@@ -65,21 +68,21 @@ export const MicrophoneButton = (props) => {
             flexFlow: 'row-reverse',
             justifyContent: 'space-between'
         },
-        label: {
-            fontWeight: 400
-        }
+        label: { fontWeight: 400 }
     };
     const splitButtonMenuItems = [];
     if (props.showNoiseSuppressionButton) {
         splitButtonMenuItems.push({
             key: 'microphoneDNSToggle',
             onRender: () => {
-                return React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                return (React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                         var _a;
                         yield ((_a = props.onClickNoiseSuppression) === null || _a === void 0 ? void 0 : _a.call(props));
-                        setAnnouncerString(props.isDeepNoiseSuppressionOn ? strings.deepNoiseSuppressionOnAnnouncement : strings.deepNoiseSuppressionOffAnnouncement);
+                        setAnnouncerString(props.isDeepNoiseSuppressionOn
+                            ? strings.deepNoiseSuppressionOnAnnouncement
+                            : strings.deepNoiseSuppressionOffAnnouncement);
                     }) },
-                    React.createElement(Toggle, { label: strings.deepNoiseSuppressionTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles }));
+                    React.createElement(Toggle, { label: strings.deepNoiseSuppressionTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
             }
         });
     }
@@ -91,11 +94,7 @@ export const MicrophoneButton = (props) => {
         },
         iconProps: {
             iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         }
     });
     /**
@@ -111,10 +110,10 @@ export const MicrophoneButton = (props) => {
             items: splitButtonMenuItems
         }
     };
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         announcerPresent && React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_f = props.onRenderOnIcon) !== null && _f !== void 0 ? _f : onRenderMicOnIcon, onRenderOffIcon: (_g = props.onRenderOffIcon) !== null && _g !== void 0 ? _g : onRenderMicOffIcon, strings: strings, labelKey: (_h = props.labelKey) !== null && _h !== void 0 ? _h : 'microphoneButtonLabel', menuProps: (_j = props.menuProps) !== null && _j !== void 0 ? _j : (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_k = props.styles) === null || _k === void 0 ? void 0 : _k.menuStyles }), strings, splitButtonPrimaryAction) : undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? {
-                hidden: true
-            } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, "aria-description": strings.microphoneAriaDescription, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled, onFocus: () => setAnnouncerPresent(true), onBlur: () => setAnnouncerPresent(false) })));
+        React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_f = props.onRenderOnIcon) !== null && _f !== void 0 ? _f : onRenderMicOnIcon, onRenderOffIcon: (_g = props.onRenderOffIcon) !== null && _g !== void 0 ? _g : onRenderMicOffIcon, strings: strings, labelKey: (_h = props.labelKey) !== null && _h !== void 0 ? _h : 'microphoneButtonLabel', menuProps: (_j = props.menuProps) !== null && _j !== void 0 ? _j : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_k = props.styles) === null || _k === void 0 ? void 0 : _k.menuStyles }), strings, splitButtonPrimaryAction)
+                : undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, "aria-description": strings.microphoneAriaDescription, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled, onFocus: () => setAnnouncerPresent(true), onBlur: () => setAnnouncerPresent(false) }))));
 };
 //# sourceMappingURL=MicrophoneButton.js.map

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { ContextualMenuItemType, IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles, Toggle, Stack, IStyleFunctionOrObject, IToggleStyleProps, IToggleStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/**\n * Strings of {@link MicrophoneButton} that can be overridden.\n *\n * @public\n */\nexport interface MicrophoneButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip?: string;\n  /**\n   * Description of microphone button split button role\n   */\n  microphoneButtonSplitRoleDescription?: string;\n  /**\n   * Microphone split button aria label when mic is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Microphone split button aria label when mic is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Microphone action turned on string for announcer\n   */\n  microphoneActionTurnedOnAnnouncement?: string;\n  /**\n   * Microphone action turned off string for announcer\n   */\n  microphoneActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for the microphone when microphone is live.\n   */\n  onSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Primary action for the microphone when the microphone is muted.\n   */\n  offSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  microphonePrimaryActionSplitButtonTitle?: string;\n  /**\n   * Aria description for the microphone button\n   */\n  microphoneAriaDescription?: string;\n  /**\n   * Title for deep noise suppression button\n   */\n  deepNoiseSuppressionTitle?: string;\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppressionOnAnnouncement?: string;\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppressionOffAnnouncement?: string;\n}\n\n/**\n * Styles for {@link MicrophoneButton}\n *\n * @public\n */\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link MicrophoneButton} menu.\n   */\n  menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link MicrophoneButton} menu.\n *\n * @public\n */\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link MicrophoneButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Props for {@link MicrophoneButton}.\n *\n * @public\n */\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleMicrophone?: () => Promise<void>;\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<MicrophoneButtonStrings>;\n  /**\n   * Styles for {@link MicrophoneButton} and the device selection flyout.\n   */\n  styles?: Partial<MicrophoneButtonStyles>;\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\n  /**\n   * Show/Hide the deep noise suppression button\n   */\n  showNoiseSuppressionButton?: boolean;\n}\n\n/**\n * A button to turn microphone on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n  const {\n    onToggleMicrophone\n  } = props;\n  const localeStrings = useLocale().strings.microphoneButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);\n  const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n  // The button should be disabled when there are no mics. However if the button is a split button, if there are\n  // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n  // speaker change.\n  const primaryDisabled = props.primaryDisabled || (isSplit && !props.microphones?.length ? true : undefined);\n  const disabled = props.disabled || isSplit && !props.microphones?.length && !props.speakers?.length || !isSplit && props.microphones && props.microphones?.length === 0;\n  const onRenderMicOnIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n  };\n  const onRenderMicOffIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n  };\n  const isMicOn = props.checked;\n  const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n  const toggleAnnouncerString = useCallback((isMicOn: boolean) => {\n    setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);\n  }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);\n  const onToggleClick = useCallback(async () => {\n    if (onToggleMicrophone) {\n      try {\n        await onToggleMicrophone();\n        // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n        toggleAnnouncerString(!isMicOn);\n        // eslint-disable-next-line no-empty\n      } finally {}\n    }\n  }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n  const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n    root: {\n      margin: '4px',\n      padding: '0px 12px',\n      flexFlow: 'row-reverse',\n      justifyContent: 'space-between'\n    },\n    label: {\n      fontWeight: 400\n    }\n  };\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  if (props.showNoiseSuppressionButton) {\n    splitButtonMenuItems.push({\n      key: 'microphoneDNSToggle',\n      onRender: () => {\n        return <Stack onClick={async () => {\n          await props.onClickNoiseSuppression?.();\n          setAnnouncerString(props.isDeepNoiseSuppressionOn ? strings.deepNoiseSuppressionOnAnnouncement : strings.deepNoiseSuppressionOffAnnouncement);\n        }}>\n            <Toggle label={strings.deepNoiseSuppressionTitle} checked={props.isDeepNoiseSuppressionOn} inlineLabel styles={deepNoiseSuppressionToggleStyles} />\n          </Stack>;\n      }\n    });\n  }\n  splitButtonMenuItems.push({\n    key: 'microphonePrimaryAction',\n    text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    }\n  });\n\n  /**\n   * We need to also include the primary action of the button to the\n   * split button for mobile devices.\n   */\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle mic',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n  return <>\n      {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}\n      <ControlBarButton {...props} onClick={props.onToggleMicrophone ? onToggleClick : props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon} strings={strings} labelKey={props.labelKey ?? 'microphoneButtonLabel'} menuProps={props.menuProps ?? (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps({\n      ...props,\n      styles: props.styles?.menuStyles\n    }, strings, splitButtonPrimaryAction) : undefined)} menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? {\n      hidden: true\n    } : undefined} split={props.split ?? props.enableDeviceSelectionMenu} aria-roledescription={props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined} aria-description={strings.microphoneAriaDescription} splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined} disabled={disabled} primaryDisabled={primaryDisabled} onFocus={() => setAnnouncerPresent(true)} onBlur={() => setAnnouncerPresent(false)} />\n    </>;\n};"]}
+{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles,\n  Toggle,\n  Stack,\n  IStyleFunctionOrObject,\n  IToggleStyleProps,\n  IToggleStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/**\n * Strings of {@link MicrophoneButton} that can be overridden.\n *\n * @public\n */\nexport interface MicrophoneButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip?: string;\n  /**\n   * Description of microphone button split button role\n   */\n  microphoneButtonSplitRoleDescription?: string;\n  /**\n   * Microphone split button aria label when mic is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Microphone split button aria label when mic is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Microphone action turned on string for announcer\n   */\n  microphoneActionTurnedOnAnnouncement?: string;\n  /**\n   * Microphone action turned off string for announcer\n   */\n  microphoneActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for the microphone when microphone is live.\n   */\n  onSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Primary action for the microphone when the microphone is muted.\n   */\n  offSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  microphonePrimaryActionSplitButtonTitle?: string;\n  /**\n   * Aria description for the microphone button\n   */\n  microphoneAriaDescription?: string;\n  /**\n   * Title for deep noise suppression button\n   */\n  deepNoiseSuppressionTitle?: string;\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppressionOnAnnouncement?: string;\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppressionOffAnnouncement?: string;\n}\n\n/**\n * Styles for {@link MicrophoneButton}\n *\n * @public\n */\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link MicrophoneButton} menu.\n   */\n  menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link MicrophoneButton} menu.\n *\n * @public\n */\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link MicrophoneButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Props for {@link MicrophoneButton}.\n *\n * @public\n */\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleMicrophone?: () => Promise<void>;\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<MicrophoneButtonStrings>;\n  /**\n   * Styles for {@link MicrophoneButton} and the device selection flyout.\n   */\n  styles?: Partial<MicrophoneButtonStyles>;\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\n  /**\n   * Show/Hide the deep noise suppression button\n   */\n  showNoiseSuppressionButton?: boolean;\n}\n\n/**\n * A button to turn microphone on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n  const { onToggleMicrophone } = props;\n  const localeStrings = useLocale().strings.microphoneButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);\n\n  const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n  // The button should be disabled when there are no mics. However if the button is a split button, if there are\n  // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n  // speaker change.\n  const primaryDisabled = props.primaryDisabled || (isSplit && !props.microphones?.length ? true : undefined);\n  const disabled =\n    props.disabled ||\n    (isSplit && !props.microphones?.length && !props.speakers?.length) ||\n    (!isSplit && props.microphones && props.microphones?.length === 0);\n\n  const onRenderMicOnIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n  };\n  const onRenderMicOffIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n  };\n\n  const isMicOn = props.checked;\n\n  const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isMicOn: boolean) => {\n      setAnnouncerString(\n        !isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement\n      );\n    },\n    [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    if (onToggleMicrophone) {\n      try {\n        await onToggleMicrophone();\n        // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n        toggleAnnouncerString(!isMicOn);\n        // eslint-disable-next-line no-empty\n      } finally {\n      }\n    }\n  }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n\n  const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n    root: {\n      margin: '4px',\n      padding: '0px 12px',\n      flexFlow: 'row-reverse',\n      justifyContent: 'space-between'\n    },\n    label: { fontWeight: 400 }\n  };\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n  if (props.showNoiseSuppressionButton) {\n    splitButtonMenuItems.push({\n      key: 'microphoneDNSToggle',\n      onRender: () => {\n        return (\n          <Stack\n            onClick={async () => {\n              await props.onClickNoiseSuppression?.();\n              setAnnouncerString(\n                props.isDeepNoiseSuppressionOn\n                  ? strings.deepNoiseSuppressionOnAnnouncement\n                  : strings.deepNoiseSuppressionOffAnnouncement\n              );\n            }}\n          >\n            <Toggle\n              label={strings.deepNoiseSuppressionTitle}\n              checked={props.isDeepNoiseSuppressionOn}\n              inlineLabel\n              styles={deepNoiseSuppressionToggleStyles}\n            />\n          </Stack>\n        );\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'microphonePrimaryAction',\n    text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  /**\n   * We need to also include the primary action of the button to the\n   * split button for mobile devices.\n   */\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle mic',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  return (\n    <>\n      {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}\n      <ControlBarButton\n        {...props}\n        onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'microphoneButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={\n          props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined\n        }\n        aria-description={strings.microphoneAriaDescription}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        disabled={disabled}\n        primaryDisabled={primaryDisabled}\n        onFocus={() => setAnnouncerPresent(true)}\n        onBlur={() => setAnnouncerPresent(false)}\n      />\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ModalClone/ModalClone.js

@@ -9,10 +9,7 @@ import * as React from 'react';
 import { useBoolean, useMergedRefs, useConst, useSetTimeout, useId, useUnmount } from '@fluentui/react-hooks';
 import { allowOverscrollOnElement, allowScrollOnElement, AnimationVariables, classNamesFunction, DirectionalHint, elementContains, EventGroup, FocusTrapZone, getGlobalClassNames, getPropsWithDefaults, Icon, KeyCodes, Layer, memoizeFunction, mergeStyles, on, Overlay, Popup, ResponsiveMode, styled, useResponsiveMode, ZIndexes } from '@fluentui/react';
 const animationDuration = AnimationVariables.durationValue2;
-const ZERO = {
-    x: 0,
-    y: 0
-};
+const ZERO = { x: 0, y: 0 };
 const DEFAULT_PROPS = {
     isOpen: false,
     isDarkOverlay: true,
@@ -59,7 +56,7 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
     const [modalRectangleTop, setModalRectangleTop] = React.useState();
     const [isModalMenuOpen, { setTrue: setModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);
     const [_, forceUpdate] = React.useState(0);
-    const forceUpdateCallback = React.useCallback(() => forceUpdate(prev => prev + 1), []);
+    const forceUpdateCallback = React.useCallback(() => forceUpdate((prev) => prev + 1), []);
     const internalState = useConst(() => ({
         onModalCloseTimer: 0,
         allowTouchBodyScroll,
@@ -111,14 +108,8 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
             }
             if (keepInBounds) {
                 // x/y are unavailable in IE, so use the equivalent left/top
-                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : {
-                    x: -modalRectangle.left,
-                    y: -modalRectangle.top
-                };
-                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : {
-                    x: modalRectangle.left,
-                    y: modalRectangle.top
-                };
+                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : { x: -modalRectangle.left, y: -modalRectangle.top };
+                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : { x: modalRectangle.left, y: modalRectangle.top };
                 // Make sure the initial co-ordinates are within clamp bounds.
                 setCoordinates({
                     x: getClampedAxis('x', coordinates.x),
@@ -158,7 +149,7 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
     const handleDrag = React.useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (ev, dragData) => {
-        setCoordinates(prevValue => ({
+        setCoordinates((prevValue) => ({
             x: getClampedAxis('x', prevValue.x + dragData.delta.x),
             y: getClampedAxis('y', prevValue.y + dragData.delta.y)
         }));
@@ -196,50 +187,32 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
                     /* eslint-disable no-fallthrough */
                     case KeyCodes.escape:
                         setCoordinates(internalState.lastSetCoordinates);
-                    case KeyCodes.enter:
-                        {
-                            // TODO: determine if fallthrough was intentional
-                            /* eslint-enable no-fallthrough */
-                            internalState.lastSetCoordinates = ZERO;
-                            // setIsInKeyboardMoveMode(false);
-                            break;
-                        }
-                    case KeyCodes.up:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: prevValue.x,
-                                y: getClampedAxis('y', prevValue.y - delta)
-                            }));
-                            break;
-                        }
-                    case KeyCodes.down:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: prevValue.x,
-                                y: getClampedAxis('y', prevValue.y + delta)
-                            }));
-                            break;
-                        }
-                    case KeyCodes.left:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: getClampedAxis('x', prevValue.x - delta),
-                                y: prevValue.y
-                            }));
-                            break;
-                        }
-                    case KeyCodes.right:
-                        {
-                            setCoordinates(prevValue => ({
-                                x: getClampedAxis('x', prevValue.x + delta),
-                                y: prevValue.y
-                            }));
-                            break;
-                        }
-                    default:
-                        {
-                            handledEvent = false;
-                        }
+                    case KeyCodes.enter: {
+                        // TODO: determine if fallthrough was intentional
+                        /* eslint-enable no-fallthrough */
+                        internalState.lastSetCoordinates = ZERO;
+                        // setIsInKeyboardMoveMode(false);
+                        break;
+                    }
+                    case KeyCodes.up: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));
+                        break;
+                    }
+                    case KeyCodes.down: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));
+                        break;
+                    }
+                    case KeyCodes.left: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));
+                        break;
+                    }
+                    case KeyCodes.right: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));
+                        break;
+                    }
+                    default: {
+                        handledEvent = false;
+                    }
                 }
                 if (handledEvent) {
                     ev.preventDefault();
@@ -308,28 +281,24 @@ const ModalBase = React.forwardRef((propsWithoutDefaults, ref) => {
         internalState.events.dispose();
     });
     useComponentRef(props, focusTrapZone);
-    const modalContent = React.createElement(FocusTrapZone, Object.assign({ disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, "data-ui-id": dataUiId }, (_a = props.focusTrapZoneProps) !== null && _a !== void 0 ? _a : {}),
-        dragOptions && internalState.isInKeyboardMoveMode && React.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? React.createElement(Icon, Object.assign({}, dragOptions.keyboardMoveIconProps)) : React.createElement(Icon, { iconName: "move", className: classNames.keyboardMoveIcon })),
+    const modalContent = (React.createElement(FocusTrapZone, Object.assign({ disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, "data-ui-id": dataUiId }, ((_a = props.focusTrapZoneProps) !== null && _a !== void 0 ? _a : {})),
+        dragOptions && internalState.isInKeyboardMoveMode && (React.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React.createElement(Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React.createElement(Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
         React.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
-            dragOptions && isModalMenuOpen && React.createElement(dragOptions.menu, { items: [{
-                        key: 'move',
-                        text: dragOptions.moveMenuItemText,
-                        onClick: handleEnterKeyboardMoveMode
-                    }, {
-                        key: 'close',
-                        text: dragOptions.closeMenuItemText,
-                        onClick: handleModalClose
-                    }], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent }),
-            children));
+            dragOptions && isModalMenuOpen && (React.createElement(dragOptions.menu, { items: [
+                    { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },
+                    { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }
+                ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),
+            children)));
     return (
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && React.createElement(Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
+    (isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && (React.createElement(Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
         React.createElement(Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, 
             // onDismiss={onDismiss}
             shouldRestoreFocus: !ignoreExternalFocusing, "aria-modal": !isModeless },
             React.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
-                !isModeless && React.createElement(Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay)),
-                dragOptions ? React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent) : modalContent))) || null);
+                !isModeless && (React.createElement(Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),
+                dragOptions ? (React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||
+        null);
 });
 ModalBase.displayName = 'ModalBase';
 const getDraggableZoneClassNames = memoizeFunction((className, isDragging) => {
@@ -400,7 +369,9 @@ class DraggableZone extends React.Component {
             }
             // If the target doesn't match the handleSelector OR
             // if the target does match the preventDragSelector, bail out
-            if (this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector) || this.props.preventDragSelector && this._matchesSelector(event.target, this.props.preventDragSelector)) {
+            if ((this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector)) ||
+                (this.props.preventDragSelector &&
+                    this._matchesSelector(event.target, this.props.preventDragSelector))) {
                 return;
             }
             // Remember the touch identifier if this is a touch event so we can
@@ -419,7 +390,10 @@ class DraggableZone extends React.Component {
             });
             // hook up the appropriate mouse/touch events to the body to ensure
             // smooth dragging
-            this._events = [on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */), on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)];
+            this._events = [
+                on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),
+                on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)
+            ];
             return;
         };
         this._onDrag = (event) => {
@@ -461,26 +435,21 @@ class DraggableZone extends React.Component {
                 });
             }
             // Remove event handlers
-            this._events.forEach(dispose => dispose());
+            this._events.forEach((dispose) => dispose());
         };
         this.state = {
             isDragging: false,
-            position: this.props.position || {
-                x: 0,
-                y: 0
-            },
+            position: this.props.position || { x: 0, y: 0 },
             lastPosition: undefined
         };
     }
     componentDidUpdate(prevProps) {
         if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {
-            this.setState({
-                position: this.props.position
-            });
+            this.setState({ position: this.props.position });
         }
     }
     componentWillUnmount() {
-        this._events.forEach(dispose => dispose());
+        this._events.forEach((dispose) => dispose());
     }
     render() {
         const child = React.Children.only(this.props.children);
@@ -523,14 +492,15 @@ class DraggableZone extends React.Component {
      * @param event - The event used to get the TouchList for the active touch point
      */
     _getActiveTouch(event) {
-        return event.targetTouches && this._findTouchInTouchList(event.targetTouches) || event.changedTouches && this._findTouchInTouchList(event.changedTouches);
+        return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||
+            (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));
     }
     /**
      * Get the initial touch identifier associated with the given event
      * @param event - The event that contains the TouchList
      */
     _getTouchId(event) {
-        const touch = event.targetTouches && event.targetTouches[0] || event.changedTouches && event.changedTouches[0];
+        const touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);
         if (touch) {
             return touch.identifier;
         }
@@ -576,10 +546,7 @@ class DraggableZone extends React.Component {
         // for last position
         if (lastPosition === undefined) {
             return {
-                delta: {
-                    x: 0,
-                    y: 0
-                },
+                delta: { x: 0, y: 0 },
                 lastPosition: position,
                 position
             };
@@ -621,7 +588,10 @@ const getStyles = (props) => {
     const { palette, effects, fonts } = theme;
     const classNames = getGlobalClassNames(globalClassNames, theme);
     return {
-        root: [classNames.root, fonts.medium, {
+        root: [
+            classNames.root,
+            fonts.medium,
+            {
                 backgroundColor: 'transparent',
                 position: isModeless ? 'absolute' : 'fixed',
                 height: '100%',
@@ -632,13 +602,22 @@ const getStyles = (props) => {
                 opacity: 0,
                 pointerEvents: 'none',
                 transition: `opacity ${animationDuration}`
-            }, topOffsetFixed && typeof modalRectangleTop === 'number' && hasBeenOpened && {
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
                 alignItems: 'flex-start'
-            }, isOpen && classNames.isOpen, isVisible && {
+            },
+            isOpen && classNames.isOpen,
+            isVisible && {
                 opacity: 1,
                 pointerEvents: 'auto'
-            }, className],
-        main: [classNames.main, {
+            },
+            className
+        ],
+        main: [
+            classNames.main,
+            {
                 boxShadow: effects.elevation64,
                 borderRadius: effects.roundedCorner2,
                 backgroundColor: palette.white,
@@ -652,12 +631,20 @@ const getStyles = (props) => {
                 minWidth: '288px',
                 overflowY: 'auto',
                 zIndex: isModeless ? ZIndexes.Layer : undefined
-            }, topOffsetFixed && typeof modalRectangleTop === 'number' && hasBeenOpened && {
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
                 top: modalRectangleTop
-            }, isDefaultDragHandle && {
+            },
+            isDefaultDragHandle && {
                 cursor: 'move'
-            }, containerClassName],
-        scrollableContent: [classNames.scrollableContent, {
+            },
+            containerClassName
+        ],
+        scrollableContent: [
+            classNames.scrollableContent,
+            {
                 overflowY: 'auto',
                 flexGrow: 1,
                 maxHeight: '100vh',
@@ -666,12 +653,18 @@ const getStyles = (props) => {
                         maxHeight: windowInnerHeight
                     }
                 }
-            }, scrollableContentClassName],
-        layer: isModeless && [layerClassName, classNames.layer, {
+            },
+            scrollableContentClassName
+        ],
+        layer: isModeless && [
+            layerClassName,
+            classNames.layer,
+            {
                 position: 'static',
                 width: 'unset',
                 height: 'unset'
-            }],
+            }
+        ],
         keyboardMoveIconContainer: {
             position: 'absolute',
             display: 'flex',