@azure/communication-react 1.27.0-alpha-202505160018 → 1.27.0

package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js

@@ -33,7 +33,6 @@ import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../../CallComposi
 import { showDtmfDialer } from '../../CallComposite/utils/MediaGalleryUtils';
 import { SpokenLanguageSettingsDrawer } from './SpokenLanguageSettingsDrawer';
 import { getRemoteParticipantsConnectedSelector } from '../../CallComposite/selectors/mediaGallerySelector';
-/* @conditional-compile-remove(together-mode) */
 import { getCapabilites, getIsTogetherModeActive, getLocalUserId, getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';
 import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
 const inferCallWithChatControlOptions = (callWithChatControls) => {
@@ -45,7 +44,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 export const MoreDrawer = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     const theme = useTheme();
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
@@ -65,17 +64,13 @@ export const MoreDrawer = (props) => {
         setShowRealTimeTextModal(false);
     }, []);
     const raiseHandButtonProps = usePropsFor(RaiseHandButton);
-    /* @conditional-compile-remove(together-mode) */
     const participantCapability = useSelector(getCapabilites);
-    /* @conditional-compile-remove(together-mode) */
     const participantId = useSelector(getLocalUserId);
-    /* @conditional-compile-remove(together-mode) */
     const isTogetherModeActive = useSelector(getIsTogetherModeActive);
-    /* @conditional-compile-remove(together-mode) */
     const isTeamsCall = useSelector(getIsTeamsCall);
     const isTeamsMeeting = getIsTeamsMeeting(callAdapter.getState());
     const onSpeakerItemClick = useCallback((_ev, itemKey) => {
-        const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
+        const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find(speaker => speaker.id === itemKey);
         if (selected) {
             // This is unsafe - we're only passing in part of the argument to the handler.
             // But this is a known issue in our state.
@@ -85,17 +80,15 @@ export const MoreDrawer = (props) => {
     }, [speakers, onSelectSpeaker, onLightDismiss]);
     const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
     const showCaptionsButton = props.isCaptionsSupported && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.captionsButton);
-    const showRealTimeTextButton = props.isRealTimeTextSupported &&
-        drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions.realTimeTextButton);
+    const showRealTimeTextButton = props.isRealTimeTextSupported && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.realTimeTextButton);
     if (props.reactionResources !== undefined) {
         drawerMenuItems.push({
             itemKey: 'reactions',
-            onRendererContent: () => (React.createElement(_ReactionDrawerMenuItem, { onReactionClick: (reaction) => __awaiter(void 0, void 0, void 0, function* () {
-                    var _j;
-                    (_j = props.onReactionClick) === null || _j === void 0 ? void 0 : _j.call(props, reaction);
+            onRendererContent: () => React.createElement(_ReactionDrawerMenuItem, { onReactionClick: (reaction) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _h;
+                    (_h = props.onReactionClick) === null || _h === void 0 ? void 0 : _h.call(props, reaction);
                     onLightDismiss();
-                }), reactionResources: props.reactionResources }))
+                }), reactionResources: props.reactionResources })
         });
     }
     if (props.speakers && props.speakers.length > 0) {
@@ -103,24 +96,26 @@ export const MoreDrawer = (props) => {
             itemKey: 'speakers',
             disabled: props.disableButtonsForHoldScreen,
             text: props.strings.speakerMenuTitle,
-            iconProps: { iconName: 'MoreDrawerSpeakers' },
-            subMenuProps: props.speakers.map((speaker) => ({
+            iconProps: {
+                iconName: 'MoreDrawerSpeakers'
+            },
+            subMenuProps: props.speakers.map(speaker => ({
                 itemKey: speaker.id,
                 iconProps: {
-                    iconName: isDeviceSelected(speaker, props.selectedSpeaker)
-                        ? 'MoreDrawerSelectedSpeaker'
-                        : 'MoreDrawerSpeakers'
+                    iconName: isDeviceSelected(speaker, props.selectedSpeaker) ? 'MoreDrawerSelectedSpeaker' : 'MoreDrawerSpeakers'
                 },
                 text: speaker.name,
                 onItemClick: onSpeakerItemClick,
-                secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? {
+                    iconName: 'Accept'
+                } : undefined
             })),
             secondaryText: (_b = props.selectedSpeaker) === null || _b === void 0 ? void 0 : _b.name
         });
     }
     const { microphones, onSelectMicrophone } = props;
     const onMicrophoneItemClick = useCallback((_ev, itemKey) => {
-        const selected = microphones === null || microphones === void 0 ? void 0 : microphones.find((mic) => mic.id === itemKey);
+        const selected = microphones === null || microphones === void 0 ? void 0 : microphones.find(mic => mic.id === itemKey);
         if (selected) {
             // This is unsafe - we're only passing in part of the argument to the handler.
             // But this is a known issue in our state.
@@ -139,15 +134,19 @@ export const MoreDrawer = (props) => {
             itemKey: itemKey,
             disabled: props.disableButtonsForHoldScreen,
             text: text,
-            iconProps: { iconName: iconName },
-            subMenuProps: props.microphones.map((mic) => ({
+            iconProps: {
+                iconName: iconName
+            },
+            subMenuProps: props.microphones.map(mic => ({
                 itemKey: mic.id,
                 iconProps: {
                     iconName: isDeviceSelected(mic, props.selectedMicrophone) ? selectedIconName : iconName
                 },
                 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(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_c = props.selectedMicrophone) === null || _c === void 0 ? void 0 : _c.name
@@ -155,9 +154,7 @@ export const MoreDrawer = (props) => {
     }
     const dtmfDialerScreenOption = {
         itemKey: 'dtmfDialerScreenKey',
-        text: !dtmfDialerChecked
-            ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
-            : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
+        text: !dtmfDialerChecked ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
         onItemClick: () => {
             if (props.onSetDialpadPage) {
                 props.onSetDialpadPage();
@@ -167,28 +164,32 @@ export const MoreDrawer = (props) => {
         },
         iconProps: {
             iconName: 'DtmfDialpadButton',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         }
     };
     /**
      * Only render the dtmf dialer if the dialpad for PSTN calls is not present
      */
-    if (props.onSetDialpadPage &&
-        allowDtmfDialer &&
-        drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions.dtmfDialerButton)) {
+    if (props.onSetDialpadPage && allowDtmfDialer && drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions.dtmfDialerButton)) {
         drawerMenuItems.push(dtmfDialerScreenOption);
     }
     const galleryLayoutOptions = {
         itemKey: 'galleryPositionKey',
         iconProps: {
             iconName: 'GalleryOptions',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         },
         disabled: props.disableButtonsForHoldScreen,
         text: localeStrings.strings.call.moreButtonGalleryControlLabel,
-        subMenuProps: [
-            {
+        subMenuProps: [{
                 itemKey: 'dynamicSelectionKey',
                 text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
                 onItemClick: () => {
@@ -197,11 +198,16 @@ export const MoreDrawer = (props) => {
                 },
                 iconProps: {
                     iconName: 'FloatingLocalVideoGalleryLayout',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
-                secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? { iconName: 'Accept' } : undefined
-            },
-            {
+                secondaryIconProps: props.userSetGalleryLayout === 'floatingLocalVideo' ? {
+                    iconName: 'Accept'
+                } : undefined
+            }, {
                 itemKey: 'focusedContentSelectionKey',
                 text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
                 onItemClick: () => {
@@ -210,27 +216,17 @@ export const MoreDrawer = (props) => {
                 },
                 iconProps: {
                     iconName: 'FocusedContentGalleryLayout',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
-                secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? { iconName: 'Accept' } : undefined
-            }
-        ]
-    };
-    /* @conditional-compile-remove(gallery-layout-composite) */
-    const galleryOption = {
-        itemKey: 'defaultSelectionKey',
-        text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
-        onItemClick: () => {
-            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
-            onLightDismiss();
-        },
-        iconProps: {
-            iconName: 'DefaultGalleryLayout',
-            styles: { root: { lineHeight: 0 } }
-        },
-        secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: props.userSetGalleryLayout === 'focusedContent' ? {
+                    iconName: 'Accept'
+                } : undefined
+            }]
     };
-    /* @conditional-compile-remove(together-mode) */
     const togetherModeOption = {
         itemKey: 'togetherModeSelectionKey',
         text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
@@ -240,17 +236,19 @@ export const MoreDrawer = (props) => {
         },
         iconProps: {
             iconName: 'TogetherModeLayout',
-            styles: { root: { lineHeight: 0 } }
+            styles: {
+                root: {
+                    lineHeight: 0
+                }
+            }
         },
-        disabled: !(((participantId === null || participantId === void 0 ? void 0 : participantId.kind) === 'microsoftTeamsUser' && ((_d = participantCapability === null || participantCapability === void 0 ? void 0 : participantCapability.startTogetherMode) === null || _d === void 0 ? void 0 : _d.isPresent)) ||
-            isTogetherModeActive),
-        secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+        disabled: !((participantId === null || participantId === void 0 ? void 0 : participantId.kind) === 'microsoftTeamsUser' && ((_d = participantCapability === null || participantCapability === void 0 ? void 0 : participantCapability.startTogetherMode) === null || _d === void 0 ? void 0 : _d.isPresent) || isTogetherModeActive),
+        secondaryIconProps: props.userSetGalleryLayout === 'default' ? {
+            iconName: 'Accept'
+        } : undefined
     };
-    /* @conditional-compile-remove(gallery-layout-composite) */
-    (_e = galleryLayoutOptions.subMenuProps) === null || _e === void 0 ? void 0 : _e.push(galleryOption);
-    /* @conditional-compile-remove(together-mode) */
     if (isTeamsCall || isTeamsMeeting) {
-        (_f = galleryLayoutOptions.subMenuProps) === null || _f === void 0 ? void 0 : _f.push(togetherModeOption);
+        (_e = galleryLayoutOptions.subMenuProps) === null || _e === void 0 ? void 0 : _e.push(togetherModeOption);
     }
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.galleryControlsButton)) {
         drawerMenuItems.push(galleryLayoutOptions);
@@ -260,7 +258,9 @@ export const MoreDrawer = (props) => {
             itemKey: 'people',
             id: 'call-composite-drawer-people-button',
             text: props.strings.peopleButtonLabel,
-            iconProps: { iconName: 'MoreDrawerPeople' },
+            iconProps: {
+                iconName: 'MoreDrawerPeople'
+            },
             onItemClick: props.onPeopleButtonClicked,
             disabled: isDisabled(drawerSelectionOptions.peopleButton) || props.disableButtonsForHoldScreen
         });
@@ -274,21 +274,24 @@ export const MoreDrawer = (props) => {
                 holdButtonProps.onToggleHold();
                 onLightDismiss();
             },
-            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
+            iconProps: {
+                iconName: 'HoldCallContextualMenuItem',
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
+            }
         });
     }
-    const role = (_g = callAdapter.getState().call) === null || _g === void 0 ? void 0 : _g.role;
+    const role = (_f = callAdapter.getState().call) === null || _f === void 0 ? void 0 : _f.role;
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    if (drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) &&
-        !hideRaiseHandButtonInRoomsCall) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) && !hideRaiseHandButtonInRoomsCall) {
         const raiseHandIcon = raiseHandButtonProps.checked ? 'LowerHandContextualMenuItem' : 'RaiseHandContextualMenuItem';
         drawerMenuItems.push({
             itemKey: 'raiseHandButtonKey',
             disabled: props.disableButtonsForHoldScreen || isDisabled(drawerSelectionOptions.raiseHandButton),
-            text: raiseHandButtonProps.checked
-                ? localeStrings.component.strings.raiseHandButton.onLabel
-                : localeStrings.component.strings.raiseHandButton.offLabel,
+            text: raiseHandButtonProps.checked ? localeStrings.component.strings.raiseHandButton.onLabel : localeStrings.component.strings.raiseHandButton.offLabel,
             onItemClick: () => {
                 if (raiseHandButtonProps.onToggleRaiseHand) {
                     raiseHandButtonProps.onToggleRaiseHand();
@@ -297,15 +300,16 @@ export const MoreDrawer = (props) => {
             },
             iconProps: {
                 iconName: raiseHandIcon,
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
     }
     const teamsMeetingCoordinates = getTeamsMeetingCoordinates(callAdapter.getState());
-    if (drawerSelectionOptions !== false &&
-        isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.teamsMeetingPhoneCallButton) &&
-        isTeamsMeeting &&
-        teamsMeetingCoordinates) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.teamsMeetingPhoneCallButton) && isTeamsMeeting && teamsMeetingCoordinates) {
         drawerMenuItems.push({
             itemKey: 'phoneCallInfoKey',
             disabled: isDisabled(drawerSelectionOptions.teamsMeetingPhoneCallButton),
@@ -317,7 +321,11 @@ export const MoreDrawer = (props) => {
             },
             iconProps: {
                 iconName: 'PhoneNumberButton',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
     }
@@ -331,10 +339,8 @@ export const MoreDrawer = (props) => {
     const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = useState(false);
     // we don't display the setting modal to set the spoken language on mobile
     // so when spoken language is empty (not set), we default to 'en-us'
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = useState(captionSettingsProp.currentSpokenLanguage && captionSettingsProp.currentSpokenLanguage !== ''
-        ? captionSettingsProp.currentSpokenLanguage
-        : 'en-us');
-    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState((_h = captionSettingsProp.currentCaptionLanguage) !== null && _h !== void 0 ? _h : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = useState(captionSettingsProp.currentSpokenLanguage && captionSettingsProp.currentSpokenLanguage !== '' ? captionSettingsProp.currentSpokenLanguage : 'en-us');
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = useState((_g = captionSettingsProp.currentCaptionLanguage) !== null && _g !== void 0 ? _g : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     const onToggleChange = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonProps.onStartCaptions({
@@ -347,30 +353,32 @@ export const MoreDrawer = (props) => {
     }), [captionSettingsProp.isCaptionsFeatureActive, startCaptionsButtonProps, currentSpokenLanguage]);
     if (showCaptionsButton) {
         const captionsDrawerItems = [];
-        const spokenLanguageString = supportedSpokenLanguageStrings
-            ? supportedSpokenLanguageStrings[currentSpokenLanguage]
-            : currentSpokenLanguage;
+        const spokenLanguageString = supportedSpokenLanguageStrings ? supportedSpokenLanguageStrings[currentSpokenLanguage] : currentSpokenLanguage;
         drawerMenuItems.push({
             itemKey: 'captions',
             id: 'common-call-composite-captions-button',
             disabled: props.disableButtonsForHoldScreen,
             text: props.strings.captionsMenuTitle,
-            iconProps: { iconName: 'CaptionsIcon' },
+            iconProps: {
+                iconName: 'CaptionsIcon'
+            },
             subMenuProps: captionsDrawerItems
         });
         captionsDrawerItems.push({
             itemKey: 'ToggleCaptionsKey',
-            text: captionSettingsProp.isCaptionsFeatureActive
-                ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
-                : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+            text: captionSettingsProp.isCaptionsFeatureActive ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
             iconProps: {
                 iconName: captionSettingsProp.isCaptionsFeatureActive ? 'CaptionsOffIcon' : 'CaptionsIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             onItemClick: onToggleChange,
             disabled: props.disableButtonsForHoldScreen,
-            secondaryComponent: (React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
-                React.createElement(Toggle, { id: "common-call-composite-captions-toggle-button", checked: captionSettingsProp.isCaptionsFeatureActive, styles: themedToggleButtonStyle(theme, captionSettingsProp.isCaptionsFeatureActive), onChange: onToggleChange })))
+            secondaryComponent: React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
+                React.createElement(Toggle, { id: "common-call-composite-captions-toggle-button", checked: captionSettingsProp.isCaptionsFeatureActive, styles: themedToggleButtonStyle(theme, captionSettingsProp.isCaptionsFeatureActive), onChange: onToggleChange }))
         });
         captionsDrawerItems.push({
             itemKey: 'ChangeSpokenLanguage',
@@ -379,7 +387,11 @@ export const MoreDrawer = (props) => {
             secondaryText: spokenLanguageString,
             iconProps: {
                 iconName: 'ChangeSpokenLanguageIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
             onItemClick: () => {
@@ -387,13 +399,15 @@ export const MoreDrawer = (props) => {
             },
             secondaryIconProps: {
                 iconName: 'ChevronRight',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             }
         });
         if (props.useTeamsCaptions) {
-            const captionLanguageString = supportedCaptionLanguageStrings
-                ? supportedCaptionLanguageStrings[currentCaptionLanguage]
-                : currentCaptionLanguage;
+            const captionLanguageString = supportedCaptionLanguageStrings ? supportedCaptionLanguageStrings[currentCaptionLanguage] : currentCaptionLanguage;
             captionsDrawerItems.push({
                 itemKey: 'ChangeCaptionLanguage',
                 text: props.strings.captionLanguageMenuTitle,
@@ -401,7 +415,11 @@ export const MoreDrawer = (props) => {
                 secondaryText: captionLanguageString,
                 iconProps: {
                     iconName: 'ChangeCaptionLanguageIcon',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 },
                 disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
                 onItemClick: () => {
@@ -409,7 +427,11 @@ export const MoreDrawer = (props) => {
                 },
                 secondaryIconProps: {
                     iconName: 'ChevronRight',
-                    styles: { root: { lineHeight: 0 } }
+                    styles: {
+                        root: {
+                            lineHeight: 0
+                        }
+                    }
                 }
             });
         }
@@ -423,41 +445,49 @@ export const MoreDrawer = (props) => {
             id: 'common-call-composite-rtt-button',
             disabled: props.disableButtonsForHoldScreen,
             text: localeStrings.strings.call.realTimeTextLabel,
-            iconProps: { iconName: 'RealTimeTextIcon' },
+            iconProps: {
+                iconName: 'RealTimeTextIcon'
+            },
             subMenuProps: realTimeTextDrawerItems
         });
         realTimeTextDrawerItems.push({
             itemKey: 'ToggleRTTKey',
             id: 'common-call-composite-rtt-start-button',
             text: localeStrings.strings.call.startRealTimeTextLabel,
-            ariaLabel: rttDisabled
-                ? localeStrings.strings.call.disabledStartRealTimeTextLabel
-                : localeStrings.strings.call.startRealTimeTextLabel,
+            ariaLabel: rttDisabled ? localeStrings.strings.call.disabledStartRealTimeTextLabel : localeStrings.strings.call.startRealTimeTextLabel,
             iconProps: {
                 iconName: 'RealTimeTextIcon',
-                styles: { root: { lineHeight: 0 } }
+                styles: {
+                    root: {
+                        lineHeight: 0
+                    }
+                }
             },
             onItemClick: openRealTimeTextModal,
             disabled: rttDisabled,
-            secondaryComponent: (React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
-                React.createElement(Toggle, { id: "common-call-composite-rtt-toggle-button", checked: realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked, styles: themedToggleButtonStyle(theme, realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked), onChange: openRealTimeTextModal })))
+            secondaryComponent: React.createElement(Stack, { verticalFill: true, verticalAlign: "center" },
+                React.createElement(Toggle, { id: "common-call-composite-rtt-toggle-button", checked: realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked, styles: themedToggleButtonStyle(theme, realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked), onChange: openRealTimeTextModal }))
         });
     }
     const customDrawerButtons = useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
-    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
+    customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach(element => {
         drawerMenuItems.push(element);
     });
-    customDrawerButtons['secondary'].forEach((element) => {
+    customDrawerButtons['secondary'].forEach(element => {
         drawerMenuItems.push(element);
     });
-    customDrawerButtons['overflow'].forEach((element) => {
+    customDrawerButtons['overflow'].forEach(element => {
         drawerMenuItems.push(element);
     });
-    return (React.createElement(React.Fragment, null,
-        showRealTimeTextModal && (React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText })),
-        isSpokenLanguageDrawerOpen && showCaptionsButton && (React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsProp.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
-        isCaptionLanguageDrawerOpen && showCaptionsButton && (React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsProp.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: { menuTitle: props.strings.captionLanguageMenuTitle }, supportedLanguageStrings: supportedCaptionLanguageStrings })),
-        !isSpokenLanguageDrawerOpen && !isCaptionLanguageDrawerOpen && (React.createElement(DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss }))));
+    return React.createElement(React.Fragment, null,
+        showRealTimeTextModal && React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText }),
+        isSpokenLanguageDrawerOpen && showCaptionsButton && React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsProp.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: {
+                menuTitle: props.strings.spokenLanguageMenuTitle
+            }, supportedLanguageStrings: supportedSpokenLanguageStrings }),
+        isCaptionLanguageDrawerOpen && showCaptionsButton && React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsProp.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: {
+                menuTitle: props.strings.captionLanguageMenuTitle
+            }, supportedLanguageStrings: supportedCaptionLanguageStrings }),
+        !isSpokenLanguageDrawerOpen && !isCaptionLanguageDrawerOpen && React.createElement(DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss }));
 };
 const isDeviceSelected = (speaker, selectedSpeaker) => !!selectedSpeaker && speaker.id === selectedSpeaker.id;
 const isEnabled = (option) => option !== false;