@azure/communication-react 1.0.0-beta.5 → 1.0.0

package/dist/dist-esm/react-components/src/components/GridLayout.js

@@ -1,29 +1,184 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-import React, { useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import { gridLayoutStyle } from './styles/GridLayout.styles';
-const calculateStandardLayoutRows = (numberOfItems, gridCol) => Math.ceil(numberOfItems / gridCol);
-const calculateStandardLayoutColumns = (numberOfItems) => numberOfItems > 0 ? Math.ceil(Math.sqrt(numberOfItems)) : 1;
+/**
+ * A component to lay out audio / video participants tiles in a call.
+ *
+ * @public
+ */
 export const GridLayout = (props) => {
-    const [gridCol, setGridCol] = useState(1);
-    const [gridRow, setGridRow] = useState(1);
-    const { children, layout = 'standard', styles } = props;
+    const { children, styles } = props;
     const numberOfChildren = React.Children.count(children);
-    switch (layout) {
-        case 'standard': {
-            const numberOfColumns = calculateStandardLayoutColumns(numberOfChildren);
-            if (gridCol !== numberOfColumns)
-                setGridCol(numberOfColumns);
-            const numberOfRows = calculateStandardLayoutRows(numberOfChildren, gridCol);
-            if (gridRow !== numberOfRows)
-                setGridRow(numberOfRows);
-            break;
+    const [currentWidth, setCurrentWidth] = useState(0);
+    const [currentHeight, setCurrentHeight] = useState(0);
+    const containerRef = useRef(null);
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setCurrentWidth(width);
+        setCurrentHeight(height);
+    }));
+    useEffect(() => {
+        if (containerRef.current) {
+            observer.current.observe(containerRef.current);
         }
+        const currentObserver = observer.current;
+        return () => currentObserver.disconnect();
+    }, [observer, containerRef]);
+    const gridProps = useMemo(() => {
+        return calculateGridProps(numberOfChildren, currentWidth, currentHeight);
+    }, [numberOfChildren, currentWidth, currentHeight]);
+    const cssGridStyles = useMemo(() => createGridStyles(numberOfChildren, gridProps), [numberOfChildren, gridProps]);
+    return (React.createElement("div", { ref: containerRef, className: mergeStyles(gridLayoutStyle, cssGridStyles, styles === null || styles === void 0 ? void 0 : styles.root) }, children));
+};
+/**
+ * The cell aspect ratio we aim for in a grid
+ */
+const TARGET_CELL_ASPECT_RATIO = 16 / 9;
+/**
+ * The minimum cell aspect ratio we allow
+ */
+const MINIMUM_CELL_ASPECT_RATIO_ALLOWED = 8 / 9;
+const isCloserThan = (a, b, target) => {
+    return Math.abs(target - a) < Math.abs(target - b);
+};
+/**
+ * Get the best GridProps to place a number of items in a grid as evenly as possible given the width and height of the grid
+ * @param numberOfItems - number of items to place in grid
+ * @param width - width of grid
+ * @param height - height of grid
+ * @returns GridProps
+ */
+export const calculateGridProps = (numberOfItems, width, height) => {
+    if (numberOfItems <= 0) {
+        return { fillDirection: 'horizontal', rows: 0, columns: 0 };
+    }
+    // If width or height are 0 then we return rows and column evenly
+    if (width <= 0 || height <= 0) {
+        return {
+            fillDirection: 'horizontal',
+            rows: Math.ceil(Math.sqrt(numberOfItems)),
+            columns: Math.ceil(Math.sqrt(numberOfItems))
+        };
+    }
+    const aspectRatio = width / height;
+    // Approximate how many rows to divide the grid to achieve cells close to the TARGET_CELL_ASPECT_RATIO
+    let rows = Math.floor(Math.sqrt((TARGET_CELL_ASPECT_RATIO / aspectRatio) * numberOfItems)) || 1;
+    // Make sure rows do not exceed numberOfItems
+    rows = Math.min(rows, numberOfItems);
+    // Given the rows, get the minimum columns needed to create enough cells for the number of items
+    let columns = Math.ceil(numberOfItems / rows);
+    // Default fill direction to horizontal
+    let fillDirection = 'horizontal';
+    while (rows < numberOfItems) {
+        // If cell aspect ratio is less than MINIMUM_CELL_ASPECT_RATIO_ALLOWED then try more rows
+        if ((rows / columns) * aspectRatio < MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
+            rows += 1;
+            columns = Math.ceil(numberOfItems / rows);
+            continue;
+        }
+        if (numberOfItems < rows * columns) {
+            // We need to check that stretching columns vertically will result in only one less cell in stretched columns.
+            // Likewise, we need to check that stretching rows horizonally will result in only one less cell in stretched rows.
+            // e.g. For 4 rows, 2 columns, but only 6 items, we cannot stretch vertically because that would result in a
+            // column of 2 cells which is less by more than 1 compared to the unstretched column.
+            //  _________
+            // |____|    |
+            // |____|____|
+            // |____|    |
+            // |____|____|
+            const canStretchVertically = numberOfItems >= rows + (columns - 1) * (rows - 1);
+            const canStretchHorizontally = numberOfItems >= columns + (rows - 1) * (columns - 1);
+            if (!canStretchVertically && !canStretchHorizontally) {
+                rows += 1;
+                columns = Math.ceil(numberOfItems / rows);
+                continue;
+            }
+            else if (!canStretchVertically) {
+                break;
+            }
+            else if (!canStretchHorizontally) {
+                fillDirection = 'vertical';
+                break;
+            }
+            // We need to figure out whether the big cells should stretch horizontally or vertically
+            // to fill in the empty spaces
+            // e.g. For 2 rows, 3 columns, but only 5 items, we need to choose whether to stretch cells
+            //       horizontally            or           vertically
+            //  ______________________               _______________________
+            // |       |       |      |             |       |       |       |
+            // |_______|_______|______|             |_______|_______|       |
+            // |           |          |             |       |       |       |
+            // |___________|__________|             |_______|_______|_______|
+            // Calculate the aspect ratio of big cells stretched horizontally
+            const horizontallyStretchedCellRatio = (rows / (columns - 1)) * aspectRatio;
+            // Calculate the aspect ratio of big cells stretched vertically
+            const verticallyStretchedCellRatio = ((rows - 1) / columns) * aspectRatio;
+            // We know the horizontally stretched cells aspect ratio is higher than MINIMUM_CELL_ASPECT_RATIO_ALLOWED. If vertically stretched cells
+            // is also higher than the MINIMUM_CELL_ASPECT_RATIO_ALLOWED, then choose which aspect ratio is better.
+            if (verticallyStretchedCellRatio >= MINIMUM_CELL_ASPECT_RATIO_ALLOWED) {
+                // If vertically stetched cell has an aspect ratio closer to TARGET_CELL_ASPECT_RATIO then change the fill direction to vertical
+                if (isCloserThan(verticallyStretchedCellRatio, horizontallyStretchedCellRatio, TARGET_CELL_ASPECT_RATIO)) {
+                    fillDirection = 'vertical';
+                }
+            }
+        }
+        break;
     }
-    return (React.createElement("div", { className: mergeStyles(gridLayoutStyle, styles === null || styles === void 0 ? void 0 : styles.root), style: {
-            gridTemplateRows: `repeat(${gridRow}, minmax(0, 1fr))`,
-            gridTemplateColumns: `repeat(${gridCol}, 1fr)`
-        } }, children));
+    return { fillDirection, rows, columns };
+};
+/**
+ * Creates a styles classname with CSS Grid related styles given GridProps and the number of items to distribute as evenly as possible.
+ * @param numberOfItems - number of items to place in grid
+ * @param gridProps - GridProps that define the number of rows, number of columns, and the fill direction
+ * @returns - classname
+ */
+export const createGridStyles = (numberOfItems, gridProps) => {
+    const isHorizontal = gridProps.fillDirection === 'horizontal';
+    // Blocks are either rows or columns depending on whether we fill horizontally or vertically. Each block may differ in the number of cells.
+    const blocks = isHorizontal ? gridProps.rows : gridProps.columns;
+    const smallCellsPerBlock = Math.ceil(numberOfItems / blocks);
+    const bigCellsPerBlock = Math.floor(numberOfItems / blocks);
+    const numBigCells = (gridProps.rows * gridProps.columns - numberOfItems) * bigCellsPerBlock;
+    // Get grid units
+    // e.g. If some blocks have 2 big cells while others have 3 small cells, we need to work with 6 units per block
+    const units = smallCellsPerBlock * bigCellsPerBlock;
+    const gridStyles = isHorizontal
+        ? {
+            gridTemplateColumns: `repeat(${units}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${blocks}, minmax(0, 1fr))`,
+            gridAutoFlow: 'row'
+        }
+        : {
+            gridTemplateColumns: `repeat(${blocks}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${units}, minmax(0, 1fr))`,
+            gridAutoFlow: 'column'
+        };
+    const smallCellStyle = isHorizontal
+        ? {
+            '> *': {
+                gridColumn: `auto / span ${units / smallCellsPerBlock}`
+            }
+        }
+        : {
+            '> *': {
+                gridRow: `auto / span ${units / smallCellsPerBlock}`
+            }
+        };
+    // If there are big cells, we are choosing to place the latest children into the big cells.
+    // That is why we use the '> *:nth-last-child(-n + ${numBigCells})' CSS selector below
+    const bigCellStyle = numBigCells
+        ? {
+            [`> *:nth-last-child(-n + ${numBigCells})`]: isHorizontal
+                ? {
+                    gridColumn: `auto / span ${units / bigCellsPerBlock}`
+                }
+                : {
+                    gridRow: `auto / span ${units / bigCellsPerBlock}`
+                }
+        }
+        : {};
+    return mergeStyles(gridStyles, smallCellStyle, bigCellStyle);
 };
 //# sourceMappingURL=GridLayout.js.map

