@azure/communication-react 1.11.1-alpha-202312220012 → 1.11.1-alpha-202312240013

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

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202312220012';
+var telemetryVersion = '1.11.1-alpha-202312240013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6025,7 +6025,6 @@ const wrapper = react.mergeStyles({
 const defaultTheme = Object.assign({}, react.mergeThemes(react.getTheme(), lightTheme));
 /** Theme context for library's react components */
 const ThemeContext = React.createContext(defaultTheme);
-const SingleUsageCheckContext = React.createContext(false);
 /**
  * Provider to apply a Fluent theme across this library's react components.
  *
@@ -6036,21 +6035,10 @@ const SingleUsageCheckContext = React.createContext(false);
  */
 const FluentThemeProvider = (props) => {
     const { fluentTheme, rtl, children } = props;
-    /**
-     * Pass only the children if we previously wrapped.
-     * This is to prevent the provider from being applied
-     * multiple times and wiping out configuration like RTL
-     * FluentThemeProvider
-     */
-    const alreadyWrapped = useSingleUsageCheck();
-    if (alreadyWrapped) {
-        return React.createElement(React.Fragment, null, children);
-    }
     let fluentV8Theme = react.mergeThemes(defaultTheme, fluentTheme);
     fluentV8Theme = react.mergeThemes(fluentV8Theme, { rtl });
-    return (React.createElement(SingleUsageCheckContext.Provider, { value: true },
-        React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
-            React.createElement(react.ThemeProvider, { theme: fluentV8Theme, className: wrapper }, children))));
+    return (React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
+        React.createElement(react.ThemeProvider, { theme: fluentV8Theme, className: wrapper }, children)));
 };
 /**
  * React hook to access theme
@@ -6058,12 +6046,6 @@ const FluentThemeProvider = (props) => {
  * @public
  */
 const useTheme = () => React.useContext(ThemeContext);
-/**
- * This is used to prevent the provider from being applied multiple times.
- *
- * @private
- */
-const useSingleUsageCheck = () => React.useContext(SingleUsageCheckContext);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -11209,6 +11191,9 @@ const MessageThreadWrapper = (props) => {
     }), [onFetchAttachments]);
     const localeStrings = useLocale$1().strings.messageThread;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
+    // it is required to use useState for messages
+    // as the scrolling logic requires re - render at a specific point in time
+    const [messages, setMessages] = React.useState([]);
     // id for the latest deleted message
     const [latestDeletedMessageId, setLatestDeletedMessageId] = React.useState(undefined);
     // this value is used to check if a message is deleted for the previous value of messages array
@@ -11220,10 +11205,12 @@ const MessageThreadWrapper = (props) => {
             return;
         }
         try {
-            yield onDeleteMessage(messageId);
             // reset deleted message label in case if there was a value already (messages are deleted 1 after another)
             setDeletedMessageAriaLabel(undefined);
             setLatestDeletedMessageId(messageId);
+            // we should set up latestDeletedMessageId before the onDeleteMessage call
+            // as otherwise in very rare cases the messages array can be updated before latestDeletedMessageId
+            yield onDeleteMessage(messageId);
         }
         catch (e) {
             console.log('onDeleteMessage failed: messageId', messageId, 'error', e);
@@ -11237,17 +11224,11 @@ const MessageThreadWrapper = (props) => {
             isAllChatMessagesLoadedRef.current = false;
         }
     }, [onLoadPreviousChatMessages]);
-    React.useEffect(() => {
-        reactFileTypeIcons.initializeFileTypeIcons();
-    }, []);
     const previousTopRef = React.useRef(-1);
     const previousHeightRef = React.useRef(-1);
     const messageIdSeenByMeRef = React.useRef('');
     const chatScrollDivRef = React.useRef(null);
     const isLoadingChatMessagesRef = React.useRef(false);
