@azure/communication-react 1.11.1-alpha-202312230012 → 1.11.1-alpha-202312280012

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-202312230012';
+var telemetryVersion = '1.11.1-alpha-202312280012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -12756,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.
@@ -13011,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,
@@ -22762,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
@@ -22774,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
@@ -22843,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 }
 }));
 /**
@@ -22856,7 +22890,7 @@ const typingIndicatorContainerStyles = {
  * @private
  */
 const sendboxContainerStyles = {
-    maxWidth: MESSAGE_THREAD_WIDTH,
+    maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`,
     width: '100%',
     alignSelf: 'center'
 };
@@ -26624,6 +26658,7 @@ const PreparedMoreDrawer = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+const SIDE_PANE_PADDING_LR_REM = 0.25;
 /**
  * @private
  */
@@ -26686,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`
     }
 });
 /**
@@ -26780,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.
@@ -28251,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 }),
@@ -29454,6 +29490,7 @@ const LocalPreview = (props) => {
     const onToggleMic = React.useCallback(() => __awaiter$a(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
+    const hasNoSpeakers = !devicesButtonProps.speakers.length;
     const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
         devicesButtonProps.microphones.length === 0 &&
         devicesButtonProps.speakers.length === 0;
@@ -29499,7 +29536,7 @@ const LocalPreview = (props) => {
                         : {}, styles: localPreviewButtonStyle })),
                 props.showDevicesButton && (React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
                     // disable button whilst all other buttons are disabled
-                    disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, 
+                    disabled: (!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) || hasNoDevices, showLabel: true, 
                     // disable tooltip as it obscures list of devices on mobile
                     strings: props.mobileView ? { tooltipContent: '' } : {}, styles: devicesButtonStyles })))))));
 };
@@ -30001,7 +30038,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) */
@@ -30949,6 +30986,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) */
@@ -33352,6 +33399,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 },
@@ -33465,17 +33519,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.
 /**