@azure/communication-react 1.30.0 → 1.31.0-beta.1

package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.d.ts

@@ -1,11 +1,13 @@
 export { createAzureCommunicationCallAdapter, _createAzureCommunicationCallAdapterInner, createAzureCommunicationCallAdapterFromClient, useAzureCommunicationCallAdapter } from './AzureCommunicationCallAdapter';
 export { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallAdapter } from './AzureCommunicationCallAdapter';
+export type { TeamsOutboundCallAdapterArgs, StartTeamsCallIdentifier } from './AzureCommunicationCallAdapter';
 export type { TeamsAdapterOptions } from './AzureCommunicationCallAdapter';
 export type { TeamsCallAdapterArgsCommon, TeamsCallAdapterArgs } from './AzureCommunicationCallAdapter';
 export type { OnFetchProfileCallback, Profile } from './OnFetchProfileCallback';
 export type { AzureCommunicationCallAdapterArgs, CallAdapterLocator, AzureCommunicationOutboundCallAdapterArgs } from './AzureCommunicationCallAdapter';
 export type { AzureCommunicationCallAdapterOptions } from './AzureCommunicationCallAdapter';
 export type { CommonCallAdapterOptions } from './AzureCommunicationCallAdapter';
+export type { CallParticipantsLocator } from './AzureCommunicationCallAdapter';
 export type { CallAdapter, CommonCallAdapter, CallAdapterCallEndedEvent, CallAdapterCallManagement, CallAdapterCallOperations, CallAdapterClientState, CallAdapterDeviceManagement, CallAdapterState, CallAdapterSubscribers, CallAdapterUiState, CallCompositePage, CallEndedListener, CallIdChangedListener, DiagnosticChangedEventListner, DisplayNameChangedListener, IsLocalScreenSharingActiveChangedListener, IsMutedChangedListener, IsSpeakingChangedListener, MediaDiagnosticChangedEvent, NetworkDiagnosticChangedEvent, ParticipantsJoinedListener, ParticipantsLeftListener, JoinCallOptions, StartCallIdentifier, StartCaptionsAdapterOptions, StopCaptionsAdapterOptions } from './CallAdapter';
 export type { CaptionsReceivedListener, IsCaptionsActiveChangedListener, IsCaptionLanguageChangedListener, IsSpokenLanguageChangedListener } from './CallAdapter';
 export type { RealTimeTextReceivedListener } from './CallAdapter';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/adapter/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,mCAAmC,EAAE,yCAAyC,EAAE,6CAA6C,EAAE,gCAAgC,EAAE,MAAM,iCAAiC,CAAC;AAClN,OAAO,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { createAzureCommunicationCallAdapter, _createAzureCommunicationCallAdapterInner, createAzureCommunicationCallAdapterFromClient, useAzureCommunicationCallAdapter } from './AzureCommunicationCallAdapter';\nexport { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallAdapter } from './AzureCommunicationCallAdapter';\nexport type { TeamsAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { TeamsCallAdapterArgsCommon, TeamsCallAdapterArgs } from './AzureCommunicationCallAdapter';\nexport type { OnFetchProfileCallback, Profile } from './OnFetchProfileCallback';\nexport type { AzureCommunicationCallAdapterArgs, CallAdapterLocator, AzureCommunicationOutboundCallAdapterArgs } from './AzureCommunicationCallAdapter';\nexport type { AzureCommunicationCallAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { CommonCallAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { CallAdapter, CommonCallAdapter, CallAdapterCallEndedEvent, CallAdapterCallManagement, CallAdapterCallOperations, CallAdapterClientState, CallAdapterDeviceManagement, CallAdapterState, CallAdapterSubscribers, CallAdapterUiState, CallCompositePage, CallEndedListener, CallIdChangedListener, DiagnosticChangedEventListner, DisplayNameChangedListener, IsLocalScreenSharingActiveChangedListener, IsMutedChangedListener, IsSpeakingChangedListener, MediaDiagnosticChangedEvent, NetworkDiagnosticChangedEvent, ParticipantsJoinedListener, ParticipantsLeftListener, JoinCallOptions, StartCallIdentifier, StartCaptionsAdapterOptions, StopCaptionsAdapterOptions } from './CallAdapter';\nexport type { CaptionsReceivedListener, IsCaptionsActiveChangedListener, IsCaptionLanguageChangedListener, IsSpokenLanguageChangedListener } from './CallAdapter';\nexport type { RealTimeTextReceivedListener } from './CallAdapter';\nexport type { TransferAcceptedListener } from './CallAdapter';\nexport type { CapabilitiesChangedListener } from './CallAdapter';\nexport type { SpotlightChangedListener } from './CallAdapter';\nexport type { TeamsCallAdapter } from './CallAdapter';\nexport type { CallingSounds, SoundEffect } from './CallAdapter';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/adapter/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,mCAAmC,EAAE,yCAAyC,EAAE,6CAA6C,EAAE,gCAAgC,EAAE,MAAM,iCAAiC,CAAC;AAClN,OAAO,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { createAzureCommunicationCallAdapter, _createAzureCommunicationCallAdapterInner, createAzureCommunicationCallAdapterFromClient, useAzureCommunicationCallAdapter } from './AzureCommunicationCallAdapter';\nexport { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallAdapter } from './AzureCommunicationCallAdapter';\nexport type { TeamsOutboundCallAdapterArgs, StartTeamsCallIdentifier } from './AzureCommunicationCallAdapter';\nexport type { TeamsAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { TeamsCallAdapterArgsCommon, TeamsCallAdapterArgs } from './AzureCommunicationCallAdapter';\nexport type { OnFetchProfileCallback, Profile } from './OnFetchProfileCallback';\nexport type { AzureCommunicationCallAdapterArgs, CallAdapterLocator, AzureCommunicationOutboundCallAdapterArgs } from './AzureCommunicationCallAdapter';\nexport type { AzureCommunicationCallAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { CommonCallAdapterOptions } from './AzureCommunicationCallAdapter';\nexport type { CallParticipantsLocator } from './AzureCommunicationCallAdapter';\nexport type { CallAdapter, CommonCallAdapter, CallAdapterCallEndedEvent, CallAdapterCallManagement, CallAdapterCallOperations, CallAdapterClientState, CallAdapterDeviceManagement, CallAdapterState, CallAdapterSubscribers, CallAdapterUiState, CallCompositePage, CallEndedListener, CallIdChangedListener, DiagnosticChangedEventListner, DisplayNameChangedListener, IsLocalScreenSharingActiveChangedListener, IsMutedChangedListener, IsSpeakingChangedListener, MediaDiagnosticChangedEvent, NetworkDiagnosticChangedEvent, ParticipantsJoinedListener, ParticipantsLeftListener, JoinCallOptions, StartCallIdentifier, StartCaptionsAdapterOptions, StopCaptionsAdapterOptions } from './CallAdapter';\nexport type { CaptionsReceivedListener, IsCaptionsActiveChangedListener, IsCaptionLanguageChangedListener, IsSpokenLanguageChangedListener } from './CallAdapter';\nexport type { RealTimeTextReceivedListener } from './CallAdapter';\nexport type { TransferAcceptedListener } from './CallAdapter';\nexport type { CapabilitiesChangedListener } from './CallAdapter';\nexport type { SpotlightChangedListener } from './CallAdapter';\nexport type { TeamsCallAdapter } from './CallAdapter';\nexport type { CallingSounds, SoundEffect } from './CallAdapter';"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallReadinessModal.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * @private
+ */
+export declare const CallReadinessModal: (props: {
+    mobileView: boolean;
+    modalLayerHostId: string;
+    permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    };
+    isPermissionsModalDismissed: boolean;
+    setIsPermissionsModalDismissed: (dismissedState: boolean) => void;
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    doNotPromptCamera: boolean;
+}) => JSX.Element;
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * This is used when permission API is not supported
+ * @private
+ */
+export declare const CallReadinessModalFallBack: (props: {
+    mobileView: boolean;
+    checkPermissionModalShowing: boolean;
+    permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    };
+    modalLayerHostId: string;
+    isPermissionsModalDismissed: boolean;
+    setIsPermissionsModalDismissed: (dismissedState: boolean) => void;
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+}) => JSX.Element;
+/**
+ * Placeholder for conditional compile
+ * @private
+ */
+export declare const CallReadinessModalPlaceHolder: () => JSX.Element;
+//# sourceMappingURL=CallReadinessModal.d.ts.map

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

@@ -0,0 +1,200 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from "../../../../../react-components/src";
+import { _ModalClone } from "../../../../../react-components/src";
+import { drawerContainerStyles } from '../styles/CallComposite.styles';
+const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * @private
+ */
+export const CallReadinessModal = (props) => {
+    const { mobileView, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const onLightDismissTriggered = () => {
+        // do nothing here
+        // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+    };
+    // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    const showModal = !props.doNotPromptCamera && videoState === 'denied' || !props.doNotPromptCamera && videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';
+    const modal = !showModal ? undefined : () => {
+        // if both video and audio permission are not set
+        if (videoState === 'prompt' && !props.doNotPromptCamera && audioState === 'prompt') {
+            return React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "request" });
+        }
+        // if audio permission is set up but video is not
+        else if (videoState === 'prompt' && !props.doNotPromptCamera) {
+            return React.createElement(CameraSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, onContinueAnywayClick: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, kind: "request" });
+        }
+        // if video permission is set up but audio is not
+        else if (audioState === 'prompt') {
+            return React.createElement(MicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "request" });
+        }
+        // if both video and audio are denied
+        else if (videoState === 'denied' && !props.doNotPromptCamera && audioState === 'denied') {
+            return React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "denied" });
+        }
+        // if only video is denied
+        else if (videoState === 'denied' && !props.doNotPromptCamera) {
+            return React.createElement(CameraSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, onContinueAnywayClick: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, kind: "denied" });
+        }
+        // if only audio is denied
+        else {
+            return React.createElement(MicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "denied" });
+        }
+    };
+    if (mobileView && modal !== undefined) {
+        return React.createElement(React.Fragment, null, isPermissionsModalDismissed && React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()));
+    }
+    else if (!mobileView && modal !== undefined) {
+        return React.createElement(_ModalClone, { styles: {
+                root: {
+                    position: 'unset'
+                },
+                main: {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translate(-50%, -50%)'
+                }
+            }, layerProps: {
+                hostId: props.modalLayerHostId
+            }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                setIsPermissionsModalDismissed(false);
+            }, overlay: {
+                styles: {
+                    root: {
+                        background: 'rgba(0,0,0,0.4)'
+                    }
+                }
+            }, forceFocusInsideTrap: true, focusTrapZoneProps: {
+                disabled: false,
+                onKeyDown: (ev) => {
+                    if (ev.key === 'Escape') {
+                        setIsPermissionsModalDismissed(false);
+                    }
+                }
+            } }, modal());
+    }
+    else {
+        return React.createElement(React.Fragment, null);
+    }
+};
+/**
+ * Modal that guides user through enabling their camera and mic access
+ * This is used when permission API is not supported
+ * @private
+ */
+export const CallReadinessModalFallBack = (props) => {
+    const { mobileView, checkPermissionModalShowing, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const onLightDismissTriggered = () => {
+        // do nothing here
+        // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+    };
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    // When permissions are not set, do nothing here
+    // When permissions are set to denied, show helper screen
+    const showModal = videoState === 'denied' || audioState === 'denied';
+    const modal = !showModal ? undefined : () => {
+        if (videoState === 'denied' && audioState === 'denied') {
+            return React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "denied" });
+        }
+        else if (videoState === 'denied' && audioState === 'granted') {
+            return React.createElement(CameraSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, onContinueAnywayClick: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, kind: "denied" });
+        }
+        else {
+            return React.createElement(MicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                    onPermissionsTroubleshootingClick(permissionsState);
+                } : undefined, kind: "denied" });
+        }
+    };
+    if (mobileView) {
+        return React.createElement(React.Fragment, null,
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    } : undefined, kind: "check" })),
+            isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()));
+    }
+    else {
+        return React.createElement(React.Fragment, null,
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && React.createElement(_ModalClone, { styles: {
+                    root: {
+                        position: 'unset'
+                    },
+                    main: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)'
+                    }
+                }, layerProps: {
+                    hostId: props.modalLayerHostId
+                }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, overlay: {
+                    styles: {
+                        root: {
+                            background: 'rgba(0,0,0,0.4)'
+                        }
+                    }
+                } },
+                React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    } : undefined, kind: "check" })),
+            !checkPermissionModalShowing && modal !== undefined && React.createElement(_ModalClone, { styles: {
+                    root: {
+                        position: 'unset'
+                    },
+                    main: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)'
+                    }
+                }, layerProps: {
+                    hostId: props.modalLayerHostId
+                }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+                    setIsPermissionsModalDismissed(false);
+                }, overlay: {
+                    styles: {
+                        root: {
+                            background: 'rgba(0,0,0,0.4)'
+                        }
+                    }
+                } }, modal()));
+    }
+};
+/**
+ * Placeholder for conditional compile
+ * @private
+ */
+export const CallReadinessModalPlaceHolder = () => {
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=CallReadinessModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/CallReadinessModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kCAAkC,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,cAAc,EAAE,4CAAmC;AAClJ,OAAO,EAAE,WAAW,EAAE,4CAAmC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,kBAAkB,GAAG,EAAE,CAAC,CAAC,6DAA6D;AAC5F;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAclC,EAAe,EAAE;IAChB,MAAM,EACJ,UAAU,EACV,gBAAgB,EAChB,2BAA2B,EAC3B,8BAA8B,EAC9B,iCAAiC,EAClC,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,kBAAkB;QAClB,2GAA2G;IAC7G,CAAC,CAAC;IAEF,+MAA+M;IAC/M,MAAM,UAAU,GAAoB,gBAAgB,CAAC,MAAM,CAAC;IAC5D,MAAM,UAAU,GAAoB,gBAAgB,CAAC,UAAU,CAAC;IAChE,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,iBAAiB,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC;IACnL,MAAM,KAAK,GAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE;QAC3E,iDAAiD;QACjD,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YACnF,OAAO,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC1H,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;QACnC,CAAC;QACD,iDAAiD;aAC5C,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC7D,OAAO,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC7G,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,qBAAqB,EAAE,GAAG,EAAE;oBACzC,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;QACvB,CAAC;QACD,iDAAiD;aAC5C,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,oBAAC,yBAAyB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBACjH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;QACnC,CAAC;QACD,qCAAqC;aAChC,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YACxF,OAAO,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC1H,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QAClC,CAAC;QACD,0BAA0B;aACrB,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC7D,OAAO,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC7G,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,qBAAqB,EAAE,GAAG,EAAE;oBACzC,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QACtB,CAAC;QACD,0BAA0B;aACrB,CAAC;YACJ,OAAO,oBAAC,yBAAyB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBACjH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;IACF,IAAI,UAAU,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACtC,OAAO,0CACF,2BAA2B,IAAI,oBAAC,cAAc,IAAC,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,IAC7J,KAAK,EAAE,CACO,CAClB,CAAC;IACR,CAAC;SAAM,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,oBAAC,WAAW,IAAC,MAAM,EAAE;gBAC1B,IAAI,EAAE;oBACJ,QAAQ,EAAE,OAAO;iBAClB;gBACD,IAAI,EAAE;oBACJ,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,KAAK;oBACX,GAAG,EAAE,KAAK;oBACV,SAAS,EAAE,uBAAuB;iBACnC;aACF,EAAE,UAAU,EAAE;gBACb,MAAM,EAAE,KAAK,CAAC,gBAAgB;aAC/B,EAAE,MAAM,EAAE,2BAA2B,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE;gBACzE,8BAA8B,CAAC,KAAK,CAAC,CAAC;YACxC,CAAC,EAAE,OAAO,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,UAAU,EAAE,iBAAiB;qBAC9B;iBACF;aACF,EAAE,oBAAoB,EAAE,IAAI,EAAE,kBAAkB,EAAE;gBACjD,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,CAAC,EAAoC,EAAE,EAAE;oBAClD,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;wBACxB,8BAA8B,CAAC,KAAK,CAAC,CAAC;oBACxC,CAAC;gBACH,CAAC;aACF,IACI,KAAK,EAAE,CACI,CAAC;IACnB,CAAC;SAAM,CAAC;QACN,OAAO,yCAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC;AACF;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAc1C,EAAe,EAAE;IAChB,MAAM,EACJ,UAAU,EACV,2BAA2B,EAC3B,gBAAgB,EAChB,2BAA2B,EAC3B,8BAA8B,EAC9B,iCAAiC,EAClC,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,kBAAkB;QAClB,2GAA2G;IAC7G,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC;IAC3C,MAAM,UAAU,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAE/C,gDAAgD;IAChD,yDAAyD;IACzD,MAAM,SAAS,GAAG,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC;IACrE,MAAM,KAAK,GAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE;QAC3E,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YACvD,OAAO,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC1H,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QAClC,CAAC;aAAM,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC/D,OAAO,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC7G,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,qBAAqB,EAAE,GAAG,EAAE;oBACzC,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,OAAO,oBAAC,yBAAyB,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;oBACjH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;IACF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO;YACF,CAAC,2BAA2B,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC,IAAI,oBAAC,cAAc,IAAC,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC;gBACtN,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;wBACvH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;oBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,GAAG,CACX;YAClB,2BAA2B,IAAI,CAAC,2BAA2B,IAAI,KAAK,KAAK,SAAS,IAAI,oBAAC,cAAc,IAAC,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,IACpN,KAAK,EAAE,CACO,CAClB,CAAC;IACR,CAAC;SAAM,CAAC;QACN,OAAO;YACF,CAAC,2BAA2B,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC,IAAI,oBAAC,WAAW,IAAC,MAAM,EAAE;oBAC7G,IAAI,EAAE;wBACJ,QAAQ,EAAE,OAAO;qBAClB;oBACD,IAAI,EAAE;wBACJ,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,KAAK;wBACV,SAAS,EAAE,uBAAuB;qBACnC;iBACF,EAAE,UAAU,EAAE;oBACb,MAAM,EAAE,KAAK,CAAC,gBAAgB;iBAC/B,EAAE,MAAM,EAAE,2BAA2B,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE;oBACzE,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EAAE,OAAO,EAAE;oBACV,MAAM,EAAE;wBACN,IAAI,EAAE;4BACJ,UAAU,EAAE,iBAAiB;yBAC9B;qBACF;iBACF;gBACK,oBAAC,kCAAkC,IAAC,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,iCAAiC,CAAC,CAAC,CAAC,GAAG,EAAE;wBACvH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;oBACtD,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,GAAG,CACd;YAEf,CAAC,2BAA2B,IAAI,KAAK,KAAK,SAAS,IAAI,oBAAC,WAAW,IAAC,MAAM,EAAE;oBAC7E,IAAI,EAAE;wBACJ,QAAQ,EAAE,OAAO;qBAClB;oBACD,IAAI,EAAE;wBACJ,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,KAAK;wBACV,SAAS,EAAE,uBAAuB;qBACnC;iBACF,EAAE,UAAU,EAAE;oBACb,MAAM,EAAE,KAAK,CAAC,gBAAgB;iBAC/B,EAAE,MAAM,EAAE,2BAA2B,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE;oBACzE,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EAAE,OAAO,EAAE;oBACV,MAAM,EAAE;wBACN,IAAI,EAAE;4BACJ,UAAU,EAAE,iBAAiB;yBAC9B;qBACF;iBACF,IACM,KAAK,EAAE,CACI,CACf,CAAC;IACR,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAgB,EAAE;IAC7D,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from '@internal/react-components';\nimport { _ModalClone } from '@internal/react-components';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { _isSafari } from '../utils';\nconst DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (dismissedState: boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  doNotPromptCamera: boolean;\n}): JSX.Element => {\n  const {\n    mobileView,\n    permissionsState,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)\n  const videoState: PermissionState = permissionsState.camera;\n  const audioState: PermissionState = permissionsState.microphone;\n  const showModal = !props.doNotPromptCamera && videoState === 'denied' || !props.doNotPromptCamera && videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';\n  const modal: undefined | (() => JSX.Element) = !showModal ? undefined : () => {\n    // if both video and audio permission are not set\n    if (videoState === 'prompt' && !props.doNotPromptCamera && audioState === 'prompt') {\n      return <CameraAndMicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"request\" />;\n    }\n    // if audio permission is set up but video is not\n    else if (videoState === 'prompt' && !props.doNotPromptCamera) {\n      return <CameraSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} onContinueAnywayClick={() => {\n        setIsPermissionsModalDismissed(false);\n      }} kind=\"request\" />;\n    }\n    // if video permission is set up but audio is not\n    else if (audioState === 'prompt') {\n      return <MicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"request\" />;\n    }\n    // if both video and audio are denied\n    else if (videoState === 'denied' && !props.doNotPromptCamera && audioState === 'denied') {\n      return <CameraAndMicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"denied\" />;\n    }\n    // if only video is denied\n    else if (videoState === 'denied' && !props.doNotPromptCamera) {\n      return <CameraSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} onContinueAnywayClick={() => {\n        setIsPermissionsModalDismissed(false);\n      }} kind=\"denied\" />;\n    }\n    // if only audio is denied\n    else {\n      return <MicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"denied\" />;\n    }\n  };\n  if (mobileView && modal !== undefined) {\n    return <>\n        {isPermissionsModalDismissed && <_DrawerSurface disableMaxHeight={true} onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>}\n      </>;\n  } else if (!mobileView && modal !== undefined) {\n    return <_ModalClone styles={{\n      root: {\n        position: 'unset'\n      },\n      main: {\n        position: 'absolute',\n        left: '50%',\n        top: '50%',\n        transform: 'translate(-50%, -50%)'\n      }\n    }} layerProps={{\n      hostId: props.modalLayerHostId\n    }} isOpen={isPermissionsModalDismissed} isBlocking={false} onDismiss={() => {\n      setIsPermissionsModalDismissed(false);\n    }} overlay={{\n      styles: {\n        root: {\n          background: 'rgba(0,0,0,0.4)'\n        }\n      }\n    }} forceFocusInsideTrap={true} focusTrapZoneProps={{\n      disabled: false,\n      onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (ev.key === 'Escape') {\n          setIsPermissionsModalDismissed(false);\n        }\n      }\n    }}>\n        {modal()}\n      </_ModalClone>;\n  } else {\n    return <></>;\n  }\n};\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n  mobileView: boolean;\n  checkPermissionModalShowing: boolean;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  modalLayerHostId: string;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (dismissedState: boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    checkPermissionModalShowing,\n    permissionsState,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n  const videoState = permissionsState.camera;\n  const audioState = permissionsState.microphone;\n\n  // When permissions are not set, do nothing here\n  // When permissions are set to denied, show helper screen\n  const showModal = videoState === 'denied' || audioState === 'denied';\n  const modal: undefined | (() => JSX.Element) = !showModal ? undefined : () => {\n    if (videoState === 'denied' && audioState === 'denied') {\n      return <CameraAndMicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"denied\" />;\n    } else if (videoState === 'denied' && audioState === 'granted') {\n      return <CameraSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} onContinueAnywayClick={() => {\n        setIsPermissionsModalDismissed(false);\n      }} kind=\"denied\" />;\n    } else {\n      return <MicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n        onPermissionsTroubleshootingClick(permissionsState);\n      } : undefined} kind=\"denied\" />;\n    }\n  };\n  if (mobileView) {\n    return <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && <_DrawerSurface disableMaxHeight={true} onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            <CameraAndMicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n          onPermissionsTroubleshootingClick(permissionsState);\n        } : undefined} kind=\"check\" />\n          </_DrawerSurface>}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && <_DrawerSurface disableMaxHeight={true} onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>\n            {modal()}\n          </_DrawerSurface>}\n      </>;\n  } else {\n    return <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && <_ModalClone styles={{\n        root: {\n          position: 'unset'\n        },\n        main: {\n          position: 'absolute',\n          left: '50%',\n          top: '50%',\n          transform: 'translate(-50%, -50%)'\n        }\n      }} layerProps={{\n        hostId: props.modalLayerHostId\n      }} isOpen={isPermissionsModalDismissed} isBlocking={false} onDismiss={() => {\n        setIsPermissionsModalDismissed(false);\n      }} overlay={{\n        styles: {\n          root: {\n            background: 'rgba(0,0,0,0.4)'\n          }\n        }\n      }}>\n            <CameraAndMicrophoneSitePermissions appName={'app'} onTroubleshootingClick={onPermissionsTroubleshootingClick ? () => {\n          onPermissionsTroubleshootingClick(permissionsState);\n        } : undefined} kind=\"check\" />\n          </_ModalClone>}\n\n        {!checkPermissionModalShowing && modal !== undefined && <_ModalClone styles={{\n        root: {\n          position: 'unset'\n        },\n        main: {\n          position: 'absolute',\n          left: '50%',\n          top: '50%',\n          transform: 'translate(-50%, -50%)'\n        }\n      }} layerProps={{\n        hostId: props.modalLayerHostId\n      }} isOpen={isPermissionsModalDismissed} isBlocking={false} onDismiss={() => {\n        setIsPermissionsModalDismissed(false);\n      }} overlay={{\n        styles: {\n          root: {\n            background: 'rgba(0,0,0,0.4)'\n          }\n        }\n      }}>\n            {modal()}\n          </_ModalClone>}\n      </>;\n  }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n  return <></>;\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { _DevicePermissionDropdownProps } from "../../../../../react-components/src";
 /**
  * @private
  */
 export interface ConfigurationPageCameraDropdownProps {
     cameraGrantedDropdown: JSX.Element;
     cameraPermissionGranted: boolean;
+    dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
     ariaLabelledby?: string;
 }

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

@@ -1,7 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageCameraDropdown = (props) => {
+    const theme = useTheme();
+    const devicePermissionDropdownStringsCamera = {
+        placeHolderText: 'Enable Camera (optional)',
+        actionButtonContent: 'Allow'
+    };
+    const cameraBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
+            video: true,
+            audio: false
+        }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: {
+                height: '1.25rem',
+                marginRight: '0.625rem'
+            } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby }));
+    return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;
 };
 //# sourceMappingURL=ConfigurationPageCameraDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  return props.cameraGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,qBAAqB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC1H,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,KAAK;SACb,EAAE,OAAO,EAAE,qCAAqC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE;gBAClH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IAC9F,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAC3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  const cameraBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: true,\n    audio: false\n  }} strings={devicePermissionDropdownStringsCamera} icon={<CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} ariaLabelledby={props.ariaLabelledby} />;\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n  return props.cameraGrantedDropdown;\n};"]}

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