package/dist/dist-esm/react-components/src/components/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAiB7D,MAAM,2BAA2B,GAAG,CAAC,aAAqB,EAAE,OAAe,EAAU,EAAE,CACrF,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,CAAC;AAErC,MAAM,8BAA8B,GAAG,CAAC,aAAqB,EAAU,EAAE,CACvE,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE1C,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExD,QAAQ,MAAM,EAAE;QACd,KAAK,UAAU,CAAC,CAAC;YACf,MAAM,eAAe,GAAG,8BAA8B,CAAC,gBAAgB,CAAC,CAAC;YACzE,IAAI,OAAO,KAAK,eAAe;gBAAE,UAAU,CAAC,eAAe,CAAC,CAAC;YAC7D,MAAM,YAAY,GAAG,2BAA2B,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;YAC5E,IAAI,OAAO,KAAK,YAAY;gBAAE,UAAU,CAAC,YAAY,CAAC,CAAC;YACvD,MAAM;SACP;KACF;IAED,OAAO,CACL,6BACE,SAAS,EAAE,WAAW,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EACrD,KAAK,EAAE;YACL,gBAAgB,EAAE,UAAU,OAAO,mBAAmB;YACtD,mBAAmB,EAAE,UAAU,OAAO,QAAQ;SAC/C,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"GridLayout.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/GridLayout.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/HorizontalGallery.d.ts

