@azure/communication-react 1.3.3-alpha-202208280018.0 → 1.3.3-alpha-202209010016.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-202208280018.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'
         }
     };
 };
@@ -7824,7 +7827,7 @@ const formatPhoneNumber = (phoneNumber) => {
 /**
  * @private
  */
-function useLongPress(onClick, onLongPress) {
+function useLongPress(onClick, onLongPress, isMobile) {
     const timerRef = React.useRef();
     const [isLongPress, setIsLongPress] = React.useState(false);
     const [action, setAction] = React.useState(false);
@@ -7835,6 +7838,10 @@ function useLongPress(onClick, onLongPress) {
         }, 500);
     }
     function handleOnClick() {
+        // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event
+        if (isMobile) {
+            return;
+        }
         onClick();
         if (isLongPress) {
             onLongPress();
@@ -7861,6 +7868,9 @@ function useLongPress(onClick, onLongPress) {
         startPressTimer();
     }
     function handleOnTouchEnd() {
+        if (isMobile) {
+            isLongPress ? onLongPress() : onClick();
+        }
         timerRef.current && clearTimeout(timerRef.current);
     }
     return {
@@ -7918,14 +7928,14 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { digit, index, onClick, onLongPress } = props;
+    const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const clickFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         onClick(digit, index);
     }), [digit, index, onClick]);
     const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
-    const { handlers } = useLongPress(clickFunction, longPressFunction);
+    const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
     return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
@@ -7934,7 +7944,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false } = props;
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     React.useEffect(() => {
         if (onChange) {
@@ -8005,7 +8015,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile })))));
         }))));
 };
 /**
@@ -12784,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};
 
@@ -14447,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
  */
@@ -14492,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) {
@@ -14603,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.
@@ -14971,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;
     }
@@ -14987,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;
     }
@@ -15119,19 +15155,23 @@ const SendDtmfDialpad = (props) => {
     const onDismissTriggered = () => {
         onDismissDialpad();
     };
+    const [textFieldValue, setTextFieldValue] = React.useState();
+    const onChange = (input) => {
+        setTextFieldValue(input);
+    };
     const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, null, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } },
-                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
     }
     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, { style: { overflow: 'hidden' } },
-            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
+            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15163,10 +15203,12 @@ const CallControls = (props) => {
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = useAdapter().getState().alternateCallerId;
     /* @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,
@@ -15179,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'
             });
         }
@@ -15192,21 +15235,24 @@ 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) */
-        items.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.call.openDtmfDialpadLabel,
-            onClick: () => {
-                setShowDialpad(true);
-            },
-            iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            }
-        });
+        // dtmf tone sending only works for 1:1 PSTN call
+        if (alternateCallerId) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.call.openDtmfDialpadLabel,
+                onClick: () => {
+                    setShowDialpad(true);
+                },
+                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
         return items;
     };
     /* @conditional-compile-remove(PSTN-calls) */
@@ -15227,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.
 /**
@@ -15731,7 +15771,6 @@ const themedDialpadStyle = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem',
-            direction: 'rtl',
             textAlign: isMobile ? 'center' : 'left',
             ':active': {
                 padding: '0 0.5rem'
@@ -15785,7 +15824,7 @@ const CallingDialpad = (props) => {
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput }),
+            React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
             React__default['default'].createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
     };
     if (isMobile) {
@@ -15839,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(() => {
@@ -15848,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) {
@@ -15856,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
@@ -15872,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);
@@ -15891,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" },
@@ -15898,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" })))));
@@ -16136,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" }) })));
 };
 
@@ -16184,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;
@@ -16195,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.
      */
@@ -16321,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);
     }, [
@@ -17265,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'
     }
 };
 /**
@@ -17279,7 +17331,7 @@ const holdPaneLabelStyles = {
  */
 const holdPaneTimerStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontSize: _pxToRem(20),
         lineHeight: _pxToRem(28),
@@ -17295,7 +17347,7 @@ const paneStyles = {
     root: {
         width: '100%',
         height: '100%',
-        background: 'rgba(0, 0, 0, 0.5)'
+        background: 'inherit'
     }
 };
 /**
@@ -17308,7 +17360,9 @@ const holdPaneContentStyles = {
         display: 'flex',
         margin: 'auto',
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center'
     }
 };
 
@@ -17345,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) */
@@ -17362,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);
@@ -18618,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 },
@@ -18627,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
@@ -18653,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 = {
@@ -19042,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
         });
@@ -19052,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();
@@ -19068,7 +19122,8 @@ const MoreDrawer = (props) => {
         });
     }
     /*@conditional-compile-remove(PSTN-calls) */
-    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
+    // dtmf tone sending only works for 1:1 PSTN call
+    if (drawerSelectionOptions !== false && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
             disabled: props.disableButtonsForHoldScreen,
@@ -19140,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;
@@ -19147,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
@@ -19310,6 +19366,8 @@ const CallWithChatScreen = (props) => {
         dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
         placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const alternateCallerId = callAdapter.getState().alternateCallerId;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -19319,20 +19377,20 @@ 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, 
                         /* @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 })))),
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     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: alternateCallerId ? onClickShowDialpad : undefined, 
                             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                             disableButtonsForHoldScreen: isInLocalHold }))))),
             /* @conditional-compile-remove(PSTN-calls) */
@@ -19359,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) {