@azure/communication-react 1.11.0-alpha-202312050013 → 1.11.0-alpha-202312060012

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.11.0-alpha-202312050013';
+var telemetryVersion = '1.11.0-alpha-202312060012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5866,7 +5866,8 @@ const lightTheme = {
         neutralPrimary: '#323130',
         neutralDark: '#201f1e',
         black: '#000000',
-        white: '#ffffff'
+        white: '#ffffff',
+        whiteTranslucent40: 'rgba(255, 255, 255, 0.4)'
     },
     callingPalette: {
         callRed: '#a42e43',
@@ -5916,7 +5917,8 @@ const darkTheme = {
         neutralPrimary: '#ffffff',
         neutralDark: '#f4f4f4',
         black: '#f8f8f8',
-        white: '#252423'
+        white: '#252423',
+        whiteTranslucent40: 'rgba(0, 0, 0, 0.4)'
     },
     callingPalette: {
         callRed: '#c4314b',
@@ -11587,8 +11589,7 @@ const participantStateStringStyles$1 = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     lineHeight: 'normal',
-    paddingLeft: '1rem',
-    marginLeft: 'auto',
+    marginLeft: '0.5rem',
     marginRight: 0
 };
 /**
@@ -28328,7 +28329,6 @@ const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
 /** @private */
 const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 const LOGO_HEIGHT_REM = 3;
-const LOGO_MARGIN_BOTTOM_REM = 1;
 /**
  * @private
  */
@@ -28339,6 +28339,12 @@ const configurationStackTokensDesktop = {
  * @private
  */
 const configurationStackTokensMobile = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const deviceConfigurationStackTokens = {
     childrenGap: '1.5rem'
 };
 /** @private */
@@ -28346,7 +28352,7 @@ const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
     root: {
         height: '100%',
         width: '100%',
-        padding: '2rem 1rem 2rem 1rem',
+        padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',
         minWidth: desktop
             ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
             : '16rem',
@@ -28399,20 +28405,36 @@ const selectionContainerStyle = (theme) => react.mergeStyles({
 /**
  * @private
  */
-const titleContainerStyleDesktop = react.mergeStyles({
-    fontSize: '1.25rem',
-    lineHeight: '1.75rem',
+const titleContainerStyleDesktop = (theme) => react.mergeStyles({
+    fontSize: '1.2rem',
+    lineHeight: '1rem',
     fontWeight: 600
-});
+}, configurationPageTextDecoration(theme));
 /**
  * @private
  */
-const titleContainerStyleMobile = react.mergeStyles({
+const titleContainerStyleMobile = (theme) => react.mergeStyles({
     fontSize: '1.0625rem',
     lineHeight: '1.375rem',
     fontWeight: 600,
     textAlign: 'center'
-});
+}, configurationPageTextDecoration(theme));
+/**
+ * Ensure configuration page text is legible on top of a background image.
+ * @private
+ */
+const configurationPageTextDecoration = (theme) => {
+    return {
+        textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
+        fill: theme.semanticColors.bodyText,
+        stroke: theme.palette.whiteTranslucent40,
+        paintOrder: 'stroke fill',
+        strokeWidth: _pxToRem(1.5),
+        text: {
+            letterSpacing: '-0.02rem' // cope with extra width due to stroke width
+        }
+    };
+};
 /**
  * @private
  */
@@ -28425,8 +28447,7 @@ const callDetailsContainerStyles = {
 };
 const callDetailsStyle = {
     fontSize: '0.9375',
-    lineHeight: '1.25rem',
-    marginTop: '0.25rem'
+    lineHeight: '1.25rem'
 };
 /**
  * @private
@@ -28435,7 +28456,7 @@ const callDetailsStyleDesktop = react.mergeStyles(Object.assign({}, callDetailsS
 /**
  * @private
  */
-const callDetailsStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { textAlign: 'center' }));
+const callDetailsStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { marginBottom: '0.5rem', textAlign: 'center' }));
 /**
  * @private
  */
@@ -28521,7 +28542,7 @@ const configurationCenteredContent = (fillsHeight, hasLogo) => react.mergeStyles
     // in and not shift the content. To exclude the logo, we subtract the logo height
     // and margin from the actual height. This allows the flex box's natural centering
     // to appropriately center the content.
-    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM + LOGO_MARGIN_BOTTOM_REM}rem` : '0rem'})`
+    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`
 });
 /** @private */
 const panelStyles = {
@@ -28551,8 +28572,7 @@ const logoStyles = (shape) => ({
     root: {
         overflow: 'initial',
         display: 'flex',
-        justifyContent: 'center',
-        marginBottom: `${LOGO_MARGIN_BOTTOM_REM}rem`
+        justifyContent: 'center'
     },
     image: {
         borderRadius: shape === 'circle' ? '100%' : undefined,
@@ -29097,6 +29117,88 @@ const CallReadinessModalFallBack = (props) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * An SVG element component that wraps inner text to fit the width of the SVG.
+ * @private
+ */
+const SvgWithWordWrapping = (props) => {
+    const { width, text, lineHeightPx, bufferHeightPx } = props;
+    const svgRef = React.useRef(null);
+    const calculationTextElement = React.useRef(null);
+    const visibleTextElement = React.useRef(null);
+    const [height, setHeight] = React.useState(0);
+    // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.
+    // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered
+    // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but
+    // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+    // for more details.
+    React.useLayoutEffect(() => {
+        if (text && calculationTextElement.current && visibleTextElement.current) {
+            const numLines = convertTextToWrappedText(calculationTextElement.current, visibleTextElement.current, width, lineHeightPx);
+            setHeight(numLines * lineHeightPx);
+        }
+    }, [width, lineHeightPx, text]);
+    return (React__default["default"].createElement("svg", { width: width, height: height + bufferHeightPx, ref: svgRef, xmlns: "http://www.w3.org/2000/svg" },
+        React__default["default"].createElement("text", { height: 0, ref: calculationTextElement, style: { visibility: 'hidden' } }, text),
+        React__default["default"].createElement("text", { ref: visibleTextElement, x: "0", y: bufferHeightPx / 4, role: "heading", "aria-level": 1 })));
+};
+/**
+ * Wrap text in tspan elements to fit the width of the SVG
+ * @param baseTextElement The text element to create the wrapped text from.
+ * @param outputTextElement The text element to insert the wrapped text into.
+ * @param maxWidth The maximum width of the text element.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The number of lines of text.
+ */
+const convertTextToWrappedText = (inputTextElement, outputTextElement, maxWidth, lineHeightPx) => {
+    var _a, _b;
+    const words = (_b = (_a = inputTextElement.textContent) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+    if (words.length === 0 || words[0] === '') {
+        throw new Error('Text element must contain text');
+    }
+    // The current line being built.
+    let line = '';
+    // Running total of the number of lines.
+    let numLines = 0;
+    // First, clear the output text element.
+    outputTextElement.textContent = '';
+    // Iterate through each word and create a tspan element for each line.
+    for (let i = 0; i < words.length; i++) {
+        const testLine = line + words[i] + ' ';
+        const testWidth = inputTextElement.getSubStringLength(0, testLine.length);
+        if (testWidth > maxWidth && i > 0) {
+            const newLine = constructTSpanLine(line, lineHeightPx);
+            outputTextElement.appendChild(newLine);
+            line = words[i] + ' ';
+            numLines++;
+        }
+        else {
+            line = testLine;
+        }
+    }
+    // Add the last line.
+    const newLine = constructTSpanLine(line, lineHeightPx);
+    outputTextElement.appendChild(newLine);
+    numLines++;
+    // Return the number of lines to calculate the height of the SVG.
+    return numLines;
+};
+/**
+ * Create a tspan element for a line of text, with text set to be centered.
+ * @param line The line of text.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The tspan element.
+ */
+const constructTSpanLine = (line, lineHeightPx) => {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.textContent = line;
+    tspan.setAttribute('x', '50%');
+    tspan.setAttribute('dy', _pxToRem(lineHeightPx));
+    tspan.setAttribute('text-anchor', 'middle');
+    return tspan;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -29166,7 +29268,8 @@ const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
+    const title = locale.strings.call.configurationPageTitle.length > 0 ? (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
+        React__default["default"].createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle }))) : (React__default["default"].createElement(React__default["default"].Fragment, null));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -29265,7 +29368,7 @@ const ConfigurationPage = (props) => {
                         logo: props.logo }),
                     title,
                     callDescription),
-                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: configurationStackTokensMobile },
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
                     localPreviewTrampoline(mobileWithPreview, 
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                     React__default["default"].createElement(react.Stack, { styles: mobileView ? undefined : configurationSectionStyle },