@@ -0,0 +1,37 @@
+import { IStyle } from '@fluentui/react';
+import React from 'react';
+import { BaseCustomStyles } from '../types';
+/**
+ * {@link HorizontalGallery} Component Styles.
+ * @public
+ */
+export interface HorizontalGalleryStyles extends BaseCustomStyles {
+    /** Styles for each child of {@link HorizontalGallery} */
+    children?: IStyle;
+    /** Styles for navigation button to go to previous page */
+    previousButton?: IStyle;
+    /** Styles for navigation button to go to next page */
+    nextButton?: IStyle;
+}
+/**
+ * {@link HorizontalGallery} Component Props.
+ */
+export interface HorizontalGalleryProps {
+    children: React.ReactNode;
+    /**
+     * Styles for HorizontalGallery
+     */
+    styles?: HorizontalGalleryStyles;
+    /**
+     * Children shown per page
+     * @defaultValue 5
+     */
+    childrenPerPage?: number;
+}
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+export declare const HorizontalGallery: (props: HorizontalGalleryProps) => JSX.Element;
+//# sourceMappingURL=HorizontalGallery.d.ts.map

package/dist/dist-esm/react-components/src/components/HorizontalGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalGallery.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,MAAM,EAAsB,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQ5C;;;GAGG;AACH,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WAkDjE,CAAC"}

