@azure/communication-react 1.14.0-alpha-202402290012 → 1.14.0-alpha-202403020011

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

@@ -17,6 +17,7 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
 var roosterjsEditorCore = require('roosterjs-editor-core');
 var roosterjsReact = require('roosterjs-react');
+var roosterjsEditorApi = require('roosterjs-editor-api');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -173,7 +174,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202402290012';
+var telemetryVersion = '1.14.0-alpha-202403020011';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -333,6 +334,13 @@ const _convertPxToRem = (px) => {
 const _preventDismissOnEvent = (ev) => {
     return ev.type === 'resize' || ev.type === 'scroll';
 };
+/**
+ * @internal
+ * Helper function to get the keys of an object
+ */
+function _getKeys(obj) {
+    return Object.keys(obj);
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -5912,14 +5920,6 @@ e.nativeEvent.isComposing ||
  * @private
  */
 const nullToUndefined = (value) => (value === null ? undefined : value);
-/**
- * Helper function to get the keys of an object
- *
- * @private
- */
-function getKeys(obj) {
-    return Object.keys(obj);
-}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -9173,97 +9173,62 @@ const richTextEditorStyle = react.mergeStyles({
 /**
  * @private
  */
-const ribbonButtonStyle = (theme) => {
+const ribbonOverflowButtonStyle = (theme) => {
     return {
-        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
-        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
-        root: { minWidth: 'auto', backgroundColor: 'transparent' },
-        rootChecked: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootCheckedHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootCheckedPressed: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootPressed: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
-            }
-        },
-        rootExpanded: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
+        subComponentStyles: {
+            menuItem: {
+                icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },
+                root: ribbonOverflowButtonRootStyles(theme)
+            },
+            callout: {}
+        }
+    };
+};
+const ribbonOverflowButtonRootStyles = (theme) => {
+    return {
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '&:hover': {
+                selectors: {
+                    '.ms-ContextualMenu-icon': {
+                        color: theme.palette.neutralPrimary
+                    }
                 }
             }
-        },
-        rootExpandedHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                //icon color is not working here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.themePrimary
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.themePrimary
-                }
+        }
+    };
+};
+const ribbonButtonRootStyles = (theme) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '.ms-Button-icon': {
+                color: theme.palette.themePrimary
+            },
+            '.ms-Button-menuIcon': {
+                color: theme.palette.themePrimary
             }
         }
     };
 };
+/**
+ * @private
+ */
+const ribbonButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: ribbonButtonRootStyles(theme),
+        rootHovered: ribbonButtonRootStyles(theme),
+        rootCheckedHovered: ribbonButtonRootStyles(theme),
+        rootCheckedPressed: ribbonButtonRootStyles(theme),
+        rootPressed: ribbonButtonRootStyles(theme),
+        rootExpanded: ribbonButtonRootStyles(theme),
+        rootExpandedHovered: ribbonButtonRootStyles(theme)
+    };
+};
 /**
  * @private
  */
@@ -9326,7 +9291,7 @@ const createKnownRibbonButton = (key, theme, icon) => {
         // AllButtonStringKeys is a union of all the string keys of all the buttons
         const result = buttons[0];
         button.iconName = icon;
-        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)) });
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)), canCheck: false });
         return result;
     }
     return undefined;
@@ -9375,10 +9340,9 @@ const ribbonButtonsStrings = (strings) => {
  * @beta
  */
 React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText, strings } = props;
+    const { initialContent, onChange, placeholderText, strings } = props;
     const editor = React.useRef(null);
