@azure/communication-react 1.4.3-alpha-202212020014.0 → 1.4.3-alpha-202212070014.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212020014.0';
+var telemetryVersion = '1.4.3-alpha-202212070014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6978,7 +6978,7 @@ const DefaultSystemMessage = (props) => {
     }
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const messageProps = {
         message,
@@ -6986,7 +6986,8 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         showDate: showMessageDate,
         onUpdateMessage,
         onDeleteMessage,
-        onSendMessage
+        onSendMessage,
+        disableEditing
     };
     switch (message.messageType) {
         case 'chat': {
@@ -7339,7 +7340,7 @@ const MessageThread = (props) => {
             return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage);
+            message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
     }), [
         messages,
@@ -7360,7 +7361,8 @@ const MessageThread = (props) => {
         onSendMessage,
         lastSeenChatMessage,
         lastSendingChatMessage,
-        lastDeliveredChatMessage
+        lastDeliveredChatMessage,
+        props.disableEditing
     ]);
     const theme = useTheme();
     const chatBody = React.useMemo(() => {
@@ -8384,154 +8386,6 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         participantState: props.participantState }));
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * Horizontal Gallery button width in rem
- */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
-/**
- * @private
- */
-const leftRightButtonStyles = (theme) => {
-    return {
-        background: 'none',
-        padding: 0,
-        height: 'auto',
-        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        border: `1px solid ${theme.palette.neutralLight}`,
-        borderRadius: theme.effects.roundedCorner4
-    };
-};
-/**
- * Horizontal Gallery gap size in rem between tiles and buttons
- */
-const HORIZONTAL_GALLERY_GAP = 0.5;
-/**
- * @private
- */
-const rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-/**
- * @private
- */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * {@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
- */
-const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
-    const ids = useIdentifiers();
-    const [page, setPage] = React.useState(0);
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].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__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.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, identifier: ids.horizontalGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
-};
-const HorizontalGalleryNavigationButton = (props) => {
-    const theme = useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, 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;
-}
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Wrapped HorizontalGallery that adjusts the number of items per page based on the
- * available width obtained from a ResizeObserver, width per child, gap width, and button width
- */
-const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
-    const containerRef = React.useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
-    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(props.children),
-        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
-        gapWidthRem,
-        buttonWidthRem
-    });
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
-        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
-};
-/**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
- */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
-    const gapWidth = _convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-     */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
-    }
-    const buttonWidth = _convertRemToPx(buttonWidthRem);
-    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
-     * containerWidth to compute childrenSpace
-     *   <-----------containerWidth--------->
-     *    __________________________________
-     *   | ||             ||             || |
-     *   |<||             ||             ||>|
-     *   |_||_____________||_____________||_|
-     *       <-------childrenSpace------>
-     */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
-    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
-    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -8546,11 +8400,11 @@ const videoGalleryContainerStyle = {
 /**
  * Small floating modal width and height in rem for small screen
  */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+const SMALL_FLOATING_MODAL_SIZE_PX$1 = { width: 64, height: 88 };
 /**
  * Large floating modal width and height in rem for large screen
  */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+const LARGE_FLOATING_MODAL_SIZE_PX$1 = { width: 160, height: 120 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -8582,7 +8436,7 @@ const localVideoTileOuterPaddingPX = 8;
  * @private
  */
 const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
         ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
         : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
 };
@@ -8605,58 +8459,6 @@ const floatingLocalVideoTileStyle = {
         width: '100%'
     }
 };
-/**
- * @private
- */
-const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return {
-        minHeight: isNarrow
-            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
-            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo
-            ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
-            : '100%',
-        paddingRight: '0.5rem'
-    };
-};
-/**
- * @private
- */
-const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
-};
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
-/**
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
 /**
  * @private
  */
@@ -9564,6 +9366,334 @@ const FloatingLocalCameraCycleButton = (props) => {
         (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const rootLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Horizontal Gallery button width in rem
+ */
+const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
+    };
+};
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * {@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
+ */
+const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const ids = useIdentifiers();
+    const [page, setPage] = React.useState(0);
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = React.useMemo(() => {
+        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].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__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.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, identifier: ids.horizontalGalleryLeftNavButton })),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
+};
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, 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;
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = React.useRef(null);
+    const containerWidth = _useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(props.children),
+        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
+    });
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+};
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    const buttonWidth = _convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+/**
+ * @private
+ */
+const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return {
+        minHeight: isNarrow
+            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
+            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        width: shouldFloatLocalVideo
+            ? isNarrow
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
+            : '100%',
+        paddingRight: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+/**
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
+ */
+const VideoGalleryResponsiveHorizontalGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
+    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
+    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
+        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+};
+
+// Copyright (c) Microsoft Corporation.
+const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
+const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+/**
+ * @private
+ */
+const useFloatingLocalVideoLayout = (props) => {
+    var _a, _b;
+    const visibleVideoParticipants = React.useRef([]);
+    const visibleAudioParticipants = React.useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = React.useCallback(() => {
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
+ * @private
+ */
+const DefaultLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+        remoteParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    if (localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
+    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle },
+        screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -9609,8 +9739,8 @@ const VideoGallery = (props) => {
     const visibleAudioParticipants = React.useRef([]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const visibleCallingParticipants = React.useRef([]);
-    const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
-    const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
+    const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX$1.width : LARGE_FLOATING_MODAL_SIZE_PX$1.width;
+    const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX$1.height : LARGE_FLOATING_MODAL_SIZE_PX$1.height;
     // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
     // to be dragged offscreen and these are the top and left bounds of that calculation.
     const modalMinDragPosition = React.useMemo(() => containerWidth && containerHeight
@@ -9731,21 +9861,29 @@ const VideoGallery = (props) => {
     const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
     const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     const layerHostId = reactHooks.useId('layerhost');
+    if (layout === 'floatingLocalVideo') {
+        return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+            shouldFloatLocalVideo &&
+                !shouldFloatNonDraggableLocalVideo &&
+                localVideoTile &&
+                (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
+            // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
+            shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
+                    boxShadow: theme.effects.elevation8,
+                    zIndex: LOCAL_VIDEO_TILE_ZINDEX
+                }) }, localVideoTile)),
+            React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle },
+                screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+                horizontalGalleryPresent && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { shouldFloatLocalVideo: true, isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
+                React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
+    }
+    const screenShareComponent = remoteScreenShareComponent
+        ? remoteScreenShareComponent
+        : localParticipant.isScreenSharingOn
+            ? localScreenShareStreamComponent
+            : undefined;
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        shouldFloatLocalVideo &&
-            !shouldFloatNonDraggableLocalVideo &&
-            localVideoTile &&
-            (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
-        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-        shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-                boxShadow: theme.effects.elevation8,
-                zIndex: LOCAL_VIDEO_TILE_ZINDEX
-            }) }, localVideoTile)),
-        React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle },
-            screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryPresent && (React__default['default'].createElement("div", { style: { paddingTop: '0.5rem' } },
-                React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles))),
-            React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
+        React__default['default'].createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.