@azure/communication-react 1.19.0-alpha-202408300015 → 1.19.0-alpha-202408310015

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DQfE9Pq_.js');
+var index = require('./index-BlcqeOUw.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.19.0-alpha-202408300015';
+module.exports = '1.19.0-alpha-202408310015';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.19.0-alpha-202408300015';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.19.0-alpha-202408310015';\n"]}

package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js

@@ -12,12 +12,12 @@ import { getLocalParticipantRaisedHand } from './baseSelectors';
  *
  * @public
  */
-export const microphoneButtonSelector = reselect.createSelector([getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole], (callExists, isMuted, deviceManager, capabilities, role) => {
+export const microphoneButtonSelector = reselect.createSelector([getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole, getCallState], (callExists, isMuted, deviceManager, capabilities, role, callState) => {
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !callExists || !permission || incapable,
+        disabled: !callExists || !permission || incapable || callState === 'LocalHold',
         checked: callExists ? !isMuted : false,
         microphones: deviceManager.microphones,
         speakers: deviceManager.speakers,
@@ -30,14 +30,18 @@ export const microphoneButtonSelector = reselect.createSelector([getCallExists,
  *
  * @public
  */
-export const cameraButtonSelector = reselect.createSelector([getLocalVideoStreams, getDeviceManager, getCapabilities, getRole], (localVideoStreams, deviceManager, capabilities, role) => {
+export const cameraButtonSelector = reselect.createSelector([getLocalVideoStreams, getDeviceManager, getCapabilities, getRole, getCallState], (localVideoStreams, deviceManager, capabilities, role, callState) => {
     const previewOn = _isPreviewOn(deviceManager);
     const localVideoFromCall = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !deviceManager.selectedCamera || !permission || !deviceManager.cameras.length || incapable,
+        disabled: !deviceManager.selectedCamera ||
+            !permission ||
+            !deviceManager.cameras.length ||
+            incapable ||
+            callState === 'LocalHold',
         checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
         cameras: deviceManager.cameras,
         selectedCamera: deviceManager.selectedCamera

package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"callControlSelectors.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/callControlSelectors.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { CallClientState } from '@internal/calling-stateful-client';\nimport * as reselect from 'reselect';\nimport {\n  CallingBaseSelectorProps,\n  getCallExists,\n  getDeviceManager,\n  getIsMuted,\n  getIsScreenSharingOn,\n  getLocalVideoStreams\n} from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\n\nimport { getCapabilities, getRole } from './baseSelectors';\nimport { getCallState } from './baseSelectors';\nimport { _isPreviewOn } from './utils/callUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\n/**\n * Selector type for {@link MicrophoneButton} component.\n *\n * @public\n */\nexport type MicrophoneButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  disabled: boolean;\n  checked: boolean;\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n};\n\n/**\n * Selector for {@link MicrophoneButton} component.\n *\n * @public\n */\nexport const microphoneButtonSelector: MicrophoneButtonSelector = reselect.createSelector(\n  [getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole],\n  (callExists, isMuted, deviceManager, capabilities, role) => {\n    const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;\n\n    const incapable =\n      (capabilities?.unmuteMic.isPresent === false && capabilities?.unmuteMic.reason !== 'NotInitialized') ||\n      role === 'Consumer';\n    return {\n      disabled: !callExists || !permission || incapable,\n      checked: callExists ? !isMuted : false,\n      microphones: deviceManager.microphones,\n      speakers: deviceManager.speakers,\n      selectedMicrophone: deviceManager.selectedMicrophone,\n      selectedSpeaker: deviceManager.selectedSpeaker\n    };\n  }\n);\n\n/**\n * Selector type for {@link CameraButton} component.\n *\n * @public\n */\nexport type CameraButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  disabled: boolean;\n  checked: boolean;\n  cameras: VideoDeviceInfo[];\n  selectedCamera?: VideoDeviceInfo;\n};\n\n/**\n * Selector for {@link CameraButton} component.\n *\n * @public\n */\nexport const cameraButtonSelector: CameraButtonSelector = reselect.createSelector(\n  [getLocalVideoStreams, getDeviceManager, getCapabilities, getRole],\n  (localVideoStreams, deviceManager, capabilities, role) => {\n    const previewOn = _isPreviewOn(deviceManager);\n    const localVideoFromCall = localVideoStreams?.find((stream) => stream.mediaStreamType === 'Video');\n    const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;\n\n    const incapable =\n      (capabilities?.turnVideoOn.isPresent === false && capabilities?.turnVideoOn.reason !== 'NotInitialized') ||\n      role === 'Consumer';\n    return {\n      disabled: !deviceManager.selectedCamera || !permission || !deviceManager.cameras.length || incapable,\n      checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,\n      cameras: deviceManager.cameras,\n      selectedCamera: deviceManager.selectedCamera\n    };\n  }\n);\n\n/**\n * Selector type for {@link ScreenShareButton} component.\n *\n * @public\n */\nexport type ScreenShareButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector type for {@link RaiseHandButton} component.\n *\n * @public\n */\nexport type RaiseHandButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector for {@link RaiseHandButton} component.\n *\n * @public\n */\nexport const raiseHandButtonSelector: RaiseHandButtonSelector = reselect.createSelector(\n  [getLocalParticipantRaisedHand, getCallState],\n  (raisedHand, callState) => {\n    return {\n      checked: raisedHand ? true : false,\n      disabled: callState === 'InLobby' ? true : callState === 'Connecting' ?? false\n    };\n  }\n);\n\n/**\n * Selector type for {@link ReactionButton} component.\n *\n * @public\n */\nexport type ReactionButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector for {@link ReactionButton} component.\n *\n * @public\n */\nexport const reactionButtonSelector: ReactionButtonSelector = reselect.createSelector(\n  [getLocalParticipantReactionState, getCallState],\n  (reaction, callState) => {\n    return {\n      checked: reaction ? true : false,\n      disabled: callState !== 'Connected'\n    };\n  }\n);\n\n/**\n * Selector for {@link ScreenShareButton} component.\n *\n * @public\n */\nexport const screenShareButtonSelector: ScreenShareButtonSelector = reselect.createSelector(\n  [getIsScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ getCallState, getCapabilities, getRole],\n  (isScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ callState, capabilities, role) => {\n    let disabled: boolean | undefined = undefined;\n\n    disabled =\n      disabled ||\n      (capabilities?.shareScreen.isPresent === false && capabilities?.shareScreen.reason !== 'NotInitialized') ||\n      role === 'Consumer' ||\n      role === 'Attendee';\n    /* @conditional-compile-remove(PSTN-calls) */\n    disabled = disabled || ['InLobby', 'Connecting', 'LocalHold'].includes(callState);\n    return {\n      checked: isScreenSharingOn,\n      disabled\n    };\n  }\n);\n\n/**\n * Selector type for {@link DevicesButton} component.\n *\n * @public\n */\nexport type DevicesButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  cameras: VideoDeviceInfo[];\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n  selectedCamera?: VideoDeviceInfo;\n};\n\n/**\n * Selector for {@link DevicesButton} component.\n *\n * @public\n */\nexport const devicesButtonSelector: DevicesButtonSelector = reselect.createSelector(\n  [getDeviceManager],\n  (deviceManager) => {\n    return {\n      microphones: removeBlankNameDevices(deviceManager.microphones),\n      speakers: removeBlankNameDevices(deviceManager.speakers),\n      cameras: removeBlankNameDevices(deviceManager.cameras),\n      selectedMicrophone: deviceManager.selectedMicrophone,\n      selectedSpeaker: deviceManager.selectedSpeaker,\n      selectedCamera: deviceManager.selectedCamera\n    };\n  }\n);\n\nfunction removeBlankNameDevices<T extends { name: string }>(devices: T[]): T[] {\n  return devices.filter((device) => device.name !== '');\n}\n\n/* @conditional-compile-remove(PSTN-calls) */\n/**\n * Selector type for the {@link HoldButton} component.\n * @public\n */\nexport type HoldButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked: boolean;\n};\n\n/* @conditional-compile-remove(PSTN-calls) */\n/**\n * Selector for the {@link HoldButton} component.\n * @public\n */\nexport const holdButtonSelector: HoldButtonSelector = reselect.createSelector([getCallState], (callState) => {\n  return {\n    checked: callState === 'LocalHold'\n  };\n});\n"]}
+{"version":3,"file":"callControlSelectors.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/callControlSelectors.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { CallClientState } from '@internal/calling-stateful-client';\nimport * as reselect from 'reselect';\nimport {\n  CallingBaseSelectorProps,\n  getCallExists,\n  getDeviceManager,\n  getIsMuted,\n  getIsScreenSharingOn,\n  getLocalVideoStreams\n} from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\n\nimport { getCapabilities, getRole } from './baseSelectors';\nimport { getCallState } from './baseSelectors';\nimport { _isPreviewOn } from './utils/callUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\n/**\n * Selector type for {@link MicrophoneButton} component.\n *\n * @public\n */\nexport type MicrophoneButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  disabled: boolean;\n  checked: boolean;\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n};\n\n/**\n * Selector for {@link MicrophoneButton} component.\n *\n * @public\n */\nexport const microphoneButtonSelector: MicrophoneButtonSelector = reselect.createSelector(\n  [getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole, getCallState],\n  (callExists, isMuted, deviceManager, capabilities, role, callState) => {\n    const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;\n\n    const incapable =\n      (capabilities?.unmuteMic.isPresent === false && capabilities?.unmuteMic.reason !== 'NotInitialized') ||\n      role === 'Consumer';\n    return {\n      disabled: !callExists || !permission || incapable || callState === 'LocalHold',\n      checked: callExists ? !isMuted : false,\n      microphones: deviceManager.microphones,\n      speakers: deviceManager.speakers,\n      selectedMicrophone: deviceManager.selectedMicrophone,\n      selectedSpeaker: deviceManager.selectedSpeaker\n    };\n  }\n);\n\n/**\n * Selector type for {@link CameraButton} component.\n *\n * @public\n */\nexport type CameraButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  disabled: boolean;\n  checked: boolean;\n  cameras: VideoDeviceInfo[];\n  selectedCamera?: VideoDeviceInfo;\n};\n\n/**\n * Selector for {@link CameraButton} component.\n *\n * @public\n */\nexport const cameraButtonSelector: CameraButtonSelector = reselect.createSelector(\n  [getLocalVideoStreams, getDeviceManager, getCapabilities, getRole, getCallState],\n  (localVideoStreams, deviceManager, capabilities, role, callState) => {\n    const previewOn = _isPreviewOn(deviceManager);\n    const localVideoFromCall = localVideoStreams?.find((stream) => stream.mediaStreamType === 'Video');\n    const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;\n\n    const incapable =\n      (capabilities?.turnVideoOn.isPresent === false && capabilities?.turnVideoOn.reason !== 'NotInitialized') ||\n      role === 'Consumer';\n    return {\n      disabled:\n        !deviceManager.selectedCamera ||\n        !permission ||\n        !deviceManager.cameras.length ||\n        incapable ||\n        callState === 'LocalHold',\n      checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,\n      cameras: deviceManager.cameras,\n      selectedCamera: deviceManager.selectedCamera\n    };\n  }\n);\n\n/**\n * Selector type for {@link ScreenShareButton} component.\n *\n * @public\n */\nexport type ScreenShareButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector type for {@link RaiseHandButton} component.\n *\n * @public\n */\nexport type RaiseHandButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector for {@link RaiseHandButton} component.\n *\n * @public\n */\nexport const raiseHandButtonSelector: RaiseHandButtonSelector = reselect.createSelector(\n  [getLocalParticipantRaisedHand, getCallState],\n  (raisedHand, callState) => {\n    return {\n      checked: raisedHand ? true : false,\n      disabled: callState === 'InLobby' ? true : callState === 'Connecting' ?? false\n    };\n  }\n);\n\n/**\n * Selector type for {@link ReactionButton} component.\n *\n * @public\n */\nexport type ReactionButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * Selector for {@link ReactionButton} component.\n *\n * @public\n */\nexport const reactionButtonSelector: ReactionButtonSelector = reselect.createSelector(\n  [getLocalParticipantReactionState, getCallState],\n  (reaction, callState) => {\n    return {\n      checked: reaction ? true : false,\n      disabled: callState !== 'Connected'\n    };\n  }\n);\n\n/**\n * Selector for {@link ScreenShareButton} component.\n *\n * @public\n */\nexport const screenShareButtonSelector: ScreenShareButtonSelector = reselect.createSelector(\n  [getIsScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ getCallState, getCapabilities, getRole],\n  (isScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ callState, capabilities, role) => {\n    let disabled: boolean | undefined = undefined;\n\n    disabled =\n      disabled ||\n      (capabilities?.shareScreen.isPresent === false && capabilities?.shareScreen.reason !== 'NotInitialized') ||\n      role === 'Consumer' ||\n      role === 'Attendee';\n    /* @conditional-compile-remove(PSTN-calls) */\n    disabled = disabled || ['InLobby', 'Connecting', 'LocalHold'].includes(callState);\n    return {\n      checked: isScreenSharingOn,\n      disabled\n    };\n  }\n);\n\n/**\n * Selector type for {@link DevicesButton} component.\n *\n * @public\n */\nexport type DevicesButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  cameras: VideoDeviceInfo[];\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n  selectedCamera?: VideoDeviceInfo;\n};\n\n/**\n * Selector for {@link DevicesButton} component.\n *\n * @public\n */\nexport const devicesButtonSelector: DevicesButtonSelector = reselect.createSelector(\n  [getDeviceManager],\n  (deviceManager) => {\n    return {\n      microphones: removeBlankNameDevices(deviceManager.microphones),\n      speakers: removeBlankNameDevices(deviceManager.speakers),\n      cameras: removeBlankNameDevices(deviceManager.cameras),\n      selectedMicrophone: deviceManager.selectedMicrophone,\n      selectedSpeaker: deviceManager.selectedSpeaker,\n      selectedCamera: deviceManager.selectedCamera\n    };\n  }\n);\n\nfunction removeBlankNameDevices<T extends { name: string }>(devices: T[]): T[] {\n  return devices.filter((device) => device.name !== '');\n}\n\n/* @conditional-compile-remove(PSTN-calls) */\n/**\n * Selector type for the {@link HoldButton} component.\n * @public\n */\nexport type HoldButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked: boolean;\n};\n\n/* @conditional-compile-remove(PSTN-calls) */\n/**\n * Selector for the {@link HoldButton} component.\n * @public\n */\nexport const holdButtonSelector: HoldButtonSelector = reselect.createSelector([getCallState], (callState) => {\n  return {\n    checked: callState === 'LocalHold'\n  };\n});\n"]}

package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts

@@ -167,6 +167,10 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
      * Callback when noise suppression is clicked
      */
     onClickNoiseSuppression?: () => void;
+    /**
+     * Show/Hide the deep noise suppression button
+     */
+    showNoiseSuppressionButton?: boolean;
 }
 /**
  * A button to turn microphone on / off.

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

@@ -72,6 +72,36 @@ export const MicrophoneButton = (props) => {
         },
         label: { fontWeight: 400 }
     };
+    const splitButtonMenuItems = [];
+    splitButtonMenuItems.push({
+        key: 'microphonePrimaryAction',
+        text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,
+        onClick: () => {
+            onToggleClick();
+        },
+        iconProps: {
+            iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
+            styles: { root: { lineHeight: 0 } }
+        }
+    });
+    /* @conditional-compile-remove(DNS) */
+    if (props.showNoiseSuppressionButton) {
+        splitButtonMenuItems.push({
+            key: 'microphoneDNSToggle',
+            onRender: () => {
+                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.deepNoiseSuppresionOnAnnouncement
+                            : strings.deepNoiseSuppresionOffAnnouncement);
+                    }) },
+                    React.createElement(Toggle, { label: props.isDeepNoiseSuppressionOn
+                            ? strings.deepNoiseSuppresionOnTitle
+                            : strings.deepNoiseSuppresionOffTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
+            }
+        });
+    }
     /**
      * We need to also include the primary action of the button to the
      * split button for mobile devices.
@@ -82,37 +112,7 @@ export const MicrophoneButton = (props) => {
         itemType: ContextualMenuItemType.Section,
         sectionProps: {
             topDivider: true,
-            items: [
-                {
-                    key: 'microphonePrimaryAction',
-                    text: props.checked
-                        ? strings.onSplitButtonMicrophonePrimaryAction
-                        : strings.offSplitButtonMicrophonePrimaryAction,
-                    onClick: () => {
-                        onToggleClick();
-                    },
-                    iconProps: {
-                        iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
-                        styles: { root: { lineHeight: 0 } }
-                    }
-                },
-                /* @conditional-compile-remove(DNS) */
-                {
-                    key: 'microphoneDNSToggle',
-                    onRender: () => {
-                        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.deepNoiseSuppresionOnAnnouncement
-                                    : strings.deepNoiseSuppresionOffAnnouncement);
-                            }) },
-                            React.createElement(Toggle, { label: props.isDeepNoiseSuppressionOn
-                                    ? strings.deepNoiseSuppresionOnTitle
-                                    : strings.deepNoiseSuppresionOffTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
-                    }
-                }
-            ]
+            items: splitButtonMenuItems
         }
     };
     return (React.createElement(React.Fragment, null,

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

@@ -1 +1 @@
-{"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} from '@fluentui/react';\n/* @conditional-compile-remove(DNS) */\nimport { 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  /* @conditional-compile-remove(DNS) */\n  /**\n   * Title when deep noise suppression is on\n   */\n  deepNoiseSuppresionOnTitle?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Title when deep noise suppression is off\n   */\n  deepNoiseSuppresionOffTitle?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppresionOnAnnouncement?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppresionOffAnnouncement?: 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  /* @conditional-compile-remove(DNS) */\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\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\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  /* @conditional-compile-remove(DNS) */\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  /**\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: [\n        {\n          key: 'microphonePrimaryAction',\n          text: props.checked\n            ? strings.onSplitButtonMicrophonePrimaryAction\n            : strings.offSplitButtonMicrophonePrimaryAction,\n          onClick: () => {\n            onToggleClick();\n          },\n          iconProps: {\n            iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n            styles: { root: { lineHeight: 0 } }\n          }\n        },\n        /* @conditional-compile-remove(DNS) */\n        {\n          key: 'microphoneDNSToggle',\n          onRender: () => {\n            return (\n              <Stack\n                onClick={async () => {\n                  await props.onClickNoiseSuppression?.();\n                  setAnnouncerString(\n                    props.isDeepNoiseSuppressionOn\n                      ? strings.deepNoiseSuppresionOnAnnouncement\n                      : strings.deepNoiseSuppresionOffAnnouncement\n                  );\n                }}\n              >\n                <Toggle\n                  label={\n                    props.isDeepNoiseSuppressionOn\n                      ? strings.deepNoiseSuppresionOnTitle\n                      : strings.deepNoiseSuppresionOffTitle\n                  }\n                  checked={props.isDeepNoiseSuppressionOn}\n                  inlineLabel\n                  styles={deepNoiseSuppressionToggleStyles}\n                />\n              </Stack>\n            );\n          }\n        }\n      ]\n    }\n  };\n\n  return (\n    <>\n      <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      />\n    </>\n  );\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} from '@fluentui/react';\n/* @conditional-compile-remove(DNS) */\nimport { 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  /* @conditional-compile-remove(DNS) */\n  /**\n   * Title when deep noise suppression is on\n   */\n  deepNoiseSuppresionOnTitle?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Title when deep noise suppression is off\n   */\n  deepNoiseSuppresionOffTitle?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppresionOnAnnouncement?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppresionOffAnnouncement?: 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  /* @conditional-compile-remove(DNS) */\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\n  /* @conditional-compile-remove(DNS) */\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\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  /* @conditional-compile-remove(DNS) */\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  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  /* @conditional-compile-remove(DNS) */\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.deepNoiseSuppresionOnAnnouncement\n                  : strings.deepNoiseSuppresionOffAnnouncement\n              );\n            }}\n          >\n            <Toggle\n              label={\n                props.isDeepNoiseSuppressionOn\n                  ? strings.deepNoiseSuppresionOnTitle\n                  : strings.deepNoiseSuppresionOffTitle\n              }\n              checked={props.isDeepNoiseSuppressionOn}\n              inlineLabel\n              styles={deepNoiseSuppressionToggleStyles}\n            />\n          </Stack>\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\n  return (\n    <>\n      <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      />\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js

@@ -15,7 +15,7 @@ export const _VideoEffectsItem = (props) => {
     const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
     const iconContainerStyles = mergeStyles({ height: '1.25rem' }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
-    const textContainerStyles = mergeStyles({ height: '1.25rem' }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
+    const textContainerStyles = mergeStyles({ height: '1.25rem', width: '100%', overflow: 'hidden' }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
     const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
         theme,
         isSelected,
@@ -25,10 +25,10 @@ export const _VideoEffectsItem = (props) => {
     return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
             React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : (_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled },
-                React.createElement(Stack, { horizontalAlign: 'center' },
+                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({ width: '100%' }) },
                     props.iconProps && (React.createElement(Stack.Item, { className: iconContainerStyles },
                         React.createElement(Icon, Object.assign({}, props.iconProps)))),
                     props.title && (React.createElement(Stack.Item, { className: textContainerStyles },
-                        React.createElement(Text, { variant: "small" }, props.title))))))));
+                        React.createElement(Text, { variant: "small", styles: { root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } } }, props.title))))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAE5F,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB;YAEhC,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAC5D,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAkB,mCAAI,KAAK,CAAC,OAAO,mBACvE,KAAK,CAAC,QAAQ;gBAE7B,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ;oBAC7B,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButton,\n  Icon,\n  IIconProps,\n  IStyle,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.textContainer);\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.itemKey}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        data-ui-id={`video-effects-item`}\n      >\n        <DefaultButton\n          styles={containerStyles()}\n          onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n          componentRef={props.componentRef as React.RefObject<IButton>}\n          ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}\n          aria-disabled={props.disabled}\n        >\n          <Stack horizontalAlign={'center'}>\n            {props.iconProps && (\n              <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>\n            )}\n            {props.title && (\n              <Stack.Item className={textContainerStyles}>\n                <Text variant=\"small\">{props.title}</Text>\n              </Stack.Item>\n            )}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,CACrC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACxD,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAC5B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB;YAEhC,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAC5D,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAkB,mCAAI,KAAK,CAAC,OAAO,mBACvE,KAAK,CAAC,QAAQ;gBAE7B,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;oBACxE,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,IACH,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,IAEvF,KAAK,CAAC,KAAK,CACP,CACI,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DefaultButton,\n  IButton,\n  Icon,\n  IIconProps,\n  IStyle,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n\n  /**\n   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n  const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles(\n    { height: '1.25rem', width: '100%', overflow: 'hidden' },\n    props.styles?.textContainer\n  );\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.itemKey}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        data-ui-id={`video-effects-item`}\n      >\n        <DefaultButton\n          styles={containerStyles()}\n          onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n          componentRef={props.componentRef as React.RefObject<IButton>}\n          ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}\n          aria-disabled={props.disabled}\n        >\n          <Stack horizontalAlign={'center'} className={mergeStyles({ width: '100%' })}>\n            {props.iconProps && (\n              <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>\n            )}\n            {props.title && (\n              <Stack.Item className={textContainerStyles}>\n                <Text\n                  variant=\"small\"\n                  styles={{ root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }}\n                >\n                  {props.title}\n                </Text>\n              </Stack.Item>\n            )}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js

@@ -41,7 +41,8 @@ export const videoEffectsItemContainerStyles = (args) => {
                 outline: args.disabled && !args.isSelected
                     ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
                     : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-            }
+            },
+            padding: '0.5rem'
         }
     };
 };

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU;gBACtB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAChF,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;oBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;oBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAC1E;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IButtonStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected\n        ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline:\n          args.disabled && !args.isSelected\n            ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n            : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      }\n    }\n  };\n};\n"]}
+{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU;gBACtB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAChF,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;oBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;oBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAC1E;YACD,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IButtonStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected\n        ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline:\n          args.disabled && !args.isSelected\n            ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n            : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      },\n      padding: '0.5rem'\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js

