@azure/communication-react 1.5.1-alpha-202303110012 → 1.5.1-alpha-202303160014

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.5.1-alpha-202303110012';
+module.exports = '1.5.1-alpha-202303160014';
 //# 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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202303110012';\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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202303160014';\n"]}

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

@@ -88,7 +88,7 @@ export const errorBarSelector = createSelector([getLatestErrors, getDiagnostics,
     }
     else {
         if (((_l = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraFreeze) === null || _l === void 0 ? void 0 : _l.value) === true) {
-            activeErrorMessages.push({ type: 'callCameraAlreadyInUse' });
+            activeErrorMessages.push({ type: 'cameraFrozenForRemoteParticipants' });
         }
     }
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"errorBarSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/errorBarSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  CallingBaseSelectorProps,\n  getDeviceManager,\n  getDiagnostics,\n  getLatestErrors,\n  getEnvironmentInfo\n} from './baseSelectors';\nimport { ActiveErrorMessage, ErrorType } from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport { CallClientState, CallErrors, CallErrorTarget } from '@internal/calling-stateful-client';\nimport { DiagnosticQuality } from '@azure/communication-calling';\n/**\n * Selector type for {@link ErrorBar} component.\n *\n * @public\n */\nexport type ErrorBarSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  activeErrorMessages: ActiveErrorMessage[];\n};\n\n/**\n * Select the first 3 active errors from the state for the `ErrorBar` component.\n *\n * In case there are many errors, only the first three errors are returned to avoid\n * filling up the UI with too many errors.\n *\n * Invariants:\n *   - `ErrorType` is never repeated in the returned errors.\n *   - Errors are returned in a fixed order by `ErrorType`.\n *\n * @public\n */\nexport const errorBarSelector: ErrorBarSelector = createSelector(\n  [getLatestErrors, getDiagnostics, getDeviceManager, getEnvironmentInfo],\n  (\n    latestErrors: CallErrors,\n    diagnostics,\n    deviceManager,\n    environmentInfo\n  ): { activeErrorMessages: ActiveErrorMessage[] } => {\n    // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.\n    // There are several options for the ordering:\n    //   - Sorted by when the errors happened (latest first / oldest first).\n    //   - Stable sort by error type.\n    //\n    // We chose to stable sort by error type: We intend to show only a small number of errors on the UI and we do not\n    // have timestamps for errors.\n    const activeErrorMessages: ActiveErrorMessage[] = [];\n\n    const isSafari = (): boolean => {\n      /* @conditional-compile-remove(calling-environment-info) */\n      return environmentInfo?.environment.browser === 'safari';\n      return /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);\n    };\n\n    const isMacOS = (): boolean => {\n      /* @conditional-compile-remove(calling-environment-info) */\n      return environmentInfo?.environment.platform === 'mac';\n      return false;\n    };\n\n    // Errors reported via diagnostics are more reliable than from API method failures, so process those first.\n    if (\n      diagnostics?.network.latest.networkReceiveQuality?.value === DiagnosticQuality.Bad ||\n      diagnostics?.network.latest.networkReceiveQuality?.value === DiagnosticQuality.Poor\n    ) {\n      activeErrorMessages.push({ type: 'callNetworkQualityLow' });\n    }\n    if (diagnostics?.media.latest.noSpeakerDevicesEnumerated?.value === true) {\n      activeErrorMessages.push({ type: 'callNoSpeakerFound' });\n    }\n    if (diagnostics?.media.latest.noMicrophoneDevicesEnumerated?.value === true) {\n      activeErrorMessages.push({ type: 'callNoMicrophoneFound' });\n    }\n    if (deviceManager.deviceAccess?.audio === false && isSafari()) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDeniedSafari' });\n    }\n    if (deviceManager.deviceAccess?.audio === false && !isSafari()) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });\n    }\n\n    if (diagnostics?.media.latest.microphonePermissionDenied?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsMicrophoneAccessDenied' });\n    } else if (diagnostics?.media.latest.microphonePermissionDenied?.value === true) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });\n    }\n\n    const microphoneMuteUnexpectedlyDiagnostic =\n      diagnostics?.media.latest.microphoneMuteUnexpectedly || diagnostics?.media.latest.microphoneNotFunctioning;\n    if (microphoneMuteUnexpectedlyDiagnostic) {\n      if (microphoneMuteUnexpectedlyDiagnostic.value === DiagnosticQuality.Bad) {\n        // Inform the user that microphone stopped working and inform them to start microphone again\n        activeErrorMessages.push({ type: 'callMicrophoneMutedBySystem' });\n      } else if (microphoneMuteUnexpectedlyDiagnostic.value === DiagnosticQuality.Good) {\n        // Inform the user that microphone recovered\n        activeErrorMessages.push({ type: 'callMicrophoneUnmutedBySystem' });\n      }\n    }\n\n    const cameraStoppedUnexpectedlyDiagnostic = diagnostics?.media.latest.cameraStoppedUnexpectedly;\n    if (cameraStoppedUnexpectedlyDiagnostic) {\n      if (cameraStoppedUnexpectedlyDiagnostic.value === DiagnosticQuality.Bad) {\n        // Inform the user that camera stopped working and inform them to start video again\n        activeErrorMessages.push({ type: 'callVideoStoppedBySystem' });\n      } else if (cameraStoppedUnexpectedlyDiagnostic.value === DiagnosticQuality.Good) {\n        // Inform the user that camera recovered\n        activeErrorMessages.push({ type: 'callVideoRecoveredBySystem' });\n      }\n    }\n    if (deviceManager.deviceAccess?.video === false && isSafari()) {\n      activeErrorMessages.push({ type: 'callCameraAccessDeniedSafari' });\n    } else if (deviceManager.deviceAccess?.video === false) {\n      activeErrorMessages.push({ type: 'callCameraAccessDenied' });\n    } else {\n      if (diagnostics?.media.latest.cameraFreeze?.value === true) {\n        activeErrorMessages.push({ type: 'callCameraAlreadyInUse' });\n      }\n    }\n\n    /**\n     * show the Mac specific strings if the platform is detected as mac\n     */\n    if (diagnostics?.media.latest.cameraPermissionDenied?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsCameraAccessDenied' });\n    }\n\n    /**\n     * This UFD only works on mac still so we should only see it fire on mac.\n     */\n    if (diagnostics?.media.latest.screenshareRecordingDisabled?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsScreenShareAccessDenied' });\n    } else if (diagnostics?.media.latest.screenshareRecordingDisabled?.value === true) {\n      activeErrorMessages.push({ type: 'startScreenSharingGeneric' });\n    }\n\n    // Prefer to show errors with privacy implications.\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopVideo', 'stopVideoGeneric');\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.mute', 'muteGeneric');\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopScreenSharing', 'stopScreenShareGeneric');\n\n    if (\n      latestErrors['Call.startVideo']?.message === 'Call.startVideo: Video operation failure SourceUnavailableError'\n    ) {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'callCameraAlreadyInUse');\n    } else if (\n      latestErrors['Call.startVideo']?.message === 'Call.startVideo: Video operation failure permissionDeniedError'\n    ) {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'callCameraAccessDenied');\n    } else {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'startVideoGeneric');\n    }\n\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.unmute', 'unmuteGeneric');\n\n    if (latestErrors['CallAgent.join']?.message === 'CallAgent.join: Invalid meeting link') {\n      appendActiveErrorIfDefined(\n        activeErrorMessages,\n        latestErrors,\n        'CallAgent.join',\n        'failedToJoinCallInvalidMeetingLink'\n      );\n    } else {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'CallAgent.join', 'failedToJoinCallGeneric');\n    }\n\n    // We only return the first few errors to avoid filling up the UI with too many `MessageBar`s.\n    activeErrorMessages.splice(maxErrorCount);\n    return { activeErrorMessages: activeErrorMessages };\n  }\n);\n\nconst appendActiveErrorIfDefined = (\n  activeErrorMessages: ActiveErrorMessage[],\n  latestErrors: CallErrors,\n  target: CallErrorTarget,\n  activeErrorType: ErrorType\n): void => {\n  if (latestErrors[target] === undefined) {\n    return;\n  }\n  activeErrorMessages.push({\n    type: activeErrorType,\n    timestamp: latestErrors[target].timestamp\n  });\n};\n\nconst maxErrorCount = 3;\n\"../../react-components/src\"\"../../calling-stateful-client/src\""]}
+{"version":3,"file":"errorBarSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/errorBarSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  CallingBaseSelectorProps,\n  getDeviceManager,\n  getDiagnostics,\n  getLatestErrors,\n  getEnvironmentInfo\n} from './baseSelectors';\nimport { ActiveErrorMessage, ErrorType } from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport { CallClientState, CallErrors, CallErrorTarget } from '@internal/calling-stateful-client';\nimport { DiagnosticQuality } from '@azure/communication-calling';\n/**\n * Selector type for {@link ErrorBar} component.\n *\n * @public\n */\nexport type ErrorBarSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  activeErrorMessages: ActiveErrorMessage[];\n};\n\n/**\n * Select the first 3 active errors from the state for the `ErrorBar` component.\n *\n * In case there are many errors, only the first three errors are returned to avoid\n * filling up the UI with too many errors.\n *\n * Invariants:\n *   - `ErrorType` is never repeated in the returned errors.\n *   - Errors are returned in a fixed order by `ErrorType`.\n *\n * @public\n */\nexport const errorBarSelector: ErrorBarSelector = createSelector(\n  [getLatestErrors, getDiagnostics, getDeviceManager, getEnvironmentInfo],\n  (\n    latestErrors: CallErrors,\n    diagnostics,\n    deviceManager,\n    environmentInfo\n  ): { activeErrorMessages: ActiveErrorMessage[] } => {\n    // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.\n    // There are several options for the ordering:\n    //   - Sorted by when the errors happened (latest first / oldest first).\n    //   - Stable sort by error type.\n    //\n    // We chose to stable sort by error type: We intend to show only a small number of errors on the UI and we do not\n    // have timestamps for errors.\n    const activeErrorMessages: ActiveErrorMessage[] = [];\n\n    const isSafari = (): boolean => {\n      /* @conditional-compile-remove(calling-environment-info) */\n      return environmentInfo?.environment.browser === 'safari';\n      return /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);\n    };\n\n    const isMacOS = (): boolean => {\n      /* @conditional-compile-remove(calling-environment-info) */\n      return environmentInfo?.environment.platform === 'mac';\n      return false;\n    };\n\n    // Errors reported via diagnostics are more reliable than from API method failures, so process those first.\n    if (\n      diagnostics?.network.latest.networkReceiveQuality?.value === DiagnosticQuality.Bad ||\n      diagnostics?.network.latest.networkReceiveQuality?.value === DiagnosticQuality.Poor\n    ) {\n      activeErrorMessages.push({ type: 'callNetworkQualityLow' });\n    }\n    if (diagnostics?.media.latest.noSpeakerDevicesEnumerated?.value === true) {\n      activeErrorMessages.push({ type: 'callNoSpeakerFound' });\n    }\n    if (diagnostics?.media.latest.noMicrophoneDevicesEnumerated?.value === true) {\n      activeErrorMessages.push({ type: 'callNoMicrophoneFound' });\n    }\n    if (deviceManager.deviceAccess?.audio === false && isSafari()) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDeniedSafari' });\n    }\n    if (deviceManager.deviceAccess?.audio === false && !isSafari()) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });\n    }\n\n    if (diagnostics?.media.latest.microphonePermissionDenied?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsMicrophoneAccessDenied' });\n    } else if (diagnostics?.media.latest.microphonePermissionDenied?.value === true) {\n      activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });\n    }\n\n    const microphoneMuteUnexpectedlyDiagnostic =\n      diagnostics?.media.latest.microphoneMuteUnexpectedly || diagnostics?.media.latest.microphoneNotFunctioning;\n    if (microphoneMuteUnexpectedlyDiagnostic) {\n      if (microphoneMuteUnexpectedlyDiagnostic.value === DiagnosticQuality.Bad) {\n        // Inform the user that microphone stopped working and inform them to start microphone again\n        activeErrorMessages.push({ type: 'callMicrophoneMutedBySystem' });\n      } else if (microphoneMuteUnexpectedlyDiagnostic.value === DiagnosticQuality.Good) {\n        // Inform the user that microphone recovered\n        activeErrorMessages.push({ type: 'callMicrophoneUnmutedBySystem' });\n      }\n    }\n\n    const cameraStoppedUnexpectedlyDiagnostic = diagnostics?.media.latest.cameraStoppedUnexpectedly;\n    if (cameraStoppedUnexpectedlyDiagnostic) {\n      if (cameraStoppedUnexpectedlyDiagnostic.value === DiagnosticQuality.Bad) {\n        // Inform the user that camera stopped working and inform them to start video again\n        activeErrorMessages.push({ type: 'callVideoStoppedBySystem' });\n      } else if (cameraStoppedUnexpectedlyDiagnostic.value === DiagnosticQuality.Good) {\n        // Inform the user that camera recovered\n        activeErrorMessages.push({ type: 'callVideoRecoveredBySystem' });\n      }\n    }\n    if (deviceManager.deviceAccess?.video === false && isSafari()) {\n      activeErrorMessages.push({ type: 'callCameraAccessDeniedSafari' });\n    } else if (deviceManager.deviceAccess?.video === false) {\n      activeErrorMessages.push({ type: 'callCameraAccessDenied' });\n    } else {\n      if (diagnostics?.media.latest.cameraFreeze?.value === true) {\n        activeErrorMessages.push({ type: 'cameraFrozenForRemoteParticipants' });\n      }\n    }\n\n    /**\n     * show the Mac specific strings if the platform is detected as mac\n     */\n    if (diagnostics?.media.latest.cameraPermissionDenied?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsCameraAccessDenied' });\n    }\n\n    /**\n     * This UFD only works on mac still so we should only see it fire on mac.\n     */\n    if (diagnostics?.media.latest.screenshareRecordingDisabled?.value === true && isMacOS()) {\n      activeErrorMessages.push({ type: 'callMacOsScreenShareAccessDenied' });\n    } else if (diagnostics?.media.latest.screenshareRecordingDisabled?.value === true) {\n      activeErrorMessages.push({ type: 'startScreenSharingGeneric' });\n    }\n\n    // Prefer to show errors with privacy implications.\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopVideo', 'stopVideoGeneric');\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.mute', 'muteGeneric');\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopScreenSharing', 'stopScreenShareGeneric');\n\n    if (\n      latestErrors['Call.startVideo']?.message === 'Call.startVideo: Video operation failure SourceUnavailableError'\n    ) {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'callCameraAlreadyInUse');\n    } else if (\n      latestErrors['Call.startVideo']?.message === 'Call.startVideo: Video operation failure permissionDeniedError'\n    ) {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'callCameraAccessDenied');\n    } else {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'startVideoGeneric');\n    }\n\n    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.unmute', 'unmuteGeneric');\n\n    if (latestErrors['CallAgent.join']?.message === 'CallAgent.join: Invalid meeting link') {\n      appendActiveErrorIfDefined(\n        activeErrorMessages,\n        latestErrors,\n        'CallAgent.join',\n        'failedToJoinCallInvalidMeetingLink'\n      );\n    } else {\n      appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'CallAgent.join', 'failedToJoinCallGeneric');\n    }\n\n    // We only return the first few errors to avoid filling up the UI with too many `MessageBar`s.\n    activeErrorMessages.splice(maxErrorCount);\n    return { activeErrorMessages: activeErrorMessages };\n  }\n);\n\nconst appendActiveErrorIfDefined = (\n  activeErrorMessages: ActiveErrorMessage[],\n  latestErrors: CallErrors,\n  target: CallErrorTarget,\n  activeErrorType: ErrorType\n): void => {\n  if (latestErrors[target] === undefined) {\n    return;\n  }\n  activeErrorMessages.push({\n    type: activeErrorType,\n    timestamp: latestErrors[target].timestamp\n  });\n};\n\nconst maxErrorCount = 3;\n\"../../react-components/src\"\"../../calling-stateful-client/src\""]}

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

