@azure/communication-react 1.5.1-alpha-202302250014 → 1.5.1-alpha-202303020021

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

@@ -161,7 +161,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-202302250014';
+var telemetryVersion = '1.5.1-alpha-202303020021';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9203,176 +9203,6 @@ 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.
-/**
- * @private
- */
-react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
-/**
- * Large floating modal width and height in rem for large screen
- * Aspect ratio: 16:9
- */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-const LOCAL_VIDEO_TILE_ZINDEX = 2;
-/**
- * @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
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
-};
-/**
- * @private
- */
-const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
-};
-/**
- * @private
- */
-const floatingLocalVideoModalStyle = (theme, isNarrow) => {
-    return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
-    }, {
-        main: {
-            boxShadow: theme.effects.elevation8,
-            ':focus-within': {
-                boxShadow: theme.effects.elevation16,
-                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
-            }
-        }
-    }, localVideoModalStyles);
-};
-/**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
- * @private
- */
-const localVideoTileOuterPaddingPX = 8;
-/**
- * @private
- */
-const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
-    }
-};
-/**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
- */
-const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @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: 6.5, width: 6.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.
-/**
- * @private
- */
-const scrollableHorizontalGalleryStyles = {
-    root: {
-        width: '100%',
-        minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        paddingRight: '0.5rem',
-        '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE
-    }
-};
-/**
- * @private
- */
-const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
-    display: 'flex',
-    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    overflow: 'scroll',
-    '-ms-overflow-style': 'none',
-    'scrollbar-width': 'none',
-    '::-webkit-scrollbar': { display: 'none' }
-});
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Component to display elements horizontally in a scrollable container
- * @private
- */
-const ScrollableHorizontalGallery = (props) => {
-    const { horizontalGalleryElements } = props;
-    const ref = React.useRef();
-    const { events: dragabbleEvents } = reactUseDraggableScroll.useDraggable(ref);
-    return (React__default['default'].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
-        React__default['default'].createElement(react.Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -9562,7 +9392,7 @@ const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
 /**
  * @private
  */
-const leftRightButtonStyles = (theme) => {
+const leftRightButtonStyles$1 = (theme) => {
     return {
         background: 'none',
         padding: 0,
@@ -9580,7 +9410,7 @@ const HORIZONTAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-const rootStyle = {
+const rootStyle$1 = {
     height: '100%',
     width: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
@@ -9588,7 +9418,7 @@ const rootStyle = {
 /**
  * @private
  */
-const childrenContainerStyle = {
+const childrenContainerStyle$1 = {
     height: '100%',
     gap: `${HORIZONTAL_GALLERY_GAP}rem`
 };
@@ -9645,14 +9475,14 @@ const HorizontalGallery = (props) => {
     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) },
+    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.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),
+        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),
         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));
+    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.
@@ -9666,7 +9496,7 @@ const ResponsiveHorizontalGallery = (props) => {
     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({
+    const childrenPerPage = calculateChildrenPerPage$1({
         numberOfChildren: React__default['default'].Children.count(props.children),
         containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
         childWidthRem,
@@ -9680,7 +9510,7 @@ const ResponsiveHorizontalGallery = (props) => {
  * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
  * gaps in between
  */
-const calculateChildrenPerPage = (args) => {
+const calculateChildrenPerPage$1 = (args) => {
     const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
     const childWidth = _convertRemToPx(childWidthRem);
     const gapWidth = _convertRemToPx(gapWidthRem);
@@ -9713,17 +9543,474 @@ const calculateChildrenPerPage = (args) => {
     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 });
+    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 }, 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();
+    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 },
+            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
+        React__default['default'].createElement(react.Text, { className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
+        React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next },
+            React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
+/**
+ * Large floating modal width and height in rem for large screen
+ * Aspect ratio: 16:9
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+/**
+ * @private
+ * z-index to ensure that the local video tile is above the video gallery.
+ */
+const LOCAL_VIDEO_TILE_ZINDEX = 2;
+/**
+ * @private
+ */
+const localVideoTileContainerStyle = (theme, localVideoTileSize) => {
+    return Object.assign({ minWidth: _pxToRem(localVideoTileSize.width), minHeight: _pxToRem(localVideoTileSize.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
+        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+};
+/**
+ * @private
+ */
+const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSize) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSize), {
+        root: { boxShadow: theme.effects.elevation8 }
+    });
+};
+/**
+ * @private
+ */
+const floatingLocalVideoModalStyle = (theme, modalSize) => {
+    return react.concatStyleSets({
+        main: localVideoTileContainerStyle(theme, modalSize)
+    }, {
+        main: {
+            boxShadow: theme.effects.elevation8,
+            ':focus-within': {
+                boxShadow: theme.effects.elevation16,
+                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+            }
+        }
+    }, localVideoModalStyles);
+};
+/**
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
+ */
+const localVideoTileOuterPaddingPX = 8;
+/**
+ * @private
+ */
+const floatingLocalVideoTileStyle = {
+    root: {
+        position: 'absolute',
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
+        height: '100%',
+        width: '100%'
+    }
+};
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
+/**
+ * Styles for the VerticalGallery's container set in parent.
+ *
+ * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
+ *
+ * @param shouldFloatLocalVideo whether rendered in floating layout or not
+ * @returns Style set for VerticalGallery container.
+ */
+const verticalGalleryContainerStyle = (shouldFloatLocalVideo) => {
+    return {
+        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+        height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+        paddingBottom: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+const VERTICAL_GALLERY_TILE_STYLE = {
+    minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
+    minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
+    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    width: '100%',
+    height: '100%'
+};
+/**
+ * @private
+ */
+const verticalGalleryStyle = {
+    children: VERTICAL_GALLERY_TILE_STYLE
+};
+
+// 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 } = 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
+    });
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerStyles) },
+        React__default['default'].createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles }, children)));
+};
+/**
+ * Helper function to find the number of children for the VerticalGallery on each page.
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight } = args;
+    const childMinHeightPx = _convertRemToPx(VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
+    const gapHeightPx = _convertRemToPx(gapHeightRem);
+    const controlBarHeightPx = _convertRemToPx(controlBarHeight);
+    /** First check how many children can fit in containerHeight.
+     *
+     *   _________________
+     *   |                |
+     *   |                |
+     *   |________________|
+     *    _________________
+     *   |                |
+     *   |                |
+     *   |________________|
+     *
+     *      <   n/m   >
+     *
+     * number of children = container height - (2* gap height + button height) / childMinHeight
+     *
+     * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them
+     * to fill in the space as much as possible
+     *
+     * First we will find the max number of children without any controls we can fit.
+     */
+    const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));
+    // if all of the children fit in the container just return the number of children
+    if (numberOfChildren <= maxNumberOfChildrenInContainer) {
+        return maxNumberOfChildrenInContainer;
+    }
+    /**
+     * For the pagination we know the container height, the height of the button bar and the 2 times the gap
+     * height, top tile and bottom tile above control bar. So the child space is calculated as:
+     *
+     *      space = height - controlbar - (2 * gap)
+     */
+    const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;
+    /**
+     * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.
+     * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.
+     */
+    return Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @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: 6.5, width: 6.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.
+/**
+ * @private
+ */
+const scrollableHorizontalGalleryStyles = {
+    root: {
+        width: '100%',
+        minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        paddingRight: '0.5rem',
+        '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE
+    }
+};
+/**
+ * @private
+ */
+const scrollableHorizontalGalleryContainerStyles = react.mergeStyles({
+    display: 'flex',
+    width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_PX.width}px)`,
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    overflow: 'scroll',
+    '-ms-overflow-style': 'none',
+    'scrollbar-width': 'none',
+    '::-webkit-scrollbar': { display: 'none' }
+});
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Component to display elements horizontally in a scrollable container
+ * @private
+ */
+const ScrollableHorizontalGallery = (props) => {
+    const { horizontalGalleryElements } = props;
+    const ref = React.useRef();
+    const { events: dragabbleEvents } = reactUseDraggableScroll.useDraggable(ref);
+    return (React__default['default'].createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
+        React__default['default'].createElement(react.Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
  *
  * @private
  */
-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(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));
+const OverflowGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, overflowGalleryElements, styles, 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
+    const containerStyles = React.useMemo(() => {
+        /* @conditional-compile-remove(vertical-gallery) */
+        if (overflowGalleryLayout === 'VerticalRight') {
+            return verticalGalleryContainerStyle(shouldFloatLocalVideo);
+        }
+        return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
+    }, [shouldFloatLocalVideo, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);
+    const galleryStyles = React.useMemo(() => {
+        /* @conditional-compile-remove(vertical-gallery) */
+        if (overflowGalleryLayout === 'VerticalRight') {
+            return react.concatStyleSets(verticalGalleryStyle, styles);
+        }
+        return react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles);
+    }, [isNarrow, styles, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);
+    /* @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 }, overflowGalleryElements));
+    }
+    /* @conditional-compile-remove(pinned-participants) */
+    if (isNarrow) {
+        return React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements });
+    }
+    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));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9735,7 +10022,8 @@ const VideoGalleryResponsiveHorizontalGallery = (props) => {
  */
 const DefaultLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds, 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
@@ -9760,19 +10048,26 @@ const DefaultLayout = (props) => {
     if (localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    const horizontalGallery = React.useMemo(() => {
+    const overflowGallery = React.useMemo(() => {
         if (horizontalGalleryTiles.length === 0) {
             return null;
         }
-        /* @conditional-compile-remove(pinned-participants) */
-        if (isNarrow) {
-            return React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: horizontalGalleryTiles });
-        }
-        return (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
-    }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
-    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
+        return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: false, overflowGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(pinned-participants) */
+            overflowGalleryLayout: overflowGalleryLayout }));
+    }, [
+        isNarrow,
+        horizontalGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+    ]);
+    return (React__default['default'].createElement(react.Stack
+    /* @conditional-compile-remove(vertical-gallery) */
+    , { 
+        /* @conditional-compile-remove(vertical-gallery) */
+        horizontal: overflowGalleryLayout === 'VerticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
         screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        horizontalGallery));
+        overflowGallery));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10463,21 +10758,19 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @private
  */
 const FloatingLocalVideo = (props) => {
-    const { localVideoComponent, layerHostId, isNarrow, parentWidth, parentHeight } = props;
+    const { localVideoComponent, layerHostId, localVideoSize, parentWidth, parentHeight } = props;
     const theme = useTheme();
-    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;
     // 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(() => parentWidth && parentHeight
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + modalWidth + localVideoTileOuterPaddingPX,
-            y: -parentHeight + modalHeight + localVideoTileOuterPaddingPX
+            x: -parentWidth + localVideoSize.width + localVideoTileOuterPaddingPX,
+            y: -parentHeight + localVideoSize.height + localVideoTileOuterPaddingPX
         }
-        : undefined, [parentHeight, parentWidth, modalHeight, modalWidth]);
-    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, isNarrow), [theme, isNarrow]);
+        : undefined, [parentHeight, parentWidth, localVideoSize.width, localVideoSize.height]);
+    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSize), [theme, localVideoSize]);
     const layerProps = React.useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
     return (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
 };
@@ -10519,7 +10812,8 @@ const layerHostStyle = {
  */
 const FloatingLocalVideoLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds, 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
@@ -10547,28 +10841,43 @@ const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
+    let localVideoSize = LARGE_FLOATING_MODAL_SIZE_PX;
+    if (isNarrow) {
+        localVideoSize = SMALL_FLOATING_MODAL_SIZE_PX;
+    }
+    /* @conditional-compile-remove(vertical-gallery) */
+    if (overflowGalleryLayout === 'VerticalRight') {
+        localVideoSize = VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+    }
     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, isNarrow), {
+    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, isNarrow)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
-    const horizontalGallery = React.useMemo(() => {
+        }) }, 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;
+    const overflowGallery = React.useMemo(() => {
         if (horizontalGalleryTiles.length === 0) {
             return null;
         }
-        /* @conditional-compile-remove(pinned-participants) */
-        if (isNarrow) {
-            return React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: horizontalGalleryTiles });
-        }
-        return (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
-    }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
+        return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryLayout: overflowGalleryLayout }));
+    }, [
+        isNarrow,
+        horizontalGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+    ]);
     return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
         React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }),
-        React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+        React__default['default'].createElement(react.Stack
+        /* @conditional-compile-remove(vertical-gallery) */
+        , { 
+            /* @conditional-compile-remove(vertical-gallery) */
+            horizontal: overflowGalleryLayout === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGallery)));
+            overflowGallery)));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10604,7 +10913,9 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     onUnpinParticipant: onUnpinParticipantHandler, 
     /* @conditional-compile-remove(pinned-participants) */
-    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS } = props;
+    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
+    /* @conditional-compile-remove(vertical-gallery) */
+    overflowGalleryLayout = 'HorizontalBottom' } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -10764,7 +11075,8 @@ const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -10777,7 +11089,8 @@ const VideoGallery = (props) => {
         containerHeight,
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
     ]);
     const videoGalleryLayout = React.useMemo(() => {
         if (layout === 'floatingLocalVideo') {