@@ -59,7 +59,7 @@ export const headerStyle = {
     fontSize: 'inherit',
     margin: '0',
     width: '100%',
-    height: '3.5rem',
+    minHeight: '3.5rem',
     flexDirection: 'row',
     justifyContent: 'space-between',
     padding: '0.25rem 0.75rem'
@@ -70,7 +70,6 @@ export const headerStyle = {
 export const titleBarContainerStyle = {
     flexDirection: 'row',
     justifyContent: 'start',
-    flexWrap: 'wrap',
     alignContent: 'center',
     alignItems: 'center'
 };

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAe;IACtC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAkB,EAAE;;IACnE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,MAAA,KAAK,CAAC,cAAc,0CAAE,cAAc;SACjD;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAwB;IACzD,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAW;IACjC,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,eAAe;IAC/B,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAmB,EAAU,EAAE;;IACxD,OAAO;QACL,WAAW,EAAE,QAAQ;QACrB,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;QAC3B,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,SAAS;KACtB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAW;IAC9C,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAW;IACvC,WAAW,EAAE,OAAO;IACpB,QAAQ,EAAE,UAAU,CAAC,OAAO;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAW;IACnC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,qBAAqB;IAC9B,kDAAkD,EAAE;QAClD,OAAO,EAAE,qBAAqB;KAC/B;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAmB,EAAU,EAAE;;IAC9D,OAAO;QACL,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;KAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAmB,EAAU,EAAE;;IAC/D,OAAO;QACL,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;QAC3B,QAAQ,EAAE;YACR,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;SAC5B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;SAC5B;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAW;IACzC,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,UAAU,EAAE,OAAO;IAC7B,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,QAAQ;IACpB,2BAA2B,EAAE;QAC3B,OAAO,EAAE,MAAM;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAmB,EAAU,EAAE;;IAC/E,OAAO;QACL,WAAW,EAAE,QAAQ;QACrB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;QAC3B,QAAQ,EAAE;YACR,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;SAC5B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;SAC5B;QACD,2BAA2B,EAAE;YAC3B,OAAO,EAAE,MAAM;SAChB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, PartialTheme } from '@fluentui/react';\nimport { IOverlayStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (theme: PartialTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.semanticColors?.bodyBackground\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const themeProviderRootStyle: React.CSSProperties = {\n  background: 'transparent',\n  display: 'flex',\n  flexDirection: 'column'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  height: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: PartialTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.palette?.black,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle: IStyle = {\n  margin: '0 0.5rem',\n  height: '32px',\n  borderWidth: '1px',\n  fontSize: '0.875rem', // 14px\n  fontWeight: 600,\n  padding: '0.38rem 0.75rem',\n  borderRadius: '4px',\n  whiteSpace: 'nowrap',\n  '@media (max-width: 25rem)': {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: PartialTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}
+{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, PartialTheme } from '@fluentui/react';\nimport { IOverlayStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (theme: PartialTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.semanticColors?.bodyBackground\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const themeProviderRootStyle: React.CSSProperties = {\n  background: 'transparent',\n  display: 'flex',\n  flexDirection: 'column'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  minHeight: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: PartialTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.palette?.black,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle: IStyle = {\n  margin: '0 0.5rem',\n  height: '32px',\n  borderWidth: '1px',\n  fontSize: '0.875rem', // 14px\n  fontWeight: 600,\n  padding: '0.38rem 0.75rem',\n  borderRadius: '4px',\n  whiteSpace: 'nowrap',\n  '@media (max-width: 25rem)': {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: PartialTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js

@@ -35,7 +35,7 @@ import { CallingSoundSubscriber } from './CallingSoundSubscriber';
 /** Context of call, which is a centralized context for all state updates */
 class CallContext {
     constructor(clientState, isTeamsCall, isTeamsMeeting, isRoomsCall, options, targetCallees) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         this.emitter = new EventEmitter();
         this.state = {
             isLocalPreviewMicrophoneEnabled: false,
@@ -57,12 +57,16 @@ class CallContext {
             onResolveVideoEffectDependency: (_c = options === null || options === void 0 ? void 0 : options.videoBackgroundOptions) === null || _c === void 0 ? void 0 : _c.onResolveDependency,
             /* @conditional-compile-remove(DNS) */
             onResolveDeepNoiseSuppressionDependency: (_d = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _d === void 0 ? void 0 : _d.onResolveDependency,
+            /* @conditional-compile-remove(DNS) */
+            deepNoiseSuppressionOnByDefault: (_f = (_e = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _e === void 0 ? void 0 : _e.deepNoiseSuppressionOnByDefault) !== null && _f !== void 0 ? _f : false,
+            /* @conditional-compile-remove(DNS) */
+            hideNoiseSuppressionButton: (_h = (_g = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _g === void 0 ? void 0 : _g.hideNoiseSuppressionButton) !== null && _h !== void 0 ? _h : false,
             selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined,
             sounds: options === null || options === void 0 ? void 0 : options.callingSounds,
             reactions: options === null || options === void 0 ? void 0 : options.reactionResources
         };
-        this.emitter.setMaxListeners((_e = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _e !== void 0 ? _e : 50);
+        this.emitter.setMaxListeners((_j = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _j !== void 0 ? _j : 50);
         this.bindPublicMethods();
         this.displayNameModifier = (options === null || options === void 0 ? void 0 : options.onFetchProfile)
             ? createProfileStateModifier(options.onFetchProfile, () => {