package/dist/dist-esm/react-components/src/components/HorizontalGallery.js

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { DefaultButton, Icon, Stack, mergeStyles } from '@fluentui/react';
+import React, { useMemo, useState } from 'react';
+import { useTheme } from '../theming';
+import { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';
+/**
+ * {@link HorizontalGallery} default children per page
+ */
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+export const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const [page, setPage] = useState(0);
+    const numberOfChildren = React.Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = useMemo(() => {
+        return bucketize(React.Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const disablePreviousButton = page === 0;
+    const disableNextButton = page === lastPage;
+    return (React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton })),
+        React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton }))));
+};
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled }, props.icon));
+};
+function bucketize(arr, bucketSize) {
+    const bucketArray = [];
+    if (bucketSize <= 0) {
+        return bucketArray;
+    }
+    for (let i = 0; i < arr.length; i += bucketSize) {
+        bucketArray.push(arr.slice(i, i + bucketSize));
+    }
+    return bucketArray;
+}
+//# sourceMappingURL=HorizontalGallery.js.map

package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE7G;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AA+BpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,yBAAyB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IAEnE,MAAM,iBAAiB,GAAwB,OAAO,CAAC,GAAG,EAAE;QAC1D,OAAO,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,yDAAyD;IACzD,IAAI,eAAe,IAAI,CAAC,EAAE;QACxB,OAAO,yCAAK,CAAC;KACd;IAED,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,IAAI,KAAK,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,KAAK,QAAQ,CAAC;IAE5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACpE,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,GAAG,EACrD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,EACjE,QAAQ,EAAE,qBAAqB,GAC/B,CACH;QACD,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,QAAQ,EAAE,CAAC,IAChG,qBAAqB,CAChB;QACP,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,iBAAiB,EACrB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EACtD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,iBAAiB,GAC3B,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,KAK1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAClE,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAEvB,KAAK,CAAC,IAAI,CACG,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,SAAS,CAAI,GAAQ,EAAE,UAAkB;IAChD,MAAM,WAAW,GAAU,EAAE,CAAC;IAE9B,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,WAAW,CAAC;KACpB;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,UAAU,EAAE;QAC/C,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;KAChD;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/dist/dist-esm/react-components/src/components/InputBoxComponent.d.ts

