@azure/communication-react 1.3.3-alpha-202208310017.0 → 1.3.3-alpha-202209010016.0

package/dist/communication-react.d.ts

@@ -1265,6 +1265,10 @@ export declare interface CallCompositeStrings {
      * Label for the button to open dtmf dialpad
      */
     openDtmfDialpadLabel: string;
+    /**
+     * aria label for when the invite link has been actioned
+     */
+    copyInviteLinkActionedAriaLabel: string;
 }
 
 /**
@@ -2262,6 +2266,10 @@ export declare interface CallWithChatCompositeStrings {
      * Label for the button to open dtmf dialpad
      */
     openDtmfDialpadLabel: string;
+    /**
+     * aria label for when the invite link has been actioned
+     */
+    copyInviteLinkActionedAriaLabel: string;
 }
 
 /**
@@ -2284,12 +2292,16 @@ export declare interface CallWithChatControlOptions {
      * Show or Hide Microphone button during a call.
      * @defaultValue true
      */
-    microphoneButton?: boolean;
+    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or Hide Camera Button during a call
      * @defaultValue true
      */
-    cameraButton?: boolean;
+    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show, Hide or Disable the screen share button during a call.
      * @defaultValue true
@@ -2306,12 +2318,16 @@ export declare interface CallWithChatControlOptions {
      * Show or hide the chat button in the call-with-chat composite control bar.
      * @defaultValue true
      */
-    chatButton?: boolean;
+    chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or hide the people button in the call-with-chat composite control bar.
      * @defaultValue true
      */
-    peopleButton?: boolean;
+    peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Inject custom buttons in the call controls.
      *
@@ -2325,7 +2341,9 @@ export declare interface CallWithChatControlOptions {
     /**
      * Show or hide the hold button in the bottom sheet drawer
      */
-    holdButton?: boolean;
+    holdButton?: boolean | {
+        disabled: boolean;
+    };
 }
 
 /**

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-202208310017.0';
+var telemetryVersion = '1.3.3-alpha-202209010016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2189,7 +2189,7 @@ const VoiceOverButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * @private
+ * @internal
  * Announcer component to maker aria announcements on actions
  */
 const Announcer = (props) => {
@@ -7299,7 +7299,7 @@ const DrawerMenuItem = (props) => {
     const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
     const secondaryIcon = props.secondaryIconProps ? (React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React__default['default'].createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
-    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: onKeyPress, onClick: onClick, tokens: menuItemChildrenGap },
+    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap },
         props.iconProps && (React__default['default'].createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
             React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
         React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
@@ -7774,6 +7774,9 @@ const iconButtonStyles = (theme) => {
     return {
         root: {
             color: `${theme.palette.black}`
+        },
+        icon: {
+            height: 'auto'
         }
     };
 };
@@ -12791,7 +12794,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",resumingCallButtonLabel:"Resuming",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"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$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",copyInviteLinkActionedAriaLabel:"Invite link copied",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",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"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",copyInviteLinkActionedAriaLabel:"Invite link copied",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};
 
@@ -14454,7 +14457,8 @@ const END_CALL_PAGES = [
 
 // Copyright (c) Microsoft Corporation.
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
 /**
  * @private
  */
@@ -14499,11 +14503,23 @@ var CallEndReasons;
     CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
 })(CallEndReasons || (CallEndReasons = {}));
 const getCallEndReason = (call) => {
-    var _a, _b;
-    if (((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+    var _a, _b, _c;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
         return CallEndReasons.ACCESS_DENIED;
     }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
         return CallEndReasons.REMOVED_FROM_CALL;
     }
     if (call.callEndReason) {
@@ -14610,6 +14626,19 @@ const disableCallControls = (callControlOptions, disabledControls) => {
     }
     return newOptions;
 };
+/**
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ *
+ * @param option
+ * @returns whether a button is disabled
+ * @private
+ */
+const isDisabled$2 = (option) => {
+    if (typeof option !== 'boolean') {
+        return !!(option === null || option === void 0 ? void 0 : option.disabled);
+    }
+    return option;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -14978,9 +15007,9 @@ 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) || props.disabled, 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$1(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
-const isDisabled$2 = (option) => {
+const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -14994,11 +15023,11 @@ const ScreenShare = (props) => {
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     const screenShareButtonDisabled = () => {
         /* @conditional-compile-remove(PSTN-calls) */
-        return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled$1(props.option);
+        return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled(props.option);
     };
     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) => {
+const isDisabled = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -15179,7 +15208,7 @@ const CallControls = (props) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
-        if (props.isMobile && props.onPeopleButtonClicked) {
+        if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
             items.push({
                 key: 'peopleButtonKey',
                 text: localeStrings.component.strings.participantsButton.label,
@@ -15192,6 +15221,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
+                disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton),
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
@@ -15205,7 +15235,7 @@ const CallControls = (props) => {
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
-            disabled: isDisabled(options === null || options === void 0 ? void 0 : options.holdButton),
+            disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.holdButton),
             ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
@@ -15243,27 +15273,21 @@ 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, 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.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(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$2(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$2(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(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) })) && (
+                    !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$2(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) })),
+                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$2(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$2(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;
-const isDisabled = (option) => {
-    if (typeof option !== 'boolean') {
-        return !!(option === null || option === void 0 ? void 0 : option.disabled);
-    }
-    return option;
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -15854,6 +15878,7 @@ const AddPeopleDropdown = (props) => {
     const theme = react.useTheme();
     const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
     const [showDialpad, setShowDialpad] = React.useState(false);
+    const [announcerStrings, setAnnouncerStrings] = React.useState();
     const menuStyleThemed = React.useMemo(() => themedMenuStyle(theme), [theme]);
     const copyLinkButtonStylesThemed = React.useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
     const defaultMenuProps = React.useMemo(() => {
@@ -15863,6 +15888,10 @@ const AddPeopleDropdown = (props) => {
             useTargetWidth: true,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
+            },
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onMenuOpened(contextualMenu) {
+                setAnnouncerStrings(undefined);
             }
         };
         if (inviteLink) {
@@ -15871,7 +15900,10 @@ const AddPeopleDropdown = (props) => {
                 text: strings.copyInviteLinkButtonLabel,
                 itemProps: { styles: copyLinkButtonStylesThemed },
                 iconProps: { iconName: 'Link', style: iconStyles },
-                onClick: () => copy__default['default'](inviteLink)
+                onClick: () => {
+                    setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+                    copy__default['default'](inviteLink);
+                }
             });
         }
         // only show the dialpad option when alternateCallerId is set
@@ -15887,12 +15919,13 @@ const AddPeopleDropdown = (props) => {
         }
         return menuProps;
     }, [
+        menuStyleThemed,
+        inviteLink,
+        alternateCallerId,
         strings.copyInviteLinkButtonLabel,
+        strings.copyInviteLinkActionedAriaLabel,
         strings.openDialpadButtonLabel,
-        copyLinkButtonStylesThemed,
-        inviteLink,
-        menuStyleThemed,
-        alternateCallerId
+        copyLinkButtonStylesThemed
     ]);
     const onDismissDialpad = () => {
         setShowDialpad(false);
@@ -15906,6 +15939,7 @@ const AddPeopleDropdown = (props) => {
     }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
     if (mobileView) {
         return (React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
             React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
                 React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
             addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
@@ -15913,6 +15947,7 @@ const AddPeopleDropdown = (props) => {
             alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
+        React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
         alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
         React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
             React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));
@@ -16151,8 +16186,8 @@ const TabHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 
@@ -16199,6 +16234,7 @@ var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments,
  */
 /** @beta */
 const CallPane = (props) => {
+    var _a;
     const [drawerMenuItems, setDrawerMenuItems] = React.useState([]);
     const hidden = props.activePane === 'none';
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
@@ -16210,7 +16246,7 @@ const CallPane = (props) => {
     };
     const strings = getStrings();
     const theme = useTheme();
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane, disablePeopleButton: isDisabled$2((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.participantsButton) }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
@@ -16336,7 +16372,7 @@ const CallArrangement = (props) => {
     const callPaneContent = React.useCallback(() => {
         var _a;
         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(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, callControls: typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }, [
@@ -17280,11 +17316,12 @@ const resumeButtonStyles = {
  */
 const holdPaneLabelStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontHeight: _pxToRem(22),
         fontSize: _pxToRem(16),
-        margin: '1rem auto 0.5rem'
+        marginTop: '0.5rem',
+        marginBottom: '1.5rem'
     }
 };
 /**
@@ -17294,7 +17331,7 @@ const holdPaneLabelStyles = {
  */
 const holdPaneTimerStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontSize: _pxToRem(20),
         lineHeight: _pxToRem(28),
@@ -17310,7 +17347,7 @@ const paneStyles = {
     root: {
         width: '100%',
         height: '100%',
-        background: 'rgba(0, 0, 0, 0.5)'
+        background: 'inherit'
     }
 };
 /**
@@ -17323,7 +17360,9 @@ const holdPaneContentStyles = {
         display: 'flex',
         margin: 'auto',
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center'
     }
 };
 
@@ -17360,14 +17399,11 @@ const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
-    const resumeSpinner = () => {
-        return React__default['default'].createElement(react.Spinner, { label: strings.resumingCallButtonLabel, labelPosition: 'right' });
-    };
     return (React__default['default'].createElement(react.Stack, { styles: paneStyles },
         React__default['default'].createElement(react.Stack, { horizontal: true, styles: holdPaneContentStyles },
             React__default['default'].createElement(react.Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React__default['default'].createElement(react.Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
-            React__default['default'].createElement(react.PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : undefined, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter$6(void 0, void 0, void 0, function* () {
+            React__default['default'].createElement(react.PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter$6(void 0, void 0, void 0, function* () {
                     setResumingCall(true);
                     try {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -17377,7 +17413,7 @@ const HoldPane = () => {
                         setResumingCall(false);
                         throw e;
                     }
-                }), "data-ui-id": "hold-page-resume-call-button" }, resumingCall && resumeSpinner()))));
+                }), "data-ui-id": "hold-page-resume-call-button" }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -18633,7 +18669,7 @@ const CallWithChatControlBar = (props) => {
     if (options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    const chatButton = (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
+    const chatButton = (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles) },
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -18642,14 +18678,14 @@ const CallWithChatControlBar = (props) => {
                         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, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
                             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 })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton) })),
                             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, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen })), 
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
                         (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                             _a.props.children.slice(0, props.mobileView
@@ -18668,7 +18704,7 @@ const CallWithChatControlBar = (props) => {
             _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
                 return (React__default['default'].createElement(element.type, Object.assign({}, element.props, { key: element.props.key, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
             }),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage, strings: peopleButtonStrings, styles: commonButtonStyles })),
+            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
 };
 const desktopButtonContainerStyle = {
@@ -19057,7 +19093,8 @@ const MoreDrawer = (props) => {
                 },
                 text: mic.name,
                 onItemClick: onMicrophoneItemClick,
-                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
+                disabled: drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
         });
@@ -19067,14 +19104,16 @@ const MoreDrawer = (props) => {
             itemKey: 'people',
             text: props.strings.peopleButtonLabel,
             iconProps: { iconName: 'MoreDrawerPeople' },
-            onItemClick: props.onPeopleButtonClicked
+            onItemClick: props.onPeopleButtonClicked,
+            disabled: drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.peopleButton) : undefined
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.holdButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
-            disabled: props.disableButtonsForHoldScreen,
+            disabled: props.disableButtonsForHoldScreen ||
+                (drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.holdButton) : undefined),
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -19084,7 +19123,7 @@ const MoreDrawer = (props) => {
     }
     /*@conditional-compile-remove(PSTN-calls) */
     // dtmf tone sending only works for 1:1 PSTN call
-    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
+    if (drawerSelectionOptions !== false && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
             disabled: props.disableButtonsForHoldScreen,
@@ -19156,6 +19195,7 @@ var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const CallWithChatPane = (props) => {
+    var _a, _b;
     const [drawerMenuItems, setDrawerMenuItems] = React.useState([]);
     const hidden = props.activePane === 'none';
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
@@ -19163,7 +19203,7 @@ const CallWithChatPane = (props) => {
     const theme = useTheme();
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = props.callAdapter.getState().alternateCallerId;
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane, disableChatButton: isDisabled$2((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.chatButton), disablePeopleButton: isDisabled$2((_b = props.callControls) === null || _b === void 0 ? void 0 : _b.peopleButton) }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
             ? callWithChatStrings.chatPaneTitle
             : props.activePane === 'people'
                 ? callWithChatStrings.peoplePaneTitle
@@ -19337,7 +19377,7 @@ const CallWithChatScreen = (props) => {
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: { callControls: false }, adapter: callAdapter, fluentTheme: fluentTheme }))),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
-                    fileSharing: props.fileSharing, rtl: props.rtl }))),
+                    fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
             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, 
@@ -19377,7 +19417,8 @@ const CallWithChatComposite = (props) => {
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return (page === 'call' && callStatus === 'Connected') || (page === 'hold' && callStatus === 'LocalHold');
+    return ((page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold')) ||
+        (page === 'hold' && callStatus === 'LocalHold'));
 };
 const showShowChatTabHeaderButton = (callControls) => {
     if (callControls === undefined || callControls === true) {