@@ -1,13 +1,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-import { ErrorBar } from "../../../../../react-components/src";
+import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-components/src";
 import { FocusZone } from '@fluentui/react';
 /**
  * @private
  */
 export const ConfigurationPageErrorBar = (props) => {
-    const { errorBarProps } = props;
+    const { errorBarProps, showTroubleShootingErrorBar = false, onPermissionsTroubleshootingClick, onNetworkingTroubleShootingClick, permissionsState } = props;
+    const permissionTroubleshootingGuideStrings = {
+        devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
+        networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
+        dismissButtonText: 'OK'
+    };
+    if (showTroubleShootingErrorBar) {
+        return React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError }));
+    }
     if (errorBarProps.activeErrorMessages.length === 0) {
         return React.createElement(React.Fragment, null);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuM,QAAQ,EAAE,4CAAmC;AAG3P,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa,EACd,GAAG,KAAK,CAAC;IACV,IAAI,aAAa,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,SAAS,IAAC,kBAAkB;QAChC,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAC3D,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps, ActiveErrorMessage, ErrorBarProps, _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBar, ErrorBar } from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\nimport { FocusZone } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps\n  } = props;\n  if (errorBarProps.activeErrorMessages.length === 0) {\n    return <></>;\n  }\n  return <FocusZone shouldFocusOnMount>\n      <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n    </FocusZone>;\n};"]}
