@azure/communication-react 1.3.3-alpha-202208180014.0 → 1.3.3-alpha-202208230020.0

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208180014.0';
+var telemetryVersion = '1.3.3-alpha-202208230020.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4589,14 +4589,14 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 const ParticipantList = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const ids = useIdentifiers();
     const strings = useLocale$1().strings.participantItem;
     const displayedParticipants = React.useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
-    const createParticipantMenuItems = (participant) => {
+    const createParticipantMenuItems = React.useCallback((participant) => {
         var _a, _b;
         let menuItems = [];
         let disabled = !participant.isRemovable;
@@ -4620,9 +4620,16 @@ const ParticipantList = (props) => {
             menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);
         }
         return menuItems;
-    };
-    const participantItemStyles = react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles);
-    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
+    }, [
+        ids.participantListRemoveParticipantButton,
+        myUserId,
+        onFetchParticipantMenuItems,
+        onRemoveParticipant,
+        (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
+        strings.removeButtonLabel
+    ]);
+    const participantItemStyles = React.useMemo(() => { var _a; return react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
@@ -4849,19 +4856,6 @@ const iconContainerStyle = {
         display: 'block'
     }
 };
-/**
- * @private
- */
-const isSpeakingBorderDiv = {
-    zIndex: 1,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    // Ensure the isSpeaking element does not steal any pointer events such as onClick events
-    pointerEvents: 'none'
-};
 /**
  * @private
  */
@@ -4946,11 +4940,17 @@ const VideoTile = (props) => {
         React__default['default'].createElement(react.Stack, { "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
                 background: theme.palette.neutralLighter,
                 borderRadius: theme.effects.roundedCorner4
-            }, styles === null || styles === void 0 ? void 0 : styles.root) },
-            React__default['default'].createElement("div", { className: react.mergeStyles(isSpeakingBorderDiv, {
+            }, isSpeaking && {
+                '&::before': {
+                    content: `''`,
+                    position: 'absolute',
+                    zIndex: 1,
+                    border: `0.25rem solid ${theme.palette.themePrimary}`,
                     borderRadius: theme.effects.roundedCorner4,
-                    border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
-                }) }),
+                    width: '100%',
+                    height: '100%'
+                }
+            }, styles === null || styles === void 0 ? void 0 : styles.root) },
             isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 canShowLabel && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
@@ -6304,12 +6304,7 @@ const VideoGallery = (props) => {
         maxDominantSpeakers: maxRemoteVideoStreams
     }).slice(0, maxRemoteVideoStreams);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    visibleCallingParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleCallingParticipants.current,
-        maxDominantSpeakers: 0
-    });
+    visibleCallingParticipants.current = (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [];
     // This set will be used to filter out participants already in visibleVideoParticipants
     const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -12711,7 +12706,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpad:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpad:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -14359,6 +14354,19 @@ const adaptCompositeState = (compositeState) => {
     compositeState.latestErrors, compositeState.displayName);
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Subset of CallCompositePages that represent an end call state.
+ * @private
+ */
+const END_CALL_PAGES = [
+    'accessDeniedTeamsMeeting',
+    'joinCallFailedDueToNoNetwork',
+    'leftCall',
+    'removedFromCall'
+];
+
 // Copyright (c) Microsoft Corporation.
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
 const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
@@ -14474,6 +14482,48 @@ const getCallCompositePage = (call, previousCall) => {
     // No call state - show starting page (configuration)
     return 'configuration';
 };
+/** @private */
+const IsCallEndedPage = (
+/**
+ * Explicitly listing the pages of this function intentionally.
+ * This protects against adding a new composite page that should be marked as an callEndedPage.
+ * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
+ * When you add a new composite page this will throw a compiler error. If this new page is an
+ * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
+ * type below to allow your new page, i.e. add `| <your new page>
+ */
+page) => END_CALL_PAGES.includes(page);
+/**
+ * Creates a new call control options object and sets the correct values for disabling
+ * the buttons provided in the `disabledControls` array.
+ * Returns a new object without changing the original object.
+ * @param callControlOptions options for the call control component that need to be modified.
+ * @param disabledControls An array of controls to disable.
+ * @returns a copy of callControlOptions with disabledControls disabled
+ * @private
+ */
+const disableCallControls = (callControlOptions, disabledControls) => {
+    var _a;
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
+    if (newOptions === true || newOptions === undefined) {
+        newOptions = disabledControls.reduce((acc, key) => {
+            acc[key] = { disabled: true };
+            return acc;
+        }, {});
+    }
+    else {
+        disabledControls.forEach((key) => {
+            if (newOptions[key] !== false) {
+                newOptions[key] = { disabled: true };
+            }
+        });
+    }
+    return newOptions;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -14677,7 +14727,7 @@ const concatButtonBaseStyles = (...styles) => {
 const Camera = (props) => {
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14723,7 +14773,7 @@ const Devices = (props) => {
     /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
     , Object.assign({ 
         /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
-        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles })));
+        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14830,7 +14880,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14841,7 +14891,7 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option), styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
+    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
 const isDisabled$2 = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -14859,7 +14909,7 @@ const ScreenShare = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */
         return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled$1(props.option);
     };
-    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled(), styles: styles })));
+    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() || props.disabled, styles: styles })));
 };
 const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -14925,9 +14975,11 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
         field: {
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
-            padding: '1.063rem 0.5rem',
+            padding: '0 0.5rem ',
             textAlign: 'center',
-            paddingTop: 0
+            ':active': {
+                padding: '0 0.5rem'
+            }
         }
     },
     primaryContent: {
@@ -14997,7 +15049,7 @@ const SendDtmfDialpad = (props) => {
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React__default['default'].createElement(react.Stack, null,
+        React__default['default'].createElement(react.Stack, { style: { overflow: 'hidden' } },
             React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
 };
 
@@ -15045,7 +15097,8 @@ const CallControls = (props) => {
                 iconProps: { iconName: 'ControlButtonParticipants', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
-                }
+                },
+                ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
         items.push({
@@ -15057,12 +15110,14 @@ const CallControls = (props) => {
             iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
-            }
+            },
+            disabled: isDisabled(options === null || options === void 0 ? void 0 : options.holdButton),
+            ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
         items.push({
             key: 'showDialpadKey',
-            text: localeStrings.strings.call.openDtmfDialpad,
+            text: localeStrings.strings.call.openDtmfDialpadLabel,
             onClick: () => {
                 setShowDialpad(true);
             },
@@ -15091,26 +15146,26 @@ const CallControls = (props) => {
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
-                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */ !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile })) && (
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton), strings: peopleButtonStrings })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize })),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
+                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled$2 = (option) => option !== false;
-/* @conditional-compile-remove(one-to-n-calling) */
 const isDisabled = (option) => {
-    if (option === undefined || option === true || option === false) {
-        return false;
+    if (typeof option !== 'boolean') {
+        return !!(option === null || option === void 0 ? void 0 : option.disabled);
     }
-    return option.disabled;
+    return option;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15594,9 +15649,11 @@ const themedDialpadStyle = (isMobile, theme) => ({
         field: {
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
-            padding: '1.063rem 0.5rem',
+            padding: '0 0.5rem',
             textAlign: isMobile ? 'center' : 'left',
-            paddingTop: 0
+            ':active': {
+                padding: '0 0.5rem'
+            }
         }
     },
     primaryContent: {
@@ -15658,7 +15715,7 @@ const CallingDialpad = (props) => {
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React__default['default'].createElement(react.Text, null, strings.dialpadModalTitle),
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React__default['default'].createElement(react.Stack, null, dialpadComponent()))));
+        React__default['default'].createElement(react.Stack, { style: { overflow: 'hidden' } }, dialpadComponent()))));
 };
 function DialpadStartCallIconTrampoline() {
     /* @conditional-compile-remove(PSTN-calls) */
@@ -16119,7 +16176,7 @@ const textStyle = (theme) => {
  * @private
  */
 const CallArrangement = (props) => {
-    var _a;
+    var _a, _b;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -16166,13 +16223,25 @@ const CallArrangement = (props) => {
         return callCompositeContainerCSS;
     };
     /* @conditional-compile-remove(one-to-n-calling) */
-    const callPaneContent = () => {
+    const callPaneContent = React.useCallback(() => {
         var _a;
-        if (adapter && _isInCall(callStatus)) {
+        if (adapter && _isInCall(callStatus) && activePane === 'people') {
             return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
-    };
+    }, [
+        activePane,
+        adapter,
+        callStatus,
+        closePane,
+        props.callControlProps.callInvitationURL,
+        (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
+        props.callControlProps.options,
+        props.mobileView,
+        props.modalLayerHostId,
+        props.onFetchAvatarPersonaData,
+        selectPeople
+    ]);
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -16185,7 +16254,7 @@ const CallArrangement = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
                     React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
                 callPaneContent()),
-            ((_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.options) !== false &&
+            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
                 /* @conditional-compile-remove(one-to-n-calling) */ !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
                 React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -17043,7 +17112,7 @@ const LobbyPage = (props) => {
     let callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
-    callControlOptions = disableLobbyPageControls(callControlOptions);
+    callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
     return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
@@ -17051,27 +17120,6 @@ const LobbyPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
 };
-const disableLobbyPageControls = (callControlOptions) => {
-    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
-    let newOptions = callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions;
-    if (newOptions !== false) {
-        if (newOptions === true || newOptions === undefined) {
-            newOptions = {
-                participantsButton: { disabled: true },
-                screenShareButton: { disabled: true }
-            };
-        }
-        else {
-            if (newOptions.participantsButton !== false) {
-                newOptions.participantsButton = { disabled: true };
-            }
-            if (newOptions.screenShareButton !== false) {
-                newOptions.screenShareButton = { disabled: true };
-            }
-        }
-    }
-    return newOptions;
-};
 const overlayProps = (strings, inLobby) => inLobby ? overlayPropsWaitingToBeAdmitted(strings) : overlayPropsConnectingToCall(strings);
 const overlayPropsConnectingToCall = (strings) => ({
     title: strings.lobbyScreenConnectingToCallTitle,
@@ -17184,7 +17232,7 @@ const HoldPane = () => {
             React__default['default'].createElement(react.PrimaryButton, { text: strings.resumeCallButtonLabel, ariaLabel: strings.resumeCallButtonAriaLabel, styles: resumeButtonStyles, onClick: () => {
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                     holdButtonProps.onToggleHold();
-                } }))));
+                }, "data-ui-id": "hold-page-resume-call-button" }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -17221,9 +17269,18 @@ const HoldPage = (props) => {
     var _a, _b, _c;
     const errorBarProps = usePropsFor$1(ErrorBar);
     const strings = useLocale().strings.call;
-    const callControlOptions = props.mobileView
+    let callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
+    callControlOptions = disableCallControls(callControlOptions, [
+        'cameraButton',
+        'microphoneButton',
+        'devicesButton',
+        'screenShareButton',
+        /* @conditional-compile-remove(PSTN-calls) */
+        /* @conditional-compile-remove(one-to-n-calling) */
+        'holdButton'
+    ]);
     return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
@@ -17308,12 +17365,20 @@ const CallComposite = (props) => {
     role } = props;
     React.useEffect(() => {
         (() => __awaiter$5(void 0, void 0, void 0, function* () {
+            /* @conditional-compile-remove(rooms) */
+            if (role === 'Consumer') {
+                // Need to ask for audio devices to get access to speakers. Speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
+                // actually granting access to query both microphone and speaker. TODO: Need some investigation to see if we can get access to speakers without SDK.
+                yield adapter.askDevicePermission({ video: false, audio: true });
+                adapter.querySpeakers();
+                return;
+            }
             yield adapter.askDevicePermission({ video: true, audio: true });
             adapter.queryCameras();
             adapter.queryMicrophones();
             adapter.querySpeakers();
         }))();
-    }, [adapter]);
+    }, [adapter, /* @conditional-compile-remove(rooms) */ role]);
     const mobileView = formFactor === 'mobile';
     /* @conditional-compile-remove(one-to-n-calling) */
     const modalLayerHostId = reactHooks.useId('modalLayerhost');
@@ -17463,11 +17528,29 @@ class CallContext {
     setCurrentCallId(callId) {
         this.callId = callId;
     }
+    onCallEnded(handler) {
+        this.emitter.on('callEnded', handler);
+    }
+    offCallEnded(handler) {
+        this.emitter.off('callEnded', handler);
+    }
     updateClientState(clientState) {
-        var _a;
+        var _a, _b, _c;
         const call = this.callId ? clientState.calls[this.callId] : undefined;
         const latestEndedCall = findLatestEndedCall(clientState.callsEnded);
-        this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName, call, page: getCallCompositePage(call, latestEndedCall), endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
+        // As the state is transitioning to a new state, trigger appropriate callback events.
+        const oldPage = this.state.page;
+        const newPage = getCallCompositePage(call, latestEndedCall);
+        if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
+            this.emitter.emit('callEnded', {
+                callId: this.callId,
+                callEndedCode: (_a = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.code,
+                callEndedSubCode: (_b = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode
+            });
+        }
+        if (this.state.page) {
+            this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_c = clientState.callAgent) === null || _c === void 0 ? void 0 : _c.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
+        }
     }
 }
 const findLatestEndedCall = (calls) => {
@@ -17505,6 +17588,7 @@ class AzureCommunicationCallAdapter {
         this.deviceManager = deviceManager;
         const isTeamsMeeting = 'meetingLink' in this.locator;
         this.context = new CallContext(callClient.getState(), isTeamsMeeting);
+        this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
             var _a;
             // unsubscribe when the instance gets disposed
@@ -17677,9 +17761,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     leaveCall() {
-        var _a;
         return __awaiter$4(this, void 0, void 0, function* () {
-            const callId = (_a = this.call) === null || _a === void 0 ? void 0 : _a.id;
             yield this.handlers.onHangUp();
             this.unsubscribeCallEvents();
             this.call = undefined;
@@ -17689,7 +17771,6 @@ class AzureCommunicationCallAdapter {
             this.context.updateClientState(this.callClient.getState());
             this.stopCamera();
             this.mute();
-            this.emitter.emit('callEnded', { callId });
         });
     }
     setCamera(device, options) {
@@ -18323,20 +18404,22 @@ const DesktopMoreButton = (props) => {
             iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
-            }
+            },
+            disabled: props.disableButtonsForHoldScreen
         });
         /*@conditional-compile-remove(PSTN-calls) */
         if (props.onClickShowDialpad) {
             items.push({
                 key: 'showDialpadKey',
-                text: localeStrings.strings.callWithChat.openDtmfDialpad,
+                text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
                 onClick: () => {
                     props.onClickShowDialpad && props.onClickShowDialpad();
                 },
                 iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
-                }
+                },
+                disabled: props.disableButtonsForHoldScreen
             });
         }
         return items;
@@ -18410,10 +18493,16 @@ const CallWithChatControlBar = (props) => {
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView })),
-                            isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView })),
+                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })),
+                            isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
-                            isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles })), 
+                            isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
                         (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                             _a.props.children.slice(0, props.mobileView
@@ -18424,7 +18513,7 @@ const CallWithChatControlBar = (props) => {
                             props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
                             /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
                                 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disabled: props.disableButtonsForLobbyPage, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
+                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
                             React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
@@ -18775,6 +18864,7 @@ const MoreDrawer = (props) => {
     if (props.speakers && props.speakers.length > 0) {
         drawerMenuItems.push({
             itemKey: 'speakers',
+            disabled: props.disableButtonsForHoldScreen,
             text: props.strings.speakerMenuTitle,
             iconProps: { iconName: 'MoreDrawerSpeakers' },
             subMenuProps: props.speakers.map((speaker) => ({
@@ -18810,6 +18900,7 @@ const MoreDrawer = (props) => {
         const selectedIconName = speakersAvailable ? 'MoreDrawerSelectedMicrophone' : 'MoreDrawerSelectedSpeaker';
         drawerMenuItems.push({
             itemKey: itemKey,
+            disabled: props.disableButtonsForHoldScreen,
             text: text,
             iconProps: { iconName: iconName },
             subMenuProps: props.microphones.map((mic) => ({
@@ -18836,6 +18927,7 @@ const MoreDrawer = (props) => {
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
+            disabled: props.disableButtonsForHoldScreen,
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -18847,7 +18939,8 @@ const MoreDrawer = (props) => {
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
-            text: localeStrings.strings.callWithChat.openDtmfDialpad,
+            disabled: props.disableButtonsForHoldScreen,
+            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
             onItemClick: () => {
                 props.onClickShowDialpad && props.onClickShowDialpad();
             },
@@ -19006,6 +19099,8 @@ const CallWithChatScreen = (props) => {
     }, [callWithChatAdapter]);
     const modalLayerHostId = reactHooks.useId('modalLayerhost');
     const isInLobbyOrConnecting = currentPage === 'lobby';
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const isInLocalHold = currentPage === 'hold';
     const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
     const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
     const isMobileWithActivePane = mobileView && activePane !== 'none';
@@ -19095,7 +19190,9 @@ const CallWithChatScreen = (props) => {
                     fileSharing: props.fileSharing, rtl: props.rtl }))),
             showControlBar && !isMobileWithActivePane && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(react.Stack.Item, { styles: controlBarContainerStyles$1 },
-                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
+                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, 
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: onClickShowDialpad })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
@@ -19103,7 +19200,9 @@ const CallWithChatScreen = (props) => {
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
                         React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                             /* @conditional-compile-remove(PSTN-calls) */
-                            onClickShowDialpad: onClickShowDialpad }))))),
+                            onClickShowDialpad: onClickShowDialpad, 
+                            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                            disableButtonsForHoldScreen: isInLocalHold }))))),
             /* @conditional-compile-remove(PSTN-calls) */
             showControlBar && showDtmfDialpad && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
@@ -19848,7 +19947,13 @@ const useSelector = (selector, selectorProps, type) => {
     return callProps !== null && callProps !== void 0 ? callProps : chatProps;
 };
 /**
- * Primary hook to get all hooks necessary for a React Component from this library..
+ * Primary hook to get all hooks necessary for a React Component from this library.
+ *
+ * To call this hook, the component requires to be wrapped under these providers:
+ *
+ * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
+ *
+ * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
  *
  * Most straightforward usage of a components looks like:
  *
@@ -19884,7 +19989,12 @@ const usePropsFor = (component, type) => {
         }
         return Object.assign(Object.assign({}, callProps), callingHandlers);
     }
-    throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
+    if (!chatSelector && !callingSelector) {
+        throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
+    }
+    else {
+        throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
+    }
 };
 
 exports.COMPONENT_LOCALE_DE_DE = COMPONENT_LOCALE_DE_DE;