@azure/communication-react 1.5.1-alpha-202302230015 → 1.5.1-alpha-202303010017

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-202302230015';
+var telemetryVersion = '1.5.1-alpha-202303010017';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5364,7 +5364,11 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(pinned-participants) */
     PinParticipant: React__default['default'].createElement(reactIcons.Pin16Regular, null),
     /* @conditional-compile-remove(pinned-participants) */
-    UnpinParticipant: React__default['default'].createElement(reactIcons.PinOff16Regular, null)
+    UnpinParticipant: React__default['default'].createElement(reactIcons.PinOff16Regular, null),
+    /* @conditional-compile-remove(vertical-gallery) */
+    VerticalGalleryLeftButton: React__default['default'].createElement(reactIcons.ChevronLeft20Regular, null),
+    /* @conditional-compile-remove(vertical-gallery) */
+    VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9199,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.
 /**
@@ -9533,168 +9367,608 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     if (pinnedParticipants.length === 0) {
         return useOrganizedParticipantsResult;
     }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-    };
+    return {
+        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
+        horizontalGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+    };
+};
+/**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * @private
+ */
+const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithPinnedParticipants(args);
+};
+
+// 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$1 = (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$1 = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+const childrenContainerStyle$1 = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Helper function to bucketize a given array of items into buckets of a specified size.
+ *
+ * @param arr array to bucketize
+ * @param bucketSize number of children for each bucket
+ * @returns nested array of given children
+ *
+ * @private
+ */
+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.
+/**
+ * {@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$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$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$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", { 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 = {
+    width: '100%',
+    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(0);
+    const [buttonState, setButtonState] = React.useState({ previous: true, next: true });
+    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]);
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const onPreviousButtonClick = () => {
+        setPage(page - 1);
+    };
+    const onNextButtonClick = () => {
+        setPage(page + 1);
+    };
+    React.useEffect(() => {
+        if (page > 0 && page < lastPage && showButtons) {
+            // we are somewhere in between first and last pages.
+            setButtonState({ previous: false, next: false });
+        }
+        else if (page === 0 && 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 };
+    }, []);
+    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%'
+    }
 };
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
  * @private
  */
-const useOrganizedParticipants = (args) => {
-    /* @conditional-compile-remove(pinned-participants) */
-    return _useOrganizedParticipantsWithPinnedParticipants(args);
+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.
-// Licensed under the MIT license.
 /**
- * Horizontal Gallery button width in rem
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
  */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
 /**
- * @private
+ * 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 leftRightButtonStyles = (theme) => {
+const verticalGalleryContainerStyle = (shouldFloatLocalVideo) => {
     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
+        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+        height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+        paddingBottom: '0.5rem'
     };
 };
-/**
- * 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`
+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`
 };
 /**
  * @private
  */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+const verticalGalleryStyle = {
+    children: VERTICAL_GALLERY_TILE_STYLE
 };
 
 // Copyright (c) Microsoft Corporation.
 /**
- * {@link HorizontalGallery} default children per page
+ * Responsive container for the VerticalGallery Component. Performs calculations for number of children
+ * for the VerticalGallery
+ * @param props
+ *
+ * @beta
  */
-const DEFAULT_CHILDREN_PER_PAGE = 5;
+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)));
+};
 /**
- * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
- * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
- * @returns
+ * Helper function to find the number of children for the VerticalGallery on each page.
  */
-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 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;
     }
-    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));
+    /**
+     * 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));
 };
-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
+ * @private
  */
-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)));
+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'
+    };
 };
 /**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
+ * @private
  */
-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 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
     }
-    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));
+};
+/**
+ * @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.
@@ -9703,11 +9977,32 @@ const calculateChildrenPerPage = (args) => {
  *
  * @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.
@@ -9719,7 +10014,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,
@@ -9744,19 +10040,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.
@@ -10447,21 +10750,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));
 };
@@ -10503,7 +10804,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({
@@ -10531,28 +10833,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.
@@ -10588,7 +10905,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;
@@ -10748,7 +11067,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,
@@ -10761,7 +11081,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') {
@@ -14439,7 +14760,8 @@ class EventSubscriber {
             });
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
-        // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
+        // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
+        // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
         this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$i(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
@@ -14465,7 +14787,13 @@ class EventSubscriber {
                 return participant.id;
             });
             this.chatContext.deleteParticipants(event.threadId, participantIds);
-            this.fetchLastParticipantMessage(event.threadId, 'participantRemoved');
+            // If the current user is removed from the thread, do not fetch the last participant message
+            // as they no longer have access to the thread.
+            const currentUserId = toFlatCommunicationIdentifier(this.chatContext.getState().userId);
+            const wasCurrentUserRemoved = participantIds.find((id) => toFlatCommunicationIdentifier(id) === currentUserId);
+            if (!wasCurrentUserRemoved) {
+                this.fetchLastParticipantMessage(event.threadId, 'participantRemoved');
+            }
         };
         this.onReadReceiptReceived = (event) => {
             const readReceipt = Object.assign(Object.assign({}, event), { sender: event.sender, readOn: new Date(event.readOn) });