@azure/communication-react 1.8.1-alpha-202309280013 → 1.8.1-alpha-202309300012

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

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.1-alpha-202309280013';
+var telemetryVersion = '1.8.1-alpha-202309300012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5085,7 +5085,11 @@ const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
 const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameStyles) => {
     const userElements = [];
     typingUsers.forEach((user, index) => {
-        userElements.push(onRenderUser ? (onRenderUser(user)) : (React__default["default"].createElement(react.Text, { className: react.mergeStyles(userDisplayNameStyles), key: `user-${index}` }, user.displayName)));
+        let truncatedDisplayName = user.displayName;
+        if (truncatedDisplayName && truncatedDisplayName.length > 50) {
+            truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';
+        }
+        userElements.push(onRenderUser ? (onRenderUser(user)) : (React__default["default"].createElement(react.Text, { className: react.mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName)));
         userElements.push(React__default["default"].createElement(react.Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma
@@ -11555,8 +11559,7 @@ const focusTrapZoneStyles = {
 };
 const drawerContentContainerStyles = {
     root: {
-        // Needed to fill max height from parent, drawerSurfaceStyles
-        height: '100%'
+        height: 'auto'
     }
 };
 
@@ -13003,11 +13006,11 @@ const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenShareP
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
-        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: `${localVideoTileOuterPaddingRem}rem`
+        right: `${dockedlocalVideoTileContainerPaddingRem}rem`
     };
 };
 /**
@@ -13023,7 +13026,10 @@ const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem)
  */
 const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSizeRem)
+        main: react.mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {
+            bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,
+            right: `${floatinglocalVideoModalInitialPositionGapRem}rem`
+        })
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -13035,11 +13041,17 @@ const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     }, localVideoModalStyles);
 };
 /**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
+ * Initial position gap of the floating local video modal.
+ * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from
+ * the bottom and 1rem from the right.
+ * @private
+ */
+const floatinglocalVideoModalInitialPositionGapRem = 1;
+/**
+ * Padding of the docked local video tile container.
  * @private
  */
-const localVideoTileOuterPaddingRem = 0.5;
+const dockedlocalVideoTileContainerPaddingRem = 0.5;
 /**
  * @private
  */
@@ -14386,8 +14398,8 @@ const DRAG_OPTIONS$1 = {
 // Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
 // position the modal can be dragged to.
 const modalMaxDragPosition = {
-    x: _convertRemToPx(localVideoTileOuterPaddingRem),
-    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+    x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+    y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
 };
 /**
  * @private
@@ -14401,8 +14413,12 @@ const FloatingLocalVideo = (props) => {
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
-            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
+            x: -parentWidth +
+                _convertRemToPx(localVideoSizeRem.width) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+            y: -parentHeight +
+                _convertRemToPx(localVideoSizeRem.height) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
         }
         : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
     const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
@@ -27239,7 +27255,7 @@ const dropDownStyles = (theme) => ({
     dropdownItem: {
         fontSize: '0.875rem',
         height: '2.5rem',
-        background: theme.palette.neutralQuaternaryAlt
+        background: theme.palette.white
     },
     dropdown: {
         height: '2.5rem',
@@ -27251,7 +27267,9 @@ const dropDownStyles = (theme) => ({
     title: {
         fontSize: '0.875rem',
         height: '2.5rem',
-        lineHeight: '2.3125rem'
+        lineHeight: '2.3125rem',
+        borderRadius: '0.25rem',
+        border: `1px solid ${theme.palette.neutralQuaternaryAlt}`
     },
     label: {
         fontWeight: 600,
@@ -27327,12 +27345,12 @@ const configurationStackTokensDesktop = {
  * @private
  */
 const configurationStackTokensMobile = {
-    childrenGap: '1rem'
+    childrenGap: '1.5rem'
 };
 const configurationContainerStyle = {
     height: '100%',
     width: '100%',
-    padding: '0.5rem'
+    padding: '2rem 1rem 2rem 1rem'
 };
 /**
  * @private
@@ -27411,7 +27429,14 @@ const startCallButtonContainerStyleMobile = {
  */
 const startCallButtonStyleMobile = react.mergeStyles({
     width: '100%',
-    maxWidth: 'unset'
+    maxWidth: 'unset',
+    borderRadius: '0.25rem'
+});
+/**
+ * @private
+ */
+const startCallButtonStyleDesktop = react.mergeStyles({
+    borderRadius: '0.25rem'
 });
 /** @private */
 const cameraAndVideoEffectsContainerStyleDesktop = {
@@ -27919,7 +27944,7 @@ const CallReadinessModal = (props) => {
                 main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
             }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                 setIsPermissionsModalDismissed(false);
-            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()));
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()));
     }
     else {
         return React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -27997,7 +28022,7 @@ const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } },
                 React__default["default"].createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
                     /* @conditional-compile-remove(unsupported-browser) */
                     browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
@@ -28010,7 +28035,7 @@ const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()))));
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()))));
     }
 };
 
@@ -28184,7 +28209,7 @@ const ConfigurationPage = (props) => {
                             /* @conditional-compile-remove(video-background-effects) */
                             onClickVideoEffects: toggleVideoEffectsPane })))),
                     React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
+                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton })))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , { 
@@ -28231,7 +28256,8 @@ const containerItemGap = {
  */
 const rejoinCallButtonContainerStyles = {
     root: {
-        paddingTop: '1.125rem'
+        paddingTop: '1.125rem',
+        borderRadius: '0.25rem'
     }
 };
 /**