+{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwK,6BAA6B,EAAE,QAAQ,EAAE,4CAAmC;AAG3P,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa,EACb,2BAA2B,GAAG,KAAK,EACnC,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IACF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,oBAAC,6BAA6B,kBAAC,2BAA2B,EAAE,qCAAqC,EAAE,iCAAiC,EAAE,iCAAiC,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IACtV,CAAC;IACD,IAAI,aAAa,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,SAAS,IAAC,kBAAkB;QAChC,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAC3D,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps, ActiveErrorMessage, ErrorBarProps, _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBar, ErrorBar } from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\nimport { FocusZone } from '@fluentui/react';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    showTroubleShootingErrorBar = false,\n    onPermissionsTroubleshootingClick,\n    onNetworkingTroubleShootingClick,\n    permissionsState\n  } = props;\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n  if (showTroubleShootingErrorBar) {\n    return <_TroubleshootingGuideErrorBar troubleshootingGuideStrings={permissionTroubleshootingGuideStrings} onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick} onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick} permissionsState={permissionsState} {...errorBarProps} onDismissError={props.onDismissError} />;\n  }\n  if (errorBarProps.activeErrorMessages.length === 0) {\n    return <></>;\n  }\n  return <FocusZone shouldFocusOnMount>\n      <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n    </FocusZone>;\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { _DevicePermissionDropdownProps } from "../../../../../react-components/src";
 /**
  * @private
  */
 export interface ConfigurationPageMicDropdownProps {
     micGrantedDropdown: JSX.Element;
     micPermissionGranted: boolean;
+    dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
     ariaLabelledby?: string;
 }

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

