@azure/communication-react 1.5.1-alpha-202303170014 → 1.5.1-alpha-202303220012

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303170014';
+var telemetryVersion = '1.5.1-alpha-202303220012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9443,24 +9443,33 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  */
 const HorizontalGallery = (props) => {
     var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = 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 indexesArray = React.useMemo(() => {
+        return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
+    }, [numberOfChildren, childrenPerPage]);
+    React.useEffect(() => {
+        if (onFetchTilesToRender && indexesArray) {
+            onFetchTilesToRender(indexesArray[page]);
+        }
+    }, [indexesArray, onFetchTilesToRender, page]);
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const childrenOnCurrentPage = React.useMemo(() => {
+        return indexesArray[clippedPage].map((index) => {
+            return React__default['default'].Children.toArray(children)[index];
+        });
+    }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle$1, (_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.overflowGalleryLeftNavButton })),
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
@@ -9471,224 +9480,6 @@ const HorizontalGalleryNavigationButton = (props) => {
     return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles$1(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
 };
 
-// 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$1({
-        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", { "data-ui-id": "responsive-horizontal-gallery", 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$1 = (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.
-// Licensed under the MIT license.
-/**
- * Vertical Gallery gap size in rem between tiles and buttons
- *
- * @private
- */
-const VERTICAL_GALLERY_GAP = 0.5;
-/**
- * @private
- */
-const childrenContainerStyle = (pageControlBarHeight) => {
-    return {
-        width: '100%',
-        height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,
-        gap: `${VERTICAL_GALLERY_GAP}rem`
-    };
-};
-/**
- * @private
- */
-const rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${VERTICAL_GALLERY_GAP}rem`,
-    position: 'relative'
-};
-/**
- * @private
- */
-const pageNavigationControlBarContainerStyle = {
-    height: '2rem',
-    width: '100%',
-    position: 'absolute',
-    bottom: '0'
-};
-/**
- * @private
- */
-const leftRightButtonStyles = (theme) => {
-    return {
-        background: 'none',
-        padding: 0,
-        height: 'auto',
-        borderRadius: theme.effects.roundedCorner4,
-        border: 'none',
-        minWidth: '2rem'
-    };
-};
-/**
- * @private
- */
-const participantPageCounter = {
-    lineHeight: '2rem',
-    width: '100%',
-    textAlign: 'center'
-};
-/**
- * @private
- */
-const navIconStyles = {
-    root: {
-        lineHeight: '0'
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
- * participants on the Y-axis of the VideoGallery for better use of horizontal space.
- *
- * @beta
- */
-const VerticalGallery = (props) => {
-    const { children, styles, childrenPerPage } = props;
-    const [page, setPage] = React.useState(1);
-    const [buttonState, setButtonState] = React.useState({ previous: true, next: true });
-    /* @conditional-compile-remove(vertical-gallery) */
-    const ids = useIdentifiers();
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
-    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage - 1];
-    const showButtons = numberOfChildren > childrenPerPage;
-    const onPreviousButtonClick = () => {
-        setPage(page - 1);
-    };
-    const onNextButtonClick = () => {
-        setPage(page + 1);
-    };
-    if (page > lastPage && lastPage > 0) {
-        setPage(lastPage);
-    }
-    React.useEffect(() => {
-        if (page > 1 && page < lastPage && showButtons) {
-            // we are somewhere in between first and last pages.
-            setButtonState({ previous: false, next: false });
-        }
-        else if (page === 1 && showButtons) {
-            // we are on the first page.
-            setButtonState({ previous: true, next: false });
-        }
-        else if (page === lastPage && showButtons) {
-            // we are on the last page.
-            setButtonState({ previous: false, next: true });
-        }
-    }, [page, numberOfChildren, lastPage, showButtons]);
-    const childContainerStyle = React.useMemo(() => {
-        return { root: childrenContainerStyle(2) };
-    }, []);
-    const childrenStyles = React.useMemo(() => {
-        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
-    }, [styles === null || styles === void 0 ? void 0 : styles.children]);
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        React__default['default'].createElement(react.Stack, { styles: childContainerStyle }, childrenOnCurrentPage.map((child, i) => {
-            return (React__default['default'].createElement(react.Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
-        })),
-        showButtons && (React__default['default'].createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
-};
-const VerticalGalleryControlBar = (props) => {
-    const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
-    const theme = useTheme();
-    /* @conditional-compile-remove(vertical-gallery) */
-    const ids = useIdentifiers();
-    /* @conditional-compile-remove(vertical-gallery) */
-    const strings = useLocale$1().strings.VerticalGallery;
-    const pageCounterContainerStyles = React.useMemo(() => {
-        return react.mergeStyles(pageNavigationControlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    }, [styles === null || styles === void 0 ? void 0 : styles.root]);
-    const previousButtonSyles = React.useMemo(() => {
-        return react.mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.previousButton);
-    }, [styles === null || styles === void 0 ? void 0 : styles.previousButton, theme]);
-    const pageCounterStyles = React.useMemo(() => {
-        return react.mergeStyles(participantPageCounter, styles === null || styles === void 0 ? void 0 : styles.counter);
-    }, [styles === null || styles === void 0 ? void 0 : styles.counter]);
-    const nextButtonsStyles = React.useMemo(() => {
-        return react.mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
-    }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
-    const controlBarSpacing = { childrenGap: '0.5rem' };
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
-        React__default['default'].createElement(react.DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
-            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
-        React__default['default'].createElement(react.Text
-        /* @conditional-compile-remove(vertical-gallery) */
-        , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
-        React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, 
-            /* @conditional-compile-remove(vertical-gallery) */
-            ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
-            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -9807,26 +9598,28 @@ const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width:
  *
  * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
  *
+ * Add 1.5 rem on width to account for horizontal padding
+ *
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
 const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort) => {
     return isNarrow && isShort
         ? {
-            width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
             height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
             paddingBottom: '0.5rem'
         }
         : !isNarrow && isShort
             ? {
-                width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
                 height: shouldFloatLocalVideo
                     ? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
                     : '100%',
                 paddingBottom: '0.5rem'
             }
             : {
-                width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+                width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
                 height: shouldFloatLocalVideo
                     ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
                     : '100%',
@@ -9864,32 +9657,49 @@ const verticalGalleryStyle = (isShort) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * Responsive container for the VerticalGallery Component. Performs calculations for number of children
- * for the VerticalGallery
- * @param props
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
  *
- * @beta
+ * @private
  */
-const ResponsiveVerticalGallery = (props) => {
-    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort } = props;
-    const containerRef = React.useRef(null);
-    const containerHeight = _useContainerHeight(containerRef);
-    const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
-    const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(children),
-        containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
-        gapHeightRem,
-        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
-        isShort: isShort !== null && isShort !== void 0 ? isShort : false
-    });
-    return (React__default['default'].createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: react.mergeStyles(containerStyles) },
-        React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles }, children)));
+const calculateHorizontalChildrenPerPage = (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.max(Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth)), 1);
 };
 /**
  * Helper function to find the number of children for the VerticalGallery on each page.
+ *
+ * @private
  */
-const calculateChildrenPerPage = (args) => {
+const calculateVerticalChildrenPerPage = (args) => {
     const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;
     const childMinHeightPx = _convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
     const gapHeightPx = _convertRemToPx(gapHeightRem);
@@ -9935,6 +9745,222 @@ const calculateChildrenPerPage = (args) => {
     return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);
 };
 
+// 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, onFetchTilesToRender } = 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 = calculateHorizontalChildrenPerPage({
+        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", { "data-ui-id": "responsive-horizontal-gallery", ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, props.children)));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Vertical Gallery gap size in rem between tiles and buttons
+ *
+ * @private
+ */
+const VERTICAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+const childrenContainerStyle = (pageControlBarHeight) => {
+    return {
+        width: '100%',
+        height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,
+        gap: `${VERTICAL_GALLERY_GAP}rem`
+    };
+};
+/**
+ * @private
+ */
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${VERTICAL_GALLERY_GAP}rem`,
+    position: 'relative'
+};
+/**
+ * @private
+ */
+const pageNavigationControlBarContainerStyle = {
+    height: '2rem',
+    width: '100%',
+    position: 'absolute',
+    bottom: '0'
+};
+/**
+ * @private
+ */
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        borderRadius: theme.effects.roundedCorner4,
+        border: 'none',
+        minWidth: '2rem'
+    };
+};
+/**
+ * @private
+ */
+const participantPageCounter = {
+    lineHeight: '2rem',
+    width: '100%',
+    textAlign: 'center'
+};
+/**
+ * @private
+ */
+const navIconStyles = {
+    root: {
+        lineHeight: '0'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
+ * participants on the Y-axis of the VideoGallery for better use of horizontal space.
+ *
+ * @beta
+ */
+const VerticalGallery = (props) => {
+    const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
+    const [page, setPage] = React.useState(1);
+    const [buttonState, setButtonState] = React.useState({ previous: true, next: true });
+    /* @conditional-compile-remove(vertical-gallery) */
+    const ids = useIdentifiers();
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
+    const indexesArray = React.useMemo(() => {
+        return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
+    }, [numberOfChildren, childrenPerPage]);
+    React.useEffect(() => {
+        if (onFetchTilesToRender && indexesArray) {
+            onFetchTilesToRender(indexesArray[page - 1]);
+        }
+    }, [indexesArray, onFetchTilesToRender, page]);
+    const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = React.useMemo(() => {
+        return indexesArray[clippedPage - 1].map((index) => {
+            return React__default['default'].Children.toArray(children)[index];
+        });
+    }, [indexesArray, clippedPage, children]);
+    const showButtons = numberOfChildren > childrenPerPage;
+    const onPreviousButtonClick = () => {
+        setPage(page - 1);
+    };
+    const onNextButtonClick = () => {
+        setPage(page + 1);
+    };
+    if (page > lastPage && lastPage > 0) {
+        setPage(lastPage);
+    }
+    React.useEffect(() => {
+        if (page > 1 && page < lastPage && showButtons) {
+            // we are somewhere in between first and last pages.
+            setButtonState({ previous: false, next: false });
+        }
+        else if (page === 1 && showButtons) {
+            // we are on the first page.
+            setButtonState({ previous: true, next: false });
+        }
+        else if (page === lastPage && showButtons) {
+            // we are on the last page.
+            setButtonState({ previous: false, next: true });
+        }
+    }, [page, numberOfChildren, lastPage, showButtons]);
+    const childContainerStyle = React.useMemo(() => {
+        return { root: childrenContainerStyle(2) };
+    }, []);
+    const childrenStyles = React.useMemo(() => {
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+    }, [styles === null || styles === void 0 ? void 0 : styles.children]);
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+        React__default['default'].createElement(react.Stack, { styles: childContainerStyle }, childrenOnCurrentPage === null || childrenOnCurrentPage === void 0 ? void 0 : childrenOnCurrentPage.map((child, i) => {
+            return (React__default['default'].createElement(react.Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
+        })),
+        showButtons && (React__default['default'].createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
+};
+const VerticalGalleryControlBar = (props) => {
+    const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
+    const theme = useTheme();
+    /* @conditional-compile-remove(vertical-gallery) */
+    const ids = useIdentifiers();
+    /* @conditional-compile-remove(vertical-gallery) */
+    const strings = useLocale$1().strings.VerticalGallery;
+    const pageCounterContainerStyles = React.useMemo(() => {
+        return react.mergeStyles(pageNavigationControlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root);
+    }, [styles === null || styles === void 0 ? void 0 : styles.root]);
+    const previousButtonSyles = React.useMemo(() => {
+        return react.mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.previousButton);
+    }, [styles === null || styles === void 0 ? void 0 : styles.previousButton, theme]);
+    const pageCounterStyles = React.useMemo(() => {
+        return react.mergeStyles(participantPageCounter, styles === null || styles === void 0 ? void 0 : styles.counter);
+    }, [styles === null || styles === void 0 ? void 0 : styles.counter]);
+    const nextButtonsStyles = React.useMemo(() => {
+        return react.mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
+    }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
+    const controlBarSpacing = { childrenGap: '0.5rem' };
+    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
+        React__default['default'].createElement(react.DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
+            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
+        React__default['default'].createElement(react.Text
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
+        React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
+            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Responsive container for the VerticalGallery Component. Performs calculations for number of children
+ * for the VerticalGallery
+ * @param props
+ *
+ * @beta
+ */
+const ResponsiveVerticalGallery = (props) => {
+    const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender } = props;
+    const containerRef = React.useRef(null);
+    const containerHeight = _useContainerHeight(containerRef);
+    const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
+    const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
+    const childrenPerPage = calculateVerticalChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(children),
+        containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
+        gapHeightRem,
+        controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
+        isShort: isShort !== null && isShort !== void 0 ? isShort : false
+    });
+    return (React__default['default'].createElement("div", { "data-ui-id": "responsive-vertical-gallery", ref: containerRef, className: react.mergeStyles(containerStyles) },
+        React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles, onFetchTilesToRender: onFetchTilesToRender }, children)));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -10020,7 +10046,13 @@ const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
  * @private
  */
 const ScrollableHorizontalGallery = (props) => {
-    const { horizontalGalleryElements } = props;
+    const { horizontalGalleryElements, onFetchTilesToRender } = props;
+    React.useEffect(() => {
+        const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
+        if (onFetchTilesToRender && indexesArray) {
+            onFetchTilesToRender(indexesArray);
+        }
+    }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = React.useRef();
     const { events: dragabbleEvents } = reactUseDraggableScroll.useDraggable(ref);
     return (React__default['default'].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
@@ -10034,7 +10066,7 @@ const ScrollableHorizontalGallery = (props) => {
  * @private
  */
 const OverflowGallery = (props) => {
-    const { shouldFloatLocalVideo = false, isNarrow = false, 
+    const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, 
     /* @conditional-compile-remove(vertical-gallery) */
     isShort = false, overflowGalleryElements, horizontalGalleryStyles, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom', 
@@ -10066,13 +10098,13 @@ const OverflowGallery = (props) => {
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryLayout === 'VerticalRight') {
-        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort }, overflowGalleryElements));
+        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender }, overflowGalleryElements));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
-        return (React__default['default'].createElement(ScrollableHorizontalGallery, { key: "scrollable-horizontal-gallery", horizontalGalleryElements: overflowGalleryElements }));
+        return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (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 }, overflowGalleryElements));
+    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, 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 }, overflowGalleryElements));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10105,10 +10137,20 @@ const DefaultLayout = (props) => {
             ? ((_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 = horizontalGalleryParticipants.map((p) => {
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = React.useState([
+        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
+    ]);
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
@@ -10124,12 +10166,13 @@ const DefaultLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(pinned-participants) */
-            overflowGalleryLayout: overflowGalleryLayout }));
+            overflowGalleryLayout: overflowGalleryLayout, onFetchTilesToRender: setIndexesToRender }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        setIndexesToRender,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
     ]);