@@ -1,14 +1,23 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
-import { BaseCustomStylesProps } from '../types';
-export interface InputBoxStylesProps extends BaseCustomStylesProps {
+import { BaseCustomStyles } from '../types';
+/**
+ * @private
+ */
+export interface InputBoxStylesProps extends BaseCustomStyles {
     /** Styles for the text field. */
     textField?: IStyle;
     /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */
     systemMessage?: IStyle;
+    /** Styles for customizing the container of the text field */
+    textFieldContainer?: IStyle;
 }
 declare type InputBoxComponentProps = {
     children: ReactNode;
+    /**
+     * Inline child elements passed in. Setting to false will mean they are on a new line.
+     */
+    inlineChildren: boolean;
     'data-ui-id'?: string;
     id?: string;
     textValue: string;
@@ -24,13 +33,25 @@ declare type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
 };
+/**
+ * @private
+ */
 export declare const InputBoxComponent: (props: InputBoxComponentProps) => JSX.Element;
+/**
+ * Props for displaying a send button besides the text input area.
+ *
+ * @private
+ */
 export declare type InputBoxButtonProps = {
-    onRenderIcon: (props: InputBoxButtonProps, isMouseOverSendIcon: boolean) => JSX.Element;
+    onRenderIcon: (isHover: boolean) => JSX.Element;
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     className?: string;
     id?: string;
+    ariaLabel?: string;
 };
+/**
+ * @private
+ */
 export declare const InputBoxButton: (props: InputBoxButtonProps) => JSX.Element;
 export {};
 //# sourceMappingURL=InputBoxComponent.d.ts.map

package/dist/dist-esm/react-components/src/components/InputBoxComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAiC,MAAM,EAAE,UAAU,EAAmB,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAYjD,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAChE,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sHAAsH;IACtH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,aAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5G,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WAmEjE,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,YAAY,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxF,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,WAmB3D,CAAC"}
+{"version":3,"file":"InputBoxComponent.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAiC,MAAM,EAAE,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAe5C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sHAAsH;IACtH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,aAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5G,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WA4EjE,CAAC;AAEF;;;;GAIG;AACH,oBAAY,mBAAmB,GAAG;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAChD,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,WAmB3D,CAAC"}

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js

@@ -1,15 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React, { useState, useCallback } from 'react';
-import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
-import { inputBoxStyle, inputBoxWrapperStyle, inputButtonContainerStyle, inputButtonStyle, textFieldStyle } from './styles/InputBoxComponent.style';
+import { Stack, TextField, mergeStyles, concatStyleSets, IconButton } from '@fluentui/react';
+import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inlineButtonsContainerStyle, newLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
-import { useTheme } from '../theming/FluentThemeProvider';
+import { useTheme } from '../theming';
+/**
+ * @private
+ */
 export const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
     const theme = useTheme();
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName);
+    const mergedTextFiledStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle(isDarkThemed(theme) ? '#f1707b' : '#a80000', !!errorMessage, !!disabled), {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
         errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
@@ -22,18 +26,21 @@ export const InputBoxComponent = (props) => {
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
     return (React.createElement(Stack, { className: mergedRootStyle },
-        React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(TextField, { "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, ariaLabel: 'Type', inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: textValue, onChange: onChange, autoComplete: "off", onKeyDown: onTexFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage }),
-            React.createElement("div", { className: inputButtonContainerStyle(theme.rtl) }, children))));
+        React.createElement("div", { className: mergedTextContainerStyle },
+            React.createElement(TextField, { "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: textValue, onChange: onChange, autoComplete: "off", onKeyDown: onTexFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage }),
+            React.createElement(Stack, { horizontal: true, className: mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle) }, children))));
 };
+/**
+ * @private
+ */
 export const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, className, id } = props;
-    const [isMouseOverSendIcon, setIsMouseOverSendIcon] = useState(false);
+    const { onRenderIcon, onClick, ariaLabel, className, id } = props;
+    const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
-    return (React.createElement("div", { className: mergedButtonStyle, onClick: onClick, id: id, onMouseEnter: () => {
-            setIsMouseOverSendIcon(true);
+    return (React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
+            setIsHover(true);
         }, onMouseLeave: () => {
-            setIsMouseOverSendIcon(false);
-        } }, onRenderIcon(props, isMouseOverSendIcon)));
+            setIsHover(false);
+        }, onRenderIcon: () => onRenderIcon(isHover) }));
 };
 //# sourceMappingURL=InputBoxComponent.js.map

