@azure/communication-react 1.22.0-alpha-202411190017 → 1.22.0-alpha-202411220017

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js

@@ -26,6 +26,7 @@ import { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyl
  * @private
  */
 export const LocalPreview = (props) => {
+    var _a;
     const locale = useLocale();
     const cameraButtonProps = usePropsFor(CameraButton);
     const localPreviewProps = useSelector(localPreviewSelector);
@@ -42,6 +43,8 @@ export const LocalPreview = (props) => {
         devicesButtonProps.speakers.length === 0;
     const hasCameras = devicesButtonProps.cameras.length > 0;
     const hasMicrophones = devicesButtonProps.microphones.length > 0;
+    const cameraLoadingString = (_a = locale.strings.call.configurationPageCameraIsLoadingLabel) !== null && _a !== void 0 ? _a : locale.strings.call.cameraTurnedOff;
+    const previewCameraString = props.cameraLoading ? cameraLoadingString : locale.strings.call.cameraTurnedOff;
     const theme = useTheme();
     const onRenderPlaceholder = useCallback(() => {
         return (React.createElement(Stack, { className: mergeStyles({
@@ -55,8 +58,8 @@ export const LocalPreview = (props) => {
             React.createElement(Stack.Item, { align: "center" },
                 React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
-    }, [theme, locale.strings.call.cameraTurnedOff]);
+                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, previewCameraString))));
+    }, [theme, previewCameraString]);
     const devicesButtonStyles = props.mobileView
         ? {
             menuStyles: {
@@ -70,7 +73,7 @@ export const LocalPreview = (props) => {
                 React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true, 
                     // disable tooltip as it obscures list of devices on mobile
                     strings: props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}, styles: localPreviewButtonStyle(props.mobileView) }),
-                React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras, 
+                React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { onToggleCamera: props.onToggleCamera, showLabel: true, disabled: !cameraPermissionGranted || !hasCameras || props.cameraLoading, 
                     // disable tooltip as it obscures list of devices on mobile
                     strings: props.mobileView
                         ? {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  CameraButton,\n  ControlBar,\n  MicrophoneButton,\n  DevicesButton,\n  StreamMedia,\n  useTheme,\n  VideoTile\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n  cameraOffLabelStyle,\n  localPreviewButtonStyle,\n  localPreviewContainerStyleDesktop,\n  localPreviewContainerStyleMobile,\n  localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n\n  const hasNoSpeakers = !devicesButtonProps.speakers.length;\n  const hasNoDevices =\n    devicesButtonProps.cameras.length === 0 &&\n    devicesButtonProps.microphones.length === 0 &&\n    devicesButtonProps.speakers.length === 0;\n\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return (\n      <Stack\n        className={mergeStyles({\n          width: '100%',\n          height: '100%',\n          // The text should be centered in the local preview with the camera icon\n          // appearing above the text. To compensate for the camera icon's height,\n          // we add a negative margin to the top of the container.\n          marginTop: '-0.8rem'\n        })}\n        verticalAlign=\"center\"\n      >\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon\n            iconName=\"LocalPreviewPlaceholder\"\n            className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n          />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>\n    );\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n\n  const devicesButtonStyles = props.mobileView\n    ? {\n        menuStyles: {\n          menuItemStyles: buttonFlyoutIncreasedSizeStyles\n        }\n      }\n    : undefined;\n\n  return (\n    <Stack\n      data-ui-id=\"call-composite-local-preview\"\n      className={props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme)}\n    >\n      <VideoTile\n        styles={localPreviewTileStyle}\n        renderElement={\n          localPreviewProps?.videoStreamElement ? (\n            <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n          ) : undefined\n        }\n        onRenderPlaceholder={onRenderPlaceholder}\n      >\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton\n            data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n            checked={isLocalMicrophoneEnabled}\n            onToggleMicrophone={onToggleMic}\n            disabled={!microphonePermissionGranted || !hasMicrophones}\n            showLabel={true}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}\n            }\n            styles={localPreviewButtonStyle(props.mobileView)}\n          />\n          <CameraButton\n            data-ui-id=\"call-composite-local-device-settings-camera-button\"\n            {...cameraButtonProps}\n            showLabel={true}\n            disabled={!cameraPermissionGranted || !hasCameras}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView\n                ? {\n                    tooltipOnContent: '',\n                    tooltipOffContent: '',\n                    tooltipDisabledContent: '',\n                    tooltipVideoLoadingContent: ''\n                  }\n                : {}\n            }\n            styles={localPreviewButtonStyle(props.mobileView)}\n          />\n          {props.showDevicesButton && (\n            <DevicesButton\n              data-ui-id=\"call-composite-local-device-settings-options-button\"\n              {...devicesButtonProps}\n              // disable button whilst all other buttons are disabled\n              disabled={(!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) || hasNoDevices}\n              showLabel={true}\n              // disable tooltip as it obscures list of devices on mobile\n              strings={props.mobileView ? { tooltipContent: '' } : {}}\n              styles={devicesButtonStyles}\n            />\n          )}\n        </ControlBar>\n      </VideoTile>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  CameraButton,\n  ControlBar,\n  MicrophoneButton,\n  DevicesButton,\n  StreamMedia,\n  useTheme,\n  VideoTile,\n  VideoStreamOptions\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n  cameraOffLabelStyle,\n  localPreviewButtonStyle,\n  localPreviewContainerStyleDesktop,\n  localPreviewContainerStyleMobile,\n  localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n  onToggleCamera: (options?: VideoStreamOptions | undefined) => Promise<void>;\n  cameraLoading?: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n\n  const hasNoSpeakers = !devicesButtonProps.speakers.length;\n  const hasNoDevices =\n    devicesButtonProps.cameras.length === 0 &&\n    devicesButtonProps.microphones.length === 0 &&\n    devicesButtonProps.speakers.length === 0;\n\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n  const cameraLoadingString =\n    locale.strings.call.configurationPageCameraIsLoadingLabel ?? locale.strings.call.cameraTurnedOff;\n  const previewCameraString = props.cameraLoading ? cameraLoadingString : locale.strings.call.cameraTurnedOff;\n\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return (\n      <Stack\n        className={mergeStyles({\n          width: '100%',\n          height: '100%',\n          // The text should be centered in the local preview with the camera icon\n          // appearing above the text. To compensate for the camera icon's height,\n          // we add a negative margin to the top of the container.\n          marginTop: '-0.8rem'\n        })}\n        verticalAlign=\"center\"\n      >\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon\n            iconName=\"LocalPreviewPlaceholder\"\n            className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n          />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n            {previewCameraString}\n          </Text>\n        </Stack.Item>\n      </Stack>\n    );\n  }, [theme, previewCameraString]);\n\n  const devicesButtonStyles = props.mobileView\n    ? {\n        menuStyles: {\n          menuItemStyles: buttonFlyoutIncreasedSizeStyles\n        }\n      }\n    : undefined;\n\n  return (\n    <Stack\n      data-ui-id=\"call-composite-local-preview\"\n      className={props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme)}\n    >\n      <VideoTile\n        styles={localPreviewTileStyle}\n        renderElement={\n          localPreviewProps?.videoStreamElement ? (\n            <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n          ) : undefined\n        }\n        onRenderPlaceholder={onRenderPlaceholder}\n      >\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton\n            data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n            checked={isLocalMicrophoneEnabled}\n            onToggleMicrophone={onToggleMic}\n            disabled={!microphonePermissionGranted || !hasMicrophones}\n            showLabel={true}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}\n            }\n            styles={localPreviewButtonStyle(props.mobileView)}\n          />\n          <CameraButton\n            data-ui-id=\"call-composite-local-device-settings-camera-button\"\n            {...cameraButtonProps}\n            onToggleCamera={props.onToggleCamera}\n            showLabel={true}\n            disabled={!cameraPermissionGranted || !hasCameras || props.cameraLoading}\n            // disable tooltip as it obscures list of devices on mobile\n            strings={\n              props.mobileView\n                ? {\n                    tooltipOnContent: '',\n                    tooltipOffContent: '',\n                    tooltipDisabledContent: '',\n                    tooltipVideoLoadingContent: ''\n                  }\n                : {}\n            }\n            styles={localPreviewButtonStyle(props.mobileView)}\n          />\n          {props.showDevicesButton && (\n            <DevicesButton\n              data-ui-id=\"call-composite-local-device-settings-options-button\"\n              {...devicesButtonProps}\n              // disable button whilst all other buttons are disabled\n              disabled={(!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) || hasNoDevices}\n              showLabel={true}\n              // disable tooltip as it obscures list of devices on mobile\n              strings={props.mobileView ? { tooltipContent: '' } : {}}\n              styles={devicesButtonStyles}\n            />\n          )}\n        </ControlBar>\n      </VideoTile>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useMemo } from 'react';
-/* @conditional-compile-remove(call-readiness) */
 import { useState } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
 import { useHandlers } from '../hooks/useHandlers';
@@ -18,7 +17,7 @@ import { LocalDeviceSettings } from '../components/LocalDeviceSettings';
 import { StartCallButton } from '../components/StartCallButton';
 import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
 import { useSelector } from '../hooks/useSelector';
-import { DevicesButton, ErrorBar, useTheme } from "../../../../../react-components/src";
+import { CameraButton, DevicesButton, ErrorBar, useTheme } from "../../../../../react-components/src";
 import { getCallingSelector } from "../../../../../calling-component-bindings/src";
 import { Image, Panel, PanelType, Stack } from '@fluentui/react';
 import { callDetailsContainerStyles, configurationCenteredContent, configurationSectionStyle, deviceConfigurationStackTokens, fillWidth, logoStyles, panelFocusProps, panelStyles, startCallButtonStyleDesktop } from '../styles/CallConfiguration.styles';
@@ -68,6 +67,28 @@ export const ConfigurationPage = (props) => {
     let disableStartCallButton = !microphonePermissionGranted || (microphones === null || microphones === void 0 ? void 0 : microphones.length) === 0;
     const role = useSelector(getRole);
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
+    const [cameraLoading, setCameraLoading] = useState(false);
+    const switchCamera = useCallback((device, options) => __awaiter(void 0, void 0, void 0, function* () {
+        // Only set camera to be loading if we are switching source while the camera is on
+        setCameraLoading(isCameraOn);
+        try {
+            yield localDeviceSettingsHandlers.onSelectCamera(device, options);
+        }
+        finally {
+            setCameraLoading(false);
+        }
+    }), [localDeviceSettingsHandlers, isCameraOn]);
+    const { onToggleCamera } = usePropsFor(CameraButton);
+    const toggleCamera = useCallback((options) => __awaiter(void 0, void 0, void 0, function* () {
+        // Only set camera to loading if we are turning on the camera (i.e. the camera was off)
+        setCameraLoading(!isCameraOn);
+        try {
+            yield onToggleCamera(options);
+        }
+        finally {
+            setCameraLoading(false);
+        }
+    }), [isCameraOn, onToggleCamera]);
     let filteredLatestErrors = props.latestErrors;
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (role !== 'Consumer') {
@@ -181,10 +202,10 @@ export const ConfigurationPage = (props) => {
                     title,
                     callDescription),
                 React.createElement(Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
-                    localPreviewTrampoline(mobileWithPreview, !!(role === 'Consumer')),
+                    role !== 'Consumer' && (React.createElement(LocalPreview, { mobileView: mobileWithPreview, showDevicesButton: mobileView, onToggleCamera: toggleCamera, cameraLoading: cameraLoading && !isCameraOn })),
                     React.createElement(Stack, { styles: mobileView ? undefined : configurationSectionStyle },
                         !mobileWithPreview && (React.createElement(Stack, { className: mobileView ? undefined : selectionContainerStyle(theme, _isSafari(environmentInfo)) },
-                            React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
+                            React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { onSelectCamera: switchCamera, cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ audioState), 
                                 /* @conditional-compile-remove(call-readiness) */
@@ -196,12 +217,6 @@ export const ConfigurationPage = (props) => {
             React.createElement(Panel, { isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps, type: PanelType.custom, customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
                 React.createElement(SidePane, { ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined, mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer, maxWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`, minWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` })))));
 };
-const localPreviewTrampoline = (mobileView, doNotShow) => {
-    if (doNotShow) {
-        return undefined;
-    }
-    return React.createElement(LocalPreview, { mobileView: mobileView, showDevicesButton: mobileView });
-};
 const cameraPermissionGrantedTrampoline = (cameraPermissionGranted, videoState) => {
     /* @conditional-compile-remove(call-readiness) */
     return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { ActiveErrorMessage, DevicesButton, ErrorBar, useTheme } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n  callDetailsContainerStyles,\n  configurationCenteredContent,\n  configurationSectionStyle,\n  deviceConfigurationStackTokens,\n  fillWidth,\n  logoStyles,\n  panelFocusProps,\n  panelStyles,\n  startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyle,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { getMicrophones, getRole } from '../selectors/baseSelectors';\nimport { getEnvironmentInfo } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-readiness) */\nimport { getCameras } from '../selectors/baseSelectors';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick\n  } = props;\n\n  const theme = useTheme();\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(setVideoState, setAudioState);\n\n  const errorBarProps = usePropsFor(ErrorBar);\n  const microphones = useSelector(getMicrophones);\n  const environmentInfo = useSelector(getEnvironmentInfo);\n\n  let disableStartCallButton = !microphonePermissionGranted || microphones?.length === 0;\n  const role = useSelector(getRole);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(\n      (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n    );\n  }\n\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n  }\n\n  if (role === 'Consumer') {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameras = useSelector(getCameras);\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title =\n    locale.strings.call.configurationPageTitle.length > 0 ? (\n      <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping\n          width={mobileView ? 325 : 445}\n          lineHeightPx={16 * 1.5}\n          bufferHeightPx={16}\n          text={locale.strings.call.configurationPageTitle}\n          role=\"heading\"\n        />\n      </Stack.Item>\n    ) : (\n      <></>\n    );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  const mobileWithPreview = mobileView && role !== 'Consumer';\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = {\n    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n    camera:\n      videoState && videoState !== 'unsupported'\n        ? cameraPermissionGranted !== false\n          ? videoState\n          : 'denied'\n        : cameraPermissionGranted !== false\n          ? cameraPermissionGranted\n            ? 'granted'\n            : 'prompt'\n          : 'denied',\n    microphone:\n      audioState && audioState !== 'unsupported'\n        ? microphonePermissionGranted !== false\n          ? audioState\n          : 'denied'\n        : microphonePermissionGranted !== false\n          ? microphonePermissionGranted\n            ? 'granted'\n            : 'prompt'\n          : 'denied'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  setTimeout(() => {\n    setMinimumFallbackTimerElapsed(true);\n  }, 2000);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n    props.updateSidePaneRenderer,\n    mobileView,\n    props.latestErrors,\n    props.onDismissError\n  );\n\n  const startCall = useCallback(async () => {\n    closeVideoEffectsPane();\n    startCallHandler();\n  }, [startCallHandler, closeVideoEffectsPane]);\n\n  const panelLayerProps = useMemo(\n    () => ({\n      hostId: modalLayerHostId\n    }),\n    [modalLayerHostId]\n  );\n\n  const filteredErrorBarProps = useMemo(\n    () => ({\n      ...errorBarProps,\n      activeErrorMessages: filteredLatestErrors\n    }),\n    [errorBarProps, filteredLatestErrors]\n  );\n\n  const containerStyles = useMemo(\n    () => configurationContainerStyle(!mobileView, props.backgroundImage?.url),\n    [mobileView, props.backgroundImage?.url]\n  );\n\n  return (\n    <Stack styles={containerStyles}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={filteredErrorBarProps}\n          onDismissError={props.onDismissError}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n            doNotPromptCamera={deviceChecks?.camera === 'doNotPrompt'}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack\n          className={configurationCenteredContent(mobileWithPreview, !!props.logo)}\n          verticalAlign=\"center\"\n          verticalFill={mobileWithPreview}\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo logo={props.logo} />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack\n            horizontal={!mobileWithPreview}\n            horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n            verticalFill={mobileWithPreview}\n            tokens={deviceConfigurationStackTokens}\n          >\n            {localPreviewTrampoline(mobileWithPreview, !!(role === 'Consumer'))}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && (\n                <Stack className={mobileView ? undefined : selectionContainerStyle(theme, _isSafari(environmentInfo))}>\n                  <LocalDeviceSettings\n                    {...options}\n                    {...localDeviceSettingsHandlers}\n                    cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                      cameraPermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ videoState\n                    )}\n                    microphonePermissionGranted={micPermissionGrantedTrampoline(\n                      microphonePermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ audioState\n                    )}\n                    /* @conditional-compile-remove(call-readiness) */\n                    onClickEnableDevicePermission={() => {\n                      setIsPermissionsModalDismissed(true);\n                    }}\n                    onClickVideoEffects={toggleVideoEffectsPane}\n                  />\n                </Stack>\n              )}\n              <Stack\n                styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n                horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n              >\n                <StartCallButton\n                  className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n                  onClick={startCall}\n                  disabled={disableStartCallButton}\n                  hideIcon={true}\n                />\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n          isOpen={isVideoEffectsPaneOpen}\n          hasCloseButton={false}\n          isBlocking={false}\n          isHiddenOnDismiss={false}\n          styles={panelStyles}\n          focusTrapZoneProps={panelFocusProps}\n          layerProps={panelLayerProps}\n          type={PanelType.custom}\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n        >\n          <SidePane\n            ariaLabel={isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined}\n            mobileView={props.mobileView}\n            updateSidePaneRenderer={props.updateSidePaneRenderer}\n            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n          />\n        </Panel>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element | undefined => {\n  if (doNotShow) {\n    return undefined;\n  }\n  return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'circle' } }): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\n"]}
+{"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport {\n  ActiveErrorMessage,\n  CameraButton,\n  DevicesButton,\n  ErrorBar,\n  VideoStreamOptions,\n  useTheme\n} from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n  callDetailsContainerStyles,\n  configurationCenteredContent,\n  configurationSectionStyle,\n  deviceConfigurationStackTokens,\n  fillWidth,\n  logoStyles,\n  panelFocusProps,\n  panelStyles,\n  startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n  callDetailsStyleDesktop,\n  callDetailsStyleMobile,\n  configurationStackTokensDesktop,\n  configurationStackTokensMobile,\n  configurationContainerStyle,\n  selectionContainerStyle,\n  startCallButtonContainerStyleDesktop,\n  startCallButtonContainerStyleMobile,\n  startCallButtonStyleMobile,\n  titleContainerStyleDesktop,\n  titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { getDevicePermissionState } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\nimport { getMicrophones, getRole } from '../selectors/baseSelectors';\nimport { getEnvironmentInfo } from '../selectors/baseSelectors';\n/* @conditional-compile-remove(call-readiness) */\nimport { getCameras } from '../selectors/baseSelectors';\nimport { VideoDeviceInfo } from '@azure/communication-calling';\n\n/**\n * @private\n */\nexport interface ConfigurationPageProps {\n  mobileView: boolean;\n  startCallHandler(): void;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  latestErrors: ActiveErrorMessage[];\n  onDismissError: (error: ActiveErrorMessage) => void;\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n\n  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n}\n\n/**\n * @private\n */\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n  const {\n    startCallHandler,\n    mobileView,\n    modalLayerHostId,\n    /* @conditional-compile-remove(call-readiness) */ deviceChecks,\n    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick\n  } = props;\n\n  const theme = useTheme();\n\n  const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n  const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n  const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n  /* @conditional-compile-remove(call-readiness) */\n  // use permission API to get video and audio permission state\n  const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);\n  /* @conditional-compile-remove(call-readiness) */\n  getDevicePermissionState(setVideoState, setAudioState);\n\n  const errorBarProps = usePropsFor(ErrorBar);\n  const microphones = useSelector(getMicrophones);\n  const environmentInfo = useSelector(getEnvironmentInfo);\n\n  let disableStartCallButton = !microphonePermissionGranted || microphones?.length === 0;\n  const role = useSelector(getRole);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  const [cameraLoading, setCameraLoading] = useState(false);\n  const switchCamera = useCallback(\n    async (device: VideoDeviceInfo, options?: VideoStreamOptions) => {\n      // Only set camera to be loading if we are switching source while the camera is on\n      setCameraLoading(isCameraOn);\n      try {\n        await localDeviceSettingsHandlers.onSelectCamera(device, options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [localDeviceSettingsHandlers, isCameraOn]\n  );\n  const { onToggleCamera } = usePropsFor(CameraButton);\n  const toggleCamera = useCallback(\n    async (options?: VideoStreamOptions | undefined) => {\n      // Only set camera to loading if we are turning on the camera (i.e. the camera was off)\n      setCameraLoading(!isCameraOn);\n      try {\n        await onToggleCamera(options);\n      } finally {\n        setCameraLoading(false);\n      }\n    },\n    [isCameraOn, onToggleCamera]\n  );\n\n  let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n  // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n  if (role !== 'Consumer') {\n    filteredLatestErrors = filteredLatestErrors.filter(\n      (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n    );\n  }\n\n  if ((useIsParticularSidePaneOpen('videoeffects') || !isCameraOn) && errorBarProps) {\n    filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n  }\n\n  if (role === 'Consumer') {\n    // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n    // because microphone device permission is not needed for the user's role\n    disableStartCallButton = false;\n  }\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameras = useSelector(getCameras);\n\n  /* @conditional-compile-remove(call-readiness) */\n  // Overrides role permissions if CallCompositeOptions deviceChecks are set\n  if (deviceChecks) {\n    if (\n      ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n      ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n    ) {\n      disableStartCallButton = false;\n    } else if (deviceChecks.camera === 'required') {\n      disableStartCallButton = !cameraPermissionGranted || cameras?.length === 0;\n    }\n  }\n\n  const locale = useLocale();\n  const title =\n    locale.strings.call.configurationPageTitle.length > 0 ? (\n      <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n        <SvgWithWordWrapping\n          width={mobileView ? 325 : 445}\n          lineHeightPx={16 * 1.5}\n          bufferHeightPx={16}\n          text={locale.strings.call.configurationPageTitle}\n          role=\"heading\"\n        />\n      </Stack.Item>\n    ) : (\n      <></>\n    );\n\n  const callDescription = locale.strings.call.configurationPageCallDetails && (\n    <Stack.Item className={mobileView ? callDetailsStyleMobile(theme) : callDetailsStyleDesktop(theme)}>\n      {locale.strings.call.configurationPageCallDetails}\n    </Stack.Item>\n  );\n\n  const mobileWithPreview = mobileView && role !== 'Consumer';\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  } = {\n    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n    camera:\n      videoState && videoState !== 'unsupported'\n        ? cameraPermissionGranted !== false\n          ? videoState\n          : 'denied'\n        : cameraPermissionGranted !== false\n          ? cameraPermissionGranted\n            ? 'granted'\n            : 'prompt'\n          : 'denied',\n    microphone:\n      audioState && audioState !== 'unsupported'\n        ? microphonePermissionGranted !== false\n          ? audioState\n          : 'denied'\n        : microphonePermissionGranted !== false\n          ? microphonePermissionGranted\n            ? 'granted'\n            : 'prompt'\n          : 'denied'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n  /* @conditional-compile-remove(call-readiness) */\n  const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n  // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n  // then based on permission setting, we show permission denied or nothing\n  /* @conditional-compile-remove(call-readiness) */\n  const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n  /* @conditional-compile-remove(call-readiness) */\n  setTimeout(() => {\n    setMinimumFallbackTimerElapsed(true);\n  }, 2000);\n  /* @conditional-compile-remove(call-readiness) */\n  const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n  const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n    props.updateSidePaneRenderer,\n    mobileView,\n    props.latestErrors,\n    props.onDismissError\n  );\n\n  const startCall = useCallback(async () => {\n    closeVideoEffectsPane();\n    startCallHandler();\n  }, [startCallHandler, closeVideoEffectsPane]);\n\n  const panelLayerProps = useMemo(\n    () => ({\n      hostId: modalLayerHostId\n    }),\n    [modalLayerHostId]\n  );\n\n  const filteredErrorBarProps = useMemo(\n    () => ({\n      ...errorBarProps,\n      activeErrorMessages: filteredLatestErrors\n    }),\n    [errorBarProps, filteredLatestErrors]\n  );\n\n  const containerStyles = useMemo(\n    () => configurationContainerStyle(!mobileView, props.backgroundImage?.url),\n    [mobileView, props.backgroundImage?.url]\n  );\n\n  return (\n    <Stack styles={containerStyles}>\n      <Stack styles={bannerNotificationStyles}>\n        <ConfigurationPageErrorBar\n          /* @conditional-compile-remove(call-readiness) */\n          // show trouble shooting error bar when encountering network error/ permission error\n          showTroubleShootingErrorBar={\n            !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0\n          }\n          /* @conditional-compile-remove(call-readiness) */\n          permissionsState={permissionsState}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          errorBarProps={filteredErrorBarProps}\n          onDismissError={props.onDismissError}\n        />\n      </Stack>\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n          <CallReadinessModal\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n            doNotPromptCamera={deviceChecks?.camera === 'doNotPrompt'}\n          />\n        )\n      }\n\n      {\n        /* @conditional-compile-remove(call-readiness) */\n        // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n        videoState && audioState && (videoState === 'unsupported' || audioState === 'unsupported') && (\n          <CallReadinessModalFallBack\n            /* @conditional-compile-remove(call-readiness) */\n            modalLayerHostId={modalLayerHostId}\n            mobileView={mobileView}\n            checkPermissionModalShowing={forceShowingCheckPermissions}\n            permissionsState={permissionsState}\n            isPermissionsModalDismissed={isPermissionsModalDismissed}\n            /* @conditional-compile-remove(unsupported-browser) */\n            environmentInfo={environmentInfo}\n            setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n            onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n          />\n        )\n      }\n\n      <Stack verticalFill grow horizontal className={fillWidth}>\n        <Stack\n          className={configurationCenteredContent(mobileWithPreview, !!props.logo)}\n          verticalAlign=\"center\"\n          verticalFill={mobileWithPreview}\n          tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n        >\n          <Stack.Item styles={callDetailsContainerStyles}>\n            <Logo logo={props.logo} />\n            {title}\n            {callDescription}\n          </Stack.Item>\n          <Stack\n            horizontal={!mobileWithPreview}\n            horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n            verticalFill={mobileWithPreview}\n            tokens={deviceConfigurationStackTokens}\n          >\n            {role !== 'Consumer' && (\n              <LocalPreview\n                mobileView={mobileWithPreview}\n                showDevicesButton={mobileView}\n                onToggleCamera={toggleCamera}\n                cameraLoading={cameraLoading && !isCameraOn}\n              />\n            )}\n            <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n              {!mobileWithPreview && (\n                <Stack className={mobileView ? undefined : selectionContainerStyle(theme, _isSafari(environmentInfo))}>\n                  <LocalDeviceSettings\n                    {...options}\n                    {...localDeviceSettingsHandlers}\n                    onSelectCamera={switchCamera}\n                    cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n                      cameraPermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ videoState\n                    )}\n                    microphonePermissionGranted={micPermissionGrantedTrampoline(\n                      microphonePermissionGranted,\n                      /* @conditional-compile-remove(call-readiness) */ audioState\n                    )}\n                    /* @conditional-compile-remove(call-readiness) */\n                    onClickEnableDevicePermission={() => {\n                      setIsPermissionsModalDismissed(true);\n                    }}\n                    onClickVideoEffects={toggleVideoEffectsPane}\n                  />\n                </Stack>\n              )}\n              <Stack\n                styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n                horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n              >\n                <StartCallButton\n                  className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n                  onClick={startCall}\n                  disabled={disableStartCallButton}\n                  hideIcon={true}\n                />\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n        <Panel\n          isOpen={isVideoEffectsPaneOpen}\n          hasCloseButton={false}\n          isBlocking={false}\n          isHiddenOnDismiss={false}\n          styles={panelStyles}\n          focusTrapZoneProps={panelFocusProps}\n          layerProps={panelLayerProps}\n          type={PanelType.custom}\n          customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n        >\n          <SidePane\n            ariaLabel={isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined}\n            mobileView={props.mobileView}\n            updateSidePaneRenderer={props.updateSidePaneRenderer}\n            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n          />\n        </Panel>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst cameraPermissionGrantedTrampoline = (\n  cameraPermissionGranted: boolean | undefined,\n  videoState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n  return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n  microphonePermissionGranted: boolean | undefined,\n  audioState?: PermissionState | 'unsupported' | undefined\n): boolean | undefined => {\n  /* @conditional-compile-remove(call-readiness) */\n  return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n  return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'circle' } }): JSX.Element => {\n  if (!props.logo) {\n    return <></>;\n  }\n  return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/ExpandedLocalVideoTile.styles.d.ts

@@ -1,5 +1,5 @@
 import { IStackStyles } from '@fluentui/react';
-import { IPalette, IStyle } from '@fluentui/react';
+import { IStyle } from '@fluentui/react';
 /**
  * @private
  */
@@ -7,7 +7,7 @@ export declare const containerStyles: IStackStyles;
 /**
  * @private
  */
-export declare const overlayBackgroundStyles: (palette: IPalette, isVideoReady: boolean) => IStyle;
+export declare const overlayBackgroundStyles: (isVideoReady: boolean) => IStyle;
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/ExpandedLocalVideoTile.styles.js

@@ -11,19 +11,20 @@ export const containerStyles = {
     root: {
         height: '100%',
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '0.5rem'
     }
 };
 /**
  * @private
  */
-export const overlayBackgroundStyles = (palette, isVideoReady) => {
+export const overlayBackgroundStyles = (isVideoReady) => {
     return {
         position: 'absolute',
         height: '100%',
         width: '100%',
-        background: isVideoReady ? 'black' : palette.neutralLighterAlt,
-        opacity: isVideoReady ? 0.6 : 1,
+        background: isVideoReady ? 'black' : undefined,
+        opacity: isVideoReady ? 0.6 : undefined,
         zIndex: OVERLAY_BACKGROUND_ZINDEX
     };
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/ExpandedLocalVideoTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandedLocalVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/ExpandedLocalVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,2EAA2E;AAC3E,8DAA8D;AAC9D,MAAM,yBAAyB,GAAG,CAAC,CAAC;AACpC,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAyD,CAC3F,OAAO,EACP,YAAY,EACZ,EAAE;IACF,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB;QAC9D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/B,MAAM,EAAE,yBAAyB;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,sBAAsB;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACxC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles } from '@fluentui/react';\nimport { IPalette, IStyle } from '@fluentui/react';\n\n// By default, absolute positioned elements are overlayed over static ones.\n// So we need to explicitly layer the background and contents.\nconst OVERLAY_BACKGROUND_ZINDEX = 0;\nconst OVERLAY_CONTENT_ZINDEX = OVERLAY_BACKGROUND_ZINDEX + 1;\n\n/**\n * @private\n */\nexport const containerStyles: IStackStyles = {\n  root: {\n    height: '100%',\n    width: '100%',\n    position: 'relative'\n  }\n};\n\n/**\n * @private\n */\nexport const overlayBackgroundStyles: (palette: IPalette, isVideoReady: boolean) => IStyle = (\n  palette,\n  isVideoReady\n) => {\n  return {\n    position: 'absolute',\n    height: '100%',\n    width: '100%',\n    background: isVideoReady ? 'black' : palette.neutralLighterAlt,\n    opacity: isVideoReady ? 0.6 : 1,\n    zIndex: OVERLAY_BACKGROUND_ZINDEX\n  };\n};\n\n/**\n * @private\n */\nexport const overlayContentStyles: IStyle = {\n  height: '100%',\n  width: '100%',\n  zIndex: OVERLAY_CONTENT_ZINDEX\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: { height: '100%', width: '100%' }\n};\n"]}
+{"version":3,"file":"ExpandedLocalVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/ExpandedLocalVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,2EAA2E;AAC3E,8DAA8D;AAC9D,MAAM,yBAAyB,GAAG,CAAC,CAAC;AACpC,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAsC,CAAC,YAAY,EAAE,EAAE;IACzF,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAC9C,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;QACvC,MAAM,EAAE,yBAAyB;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,sBAAsB;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACxC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles } from '@fluentui/react';\nimport { IStyle } from '@fluentui/react';\n\n// By default, absolute positioned elements are overlayed over static ones.\n// So we need to explicitly layer the background and contents.\nconst OVERLAY_BACKGROUND_ZINDEX = 0;\nconst OVERLAY_CONTENT_ZINDEX = OVERLAY_BACKGROUND_ZINDEX + 1;\n\n/**\n * @private\n */\nexport const containerStyles: IStackStyles = {\n  root: {\n    height: '100%',\n    width: '100%',\n    position: 'relative',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @private\n */\nexport const overlayBackgroundStyles: (isVideoReady: boolean) => IStyle = (isVideoReady) => {\n  return {\n    position: 'absolute',\n    height: '100%',\n    width: '100%',\n    background: isVideoReady ? 'black' : undefined,\n    opacity: isVideoReady ? 0.6 : undefined,\n    zIndex: OVERLAY_BACKGROUND_ZINDEX\n  };\n};\n\n/**\n * @private\n */\nexport const overlayContentStyles: IStyle = {\n  height: '100%',\n  width: '100%',\n  zIndex: OVERLAY_CONTENT_ZINDEX\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: { height: '100%', width: '100%' }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js

@@ -86,7 +86,7 @@ export const AddPeopleDropdown = (props) => {
         return (React.createElement(Stack, null,
             React.createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
             defaultMenuProps.items.length > 0 && (React.createElement(Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React.createElement(PrimaryButton, { id: calloutButtonId, onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }),
+                React.createElement(PrimaryButton, { autoFocus: true, id: calloutButtonId, onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" }), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }),
                 inviteLinkCopiedRecently && (React.createElement(CalloutWithIcon, { targetId: calloutButtonId, text: (_a = strings.copyInviteLinkButtonActionedLabel) !== null && _a !== void 0 ? _a : '', doNotLayer: true })))),
             addPeopleDrawerMenuItems.length > 0 && (React.createElement(Stack, { styles: drawerContainerStyles(), "data-ui-id": "call-add-people-dropdown" },
                 React.createElement(_DrawerMenu, { disableMaxHeight: true, onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),

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

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { CalloutWithIcon } from './CalloutWithIcon';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel?: string;\n  copyInviteLinkButtonActionedLabel?: string;\n  openDialpadButtonLabel?: string;\n  peoplePaneAddPeopleButtonLabel?: string;\n  copyInviteLinkActionedAriaLabel?: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n  onCopyInviteLink?: () => void;\n  inviteLinkCopiedRecently?: boolean;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    inviteLink,\n    strings,\n    mobileView,\n    onAddParticipant,\n    alternateCallerId,\n    onCopyInviteLink,\n    inviteLinkCopiedRecently\n  } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n          onCopyInviteLink?.();\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'PeoplePaneOpenDialpad', style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed,\n    onCopyInviteLink\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  const calloutButtonId = useId('callout-button');\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        {defaultMenuProps.items.length > 0 && (\n          <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <PrimaryButton\n              id={calloutButtonId}\n              onClick={setDrawerMenuItemsForAddPeople}\n              styles={copyLinkButtonStylesThemed}\n              onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              data-ui-id=\"call-add-people-button\"\n            />\n            {inviteLinkCopiedRecently && (\n              <CalloutWithIcon\n                targetId={calloutButtonId}\n                text={strings.copyInviteLinkButtonActionedLabel ?? ''}\n                doNotLayer={true}\n              />\n            )}\n          </Stack.Item>\n        )}\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu\n              disableMaxHeight={true}\n              onLightDismiss={() => setAddPeopleDrawerMenuItems([])}\n              items={addPeopleDrawerMenuItems}\n            />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile={true}\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          {defaultMenuProps.items.length > 0 && (\n            <Stack styles={copyLinkButtonStackStyles}>\n              <DefaultButton\n                id={calloutButtonId}\n                onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />}\n                text={strings.peoplePaneAddPeopleButtonLabel}\n                menuProps={defaultMenuProps}\n                styles={copyLinkButtonStylesThemed}\n                data-ui-id=\"call-add-people-button\"\n              />\n              {inviteLinkCopiedRecently && (\n                <CalloutWithIcon targetId={calloutButtonId} text={strings.copyInviteLinkButtonActionedLabel ?? ''} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      }\n    </>\n  );\n};\n"]}
+{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { CalloutWithIcon } from './CalloutWithIcon';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel?: string;\n  copyInviteLinkButtonActionedLabel?: string;\n  openDialpadButtonLabel?: string;\n  peoplePaneAddPeopleButtonLabel?: string;\n  copyInviteLinkActionedAriaLabel?: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n  onCopyInviteLink?: () => void;\n  inviteLinkCopiedRecently?: boolean;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const {\n    inviteLink,\n    strings,\n    mobileView,\n    onAddParticipant,\n    alternateCallerId,\n    onCopyInviteLink,\n    inviteLinkCopiedRecently\n  } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n          onCopyInviteLink?.();\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'PeoplePaneOpenDialpad', style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed,\n    onCopyInviteLink\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  const calloutButtonId = useId('callout-button');\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        {defaultMenuProps.items.length > 0 && (\n          <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <PrimaryButton\n              autoFocus\n              id={calloutButtonId}\n              onClick={setDrawerMenuItemsForAddPeople}\n              styles={copyLinkButtonStylesThemed}\n              onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              data-ui-id=\"call-add-people-button\"\n            />\n            {inviteLinkCopiedRecently && (\n              <CalloutWithIcon\n                targetId={calloutButtonId}\n                text={strings.copyInviteLinkButtonActionedLabel ?? ''}\n                doNotLayer={true}\n              />\n            )}\n          </Stack.Item>\n        )}\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu\n              disableMaxHeight={true}\n              onLightDismiss={() => setAddPeopleDrawerMenuItems([])}\n              items={addPeopleDrawerMenuItems}\n            />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile={true}\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          {defaultMenuProps.items.length > 0 && (\n            <Stack styles={copyLinkButtonStackStyles}>\n              <DefaultButton\n                id={calloutButtonId}\n                onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />}\n                text={strings.peoplePaneAddPeopleButtonLabel}\n                menuProps={defaultMenuProps}\n                styles={copyLinkButtonStylesThemed}\n                data-ui-id=\"call-add-people-button\"\n              />\n              {inviteLinkCopiedRecently && (\n                <CalloutWithIcon targetId={calloutButtonId} text={strings.copyInviteLinkButtonActionedLabel ?? ''} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      }\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js

@@ -44,7 +44,7 @@ export const ParticipantListWithHeading = (props) => {
                 /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount))),
             (onClickHeadingMoreButton ||
                 ((headingMoreButtonMenuProps === null || headingMoreButtonMenuProps === void 0 ? void 0 : headingMoreButtonMenuProps.items) && headingMoreButtonMenuProps.items.length > 0)) && (React.createElement(Stack.Item, null,
-                React.createElement(DefaultButton, { "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),
+                React.createElement(DefaultButton, { autoFocus: true, "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),
         React.createElement(FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React.createElement(ParticipantList, Object.assign({}, participantListProps, { pinnedParticipants: pinnedParticipants, styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
                     React.createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text), dataProvider: onFetchAvatarPersonaData, allowActiveBorder: true })),

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        h2: {\n          color: theme.palette.neutralSecondary,\n          margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n          fontSize: theme.fonts.smallPlus.fontSize,\n          fontWeight: 'normal'\n        }\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          <h2>\n            {paneTitleTrampoline(\n              title ?? '',\n              /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n            )}\n          </h2>\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              data-ui-id=\"people-pane-header-more-button\"\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}
+{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        h2: {\n          color: theme.palette.neutralSecondary,\n          margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n          fontSize: theme.fonts.smallPlus.fontSize,\n          fontWeight: 'normal'\n        }\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          <h2>\n            {paneTitleTrampoline(\n              title ?? '',\n              /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n            )}\n          </h2>\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              autoFocus\n              data-ui-id=\"people-pane-header-more-button\"\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js

@@ -32,7 +32,7 @@ export const SidePaneHeader = (props) => {
     return (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
         React.createElement(Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText, "aria-level": 2 }, props.headingText),
         React.createElement(Stack.Item, null,
-            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose }))));
+            React.createElement(CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose, autoFocus: true }))));
 };
 const SidePaneMobileHeader = (props) => {
     const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: {\n        minWidth: '1.5rem',\n        padding: '0.5rem 0.25rem',\n        marginRight: '0.25rem',\n        backgroundColor: theme.semanticColors.bodyBackground,\n        '@media (forced-colors: active)': {\n          border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n          borderRadius: theme.effects.roundedCorner4\n        }\n      },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]\n  );\n\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles} aria-label={props.headingText} aria-level={2}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={props.onClose}\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={dismissSidePaneButtonAriaLabel}\n        ariaDescription={dismissSidePaneButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        ariaHidden={true}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"SidePaneHeader.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/SidePaneHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CommandBarButton, DefaultButton, Stack, concatStyleSets } from '@fluentui/react';\nimport { useTheme } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { sidePaneHeaderContainerStyles, sidePaneHeaderStyles } from '../common/styles/ParticipantContainer.styles';\nimport {\n  mobilePaneBackButtonStyles,\n  mobilePaneButtonStyles,\n  mobilePaneControlBarStyle,\n  mobilePaneHiddenIconStyles\n} from './styles/Pane.styles';\nimport { CallWithChatCompositeIcon } from './icons';\n\n/**\n * @private\n */\nexport const SidePaneHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n  mobileView: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const sidePaneCloseButtonStyles = useMemo(\n    () => ({\n      root: {\n        minWidth: '1.5rem',\n        padding: '0.5rem 0.25rem',\n        marginRight: '0.25rem',\n        backgroundColor: theme.semanticColors.bodyBackground,\n        '@media (forced-colors: active)': {\n          border: `0.1rem solid ${theme.palette.neutralSecondary}`,\n          borderRadius: theme.effects.roundedCorner4\n        }\n      },\n      icon: { color: theme.palette.neutralSecondary },\n      iconHovered: { color: theme.palette.neutralSecondary },\n      iconPressed: { color: theme.palette.neutralSecondary }\n    }),\n    [theme.palette.neutralSecondary, theme.semanticColors.bodyBackground, theme.effects.roundedCorner4]\n  );\n\n  if (props.mobileView) {\n    return <SidePaneMobileHeader {...props} />;\n  }\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" styles={sidePaneHeaderContainerStyles} verticalAlign=\"center\">\n      <Stack.Item role=\"heading\" styles={sidePaneHeaderStyles} aria-label={props.headingText} aria-level={2}>\n        {props.headingText}\n      </Stack.Item>\n      <Stack.Item>\n        <CommandBarButton\n          ariaLabel={props.dismissSidePaneButtonAriaLabel}\n          styles={sidePaneCloseButtonStyles}\n          iconProps={{ iconName: 'cancel' }}\n          onClick={props.onClose}\n          autoFocus\n        />\n      </Stack.Item>\n    </Stack>\n  );\n};\n\nconst SidePaneMobileHeader = (props: {\n  headingText?: string;\n  dismissSidePaneButtonAriaLabel?: string;\n  dismissSidePaneButtonAriaDescription?: string;\n  onClose: () => void;\n}): JSX.Element => {\n  const { headingText, dismissSidePaneButtonAriaLabel, dismissSidePaneButtonAriaDescription, onClose } = props;\n  const theme = useTheme();\n  const mobilePaneButtonStylesThemed = useMemo(() => {\n    return concatStyleSets(mobilePaneButtonStyles, {\n      root: {\n        width: '100%'\n      },\n      label: {\n        fontSize: theme.fonts.medium.fontSize,\n        fontWeight: theme.fonts.medium.fontWeight\n      }\n    });\n  }, [theme]);\n\n  return (\n    <Stack horizontal grow styles={mobilePaneControlBarStyle}>\n      <DefaultButton\n        ariaLabel={dismissSidePaneButtonAriaLabel}\n        ariaDescription={dismissSidePaneButtonAriaDescription}\n        onClick={onClose}\n        styles={mobilePaneBackButtonStyles}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n        autoFocus\n      ></DefaultButton>\n      <Stack.Item grow>\n        <DefaultButton checked={true} styles={mobilePaneButtonStylesThemed}>\n          {headingText}\n        </DefaultButton>\n      </Stack.Item>\n      {/* Hidden icon to take the same space as the actual back button on the left. */}\n      <DefaultButton\n        styles={mobilePaneHiddenIconStyles}\n        ariaHidden={true}\n        onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"ChevronLeft\" />}\n      ></DefaultButton>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js

@@ -127,8 +127,8 @@ const VideoEffectsPaneTrampoline = (onDismissError, updateFocusHandle, activeVid
     const showWarning = !isCameraOn && selectedEffect !== 'none';
     const locale = useLocale();
     return (React.createElement(Stack, { tokens: { childrenGap: '0.75rem' }, className: mergeStyles({ paddingLeft: '0.5rem' }) },
-        activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
-        showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
+        activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError), role: "alert", "aria-live": "assertive" }, locale.strings.call.unableToStartVideoEffect)),
+        showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, role: "alert", "aria-live": "assertive" }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect, componentRef: updateFocusHandle })));
     return React.createElement(React.Fragment, null);
 };