-    const messages = React.useMemo(() => {
-        return newMessages;
-    }, [newMessages]);
     React.useEffect(() => {
         if (latestDeletedMessageId === undefined) {
             setDeletedMessageAriaLabel(undefined);
@@ -11274,6 +11255,7 @@ const MessageThreadWrapper = (props) => {
     const messagesRef = React.useRef(messages);
     const setMessagesRef = (messagesWithAttachedValue) => {
         messagesRef.current = messagesWithAttachedValue;
+        setMessages(messagesWithAttachedValue);
     };
     const isAtBottomOfScrollRef = React.useRef(isAtBottomOfScroll);
     const setIsAtBottomOfScrollRef = (isAtBottomOfScrollValue) => {
@@ -12774,6 +12756,31 @@ const moreButtonStyles = {
         background: 'none'
     }
 };
+/**
+ * @private
+ */
+const raiseHandContainerStyles = (theme, limitedSpace) => react.mergeStyles({
+    alignItems: 'center',
+    padding: '0.2rem 0.3rem',
+    backgroundColor: theme.palette.white,
+    opacity: 0.9,
+    borderRadius: '1rem',
+    margin: '0.5rem',
+    width: 'fit-content',
+    position: 'absolute'
+}, limitedSpace && raiseHandLimitedSpaceStyles);
+/**
+ * @private
+ */
+const raiseHandLimitedSpaceStyles = {
+    // position centrally
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    left: 0,
+    right: 0,
+    // position at the bottom
+    bottom: 0
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -13029,16 +13036,7 @@ const VideoTile = (props) => {
                     isPinned && (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),
             children && (React.createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
-            /* @conditional-compile-remove(raise-hand) */ raisedHand && canShowLabel && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
-                    alignItems: 'center',
-                    padding: '0.2rem 0.3rem',
-                    backgroundColor: theme.palette.white,
-                    opacity: 0.9,
-                    borderRadius: '1rem',
-                    margin: '0.5rem',
-                    width: 'fit-content',
-                    position: 'absolute'
-                } },
+            /* @conditional-compile-remove(raise-hand) */ raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(react.Stack.Item, null,
                     React.createElement(react.Text, null, raisedHand.raisedHandOrderPosition)),
                 React.createElement(react.Stack.Item, null,
@@ -22780,7 +22778,25 @@ const useAdapter$1 = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const MESSAGE_THREAD_WIDTH = '41.25rem';
+/**
+ * @private
+ */
+const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];
+/**
+ * @private
+ */
+const TEAMS_LIMITATION_LEARN_MORE = 'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';
+/**
+ * @remarks
+ * This value is publicly documented in the ChatComposite API documentation.
+ * Changing this value will require updating the API documentation.
+ */
+const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const CHAT_CONTAINER_MAX_WIDTH_REM = 41.25;
+const CHAT_CONTAINER_MIN_HEIGHT_REM = 13;
 /**
  * @private
  * z-index to ensure that chat container has lower z-index than participant pane
@@ -22792,8 +22808,8 @@ const CHAT_CONTAINER_ZINDEX = 1;
 const chatScreenContainerStyle = react.mergeStyles({
     height: '100%',
     width: '100%',
-    minHeight: '13rem',
-    minWidth: '17.5rem'
+    minHeight: `${CHAT_CONTAINER_MIN_HEIGHT_REM}rem`,
+    minWidth: `${CHAT_CONTAINER_MIN_WIDTH_REM}rem`
 });
 /**
  * @private
@@ -22861,7 +22877,7 @@ const topicNameLabelStyle = react.mergeStyles({
  * @private
  */
 const messageThreadChatCompositeStyles = react.memoizeFunction((background) => ({
-    root: { maxWidth: MESSAGE_THREAD_WIDTH },
+    root: { maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem` },
     chatContainer: { background: background }
 }));
 /**
@@ -22874,7 +22890,7 @@ const typingIndicatorContainerStyles = {
  * @private
  */
 const sendboxContainerStyles = {
-    maxWidth: MESSAGE_THREAD_WIDTH,
+    maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`,
     width: '100%',
     alignSelf: 'center'
 };
@@ -26642,6 +26658,7 @@ const PreparedMoreDrawer = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+const SIDE_PANE_PADDING_LR_REM = 0.25;
 /**
  * @private
  */
@@ -26704,12 +26721,13 @@ const hiddenStyles = {
 /**
  * @private
  */
-const sidePaneStyles = (maxWidth) => ({
+const sidePaneStyles = (maxWidth, minWidth) => ({
     root: {
         height: 'auto',
         width: '100%',
-        padding: '0.5rem 0.25rem',
-        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '21.5rem'
+        padding: `0.5rem ${SIDE_PANE_PADDING_LR_REM}rem`,
+        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '21.5rem',
+        minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : `${CHAT_CONTAINER_MIN_WIDTH_REM + SIDE_PANE_PADDING_LR_REM * 2}rem`
     }
 });
 /**
@@ -26798,12 +26816,12 @@ const SidePane = (props) => {
         overrideSidePane.persistRenderingWhenClosed &&
         !overrideSidePane.isActive;
     const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
-    const maxWidthStyles = React.useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);
+    const widthConstrainedStyles = React.useMemo(() => sidePaneStyles(props.maxWidth, props.minWidth), [props.maxWidth, props.minWidth]);
     const paneStyles = renderingOnlyHiddenContent
         ? hiddenStyles
         : props.mobileView
             ? availableSpaceStyles
-            : maxWidthStyles;
+            : widthConstrainedStyles;
     const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
     /**
      * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
@@ -28269,7 +28287,7 @@ const CallArrangement = (props) => {
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }))))),
                     React.createElement(SidePane, { mobileView: props.mobileView, 
                         /* @conditional-compile-remove(video-background-effects) */
-                        maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
+                        maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
                             isDisabled$3((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
@@ -30019,7 +30037,7 @@ const ConfigurationPage = (props) => {
                 isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps, type: react.PanelType.custom, 
                 /* @conditional-compile-remove(video-background-effects) */
                 customWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` },
-                React.createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer })))));
+                React.createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer, maxWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`, minWidth: `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` })))));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -30967,6 +30985,16 @@ const MainScreen = (props) => {
     React.useEffect(() => {
         onSidePaneIdChange === null || onSidePaneIdChange === void 0 ? void 0 : onSidePaneIdChange(sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id);
     }, [sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, onSidePaneIdChange]);
+    // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.
+    React.useEffect(() => {
+        const closeSidePane = () => {
+            setSidePaneRenderer(undefined);
+        };
+        adapter.on('callEnded', closeSidePane);
+        return () => {
+            adapter.off('callEnded', closeSidePane);
+        };
+    }, [adapter]);
     /* @conditional-compile-remove(capabilities) */
     const capabilitiesChangedInfoAndRole = useSelector$1(capabilitiesChangedInfoAndRoleSelector);
     /* @conditional-compile-remove(capabilities) */
@@ -33370,6 +33398,13 @@ const CallWithChatScreen = (props) => {
             closeChat();
         }
     }, [closeChat]);
+    // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.
+    React.useEffect(() => {
+        callAdapter.on('callEnded', closeChat);
+        return () => {
+            callAdapter.off('callEnded', closeChat);
+        };
+    }, [callAdapter, closeChat]);
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React.createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React.createElement(react.Stack, { horizontal: true, grow: true },
@@ -33483,17 +33518,6 @@ function mergeCallAdapterStateIntoCallWithChatAdapterState(existingCallWithChatA
         selectedVideoBackgroundEffect: callAdapterState.selectedVideoBackgroundEffect });
 }
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];
-/**
- * @private
- */
-const TEAMS_LIMITATION_LEARN_MORE = 'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**