@@ -10904,14 +10947,24 @@ const FloatingLocalVideoLayout = (props) => {
             ? ((_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 shouldFloatLocalVideo = remoteParticipants.length > 0;
+    const shouldFloatLocalVideo = remoteParticipants.length > 0 || !!screenShareComponent;
     if (!shouldFloatLocalVideo && localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = React.useState([
+        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
+    ]);
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
@@ -10920,7 +10973,7 @@ const FloatingLocalVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_PX;
         }
         /* @conditional-compile-remove(vertical-gallery) */
-        if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
+        if ((horizontalGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
             return isNarrow
                 ? SMALL_FLOATING_MODAL_SIZE_PX
                 : isShort
@@ -10932,23 +10985,24 @@ const FloatingLocalVideoLayout = (props) => {
         horizontalGalleryTiles.length,
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
+        /* @conditional-compile-remove(vertical-gallery) */ screenShareComponent
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
     showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSize)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSize: localVideoSize, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSize)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSize: localVideoSize, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
-        if (horizontalGalleryTiles.length === 0) {
+        if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
         return (React__default['default'].createElement(OverflowGallery
         /* @conditional-compile-remove(vertical-gallery) */
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -10958,6 +11012,8 @@ const FloatingLocalVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        setIndexesToRender,
+        screenShareComponent,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
     ]);
@@ -11030,7 +11086,8 @@ const VideoGallery = (props) => {
         : undefined;
     /* @conditional-compile-remove(pinned-participants) */
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
+    const shouldFloatLocalVideo = !!((layout === 'floatingLocalVideo' && remoteParticipants.length > 0) ||
+        localParticipant.isScreenSharingOn);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);