-    const [divComponent, setDivComponent] = React.useState(null);
-    const theme = react.useTheme();
+    const theme = useTheme();
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -9389,26 +9353,19 @@ React.forwardRef((props, ref) => {
         };
     }, []);
     React.useEffect(() => {
-        var _a, _b;
-        if (content !== ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
-            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
-        }
-    }, [content]);
-    React.useEffect(() => {
-        if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {
+        if (editor.current !== null) {
             // Adjust color prop for the div component when theme is updated
             // because doNotAdjustEditorColor is set for Rooster
-            divComponent.style.color = theme.palette.neutralPrimary;
+            roosterjsEditorApi.setTextColor(editor.current, theme.palette.neutralPrimary);
         }
-    }, [divComponent, theme]);
+    }, [theme]);
     const ribbonPlugin = React.useMemo(() => {
         return roosterjsReact.createRibbonPlugin();
     }, []);
     const editorCreator = React.useCallback((div, options) => {
         editor.current = new roosterjsEditorCore.Editor(div, options);
-        setDivComponent(div);
         // Remove the background color of the editor
-        div.style.backgroundColor = 'transparent';
+        roosterjsEditorApi.setBackgroundColor(editor.current, 'transparent');
         return editor.current;
     }, []);
     const plugins = React.useMemo(() => {
@@ -9427,13 +9384,14 @@ React.forwardRef((props, ref) => {
                 styles: ribbonButtonStyle(theme),
                 menuProps: {
                     items: [], // CommandBar will determine items rendered in overflow
-                    isBeakVisible: false
+                    isBeakVisible: false,
+                    styles: ribbonOverflowButtonStyle(theme)
                 }
             }, strings: ribbonButtonsStrings(strings) }));
     }, [strings, ribbonPlugin, theme]);
     return (React.createElement("div", null,
         ribbon,
-        React.createElement(roosterjsReact.Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
+        React.createElement(roosterjsReact.Rooster, { initialContent: initialContent, inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
             // TODO: confirm the color during inline images implementation
             imageSelectionBorderColor: 'blue', 
             // doNotAdjustEditorColor is used to fix the default background color for Rooster component
@@ -11228,7 +11186,7 @@ const DownloadIconTrampoline = () => {
     return React.createElement(react.Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+    /* @conditional-compile-remove(file-sharing) */
     return useLocale$1().strings.messageThread;
 };
 
@@ -11301,18 +11259,18 @@ const MessageBubble = (props) => {
     const defaultOnRenderFileDownloads = React.useCallback(() => {
         /* @conditional-compile-remove(file-sharing) */
         return (React.createElement(_FileDownloadCards, { userId: userId, 
-            /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+            /* @conditional-compile-remove(file-sharing) */
             fileMetadata: message.files || [], 
             /* @conditional-compile-remove(file-sharing) */
             downloadHandler: fileDownloadHandler, 
-            /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+            /* @conditional-compile-remove(file-sharing) */
             strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
     }, [
         userId,
         message,
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+        /* @conditional-compile-remove(file-sharing) */
         strings,
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+        /* @conditional-compile-remove(file-sharing) */
         fileDownloadHandler
     ]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;
@@ -19306,8 +19264,8 @@ const _TagsSurvey = (props) => {
             videoRating: [],
             screenshareRating: []
         };
-        getKeys(callIssuesToTag).forEach((issueCategory) => {
-            getKeys(callIssuesToTag[issueCategory]).map((issue) => {
+        _getKeys(callIssuesToTag).forEach((issueCategory) => {
+            _getKeys(callIssuesToTag[issueCategory]).map((issue) => {
                 const issueCapitalized = ((issue === null || issue === void 0 ? void 0 : issue.charAt(0).toUpperCase()) + (issue === null || issue === void 0 ? void 0 : issue.slice(1)));
                 const issueMessages = callIssuesToTag[issueCategory];
                 if (tags[issueCategory]) {
@@ -19399,7 +19357,7 @@ const _TagsSurvey = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(react.Stack, { verticalAlign: "center" },
             React.createElement(react.Text, { className: questionTextStyle$1(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
-        React.createElement(react.Pivot, null, getKeys(tags).map((key, i) => {
+        React.createElement(react.Pivot, null, _getKeys(tags).map((key, i) => {
             return (React.createElement(react.PivotItem, { key: `key-${i}`, headerText: categoryHeadings[key], headerButtonProps: {
                     'data-order': i,
                     'data-title': key
@@ -20277,7 +20235,7 @@ const _CaptionsSettingsModal = (props) => {
  */
 const createComponentStrings = (localizedStrings) => {
     const strings = Object.assign({}, en_US$1);
-    getKeys(localizedStrings).forEach((key) => {
+    _getKeys(localizedStrings).forEach((key) => {
         // mark the value as unknown because the type changes based on the key.
         // this is unsafe at runtime as we could assign the wrong type based on the key here.
         // but typescript isn't smart enough to know that the key used across each access will result in the same type
@@ -20600,7 +20558,9 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
-            participant.spotlight);
+            participant.spotlight, 
+            /* @conditional-compile-remove(ppt-live) */
+            participant.contentSharingStream);
         }));
     });
 };
@@ -20610,15 +20570,18 @@ raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight // temp unknown type to build stable
-) => {
+spotlight, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
     /* @conditional-compile-remove(raise-hand) */
     raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
-    spotlight);
+    spotlight, 
+    /* @conditional-compile-remove(ppt-live) */
+    contentSharingStream);
 });
 /** @private */
 const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
@@ -20627,8 +20590,9 @@ raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight // temp unknown type to build stable
-) => {
+spotlight, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -20642,6 +20606,10 @@ spotlight // temp unknown type to build stable
     if (sdkScreenShareStream) {
         screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(sdkScreenShareStream);
     }
+    /* @conditional-compile-remove(ppt-live) */
+    if (contentSharingStream) {
+        screenShareStream = convertRemoteContentSharingStreamToVideoGalleryStream(contentSharingStream);
+    }
     return {
         userId,
         displayName,
@@ -20674,6 +20642,15 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         streamSize: stream.streamSize
     };
 };
+/* @conditional-compile-remove(ppt-live) */
+const convertRemoteContentSharingStreamToVideoGalleryStream = (stream) => {
+    return {
+        isAvailable: !!stream,
+        isReceiving: true,
+        isMirrored: false,
+        renderElement: stream
+    };
+};
 /** @private */
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
 /* @conditional-compile-remove(rooms) */ role, 
@@ -24857,7 +24834,9 @@ const createCompositeHandlers$1 = memoizeOne((adapter) => ({
     onTyping: adapter.sendTypingIndicator,
     onRemoveParticipant: adapter.removeParticipant,
     updateThreadTopicName: adapter.setTopic,
-    onUpdateMessage: (messageId, content, options) => {
+    onUpdateMessage: (messageId, content, 
+    /* @conditional-compile-remove(file-sharing) */
+    options) => {
         const metadata = options === null || options === void 0 ? void 0 : options.metadata;
         /* @conditional-compile-remove(file-sharing) */
         const updatedOptions = (options === null || options === void 0 ? void 0 : options.attachmentMetadata) ? Object.assign({}, options.attachmentMetadata) : {};
@@ -25341,11 +25320,16 @@ const ChatScreen = (props) => {
  */
 const ChatComposite = (props) => {
     const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
+    /* @conditional-compile-remove(file-sharing) */
     const formFactor = props['formFactor'] || 'desktop';
     return (React.createElement("div", { className: chatScreenContainerStyle },
         React.createElement(BaseProvider, Object.assign({}, props),
             React.createElement(ChatAdapterProvider, { adapter: adapter },
-                React.createElement(ChatScreen, { formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems, 
+                React.createElement(ChatScreen
+                /* @conditional-compile-remove(file-sharing) */
+                , { 
+                    /* @conditional-compile-remove(file-sharing) */
+                    formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing })))));
 };
@@ -25820,13 +25804,21 @@ const disableCallControls = (callControlOptions, disabledControls) => {
     let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
     if (newOptions === true || newOptions === undefined) {
         newOptions = disabledControls.reduce((acc, key) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // @ts-expect-error TODO: fix noImplicitAny error here
+            // Not solveable at this time due to typescript limitations. The typing is too complex for typescript to
+            // understand. Will need to revisit when either typescript or the calling component bindings are updated.
             acc[key] = { disabled: true };
             return acc;
         }, {});
     }
     else {
         disabledControls.forEach((key) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // @ts-expect-error refer to above comment
             if (newOptions[key] !== false) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                // @ts-expect-error refer to above comment
                 newOptions[key] = { disabled: true };
             }
         });
@@ -26012,14 +26004,25 @@ const createCompositeHandlers = memoizeOne((adapter) => {
         }),
         /* @conditional-compile-remove(PSTN-calls) */
         onAddParticipant: (participant, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-            return yield adapter.addParticipant(participant, options);
+            if ('communicationUserId' in participant) {
+                return yield adapter.addParticipant(participant);
+            }
+            else if ('phoneNumber' in participant) {
+                return yield adapter.addParticipant(participant, options);
+            }
         }),
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.sendDtmfTone(dtmfTone);
         }),
         onRemoveParticipant: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-            yield adapter.removeParticipant(userId);
+            if (typeof userId === 'string') {
+                yield adapter.removeParticipant(userId);
+            }
+            else {
+                /* @conditional-compile-remove(PSTN-calls) */
+                yield adapter.removeParticipant(_toCommunicationIdentifier(userId));
+            }
         }),
         /* @conditional-compile-remove(raise-hand) */
         onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
@@ -26930,7 +26933,11 @@ const generateCustomControlBarButtons = (placement, customButtons) => customButt
         .filter((buttonProps) => buttonProps.placement === placement)
         .map((buttonProps, i) => (internalProps) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (buttonProps['onRenderButton']) {
+        // onRenderButton is a custom prop that can be passed to override the default rendering of the button
+        // This is useful for custom buttons that need to render more than just an icon and label and is used
+        // for CallWithChat button notification badge. However, onRenderButton is not a public prop and is
+        // not documented in the API. This is a temporary solution and will need to be revisited.
+        if ('onRenderButton' in buttonProps) {
             return buttonProps['onRenderButton'](internalProps);
         }
         return (React.createElement(ControlBarButton, { ariaDescription: (_b = (_a = buttonProps.strings) === null || _a === void 0 ? void 0 : _a.ariaDescription) !== null && _b !== void 0 ? _b : internalProps.ariaDescription, ariaLabel: (_f = (_d = (_c = buttonProps.strings) === null || _c === void 0 ? void 0 : _c.ariaLabel) !== null && _d !== void 0 ? _d : (_e = buttonProps.strings) === null || _e === void 0 ? void 0 : _e.tooltipContent) !== null && _f !== void 0 ? _f : internalProps.ariaLabel, disabled: (_g = buttonProps.disabled) !== null && _g !== void 0 ? _g : internalProps.disabled, id: (_h = buttonProps.id) !== null && _h !== void 0 ? _h : internalProps.id, key: `${buttonProps.placement}_${i}`, onClick: (_j = buttonProps.onItemClick) !== null && _j !== void 0 ? _j : internalProps.onClick, onRenderIcon: () => {
@@ -28264,7 +28271,7 @@ const captionSettingsDrawerStyles = (theme) => ({
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-const CaptionSettingsDrawer = (props) => {
+const CaptionLanguageSettingsDrawer = (props) => {
     var _a;
     /* @conditional-compile-remove(close-captions) */
     const theme = useTheme();
@@ -28275,7 +28282,7 @@ const CaptionSettingsDrawer = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const drawerItems = React.useMemo(() => {
         var _a;
-        return Object.keys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
+        return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
             itemKey: languageCode,
             text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
             onItemClick: () => onDrawerItemClick(languageCode),
@@ -28319,6 +28326,38 @@ const themedToggleButtonStyle = (theme, checked) => {
     };
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private */
+const SpokenLanguageSettingsDrawer = (props) => {
+    var _a;
+    /* @conditional-compile-remove(close-captions) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(close-captions) */
+    const onDrawerItemClick = React.useCallback((languageCode) => {
+        props.selectLanguage(languageCode);
+    }, [props]);
+    /* @conditional-compile-remove(close-captions) */
+    const drawerItems = React.useMemo(() => {
+        var _a;
+        return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
+            itemKey: languageCode,
+            text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
+            onItemClick: () => onDrawerItemClick(languageCode),
+            secondaryIconProps: props.currentLanguage === languageCode ? { iconName: 'Accept' } : undefined
+        }));
+    }, [props.currentLanguage, props.supportedLanguageStrings, onDrawerItemClick]);
+    const sortedDrawerItems = React.useMemo(() => {
+        const copy = [...drawerItems];
+        return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));
+    }, [drawerItems]);
+    /* @conditional-compile-remove(close-captions) */
+    return (React.createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
+            props.setCurrentLanguage(props.currentLanguage);
+            props.onLightDismiss();
+        }, styles: captionSettingsDrawerStyles(theme) }));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -28669,8 +28708,8 @@ const MoreDrawer = (props) => {
     });
     /* @conditional-compile-remove(close-captions) */
     return (React.createElement(React.Fragment, null,
-        isSpokenLanguageDrawerOpen && props.isCaptionsSupported && (React.createElement(CaptionSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsHandlers.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
-        isCaptionLanguageDrawerOpen && props.isCaptionsSupported && (React.createElement(CaptionSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsHandlers.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: { menuTitle: props.strings.captionLanguageMenuTitle }, supportedLanguageStrings: supportedCaptionLanguageStrings })),
+        isSpokenLanguageDrawerOpen && props.isCaptionsSupported && (React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsHandlers.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
+        isCaptionLanguageDrawerOpen && props.isCaptionsSupported && (React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsHandlers.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;
@@ -31066,7 +31105,7 @@ const DtmfDialpadPageContent = (props) => {
     return (React.createElement(react.Stack, { style: { height: '100%', width: '100%', background: theme.palette.white } },
         React.createElement(react.Stack, { verticalAlign: 'center', style: { margin: 'auto' } },
             React.createElement(DtmfDialerContentTimer, null),
-            React.createElement(react.Text, { style: { margin: 'auto' } }, calleeName !== 'Unnamed participant' ? calleeName : ''),
+            React.createElement(react.Text, { style: { margin: 'auto' } }, calleeName && calleeName !== 'Unnamed participant' ? calleeName === null || calleeName === void 0 ? void 0 : calleeName.toString() : ''),
             React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$c(void 0, void 0, void 0, function* () {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     yield adapter.sendDtmfTone(tone);
@@ -33173,15 +33212,21 @@ const trackCapabilityChangedNotificationAsDismissed = (capabilityName, trackedNo
 };
 /* @conditional-compile-remove(capabilities) */
 const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAndRole, activeNotifications) => {
+    var _a, _b;
     if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {
         return activeNotifications;
     }
-    for (const [capabilityName, newCapabilityValue] of Object.entries(capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue)) {
+    for (const [capabilityKey, newCapabilityValue] of Object.entries(capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue)) {
+        // Cast is safe because we are iterating over the enum keys on the object.entries where
+        // newCapabilityValue typing is correctly returned. Object.entries limitations
+        // always returns string for the key
+        const capabilityName = capabilityKey;
         // If the active notification for a capability has the same `isPresent` value and the same reason as the new
         // capability value from the SDK then we will not create a new notification to avoid redundancy
         if (activeNotifications[capabilityName] &&
-            newCapabilityValue.isPresent === activeNotifications[capabilityName].isPresent &&
-            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason === activeNotifications[capabilityName].changedReason) {
+            newCapabilityValue.isPresent === ((_a = activeNotifications[capabilityName]) === null || _a === void 0 ? void 0 : _a.isPresent) &&
+            capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason ===
+                ((_b = activeNotifications[capabilityName]) === null || _b === void 0 ? void 0 : _b.changedReason)) {
             continue;
         }
         const newCapabilityChangeNotification = {
@@ -33385,7 +33430,7 @@ const Survey = (props) => {
     return (React.createElement(React.Fragment, null,
         showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
         showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
-        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(react.Stack, { verticalAlign: "center", className: surveyContainerStyle(isMobile) },
+        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(react.Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
             React.createElement(react.Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
             React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
                     setShowSubmitFeedbackButton(showButton);
@@ -33902,9 +33947,9 @@ class CallingSoundSubscriber {
         this.onCallStateChanged();
     }
     unsubscribeAll() {
-        var _a;
-        this.call.off('stateChanged', this.onCallStateChanged);
-        if ((_a = this.soundsLoaded) === null || _a === void 0 ? void 0 : _a.callRingingSound) {
+        var _a, _b;
+        (_a = this.call) === null || _a === void 0 ? void 0 : _a.off('stateChanged', this.onCallStateChanged);
+        if ((_b = this.soundsLoaded) === null || _b === void 0 ? void 0 : _b.callRingingSound) {
             this.soundsLoaded.callRingingSound.pause();
         }
     }
@@ -34643,15 +34688,11 @@ class AzureCommunicationCallAdapter {
             : {};
         const combinedCallOptions = Object.assign(Object.assign({}, startCallVideoOptions), options);
         const idsToAdd = participants.map((participant) => {
-            let backendId = participant;
-            if (typeof participant === 'string') {
-                backendId = _toCommunicationIdentifier(participant);
-            }
-            if (backendId.phoneNumber) {
+            const backendId = _toCommunicationIdentifier(participant);
+            if ('phoneNumber' in backendId) {
                 if ((options === null || options === void 0 ? void 0 : options.alternateCallerId) === undefined) {
                     throw new Error('Unable to start call, PSTN user present with no alternateCallerId.');
                 }
-                return backendId;
             }
             return backendId;
         });
@@ -35314,7 +35355,7 @@ const createTeamsCallAdapterFromClient = (callClient, callAgent, locator, option
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager, options);
 });
 const isCallError = (e) => {
-    return e['target'] !== undefined && e['innerError'] !== undefined;
+    return 'target' in e && 'innerError' in e;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -37035,7 +37076,10 @@ var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermiss
  */
 const createCompositeStrings = (localizedStrings) => {
     const strings = Object.assign({}, en_US);
-    Object.keys(localizedStrings).forEach((key) => {
+    _getKeys(localizedStrings).forEach((key) => {
+        // mark the value as unknown because the type changes based on the key.
+        // this is unsafe at runtime as we could assign the wrong type based on the key here.
+        // but typescript isn't smart enough to know that the key used across each access will result in the same type
         strings[key] = Object.assign(Object.assign({}, strings[key]), localizedStrings[key]);
     });
     return strings;