@@ -1,7 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageMicDropdown = (props) => {
+    const theme = useTheme();
+    const devicePermissionDropdownStringsMicrophone = {
+        placeHolderText: 'Enable Microphone (required)',
+        actionButtonContent: 'Allow'
+    };
+    const microphoneBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
+            video: false,
+            audio: true
+        }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: {
+                height: '1.25rem',
+                marginRight: '0.625rem'
+            } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby }));
+    return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
     return props.micGrantedDropdown;
 };
 //# sourceMappingURL=ConfigurationPageMicDropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  return props.micGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,yBAAyB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC9H,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,IAAI;SACZ,EAAE,OAAO,EAAE,yCAAyC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE;gBACnH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IAC9F,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IACzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n  ariaLabelledby?: string;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Microphone (required)',\n    actionButtonContent: 'Allow'\n  };\n  const microphoneBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: false,\n    audio: true\n  }} strings={devicePermissionDropdownStringsMicrophone} icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} ariaLabelledby={props.ariaLabelledby} />;\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n  return props.micGrantedDropdown;\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.d.ts

@@ -16,6 +16,7 @@ export interface LocalDeviceSettingsType {
     onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;
     onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;
     onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;
+    onClickEnableDevicePermission?: () => void;
     onClickVideoEffects?: () => void;
 }
 /**

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

@@ -12,7 +12,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Dropdown, Label, mergeStyles, Stack } from '@fluentui/react';
 import { DefaultButton } from '@fluentui/react';
 import { useEffect } from 'react';
-import { useTheme } from "../../../../../react-components/src";
+import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
 import React from 'react';
 import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
@@ -20,6 +20,7 @@ import { deviceSelectionContainerStyles, dropDownStyles, dropDownTitleIconStyles
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';
 import { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';
+import { useHandlers } from '../hooks/useHandlers';
 import { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';
 import { effectsButtonStyles } from '../styles/CallConfiguration.styles';
 import { useSelector } from '../hooks/useSelector';
@@ -98,6 +99,7 @@ export const LocalDeviceSettings = (props) => {
         }
         adapter.querySpeakers();
     }, [adapter, cameraPermissionGranted, micPermissionGranted]);
+    const dropdownProps = useHandlers(_DevicePermissionDropdown);
     const hasCameras = props.cameras.length > 0;
     const hasMicrophones = props.microphones.length > 0;
     const hasSpeakers = props.speakers.length > 0;
@@ -145,11 +147,11 @@ export const LocalDeviceSettings = (props) => {
                 onResolveVideoEffectDependency && React.createElement(DefaultButton, { iconProps: {
                         iconName: 'ConfigurationScreenVideoEffectsButton'
                     }, styles: effectsButtonStyles(theme, !cameraPermissionGranted), onClick: props.onClickVideoEffects, disabled: !cameraPermissionGranted, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel)),
-            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, ariaLabelledby: cameraLabelId })),
+            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, dropdownProps: dropdownProps, onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: cameraLabelId })),
         React.createElement(Stack, null,
             React.createElement(Label, { id: soundLabelId, className: mergeStyles(dropDownStyles(theme).label) }, soundLabel),
             React.createElement(Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
-                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, ariaLabelledby: soundLabelId }),
+                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, dropdownProps: dropdownProps, onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: soundLabelId }),
                 isSafariWithNoSpeakers ? React.createElement(React.Fragment, null) : speakerDropdown)));
 };
 const defaultDeviceId = (devices) => {