package/dist/dist-esm/react-components/src/components/InputBoxComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { MessageStatus } from "../../../acs-ui-common/src";
-import { BaseCustomStylesProps } from '../types';
+import { BaseCustomStyles } from '../types';
 /**
- * Strings of MessageStatusIndicator that can be overridden
+ * Strings of {@link MessageStatusIndicator} that can be overridden.
+ *
+ * @public
  */
 export interface MessageStatusIndicatorStrings {
     /** Text to display in the delivered message icon tooltip. */
@@ -15,7 +17,9 @@ export interface MessageStatusIndicatorStrings {
     failedToSendTooltipText: string;
 }
 /**
- * Props for MessageStatusIndicator component
+ * Props for {@link MessageStatusIndicator}.
+ *
+ * @public
  */
 export interface MessageStatusIndicatorProps {
     /** Message status that determines the icon to display. */
@@ -27,14 +31,18 @@ export interface MessageStatusIndicatorProps {
      * <MessageStatus styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: BaseCustomStylesProps;
+    styles?: BaseCustomStyles;
     /**
      * Optional strings to override in component
      */
     strings?: MessageStatusIndicatorStrings;
 }
 /**
- * MessageStatusIndicator component.
+ * Component to display the status of a sent message.
+ *
+ * Adds an icon and tooltip corresponding to the message status.
+ *
+ * @public
  */
 export declare const MessageStatusIndicator: (props: MessageStatusIndicatorProps) => JSX.Element;
 //# sourceMappingURL=MessageStatusIndicator.d.ts.map

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAIxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAMjD;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,0DAA0D;IAC1D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,6BAA6B,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,KAAG,WAwD3E,CAAC"}
+{"version":3,"file":"MessageStatusIndicator.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAIxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAM5C;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,0DAA0D;IAC1D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,6BAA6B,CAAC;CACzC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,KAAG,WAmE3E,CAAC"}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js

@@ -6,7 +6,11 @@ import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
 /**
- * MessageStatusIndicator component.
+ * Component to display the status of a sent message.
+ *
+ * Adds an icon and tooltip corresponding to the message status.
+ *
+ * @public
  */
 export const MessageStatusIndicator = (props) => {
     const { status, styles } = props;
@@ -16,16 +20,16 @@ export const MessageStatusIndicator = (props) => {
     switch (status) {
         case 'failed':
             return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText },
-                React.createElement(Icon, { iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "aria-label": strings.failedToSendTooltipText, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
         case 'sending':
             return (React.createElement(TooltipHost, { content: strings.sendingTooltipText },
-                React.createElement(Icon, { iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "aria-label": strings.sendingTooltipText, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
         case 'seen':
             return (React.createElement(TooltipHost, { content: strings.seenTooltipText },
-                React.createElement(Icon, { iconName: "MessageSeen", className: mergeStyles({ color: theme.palette.black }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "aria-label": strings.seenTooltipText, iconName: "MessageSeen", className: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
         case 'delivered':
             return (React.createElement(TooltipHost, { content: strings.deliveredTooltipText },
-                React.createElement(Icon, { iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "aria-label": strings.deliveredTooltipText, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
         default:
             return React.createElement(React.Fragment, null);
     }

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,wCAAwC,CAAC;AAoChD;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,sBAAsB,CAAC;IACjE,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,QAAQ,MAAM,EAAE;QACd,KAAK,QAAQ;YACX,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB;gBACnD,oBAAC,IAAI,IACH,QAAQ,EAAC,eAAe,EACxB,SAAS,EAAE,WAAW,CACpB,oCAAoC,EACpC,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB;gBAC9C,oBAAC,IAAI,IACH,QAAQ,EAAC,gBAAgB,EACzB,SAAS,EAAE,WAAW,CACpB,+BAA+B,EAC/B,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EACrC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe;gBAC3C,oBAAC,IAAI,IAAC,QAAQ,EAAC,aAAa,EAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAAI,CACzF,CACf,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB;gBAChD,oBAAC,IAAI,IACH,QAAQ,EAAC,kBAAkB,EAC3B,SAAS,EAAE,WAAW,CACpB,+BAA+B,EAC/B,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EACrC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ;YACE,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC"}
+{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,wCAAwC,CAAC;AAwChD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEjC,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,sBAAsB,CAAC;IACjE,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,QAAQ,MAAM,EAAE;QACd,KAAK,QAAQ;YACX,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB;gBACnD,oBAAC,IAAI,IACH,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,uBAAuB,EAC3C,QAAQ,EAAC,eAAe,EACxB,SAAS,EAAE,WAAW,CACpB,oCAAoC,EACpC,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB;gBAC9C,oBAAC,IAAI,IACH,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,kBAAkB,EACtC,QAAQ,EAAC,gBAAgB,EACzB,SAAS,EAAE,WAAW,CACpB,+BAA+B,EAC/B,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EACrC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe;gBAC3C,oBAAC,IAAI,IACH,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,eAAe,EACnC,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAC3E,CACU,CACf,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB;gBAChD,oBAAC,IAAI,IACH,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,oBAAoB,EACxC,QAAQ,EAAC,kBAAkB,EAC3B,SAAS,EAAE,WAAW,CACpB,+BAA+B,EAC/B,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EACrC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,GACD,CACU,CACf,CAAC;QACJ;YACE,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC"}