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

package/dist/communication-react.d.ts

@@ -7510,7 +7510,7 @@ export declare interface ImageOverlayProps {
 /**
  * Strings of {@link ImageOverlay} that can be overridden.
  *
- * @beta
+ * @public
  */
 export declare interface ImageOverlayStrings {
     /**

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

@@ -173,7 +173,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-202403010014';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -333,6 +333,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 +5919,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.
@@ -11228,7 +11227,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 +11300,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 +19305,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 +19398,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 +20276,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
@@ -24857,7 +24856,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 +25342,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 +25826,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 +26026,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 +26955,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 +28293,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 +28304,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 +28348,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 +28730,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 +31127,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 +33234,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 +33452,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 +33969,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 +34710,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 +35377,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 +37098,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;