@@ -50,6 +50,18 @@ export interface CameraButtonStrings {
      * Camera action turned off string for announcer
      */
     cameraActionTurnedOffAnnouncement?: string;
+    /**
+     * Primary action for when the camera is turned off
+     */
+    offSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Primary action for when the camera is on
+     */
+    onSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Title for primary action section of split button
+     */
+    cameraPrimaryActionSplitButtonTitle?: string;
 }
 /**
  * Styles for {@link CameraButton}

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

@@ -13,6 +13,7 @@ import React, { useCallback, useState } from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
+import { ContextualMenuItemType } from '@fluentui/react';
 import { generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
 const defaultLocalVideoViewOptions = {
@@ -58,10 +59,31 @@ export const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
+    const splitButtonPrimaryAction = {
+        key: 'primaryAction',
+        title: 'toggle camera',
+        itemType: ContextualMenuItemType.Section,
+        sectionProps: {
+            topDivider: true,
+            items: [
+                {
+                    key: 'cameraPrimaryAction',
+                    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
+                    onClick: () => {
+                        onToggleClick();
+                    },
+                    iconProps: {
+                        iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
+                        styles: { root: { lineHeight: 0 } }
+                    }
+                }
+            ]
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu
-                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings)
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings, splitButtonPrimaryAction)
                 : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined }))));
 };
 //# sourceMappingURL=CameraButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport { IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\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  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (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<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings)\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\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  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (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<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: [\n        {\n          key: 'cameraPrimaryAction',\n          text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n          onClick: () => {\n            onToggleClick();\n          },\n          iconProps: {\n            iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n            styles: { root: { lineHeight: 0 } }\n          }\n        }\n      ]\n    }\n  };\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\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={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n      />\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts

@@ -12,9 +12,14 @@ declare type ChatMessageComponentProps = {
     onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {
         attachedFilesMetadata?: FileMetadata[];
     }) => Promise<void>;
+    /**
+     * Callback to delete a message. Also called before resending a message that failed to send.
+     * @param messageId ID of the message to delete
+     */
     onDeleteMessage?: (messageId: string) => Promise<void>;
     /**
-     * Optional callback called when message is sent
+     * Callback to send a message
+     * @param content The message content to send
      */
     onSendMessage?: (content: string) => Promise<void>;
     strings: MessageThreadStrings;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AA4D5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,eAAe,EAAE;YACnD,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,eAAe,IAAI,OAAO,CAAC,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACvF,aAAa,IAAI,aAAa,CAAC,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/E,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,CACL,oBAAC,6BAA6B,IAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1C,KAAK,CAAC,eAAe;oBACnB,KAAK,CAAC,OAAO,CAAC,SAAS;oBACvB,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBAClF,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EACD,QAAQ,EAAE,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,KAAK,IACT,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,0DAA0D;YAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,IACtB,CACH,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Optional callback called when message is sent\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientmessageid\n    else if (onDeleteMessage && message.clientMessageId) {\n      onDeleteMessage(message.clientMessageId);\n    }\n  }, [message.messageId, message.clientMessageId, onDeleteMessage]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);\n    onSendMessage && onSendMessage(message.content ?? '');\n  }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);\n\n  if (props.message.messageType !== 'chat') {\n    return <></>;\n  } else if (isEditing) {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            props.message.messageId &&\n            (await props.onUpdateMessage(props.message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={() => {\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAiE5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,eAAe,EAAE;YACnD,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,eAAe,IAAI,OAAO,CAAC,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACvF,aAAa,IAAI,aAAa,CAAC,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/E,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,CACL,oBAAC,6BAA6B,IAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1C,KAAK,CAAC,eAAe;oBACnB,KAAK,CAAC,OAAO,CAAC,SAAS;oBACvB,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBAClF,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EACD,QAAQ,EAAE,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,KAAK,IACT,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,0DAA0D;YAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,IACtB,CACH,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientmessageid\n    else if (onDeleteMessage && message.clientMessageId) {\n      onDeleteMessage(message.clientMessageId);\n    }\n  }, [message.messageId, message.clientMessageId, onDeleteMessage]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);\n    onSendMessage && onSendMessage(message.content ?? '');\n  }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);\n\n  if (props.message.messageType !== 'chat') {\n    return <></>;\n  } else if (isEditing) {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            props.message.messageId &&\n            (await props.onUpdateMessage(props.message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={() => {\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -207,7 +207,7 @@ export interface DeviceMenuStyles extends IContextualMenuStyles {
  *
  * @private
  */
-export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
+export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, primaryActionItem?: IContextualMenuItem | undefined, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
     items: IContextualMenuItem[];
 } | undefined;
 /**

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

@@ -13,7 +13,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
  *
  * @private
  */
-export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
+export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
     var _a, _b;
     const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
     const defaultMenuProps = {
@@ -34,88 +34,112 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
     const menuItemStyles = merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
     if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {
         defaultMenuProps.items.push({
-            key: 'sectionCamera',
-            title: strings.cameraMenuTooltip,
+            key: 'cameras',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.cameraMenuTitle,
-                items: cameras.map((camera) => ({
-                    key: camera.id,
-                    text: camera.name,
-                    title: camera.name,
-                    iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
-                    onClick: () => {
-                        if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
-                            onSelectCamera(camera);
-                        }
+                items: [
+                    {
+                        key: 'sectionCamera',
+                        title: strings.cameraMenuTooltip,
+                        subMenuProps: {
+                            items: cameras.map((camera) => ({
+                                key: camera.id,
+                                text: camera.name,
+                                title: camera.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
+                                onClick: () => {
+                                    if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
+                                        onSelectCamera(camera);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedCamera.name
                     }
-                }))
+                ]
             }
         });
+        if (primaryActionItem) {
+            defaultMenuProps.items.push(primaryActionItem);
+        }
     }
     if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {
         // Set props as Microphone if speakers can be enumerated else set as Audio Device
         const speakersAvailable = speakers && speakers.length > 0;
         const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';
         const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;
-        const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;
-        const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';
         defaultMenuProps.items.push({
-            key: key,
-            title: title,
+            key: 'microphones',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
-                title: sectionPropsTitle,
-                items: microphones.map((microphone) => ({
-                    key: microphone.id,
-                    text: microphone.name,
-                    title: microphone.name,
-                    iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
-                    onClick: () => {
-                        if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
-                            onSelectMicrophone(microphone);
-                        }
+                title: strings.microphoneMenuTitle,
+                items: [
+                    {
+                        key: key,
+                        title: title,
+                        subMenuProps: {
+                            items: microphones.map((microphone) => ({
+                                key: microphone.id,
+                                text: microphone.name,
+                                title: microphone.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
+                                onClick: () => {
+                                    if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
+                                        onSelectMicrophone(microphone);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedMicrophone.name
                     }
-                }))
+                ]
             }
         });
     }
     if (speakers && selectedSpeaker && onSelectSpeaker) {
         defaultMenuProps.items.push({
-            key: 'sectionSpeaker',
-            title: strings.speakerMenuTooltip,
+            key: 'speakers',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.speakerMenuTitle,
-                items: speakers.map((speaker) => ({
-                    key: speaker.id,
-                    text: speaker.name,
-                    title: speaker.name,
-                    iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
-                    onClick: () => {
-                        if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
-                            onSelectSpeaker(speaker);
-                        }
+                items: [
+                    {
+                        key: 'sectionSpeaker',
+                        subMenuProps: {
+                            items: speakers.map((speaker) => ({
+                                key: speaker.id,
+                                text: speaker.name,
+                                title: speaker.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
+                                onClick: () => {
+                                    if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
+                                        onSelectSpeaker(speaker);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedSpeaker.name
                     }
-                }))
+                ]
             }
         });
     }
+    if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {
+        defaultMenuProps.items.push(primaryActionItem);
+    }
     if (defaultMenuProps.items.length === 0) {
         // Avoids creating an empty context menu.
         return undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: 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 camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: 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   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\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   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'sectionCamera',\n      title: strings.cameraMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: cameras.map((camera) => ({\n          key: camera.id,\n          text: camera.name,\n          title: camera.name,\n          iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: camera.id === selectedCamera?.id,\n          onClick: () => {\n            if (camera.id !== selectedCamera?.id) {\n              onSelectCamera(camera);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n    const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;\n    const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';\n\n    defaultMenuProps.items.push({\n      key: key,\n      title: title,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: sectionPropsTitle,\n        items: microphones.map((microphone) => ({\n          key: microphone.id,\n          text: microphone.name,\n          title: microphone.name,\n          iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: microphone.id === selectedMicrophone?.id,\n          onClick: () => {\n            if (microphone.id !== selectedMicrophone?.id) {\n              onSelectMicrophone(microphone);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'sectionSpeaker',\n      title: strings.speakerMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: speakers.map((speaker) => ({\n          key: speaker.id,\n          text: speaker.name,\n          title: speaker.name,\n          iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: speaker.id === selectedSpeaker?.id,\n          onClick: () => {\n            if (speaker.id !== selectedSpeaker?.id) {\n              onSelectSpeaker(speaker);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: 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 camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: 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   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\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   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -169,6 +169,10 @@ export interface ErrorBarStrings {
      * Generic message for when screen sharing fails
      */
     startScreenSharingGeneric?: string;
+    /**
+     * Error bar string letting you know remote participants see a frozen stream for you.
+     */
+    cameraFrozenForRemoteParticipants?: string;
 }
 /**
  * All errors that can be shown in the {@link ErrorBar}.

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAsOjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Generic message for when screen sharing fails\n   */\n  startScreenSharingGeneric?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(\n    () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n    [props.activeErrorMessages, dismissedErrors]\n  );\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              alignSelf: 'center'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n          dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AA0OjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n  DismissedError,\n  dismissError,\n  dropDismissalsForInactiveErrors,\n  errorsToShow,\n  messageBarIconProps,\n  messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: ErrorBarStrings;\n\n  /**\n   * Currently active errors.\n   */\n  activeErrorMessages: ActiveErrorMessage[];\n\n  /**\n   * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore errors from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n  /**\n   * Unable to reach Chat service.\n   *\n   * This can mean:\n   *   - Incorrect Azure Communication Services endpoint was provided.\n   *   - User's network connection is down.\n   */\n  unableToReachChatService: string;\n\n  /**\n   * User does not have access to the Chat service.\n   * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n   */\n  accessDenied: string;\n\n  /**\n   * User is no longer on the thread.\n   *\n   * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n   */\n  userNotInChatThread: string;\n\n  /**\n   * Sending message failed because user is no longer on the thread.\n   */\n  sendMessageNotInChatThread: string;\n\n  /**\n   * A generic message when sending message fails.\n   * Prefer more specific error strings when possible.\n   */\n  sendMessageGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric: string;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric: string;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric: string;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric: string;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric: string;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric: string;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow: string;\n\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound: string;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari: string;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem: string;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem: string;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied: string;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied: string;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari: string;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse: string;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem: string;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem: string;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied: string;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied: string;\n  /**\n   * Dimiss errorbar button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: string;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: string;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: string;\n  /**\n   * Generic message for when screen sharing fails\n   */\n  startScreenSharingGeneric?: string;\n  /**\n   * Error bar string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n  /**\n   * Type of error that is active.\n   */\n  type: ErrorType;\n  /**\n   * The latest timestamp when this error was observed.\n   *\n   * When available, this is used to track errors that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n *   * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n *   * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n *         If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n  const localeStrings = useLocale().strings.errorBar;\n  const strings = props.strings ?? localeStrings;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n  // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(\n    () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n    [props.activeErrorMessages, dismissedErrors]\n  );\n\n  const toShow = errorsToShow(\n    props.activeErrorMessages,\n    dismissedErrors,\n    props.ignorePremountErrors ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack data-ui-id=\"error-bar-stack\">\n      {toShow.map((error) => (\n        <MessageBar\n          {...props}\n          styles={{\n            innerText: {\n              alignSelf: 'center'\n            },\n            icon: {\n              height: 0\n            },\n            content: {\n              lineHeight: 'inherit'\n            },\n            dismissal: {\n              height: 0,\n              paddingTop: '0.8rem'\n            }\n          }}\n          key={error.type}\n          messageBarType={messageBarType(error.type)}\n          messageBarIconProps={messageBarIconProps(error.type)}\n          onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n          dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n          dismissIconProps={{ iconName: 'ErrorBarClear' }}\n        >\n          {strings[error.type]}\n        </MessageBar>\n      ))}\n    </Stack>\n  );\n};\n"]}