@azure/communication-react 1.9.0-alpha-202311010014 → 1.9.0-alpha-202311020014

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

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.9.0-alpha-202311010014';
+var telemetryVersion = '1.9.0-alpha-202311020014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -27786,27 +27786,34 @@ const isNetworkHealthy = (value) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+const DROPDOWN_HEIGHT_REM = 2.25;
 /**
  * @private
  */
 const mainStackTokens = {
-    childrenGap: '1rem'
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const soundStackTokens = {
+    childrenGap: '0.5rem'
 };
 /**
  * @private
  */
 const dropDownStyles = (theme) => ({
     caretDownWrapper: {
-        height: '2.5rem',
-        lineHeight: '2.5rem'
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: `${DROPDOWN_HEIGHT_REM}rem`
     },
     dropdownItem: {
         fontSize: '0.875rem',
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         background: theme.palette.white
     },
     dropdown: {
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         width: '100%',
         svg: {
             verticalAlign: 'top'
@@ -27814,14 +27821,16 @@ const dropDownStyles = (theme) => ({
     },
     title: {
         fontSize: '0.875rem',
-        height: '2.5rem',
-        lineHeight: '2.3125rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: '2rem',
         borderRadius: '0.25rem',
         border: `1px solid ${theme.palette.neutralQuaternaryAlt}`
     },
     label: {
         fontWeight: 600,
-        fontSize: '0.875rem'
+        fontSize: '0.875rem',
+        // Add z-index to ensure labels are rendered above the configuration section background
+        zIndex: 1
     },
     errorMessage: {
         fontSize: '0.875rem'
@@ -27883,6 +27892,12 @@ const ConfigurationPageMicDropdown = (props) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/** @private */
+const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;
+/** @private */
+const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
+/** @private */
+const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 /**
  * @private
  */
@@ -27915,11 +27930,40 @@ const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
 /**
  * @private
  */
-const selectionContainerStyle = react.mergeStyles({
+const configurationSectionStyle = {
+    root: {
+        width: '100%',
+        minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
+        maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`
+    }
+};
+/**
+ * @private
+ */
+const selectionContainerStyle = (theme) => react.mergeStyles({
     width: '100%',
-    minWidth: '11rem',
-    maxWidth: '18.75rem',
-    padding: '0.5rem'
+    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    padding: '1rem',
+    borderRadius: theme.effects.roundedCorner6,
+    border: `0.0625rem solid ${theme.palette.neutralLight}`,
+    boxShadow: theme.effects.elevation4,
+    // Style the background of the container to have partial transparency.
+    // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.
+    // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white
+    // to parse it correctly.
+    position: 'relative',
+    ':before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 0,
+        background: theme.palette.white,
+        opacity: 0.9,
+        borderRadius: theme.effects.roundedCorner4
+    }
 });
 /**
  * @private
@@ -27989,7 +28033,9 @@ const startCallButtonStyleMobile = react.mergeStyles({
  * @private
  */
 const startCallButtonStyleDesktop = react.mergeStyles({
-    borderRadius: '0.25rem'
+    borderRadius: '0.25rem',
+    width: 'auto',
+    height: '2.25rem'
 });
 /** @private */
 const cameraAndVideoEffectsContainerStyleDesktop = {
@@ -28187,7 +28233,7 @@ const LocalDeviceSettings = (props) => {
                 onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
         React__default["default"].createElement(react.Stack, null,
             React__default["default"].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
-            React__default["default"].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
+            React__default["default"].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
                 React__default["default"].createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, 
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps, 
@@ -28241,7 +28287,7 @@ const buttonWithIconStyles = {
 const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return (React__default["default"].createElement(react.PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: react.mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React__default["default"].createElement(reactIcons.Video20Filled, { className: videoCameraIconStyle }) })));
+    return (React__default["default"].createElement(react.PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: react.mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: props.hideIcon ? undefined : () => React__default["default"].createElement(reactIcons.Video20Filled, { className: videoCameraIconStyle }) })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -28277,7 +28323,7 @@ const localPreviewContainerStyle = {
 /**
  * @private
  */
-const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '50%', minWidth: '11rem', maxWidth: '25rem', height: '18.75rem', padding: '0.5rem' }));
+const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`, minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`, maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem` }));
 /**
  * @private
  */
@@ -28625,6 +28671,7 @@ const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
+    const theme = useTheme();
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -28770,11 +28817,11 @@ const ConfigurationPage = (props) => {
                         logo: props.logo }),
                     title,
                     callDescription),
-                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : undefined },
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: configurationStackTokensMobile },
                     localPreviewTrampoline(mobileWithPreview, 
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
-                    React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                        !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(react.Stack, { styles: mobileView ? undefined : configurationSectionStyle },
+                        !mobileWithPreview && (React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle(theme) },
                             React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ audioState), 
@@ -28784,8 +28831,8 @@ 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 : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton }))))),
+                        React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop, horizontalAlign: mobileWithPreview ? 'stretch' : 'end' },
+                            React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton, hideIcon: true }))))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , {