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

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212070014.0';
+var telemetryVersion = '1.4.3-alpha-202212090014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7828,56 +7828,6 @@ const ParticipantList = (props) => {
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };
 
-/**
- * Calculates the participants that should be rendered based on the list of dominant
- * speakers and currently rendered participants in a call.
- * @param args - SmartDominantSpeakerParticipantsArgs
- * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
- */
-const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
-    // Don't apply any logic if total number of video streams is less than max dominant speakers.
-    if (participants.length <= maxDominantSpeakers) {
-        return participants;
-    }
-    const participantsMap = participantsById(participants);
-    // Only use the Max allowed dominant speakers that exist in participants
-    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
-        .filter((id) => !!participantsMap[id])
-        .slice(0, maxDominantSpeakers);
-    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
-    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
-    // Remove participants that are no longer dominant and replace them with new dominant speakers.
-    for (let index = 0; index < maxDominantSpeakers; index++) {
-        const newVisibleParticipantId = newVisibleParticipantIds[index];
-        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
-            const replacement = newDominantSpeakerIds.shift();
-            if (!replacement) {
-                break;
-            }
-            newVisibleParticipantIds[index] = replacement;
-        }
-    }
-    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
-    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
-    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
-    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
-    leftoverParticipants.forEach((p) => {
-        newVisibleParticipantIds.push(p.userId);
-    });
-    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
-    const newVisibleParticipants = newVisibleParticipantIds
-        .map((participantId) => participantsMap[participantId])
-        .filter((p) => !!p);
-    return newVisibleParticipants;
-};
-const participantsById = (participants) => {
-    const response = {};
-    participants.forEach((p) => (response[p.userId] = p));
-    return response;
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView
@@ -8386,133 +8336,6 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         participantState: props.participantState }));
 });
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
-/**
- * @private
- */
-const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
-};
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX$1 = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX$1 = { width: 160, 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 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 localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
-};
-/**
- * @private
- */
-const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
-};
-/**
- * @private
- */
-const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
-    }
-};
-/**
- * @private
- */
-const layerHostStyle = {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
-};
-/**
- * @private
- */
-const localVideoCameraCycleButtonStyles = (theme) => {
-    return {
-        root: {
-            position: 'absolute',
-            width: _pxToRem(32),
-            height: _pxToRem(32),
-            right: '0rem',
-            top: '0rem',
-            color: '#FFFFFF',
-            zIndex: 2,
-            background: 'rgba(0,0,0,0.4)',
-            borderRadius: theme.effects.roundedCorner2
-        },
-        rootFocused: {
-            // styles to remove the unwanted white highlight and blue colour after tapping on button.
-            color: '#FFFFFF',
-            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
-        },
-        icon: {
-            paddingLeft: _pxToRem(3),
-            paddingRight: _pxToRem(3),
-            margin: 0
-        },
-        flexContainer: {
-            paddingBottom: _pxToRem(8)
-        }
-    };
-};
-/**
- * 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
@@ -8619,1053 +8442,1323 @@ const LoadingSpinner = (props) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const animationDuration = react.AnimationVariables.durationValue2;
-const ZERO = { x: 0, y: 0 };
-const DEFAULT_PROPS = {
-    isOpen: false,
-    isDarkOverlay: true,
-    className: '',
-    containerClassName: '',
-    enableAriaHiddenSiblings: true
-};
-const getModalClassNames = react.classNamesFunction();
-const getMoveDelta = (ev) => {
-    let delta = 10;
-    if (ev.shiftKey) {
-        if (!ev.ctrlKey) {
-            delta = 50;
+/**
+ * @private
+ */
+const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * @private
+ */
+const localVideoCameraCycleButtonStyles = (theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: _pxToRem(32),
+            height: _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF',
+            zIndex: 2,
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8),
+            height: 'unset'
         }
-    }
-    else if (ev.ctrlKey) {
-        delta = 1;
-    }
-    return delta;
+    };
 };
-const useComponentRef = (props, focusTrapZone) => {
-    React__namespace.useImperativeHandle(props.componentRef, () => ({
-        focus() {
-            if (focusTrapZone.current) {
-                focusTrapZone.current.focus();
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * local video tile camera cycle button - for use on mobile screens only.
+ * @internal
+ */
+const LocalVideoCameraCycleButton = (props) => {
+    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
+    const theme = react.useTheme();
+    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
+            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
+                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
+                const newCamera = cameras[(index + 1) % cameras.length];
+                if (onSelectCamera !== undefined) {
+                    onSelectCamera(newCamera);
+                }
             }
-        }
-    }), [focusTrapZone]);
+        } }));
 };
-const ModalBase = React__namespace.forwardRef((propsWithoutDefaults, ref) => {
-    const props = react.getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
-    const { allowTouchBodyScroll, className, children, containerClassName, scrollableContentClassName, elementToFocusOnDismiss, firstFocusableSelector, forceFocusInsideTrap, ignoreExternalFocusing, isBlocking, isAlert, isClickableOutsideFocusTrap, isDarkOverlay, onDismiss, layerProps, overlay, isOpen, titleAriaId, styles, subtitleAriaId, theme, topOffsetFixed, responsiveMode, onLayerDidMount, isModeless, dragOptions, onDismissed, minDragPosition, maxDragPosition } = props;
-    const rootRef = React__namespace.useRef(null);
-    const focusTrapZone = React__namespace.useRef(null);
-    const focusTrapZoneElm = React__namespace.useRef(null);
-    const mergedRef = reactHooks.useMergedRefs(rootRef, ref);
-    const modalResponsiveMode = react.useResponsiveMode(mergedRef);
-    const focusTrapZoneId = reactHooks.useId('ModalFocusTrapZone');
-    const win = reactWindowProvider.useWindow();
-    const { setTimeout, clearTimeout } = reactHooks.useSetTimeout();
-    const [isModalOpen, setIsModalOpen] = React__namespace.useState(isOpen);
-    const [isVisible, setIsVisible] = React__namespace.useState(isOpen);
-    const [coordinates, setCoordinates] = React__namespace.useState(ZERO);
-    const [modalRectangleTop, setModalRectangleTop] = React__namespace.useState();
-    const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = reactHooks.useBoolean(false);
-    const internalState = reactHooks.useConst(() => ({
-        onModalCloseTimer: 0,
-        allowTouchBodyScroll,
-        scrollableContent: null,
-        lastSetCoordinates: ZERO,
-        events: new react.EventGroup({})
-    }));
-    const { keepInBounds } = dragOptions || {};
-    const isAlertRole = isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless);
-    const layerClassName = layerProps === undefined ? '' : layerProps.className;
-    const classNames = getModalClassNames(styles, {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        theme: theme,
-        className,
-        containerClassName,
-        scrollableContentClassName,
-        isOpen,
-        isVisible,
-        hasBeenOpened: internalState.hasBeenOpened,
-        modalRectangleTop,
-        topOffsetFixed,
-        isModeless,
-        layerClassName,
-        windowInnerHeight: win === null || win === void 0 ? void 0 : win.innerHeight,
-        isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector
-    });
-    const mergedLayerProps = Object.assign(Object.assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: isModeless, className: classNames.layer });
-    // Allow the user to scroll within the modal but not on the body
-    const allowScrollOnModal = React__namespace.useCallback((elt) => {
-        if (elt) {
-            if (internalState.allowTouchBodyScroll) {
-                react.allowOverscrollOnElement(elt, internalState.events);
-            }
-            else {
-                react.allowScrollOnElement(elt, internalState.events);
-            }
-        }
-        else {
-            internalState.events.off(internalState.scrollableContent);
-        }
-        internalState.scrollableContent = elt;
-    }, [internalState]);
-    const registerInitialModalPosition = () => {
-        const dialogMain = focusTrapZoneElm.current;
-        const modalRectangle = dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect();
-        if (modalRectangle) {
-            if (topOffsetFixed) {
-                setModalRectangleTop(modalRectangle.top);
-            }
-            if (keepInBounds) {
-                // x/y are unavailable in IE, so use the equivalent left/top
-                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : { x: -modalRectangle.left, y: -modalRectangle.top };
-                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : { x: modalRectangle.left, y: modalRectangle.top };
-                // Make sure the initial co-ordinates are within clamp bounds.
-                setCoordinates({
-                    x: getClampedAxis('x', coordinates.x),
-                    y: getClampedAxis('y', coordinates.y)
-                });
-            }
-        }
-    };
-    /**
-     * Clamps an axis to a specified min and max position.
-     *
-     * @param axis A string that represents the axis (x/y).
-     * @param position The position on the axis.
-     */
-    const getClampedAxis = React__namespace.useCallback((axis, position) => {
-        const { minPosition, maxPosition } = internalState;
-        if (keepInBounds && minPosition && maxPosition) {
-            position = Math.max(minPosition[axis], position);
-            position = Math.min(maxPosition[axis], position);
-        }
-        return position;
-    }, [keepInBounds, internalState]);
-    const handleModalClose = () => {
-        var _a;
-        internalState.lastSetCoordinates = ZERO;
-        setModalMenuClose();
-        internalState.isInKeyboardMoveMode = false;
-        setIsModalOpen(false);
-        setCoordinates(ZERO);
-        (_a = internalState.disposeOnKeyUp) === null || _a === void 0 ? void 0 : _a.call(internalState);
-        onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
-    };
-    const handleDragStart = React__namespace.useCallback(() => {
-        setModalMenuClose();
-        internalState.isInKeyboardMoveMode = false;
-    }, [internalState, setModalMenuClose]);
-    const handleDrag = React__namespace.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (ev, dragData) => {
-        setCoordinates((prevValue) => ({
-            x: getClampedAxis('x', prevValue.x + dragData.delta.x),
-            y: getClampedAxis('y', prevValue.y + dragData.delta.y)
-        }));
-    }, [getClampedAxis]);
-    const handleDragStop = React__namespace.useCallback(() => {
-        if (focusTrapZone.current) {
-            focusTrapZone.current.focus();
-        }
-    }, []);
-    const handleEnterKeyboardMoveMode = () => {
-        // We need a global handleKeyDown event when we are in the move mode so that we can
-        // handle the key presses and the components inside the modal do not get the events
-        const handleKeyDown = (ev) => {
-            if (ev.altKey && ev.ctrlKey && ev.keyCode === react.KeyCodes.space) {
-                // CTRL + ALT + SPACE is handled during keyUp
-                ev.preventDefault();
-                ev.stopPropagation();
-                return;
-            }
-            const newLocal = ev.altKey || ev.keyCode === react.KeyCodes.escape;
-            if (isModalMenuOpen && newLocal) {
-                setModalMenuClose();
-            }
-            if (internalState.isInKeyboardMoveMode && (ev.keyCode === react.KeyCodes.escape || ev.keyCode === react.KeyCodes.enter)) {
-                internalState.isInKeyboardMoveMode = false;
-                ev.preventDefault();
-                ev.stopPropagation();
-            }
-            if (internalState.isInKeyboardMoveMode) {
-                let handledEvent = true;
-                const delta = getMoveDelta(ev);
-                switch (ev.keyCode) {
-                    /* eslint-disable no-fallthrough */
-                    case react.KeyCodes.escape:
-                        setCoordinates(internalState.lastSetCoordinates);
-                    case react.KeyCodes.enter: {
-                        // TODO: determine if fallthrough was intentional
-                        /* eslint-enable no-fallthrough */
-                        internalState.lastSetCoordinates = ZERO;
-                        // setIsInKeyboardMoveMode(false);
-                        break;
-                    }
-                    case react.KeyCodes.up: {
-                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));
-                        break;
-                    }
-                    case react.KeyCodes.down: {
-                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));
-                        break;
-                    }
-                    case react.KeyCodes.left: {
-                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));
-                        break;
-                    }
-                    case react.KeyCodes.right: {
-                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));
-                        break;
-                    }
-                    default: {
-                        handledEvent = false;
-                    }
-                }
-                if (handledEvent) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-            }
-        };
-        internalState.lastSetCoordinates = coordinates;
-        setModalMenuClose();
-        internalState.isInKeyboardMoveMode = true;
-        internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);
-        internalState.disposeOnKeyDown = () => {
-            internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);
-            internalState.disposeOnKeyDown = undefined;
-        };
-    };
-    const handleExitKeyboardMoveMode = () => {
-        var _a;
-        internalState.lastSetCoordinates = ZERO;
-        internalState.isInKeyboardMoveMode = false;
-        (_a = internalState.disposeOnKeyDown) === null || _a === void 0 ? void 0 : _a.call(internalState);
-    };
-    const registerForKeyUp = () => {
-        const handleKeyUp = (ev) => {
-            // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
-            if (ev.altKey && ev.ctrlKey && ev.keyCode === react.KeyCodes.space) {
-                if (react.elementContains(internalState.scrollableContent, ev.target)) {
-                    toggleModalMenuOpen();
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-            }
-        };
-        if (!internalState.disposeOnKeyUp) {
-            internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);
-            internalState.disposeOnKeyUp = () => {
-                internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);
-                internalState.disposeOnKeyUp = undefined;
-            };
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering local participant.
+ *
+ * @internal
+ */
+const _LocalVideoTile = React__default['default'].memo((props) => {
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const localVideoStreamProps = React.useMemo(() => ({
+        isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        isStreamAvailable: isAvailable,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElementExists: !!renderElement,
+        scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
+    }), [
+        isAvailable,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElement
+    ]);
+    // Handle creating, destroying and updating the video stream as necessary
+    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
         }
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
+            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview
+    ]);
+    return (React__default['default'].createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
+});
+const FloatingLocalCameraCycleButton = (props) => {
+    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(localVideoSelectedDescription, {
+            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+        });
+    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const rootLayoutStyle$1 = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Horizontal Gallery button width in rem
+ */
+const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
     };
-    React__namespace.useEffect(() => {
-        clearTimeout(internalState.onModalCloseTimer);
-        // Opening the dialog
-        if (isOpen) {
-            // This must be done after the modal content has rendered
-            requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));
-            setIsModalOpen(true);
-            // Add a keyUp handler for all key up events once the dialog is open.
-            if (dragOptions) {
-                registerForKeyUp();
-            }
-            internalState.hasBeenOpened = true;
-            setIsVisible(true);
-        }
-        // Closing the dialog
-        if (!isOpen && isModalOpen) {
-            internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);
-            setIsVisible(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.
-    }, [isModalOpen, isOpen, minDragPosition, maxDragPosition]);
-    reactHooks.useUnmount(() => {
-        internalState.events.dispose();
+};
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * {@link HorizontalGallery} default children per page
+ */
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const ids = useIdentifiers();
+    const [page, setPage] = React.useState(0);
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = React.useMemo(() => {
+        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const disablePreviousButton = page === 0;
+    const disableNextButton = page === lastPage;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
+};
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+};
+function bucketize(arr, bucketSize) {
+    const bucketArray = [];
+    if (bucketSize <= 0) {
+        return bucketArray;
+    }
+    for (let i = 0; i < arr.length; i += bucketSize) {
+        bucketArray.push(arr.slice(i, i + bucketSize));
+    }
+    return bucketArray;
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = React.useRef(null);
+    const containerWidth = _useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(props.children),
+        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
     });
-    useComponentRef(props, focusTrapZone);
-    const modalContent = (React__namespace.createElement(react.FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined },
-        dragOptions && internalState.isInKeyboardMoveMode && (React__namespace.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React__namespace.createElement(react.Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React__namespace.createElement(react.Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
-        React__namespace.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
-            dragOptions && isModalMenuOpen && (React__namespace.createElement(dragOptions.menu, { items: [
-                    { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },
-                    { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }
-                ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: react.DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),
-            children)));
-    return (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    (isModalOpen && modalResponsiveMode >= (responsiveMode || react.ResponsiveMode.small) && (React__namespace.createElement(react.Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
-        React__namespace.createElement(react.Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, 
-            // onDismiss={onDismiss}
-            shouldRestoreFocus: !ignoreExternalFocusing, "aria-modal": !isModeless },
-            React__namespace.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
-                !isModeless && (React__namespace.createElement(react.Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),
-                dragOptions ? (React__namespace.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||
-        null);
-});
-ModalBase.displayName = 'ModalBase';
-const getDraggableZoneClassNames = react.memoizeFunction((className, isDragging) => {
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+};
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    const buttonWidth = _convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+const SMALL_FLOATING_MODAL_SIZE_PX$1 = { width: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX$1 = { width: 160, height: 120 };
+/**
+ * @private
+ */
+const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
     return {
-        root: react.mergeStyles(className, isDragging && {
-            touchAction: 'none',
-            selectors: {
-                '& *': {
-                    userSelect: 'none'
-                }
-            }
-        })
+        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$1.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width)})`
+            : '100%',
+        paddingRight: '0.5rem'
     };
-});
-const eventMapping = {
-    touch: {
-        start: 'touchstart',
-        move: 'touchmove',
-        stop: 'touchend'
-    },
-    mouse: {
-        start: 'mousedown',
-        move: 'mousemove',
-        stop: 'mouseup'
-    }
 };
-class DraggableZone extends React__namespace.Component {
-    constructor(props) {
-        super(props);
-        this._currentEventType = eventMapping.mouse;
-        this._events = [];
-        this._onMouseDown = (event) => {
-            const onMouseDown = React__namespace.Children.only(this.props.children).props.onMouseDown;
-            if (onMouseDown) {
-                onMouseDown(event);
-            }
-            this._currentEventType = eventMapping.mouse;
-            return this._onDragStart(event);
-        };
-        this._onMouseUp = (event) => {
-            const onMouseUp = React__namespace.Children.only(this.props.children).props.onMouseUp;
-            if (onMouseUp) {
-                onMouseUp(event);
-            }
-            this._currentEventType = eventMapping.mouse;
-            return this._onDragStop(event);
-        };
-        this._onTouchStart = (event) => {
-            const onTouchStart = React__namespace.Children.only(this.props.children).props.onTouchStart;
-            if (onTouchStart) {
-                onTouchStart(event);
-            }
-            this._currentEventType = eventMapping.touch;
-            return this._onDragStart(event);
-        };
-        this._onTouchEnd = (event) => {
-            const onTouchEnd = React__namespace.Children.only(this.props.children).props.onTouchEnd;
-            if (onTouchEnd) {
-                onTouchEnd(event);
-            }
-            this._currentEventType = eventMapping.touch;
-            this._onDragStop(event);
-        };
-        this._onDragStart = (event) => {
-            // Only handle left click for dragging
-            if (typeof event.button === 'number' && event.button !== 0) {
-                return false;
-            }
-            // If the target doesn't match the handleSelector OR
-            // if the target does match the preventDragSelector, bail out
-            if ((this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector)) ||
-                (this.props.preventDragSelector &&
-                    this._matchesSelector(event.target, this.props.preventDragSelector))) {
-                return;
-            }
-            // Remember the touch identifier if this is a touch event so we can
-            // distinguish between individual touches in multitouch scenarios
-            // by remembering which touch point we were given
-            this._touchId = this._getTouchId(event);
-            const position = this._getControlPosition(event);
-            if (position === undefined) {
-                return;
-            }
-            const dragData = this._createDragDataFromPosition(position);
-            this.props.onStart && this.props.onStart(event, dragData);
-            this.setState({
-                isDragging: true,
-                lastPosition: position
-            });
-            // hook up the appropriate mouse/touch events to the body to ensure
-            // smooth dragging
-            this._events = [
-                react.on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),
-                react.on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)
-            ];
-            return;
-        };
-        this._onDrag = (event) => {
-            // Prevent scrolling on mobile devices
-            if (event.type === 'touchmove') {
-                event.preventDefault();
-            }
-            const position = this._getControlPosition(event);
-            if (!position) {
-                return;
-            }
-            // create the updated drag data from the position data
-            const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));
-            const updatedPosition = updatedData.position;
-            this.props.onDragChange && this.props.onDragChange(event, updatedData);
-            this.setState({
-                position: updatedPosition,
-                lastPosition: position
-            });
-        };
-        this._onDragStop = (event) => {
-            if (!this.state.isDragging) {
-                return;
-            }
-            const position = this._getControlPosition(event);
-            if (!position) {
-                return;
-            }
-            const baseDragData = this._createDragDataFromPosition(position);
-            // Set dragging to false and reset the lastPosition
-            this.setState({
-                isDragging: false,
-                lastPosition: undefined
-            });
-            this.props.onStop && this.props.onStop(event, baseDragData);
-            if (this.props.position) {
-                this.setState({
-                    position: this.props.position
-                });
-            }
-            // Remove event handlers
-            this._events.forEach((dispose) => dispose());
-        };
-        this.state = {
-            isDragging: false,
-            position: this.props.position || { x: 0, y: 0 },
-            lastPosition: undefined
-        };
+/**
+ * @private
+ */
+const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+/**
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
+ */
+const VideoGalleryResponsiveHorizontalGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
+    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
+    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
+        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+};
+
+/**
+ * Calculates the participants that should be rendered based on the list of dominant
+ * speakers and currently rendered participants in a call.
+ * @param args - SmartDominantSpeakerParticipantsArgs
+ * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
+ */
+const smartDominantSpeakerParticipants = (args) => {
+    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    // Don't apply any logic if total number of video streams is less than max dominant speakers.
+    if (participants.length <= maxDominantSpeakers) {
+        return participants;
     }
-    componentDidUpdate(prevProps) {
-        if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {
-            this.setState({ position: this.props.position });
+    const participantsMap = participantsById(participants);
+    // Only use the Max allowed dominant speakers that exist in participants
+    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
+        .filter((id) => !!participantsMap[id])
+        .slice(0, maxDominantSpeakers);
+    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
+    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
+    // Remove participants that are no longer dominant and replace them with new dominant speakers.
+    for (let index = 0; index < maxDominantSpeakers; index++) {
+        const newVisibleParticipantId = newVisibleParticipantIds[index];
+        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
+            const replacement = newDominantSpeakerIds.shift();
+            if (!replacement) {
+                break;
+            }
+            newVisibleParticipantIds[index] = replacement;
         }
     }
-    componentWillUnmount() {
-        this._events.forEach((dispose) => dispose());
-    }
-    render() {
-        const child = React__namespace.Children.only(this.props.children);
-        const { props } = child;
-        const { position } = this.props;
-        const { position: statePosition, isDragging } = this.state;
-        let x = statePosition.x;
-        let y = statePosition.y;
-        if (position && !isDragging) {
-            x = position.x;
-            y = position.y;
+    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
+    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
+    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
+    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
+    leftoverParticipants.forEach((p) => {
+        newVisibleParticipantIds.push(p.userId);
+    });
+    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
+    const newVisibleParticipants = newVisibleParticipantIds
+        .map((participantId) => participantsMap[participantId])
+        .filter((p) => !!p);
+    return newVisibleParticipants;
+};
+const participantsById = (participants) => {
+    const response = {};
+    participants.forEach((p) => (response[p.userId] = p));
+    return response;
+};
+
+// Copyright (c) Microsoft Corporation.
+const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
+const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+/**
+ * @private
+ */
+const useFloatingLocalVideoLayout = (props) => {
+    var _a, _b;
+    const visibleVideoParticipants = React.useRef([]);
+    const visibleAudioParticipants = React.useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            return [];
         }
-        return React__namespace.cloneElement(child, {
-            style: Object.assign(Object.assign({}, props.style), { transform: `translate(${x}px, ${y}px)` }),
-            className: getDraggableZoneClassNames(props.className, this.state.isDragging).root,
-            onMouseDown: this._onMouseDown,
-            onMouseUp: this._onMouseUp,
-            onTouchStart: this._onTouchStart,
-            onTouchEnd: this._onTouchEnd
-        });
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * DefaultLayout displays remote participants, local video component, and screen sharing component in
+ * a grid and horizontal gallery.
+ *
+ * @private
+ */
+const DefaultLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+        remoteParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    if (localVideoComponent) {
+        gridTiles.push(localVideoComponent);
     }
-    /**
-     * Get the control position based off the event that fired
-     * @param event - The event to get offsets from
-     */
-    _getControlPosition(event) {
-        const touchObj = this._getActiveTouch(event);
-        // did we get the right touch?
-        if (this._touchId !== undefined && !touchObj) {
-            return undefined;
+    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle$1 },
+        screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+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: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+/**
+ * @private
+ * 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}`
+            }
         }
-        const eventToGetOffset = touchObj || event;
-        return {
-            x: eventToGetOffset.clientX,
-            y: eventToGetOffset.clientY
-        };
+    }, 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%'
     }
-    /**
-     * Get the active touch point that we have saved from the event's TouchList
-     * @param event - The event used to get the TouchList for the active touch point
-     */
-    _getActiveTouch(event) {
-        return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||
-            (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));
+};
+/**
+ * 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.
     }
-    /**
-     * Get the initial touch identifier associated with the given event
-     * @param event - The event that contains the TouchList
-     */
-    _getTouchId(event) {
-        const touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);
-        if (touch) {
-            return touch.identifier;
+};
+
+// Copyright (c) Microsoft Corporation.
+const animationDuration = react.AnimationVariables.durationValue2;
+const ZERO = { x: 0, y: 0 };
+const DEFAULT_PROPS = {
+    isOpen: false,
+    isDarkOverlay: true,
+    className: '',
+    containerClassName: '',
+    enableAriaHiddenSiblings: true
+};
+const getModalClassNames = react.classNamesFunction();
+const getMoveDelta = (ev) => {
+    let delta = 10;
+    if (ev.shiftKey) {
+        if (!ev.ctrlKey) {
+            delta = 50;
         }
-        return;
     }
-    /**
-     * Returns if an element (or any of the element's parents) match the given selector
-     */
-    _matchesSelector(element, selector) {
-        if (!element || element === document.body) {
-            return false;
+    else if (ev.ctrlKey) {
+        delta = 1;
+    }
+    return delta;
+};
+const useComponentRef = (props, focusTrapZone) => {
+    React__namespace.useImperativeHandle(props.componentRef, () => ({
+        focus() {
+            if (focusTrapZone.current) {
+                focusTrapZone.current.focus();
+            }
         }
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        const matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */
-        if (!matchesSelectorFn) {
-            return false;
+    }), [focusTrapZone]);
+};
+const ModalBase = React__namespace.forwardRef((propsWithoutDefaults, ref) => {
+    const props = react.getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
+    const { allowTouchBodyScroll, className, children, containerClassName, scrollableContentClassName, elementToFocusOnDismiss, firstFocusableSelector, forceFocusInsideTrap, ignoreExternalFocusing, isBlocking, isAlert, isClickableOutsideFocusTrap, isDarkOverlay, onDismiss, layerProps, overlay, isOpen, titleAriaId, styles, subtitleAriaId, theme, topOffsetFixed, responsiveMode, onLayerDidMount, isModeless, dragOptions, onDismissed, minDragPosition, maxDragPosition } = props;
+    const rootRef = React__namespace.useRef(null);
+    const focusTrapZone = React__namespace.useRef(null);
+    const focusTrapZoneElm = React__namespace.useRef(null);
+    const mergedRef = reactHooks.useMergedRefs(rootRef, ref);
+    const modalResponsiveMode = react.useResponsiveMode(mergedRef);
+    const focusTrapZoneId = reactHooks.useId('ModalFocusTrapZone');
+    const win = reactWindowProvider.useWindow();
+    const { setTimeout, clearTimeout } = reactHooks.useSetTimeout();
+    const [isModalOpen, setIsModalOpen] = React__namespace.useState(isOpen);
+    const [isVisible, setIsVisible] = React__namespace.useState(isOpen);
+    const [coordinates, setCoordinates] = React__namespace.useState(ZERO);
+    const [modalRectangleTop, setModalRectangleTop] = React__namespace.useState();
+    const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = reactHooks.useBoolean(false);
+    const internalState = reactHooks.useConst(() => ({
+        onModalCloseTimer: 0,
+        allowTouchBodyScroll,
+        scrollableContent: null,
+        lastSetCoordinates: ZERO,
+        events: new react.EventGroup({})
+    }));
+    const { keepInBounds } = dragOptions || {};
+    const isAlertRole = isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless);
+    const layerClassName = layerProps === undefined ? '' : layerProps.className;
+    const classNames = getModalClassNames(styles, {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        theme: theme,
+        className,
+        containerClassName,
+        scrollableContentClassName,
+        isOpen,
+        isVisible,
+        hasBeenOpened: internalState.hasBeenOpened,
+        modalRectangleTop,
+        topOffsetFixed,
+        isModeless,
+        layerClassName,
+        windowInnerHeight: win === null || win === void 0 ? void 0 : win.innerHeight,
+        isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector
+    });
+    const mergedLayerProps = Object.assign(Object.assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: isModeless, className: classNames.layer });
+    // Allow the user to scroll within the modal but not on the body
+    const allowScrollOnModal = React__namespace.useCallback((elt) => {
+        if (elt) {
+            if (internalState.allowTouchBodyScroll) {
+                react.allowOverscrollOnElement(elt, internalState.events);
+            }
+            else {
+                react.allowScrollOnElement(elt, internalState.events);
+            }
         }
-        return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);
-    }
-    /**
-     * Attempts to find the Touch that matches the identifier  we stored in dragStart
-     * @param touchList The TouchList to look for the stored identifier from dragStart
-     */
-    _findTouchInTouchList(touchList) {
-        if (this._touchId === undefined) {
-            return;
+        else {
+            internalState.events.off(internalState.scrollableContent);
         }
-        for (let i = 0; i < touchList.length; i++) {
-            if (touchList[i].identifier === this._touchId) {
-                return touchList[i];
+        internalState.scrollableContent = elt;
+    }, [internalState]);
+    const registerInitialModalPosition = () => {
+        const dialogMain = focusTrapZoneElm.current;
+        const modalRectangle = dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect();
+        if (modalRectangle) {
+            if (topOffsetFixed) {
+                setModalRectangleTop(modalRectangle.top);
+            }
+            if (keepInBounds) {
+                // x/y are unavailable in IE, so use the equivalent left/top
+                internalState.minPosition = minDragPosition !== null && minDragPosition !== void 0 ? minDragPosition : { x: -modalRectangle.left, y: -modalRectangle.top };
+                internalState.maxPosition = maxDragPosition !== null && maxDragPosition !== void 0 ? maxDragPosition : { x: modalRectangle.left, y: modalRectangle.top };
+                // Make sure the initial co-ordinates are within clamp bounds.
+                setCoordinates({
+                    x: getClampedAxis('x', coordinates.x),
+                    y: getClampedAxis('y', coordinates.y)
+                });
             }
         }
-        return undefined;
-    }
+    };
     /**
-     * Create DragData based off of the last known position and the new position passed in
-     * @param position The new position as part of the drag
+     * Clamps an axis to a specified min and max position.
+     *
+     * @param axis A string that represents the axis (x/y).
+     * @param position The position on the axis.
      */
-    _createDragDataFromPosition(position) {
-        const { lastPosition } = this.state;
-        // If we have no lastPosition, use the given position
-        // for last position
-        if (lastPosition === undefined) {
-            return {
-                delta: { x: 0, y: 0 },
-                lastPosition: position,
-                position
-            };
+    const getClampedAxis = React__namespace.useCallback((axis, position) => {
+        const { minPosition, maxPosition } = internalState;
+        if (keepInBounds && minPosition && maxPosition) {
+            position = Math.max(minPosition[axis], position);
+            position = Math.min(maxPosition[axis], position);
         }
-        return {
-            delta: {
-                x: position.x - lastPosition.x,
-                y: position.y - lastPosition.y
-            },
-            lastPosition,
-            position
+        return position;
+    }, [keepInBounds, internalState]);
+    const handleModalClose = () => {
+        var _a;
+        internalState.lastSetCoordinates = ZERO;
+        setModalMenuClose();
+        internalState.isInKeyboardMoveMode = false;
+        setIsModalOpen(false);
+        setCoordinates(ZERO);
+        (_a = internalState.disposeOnKeyUp) === null || _a === void 0 ? void 0 : _a.call(internalState);
+        onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
+    };
+    const handleDragStart = React__namespace.useCallback(() => {
+        setModalMenuClose();
+        internalState.isInKeyboardMoveMode = false;
+    }, [internalState, setModalMenuClose]);
+    const handleDrag = React__namespace.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ev, dragData) => {
+        setCoordinates((prevValue) => ({
+            x: getClampedAxis('x', prevValue.x + dragData.delta.x),
+            y: getClampedAxis('y', prevValue.y + dragData.delta.y)
+        }));
+    }, [getClampedAxis]);
+    const handleDragStop = React__namespace.useCallback(() => {
+        if (focusTrapZone.current) {
+            focusTrapZone.current.focus();
+        }
+    }, []);
+    const handleEnterKeyboardMoveMode = () => {
+        // We need a global handleKeyDown event when we are in the move mode so that we can
+        // handle the key presses and the components inside the modal do not get the events
+        const handleKeyDown = (ev) => {
+            if (ev.altKey && ev.ctrlKey && ev.keyCode === react.KeyCodes.space) {
+                // CTRL + ALT + SPACE is handled during keyUp
+                ev.preventDefault();
+                ev.stopPropagation();
+                return;
+            }
+            const newLocal = ev.altKey || ev.keyCode === react.KeyCodes.escape;
+            if (isModalMenuOpen && newLocal) {
+                setModalMenuClose();
+            }
+            if (internalState.isInKeyboardMoveMode && (ev.keyCode === react.KeyCodes.escape || ev.keyCode === react.KeyCodes.enter)) {
+                internalState.isInKeyboardMoveMode = false;
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+            if (internalState.isInKeyboardMoveMode) {
+                let handledEvent = true;
+                const delta = getMoveDelta(ev);
+                switch (ev.keyCode) {
+                    /* eslint-disable no-fallthrough */
+                    case react.KeyCodes.escape:
+                        setCoordinates(internalState.lastSetCoordinates);
+                    case react.KeyCodes.enter: {
+                        // TODO: determine if fallthrough was intentional
+                        /* eslint-enable no-fallthrough */
+                        internalState.lastSetCoordinates = ZERO;
+                        // setIsInKeyboardMoveMode(false);
+                        break;
+                    }
+                    case react.KeyCodes.up: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta) }));
+                        break;
+                    }
+                    case react.KeyCodes.down: {
+                        setCoordinates((prevValue) => ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta) }));
+                        break;
+                    }
+                    case react.KeyCodes.left: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x - delta), y: prevValue.y }));
+                        break;
+                    }
+                    case react.KeyCodes.right: {
+                        setCoordinates((prevValue) => ({ x: getClampedAxis('x', prevValue.x + delta), y: prevValue.y }));
+                        break;
+                    }
+                    default: {
+                        handledEvent = false;
+                    }
+                }
+                if (handledEvent) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+            }
         };
-    }
-    /**
-     * Creates an updated DragData based off the current position and given baseDragData
-     * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions
-     */
-    _createUpdatedDragData(baseDragData) {
-        const { position } = this.state;
-        return {
-            position: {
-                x: position.x + baseDragData.delta.x,
-                y: position.y + baseDragData.delta.y
-            },
-            delta: baseDragData.delta,
-            lastPosition: position
+        internalState.lastSetCoordinates = coordinates;
+        setModalMenuClose();
+        internalState.isInKeyboardMoveMode = true;
+        internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);
+        internalState.disposeOnKeyDown = () => {
+            internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);
+            internalState.disposeOnKeyDown = undefined;
         };
-    }
-}
-const globalClassNames = {
-    root: 'ms-Modal',
-    main: 'ms-Dialog-main',
-    scrollableContent: 'ms-Modal-scrollableContent',
-    isOpen: 'is-open',
-    layer: 'ms-Modal-Layer'
-};
-const getStyles = (props) => {
-    const { className, containerClassName, scrollableContentClassName, isOpen, isVisible, hasBeenOpened, modalRectangleTop, theme, topOffsetFixed, isModeless, layerClassName, isDefaultDragHandle, windowInnerHeight } = props;
-    const { palette, effects, fonts } = theme;
-    const classNames = react.getGlobalClassNames(globalClassNames, theme);
-    return {
-        root: [
-            classNames.root,
-            fonts.medium,
-            {
-                backgroundColor: 'transparent',
-                position: isModeless ? 'absolute' : 'fixed',
-                height: '100%',
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                opacity: 0,
-                pointerEvents: 'none',
-                transition: `opacity ${animationDuration}`
-            },
-            topOffsetFixed &&
-                typeof modalRectangleTop === 'number' &&
-                hasBeenOpened && {
-                alignItems: 'flex-start'
-            },
-            isOpen && classNames.isOpen,
-            isVisible && {
-                opacity: 1,
-                pointerEvents: 'auto'
-            },
-            className
-        ],
-        main: [
-            classNames.main,
-            {
-                boxShadow: effects.elevation64,
-                borderRadius: effects.roundedCorner2,
-                backgroundColor: palette.white,
-                boxSizing: 'border-box',
-                position: 'relative',
-                textAlign: 'left',
-                outline: '3px solid transparent',
-                maxHeight: 'calc(100% - 32px)',
-                maxWidth: 'calc(100% - 32px)',
-                minHeight: '176px',
-                minWidth: '288px',
-                overflowY: 'auto',
-                zIndex: isModeless ? react.ZIndexes.Layer : undefined
-            },
-            topOffsetFixed &&
-                typeof modalRectangleTop === 'number' &&
-                hasBeenOpened && {
-                top: modalRectangleTop
-            },
-            isDefaultDragHandle && {
-                cursor: 'move'
-            },
-            containerClassName
-        ],
-        scrollableContent: [
-            classNames.scrollableContent,
-            {
-                overflowY: 'auto',
-                flexGrow: 1,
-                maxHeight: '100vh',
-                selectors: {
-                    ['@supports (-webkit-overflow-scrolling: touch)']: {
-                        maxHeight: windowInnerHeight
-                    }
+    };
+    const handleExitKeyboardMoveMode = () => {
+        var _a;
+        internalState.lastSetCoordinates = ZERO;
+        internalState.isInKeyboardMoveMode = false;
+        (_a = internalState.disposeOnKeyDown) === null || _a === void 0 ? void 0 : _a.call(internalState);
+    };
+    const registerForKeyUp = () => {
+        const handleKeyUp = (ev) => {
+            // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
+            if (ev.altKey && ev.ctrlKey && ev.keyCode === react.KeyCodes.space) {
+                if (react.elementContains(internalState.scrollableContent, ev.target)) {
+                    toggleModalMenuOpen();
+                    ev.preventDefault();
+                    ev.stopPropagation();
                 }
-            },
-            scrollableContentClassName
-        ],
-        layer: isModeless && [
-            layerClassName,
-            classNames.layer,
-            {
-                position: 'static',
-                width: 'unset',
-                height: 'unset'
             }
-        ],
-        keyboardMoveIconContainer: {
-            position: 'absolute',
-            display: 'flex',
-            justifyContent: 'center',
-            width: '100%',
-            padding: '3px 0px'
-        },
-        keyboardMoveIcon: {
-            fontSize: fonts.xLargePlus.fontSize,
-            width: '24px'
+        };
+        if (!internalState.disposeOnKeyUp) {
+            internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);
+            internalState.disposeOnKeyUp = () => {
+                internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);
+                internalState.disposeOnKeyUp = undefined;
+            };
         }
     };
-};
-/** @internal */
-const _ModalClone = react.styled(ModalBase, getStyles, undefined, {
-    scope: 'Modal',
-    fields: ['theme', 'styles', 'enableAriaHiddenSiblings']
-});
-_ModalClone.displayName = 'Modal';
-
-// Copyright (c) Microsoft Corporation.
-/**
- * local video tile camera cycle button - for use on mobile screens only.
- * @internal
- */
-const LocalVideoCameraCycleButton = (props) => {
-    const { cameras, selectedCamera, onSelectCamera, label, ariaDescription } = props;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.IconButton, { "data-ui-id": 'local-camera-switcher-button', styles: localVideoCameraCycleButtonStyles(theme), iconProps: { iconName: 'LocalCameraSwitch' }, ariaLabel: label, ariaDescription: ariaDescription, "aria-live": 'polite', onClick: () => {
-            if (cameras && cameras.length > 1 && selectedCamera !== undefined) {
-                const index = cameras.findIndex((camera) => selectedCamera.id === camera.id);
-                const newCamera = cameras[(index + 1) % cameras.length];
-                if (onSelectCamera !== undefined) {
-                    onSelectCamera(newCamera);
-                }
+    React__namespace.useEffect(() => {
+        clearTimeout(internalState.onModalCloseTimer);
+        // Opening the dialog
+        if (isOpen) {
+            // This must be done after the modal content has rendered
+            requestAnimationFrame(() => setTimeout(registerInitialModalPosition, 0));
+            setIsModalOpen(true);
+            // Add a keyUp handler for all key up events once the dialog is open.
+            if (dragOptions) {
+                registerForKeyUp();
             }
-        } }));
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A memoized version of VideoTile for rendering local participant.
- *
- * @internal
- */
-const _LocalVideoTile = React__default['default'].memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const localVideoStreamProps = React.useMemo(() => ({
-        isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        isStreamAvailable: isAvailable,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElementExists: !!renderElement,
-        scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
-        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
-        onCreateLocalStreamView,
-        onDisposeLocalStreamView,
-        renderElement
-    ]);
-    // Handle creating, destroying and updating the video stream as necessary
-    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
-    const renderVideoStreamElement = React.useMemo(() => {
-        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
-        // implies that, after their threshold, all streams have no child (blank video)
-        if (!renderElement || !renderElement.childElementCount) {
-            // Returning `undefined` results in the placeholder with avatar being shown
-            return undefined;
+            internalState.hasBeenOpened = true;
+            setIsVisible(true);
         }
-        return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
-    }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview
-    ]);
-    return (React__default['default'].createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize }));
+        // Closing the dialog
+        if (!isOpen && isModalOpen) {
+            internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);
+            setIsVisible(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates or if min/max drag bounds are updated.
+    }, [isModalOpen, isOpen, minDragPosition, maxDragPosition]);
+    reactHooks.useUnmount(() => {
+        internalState.events.dispose();
+    });
+    useComponentRef(props, focusTrapZone);
+    const modalContent = (React__namespace.createElement(react.FocusTrapZone, { disabled: true, id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap && !isModeless, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined },
+        dragOptions && internalState.isInKeyboardMoveMode && (React__namespace.createElement("div", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React__namespace.createElement(react.Icon, Object.assign({}, dragOptions.keyboardMoveIconProps))) : (React__namespace.createElement(react.Icon, { iconName: "move", className: classNames.keyboardMoveIcon })))),
+        React__namespace.createElement("div", { ref: allowScrollOnModal, className: classNames.scrollableContent, "data-is-scrollable": true },
+            dragOptions && isModalMenuOpen && (React__namespace.createElement(dragOptions.menu, { items: [
+                    { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },
+                    { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose }
+                ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: react.DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),
+            children)));
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (isModalOpen && modalResponsiveMode >= (responsiveMode || react.ResponsiveMode.small) && (React__namespace.createElement(react.Layer, Object.assign({ ref: mergedRef }, mergedLayerProps),
+        React__namespace.createElement(react.Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, 
+            // onDismiss={onDismiss}
+            shouldRestoreFocus: !ignoreExternalFocusing, "aria-modal": !isModeless },
+            React__namespace.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
+                !isModeless && (React__namespace.createElement(react.Overlay, Object.assign({ "aria-hidden": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),
+                dragOptions ? (React__namespace.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || `#${focusTrapZoneId}`, preventDragSelector: "button", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||
+        null);
 });
-const FloatingLocalCameraCycleButton = (props) => {
-    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React__default['default'].createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const rootLayoutStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * Horizontal Gallery button width in rem
- */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
-/**
- * @private
- */
-const leftRightButtonStyles = (theme) => {
+ModalBase.displayName = 'ModalBase';
+const getDraggableZoneClassNames = react.memoizeFunction((className, isDragging) => {
     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
+        root: react.mergeStyles(className, isDragging && {
+            touchAction: 'none',
+            selectors: {
+                '& *': {
+                    userSelect: 'none'
+                }
+            }
+        })
     };
+});
+const eventMapping = {
+    touch: {
+        start: 'touchstart',
+        move: 'touchmove',
+        stop: 'touchend'
+    },
+    mouse: {
+        start: 'mousedown',
+        move: 'mousemove',
+        stop: 'mouseup'
+    }
 };
-/**
- * Horizontal Gallery gap size in rem between tiles and buttons
- */
-const HORIZONTAL_GALLERY_GAP = 0.5;
-/**
- * @private
- */
-const rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-/**
- * @private
- */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * {@link HorizontalGallery} default children per page
- */
-const DEFAULT_CHILDREN_PER_PAGE = 5;
-/**
- * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
- * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
- * @returns
- */
-const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
-    const ids = useIdentifiers();
-    const [page, setPage] = React.useState(0);
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+class DraggableZone extends React__namespace.Component {
+    constructor(props) {
+        super(props);
+        this._currentEventType = eventMapping.mouse;
+        this._events = [];
+        this._onMouseDown = (event) => {
+            const onMouseDown = React__namespace.Children.only(this.props.children).props.onMouseDown;
+            if (onMouseDown) {
+                onMouseDown(event);
+            }
+            this._currentEventType = eventMapping.mouse;
+            return this._onDragStart(event);
+        };
+        this._onMouseUp = (event) => {
+            const onMouseUp = React__namespace.Children.only(this.props.children).props.onMouseUp;
+            if (onMouseUp) {
+                onMouseUp(event);
+            }
+            this._currentEventType = eventMapping.mouse;
+            return this._onDragStop(event);
+        };
+        this._onTouchStart = (event) => {
+            const onTouchStart = React__namespace.Children.only(this.props.children).props.onTouchStart;
+            if (onTouchStart) {
+                onTouchStart(event);
+            }
+            this._currentEventType = eventMapping.touch;
+            return this._onDragStart(event);
+        };
+        this._onTouchEnd = (event) => {
+            const onTouchEnd = React__namespace.Children.only(this.props.children).props.onTouchEnd;
+            if (onTouchEnd) {
+                onTouchEnd(event);
+            }
+            this._currentEventType = eventMapping.touch;
+            this._onDragStop(event);
+        };
+        this._onDragStart = (event) => {
+            // Only handle left click for dragging
+            if (typeof event.button === 'number' && event.button !== 0) {
+                return false;
+            }
+            // If the target doesn't match the handleSelector OR
+            // if the target does match the preventDragSelector, bail out
+            if ((this.props.handleSelector && !this._matchesSelector(event.target, this.props.handleSelector)) ||
+                (this.props.preventDragSelector &&
+                    this._matchesSelector(event.target, this.props.preventDragSelector))) {
+                return;
+            }
+            // Remember the touch identifier if this is a touch event so we can
+            // distinguish between individual touches in multitouch scenarios
+            // by remembering which touch point we were given
+            this._touchId = this._getTouchId(event);
+            const position = this._getControlPosition(event);
+            if (position === undefined) {
+                return;
+            }
+            const dragData = this._createDragDataFromPosition(position);
+            this.props.onStart && this.props.onStart(event, dragData);
+            this.setState({
+                isDragging: true,
+                lastPosition: position
+            });
+            // hook up the appropriate mouse/touch events to the body to ensure
+            // smooth dragging
+            this._events = [
+                react.on(document.body, this._currentEventType.move, this._onDrag, true /* use capture phase */),
+                react.on(document.body, this._currentEventType.stop, this._onDragStop, true /* use capture phase */)
+            ];
+            return;
+        };
+        this._onDrag = (event) => {
+            // Prevent scrolling on mobile devices
+            if (event.type === 'touchmove') {
+                event.preventDefault();
+            }
+            const position = this._getControlPosition(event);
+            if (!position) {
+                return;
+            }
+            // create the updated drag data from the position data
+            const updatedData = this._createUpdatedDragData(this._createDragDataFromPosition(position));
+            const updatedPosition = updatedData.position;
+            this.props.onDragChange && this.props.onDragChange(event, updatedData);
+            this.setState({
+                position: updatedPosition,
+                lastPosition: position
+            });
+        };
+        this._onDragStop = (event) => {
+            if (!this.state.isDragging) {
+                return;
+            }
+            const position = this._getControlPosition(event);
+            if (!position) {
+                return;
+            }
+            const baseDragData = this._createDragDataFromPosition(position);
+            // Set dragging to false and reset the lastPosition
+            this.setState({
+                isDragging: false,
+                lastPosition: undefined
+            });
+            this.props.onStop && this.props.onStop(event, baseDragData);
+            if (this.props.position) {
+                this.setState({
+                    position: this.props.position
+                });
+            }
+            // Remove event handlers
+            this._events.forEach((dispose) => dispose());
+        };
+        this.state = {
+            isDragging: false,
+            position: this.props.position || { x: 0, y: 0 },
+            lastPosition: undefined
+        };
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {
+            this.setState({ position: this.props.position });
+        }
+    }
+    componentWillUnmount() {
+        this._events.forEach((dispose) => dispose());
+    }
+    render() {
+        const child = React__namespace.Children.only(this.props.children);
+        const { props } = child;
+        const { position } = this.props;
+        const { position: statePosition, isDragging } = this.state;
+        let x = statePosition.x;
+        let y = statePosition.y;
+        if (position && !isDragging) {
+            x = position.x;
+            y = position.y;
+        }
+        return React__namespace.cloneElement(child, {
+            style: Object.assign(Object.assign({}, props.style), { transform: `translate(${x}px, ${y}px)` }),
+            className: getDraggableZoneClassNames(props.className, this.state.isDragging).root,
+            onMouseDown: this._onMouseDown,
+            onMouseUp: this._onMouseUp,
+            onTouchStart: this._onTouchStart,
+            onTouchEnd: this._onTouchEnd
+        });
     }
-    const firstIndexOfCurrentPage = page * childrenPerPage;
-    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
-    const showButtons = numberOfChildren > childrenPerPage;
-    const disablePreviousButton = page === 0;
-    const disableNextButton = page === lastPage;
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
-};
-const HorizontalGalleryNavigationButton = (props) => {
-    const theme = useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
-};
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
+    /**
+     * Get the control position based off the event that fired
+     * @param event - The event to get offsets from
+     */
+    _getControlPosition(event) {
+        const touchObj = this._getActiveTouch(event);
+        // did we get the right touch?
+        if (this._touchId !== undefined && !touchObj) {
+            return undefined;
+        }
+        const eventToGetOffset = touchObj || event;
+        return {
+            x: eventToGetOffset.clientX,
+            y: eventToGetOffset.clientY
+        };
     }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
+    /**
+     * Get the active touch point that we have saved from the event's TouchList
+     * @param event - The event used to get the TouchList for the active touch point
+     */
+    _getActiveTouch(event) {
+        return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||
+            (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));
     }
-    return bucketArray;
-}
-
-// Copyright (c) Microsoft Corporation.
-/**
- * Wrapped HorizontalGallery that adjusts the number of items per page based on the
- * available width obtained from a ResizeObserver, width per child, gap width, and button width
- */
-const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
-    const containerRef = React.useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
-    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(props.children),
-        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
-        gapWidthRem,
-        buttonWidthRem
-    });
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
-        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
-};
-/**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
- */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
-    const gapWidth = _convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    /**
+     * Get the initial touch identifier associated with the given event
+     * @param event - The event that contains the TouchList
      */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
+    _getTouchId(event) {
+        const touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);
+        if (touch) {
+            return touch.identifier;
+        }
+        return;
     }
-    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------>
+    /**
+     * Returns if an element (or any of the element's parents) match the given selector
      */
-    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));
+    _matchesSelector(element, selector) {
+        if (!element || element === document.body) {
+            return false;
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        const matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */
+        if (!matchesSelectorFn) {
+            return false;
+        }
+        return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);
+    }
+    /**
+     * Attempts to find the Touch that matches the identifier  we stored in dragStart
+     * @param touchList The TouchList to look for the stored identifier from dragStart
+     */
+    _findTouchInTouchList(touchList) {
+        if (this._touchId === undefined) {
+            return;
+        }
+        for (let i = 0; i < touchList.length; i++) {
+            if (touchList[i].identifier === this._touchId) {
+                return touchList[i];
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Create DragData based off of the last known position and the new position passed in
+     * @param position The new position as part of the drag
+     */
+    _createDragDataFromPosition(position) {
+        const { lastPosition } = this.state;
+        // If we have no lastPosition, use the given position
+        // for last position
+        if (lastPosition === undefined) {
+            return {
+                delta: { x: 0, y: 0 },
+                lastPosition: position,
+                position
+            };
+        }
+        return {
+            delta: {
+                x: position.x - lastPosition.x,
+                y: position.y - lastPosition.y
+            },
+            lastPosition,
+            position
+        };
+    }
+    /**
+     * Creates an updated DragData based off the current position and given baseDragData
+     * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions
+     */
+    _createUpdatedDragData(baseDragData) {
+        const { position } = this.state;
+        return {
+            position: {
+                x: position.x + baseDragData.delta.x,
+                y: position.y + baseDragData.delta.y
+            },
+            delta: baseDragData.delta,
+            lastPosition: position
+        };
+    }
+}
+const globalClassNames = {
+    root: 'ms-Modal',
+    main: 'ms-Dialog-main',
+    scrollableContent: 'ms-Modal-scrollableContent',
+    isOpen: 'is-open',
+    layer: 'ms-Modal-Layer'
+};
+const getStyles = (props) => {
+    const { className, containerClassName, scrollableContentClassName, isOpen, isVisible, hasBeenOpened, modalRectangleTop, theme, topOffsetFixed, isModeless, layerClassName, isDefaultDragHandle, windowInnerHeight } = props;
+    const { palette, effects, fonts } = theme;
+    const classNames = react.getGlobalClassNames(globalClassNames, theme);
+    return {
+        root: [
+            classNames.root,
+            fonts.medium,
+            {
+                backgroundColor: 'transparent',
+                position: isModeless ? 'absolute' : 'fixed',
+                height: '100%',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: 0,
+                pointerEvents: 'none',
+                transition: `opacity ${animationDuration}`
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
+                alignItems: 'flex-start'
+            },
+            isOpen && classNames.isOpen,
+            isVisible && {
+                opacity: 1,
+                pointerEvents: 'auto'
+            },
+            className
+        ],
+        main: [
+            classNames.main,
+            {
+                boxShadow: effects.elevation64,
+                borderRadius: effects.roundedCorner2,
+                backgroundColor: palette.white,
+                boxSizing: 'border-box',
+                position: 'relative',
+                textAlign: 'left',
+                outline: '3px solid transparent',
+                maxHeight: 'calc(100% - 32px)',
+                maxWidth: 'calc(100% - 32px)',
+                minHeight: '176px',
+                minWidth: '288px',
+                overflowY: 'auto',
+                zIndex: isModeless ? react.ZIndexes.Layer : undefined
+            },
+            topOffsetFixed &&
+                typeof modalRectangleTop === 'number' &&
+                hasBeenOpened && {
+                top: modalRectangleTop
+            },
+            isDefaultDragHandle && {
+                cursor: 'move'
+            },
+            containerClassName
+        ],
+        scrollableContent: [
+            classNames.scrollableContent,
+            {
+                overflowY: 'auto',
+                flexGrow: 1,
+                maxHeight: '100vh',
+                selectors: {
+                    ['@supports (-webkit-overflow-scrolling: touch)']: {
+                        maxHeight: windowInnerHeight
+                    }
+                }
+            },
+            scrollableContentClassName
+        ],
+        layer: isModeless && [
+            layerClassName,
+            classNames.layer,
+            {
+                position: 'static',
+                width: 'unset',
+                height: 'unset'
+            }
+        ],
+        keyboardMoveIconContainer: {
+            position: 'absolute',
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            padding: '3px 0px'
+        },
+        keyboardMoveIcon: {
+            fontSize: fonts.xLargePlus.fontSize,
+            width: '24px'
+        }
+    };
 };
+/** @internal */
+const _ModalClone = react.styled(ModalBase, getStyles, undefined, {
+    scope: 'Modal',
+    fields: ['theme', 'styles', 'enableAriaHiddenSiblings']
+});
+_ModalClone.displayName = 'Modal';
 
 // Copyright (c) Microsoft Corporation.
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
-/**
- * @private
- */
-const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return {
-        minHeight: isNarrow
-            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
-            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo
-            ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
-            : '100%',
-        paddingRight: '0.5rem'
-    };
+const DRAG_OPTIONS$1 = {
+    moveMenuItemText: 'Move',
+    closeMenuItemText: 'Close',
+    menu: react.ContextualMenu,
+    keepInBounds: true
 };
+// Manually override the max position used to keep the modal in the bounds of its container.
+// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
+// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
+// position the modal can be dragged to.
+const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
 /**
  * @private
  */
-const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
+const FloatingLocalVideo = (props) => {
+    const { localVideoComponent, layerHostId, isNarrow, 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
+        }
+        : undefined, [parentHeight, parentWidth, modalHeight, modalWidth]);
+    const modalStyles = React.useMemo(() => floatingLocalVideoModalStyle(theme, isNarrow), [theme, isNarrow]);
+    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));
 };
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 /**
  * @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`
+const rootLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%' }
 };
 /**
  * @private
  */
-const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
- */
-const VideoGalleryResponsiveHorizontalGallery = (props) => {
-    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
-    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
-    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
-    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
-        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+const innerLayoutStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
-
-// Copyright (c) Microsoft Corporation.
-const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
 /**
  * @private
  */
-const useFloatingLocalVideoLayout = (props) => {
-    var _a, _b;
-    const visibleVideoParticipants = React.useRef([]);
-    const visibleAudioParticipants = React.useRef([]);
-    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
-    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleVideoParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreams
-    }).slice(0, maxRemoteVideoStreams);
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleAudioParticipants.current,
-        maxDominantSpeakers: maxAudioDominantSpeakers
-    });
-    const getGridParticipants = React.useCallback(() => {
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleVideoParticipants.current.length > 0
-            ? visibleVideoParticipants.current
-            : visibleAudioParticipants.current.concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
-    ]);
-    const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.length > 0
-                ? visibleAudioParticipants.current.concat(callingParticipants)
-                : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
+const layerHostStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
 };
 
 // Copyright (c) Microsoft Corporation.
 /**
- * DefaultLayout displays remote participants, local video component, and screen sharing component in
- * a grid and horizontal gallery.
+ * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
+ * a grid and horizontal gallery while floating the local video
  *
  * @private
  */
-const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+const FloatingLocalVideoLayout = (props) => {
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight } = props;
+    const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
         remoteParticipants,
@@ -9680,18 +9773,29 @@ const DefaultLayout = (props) => {
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
     const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
-    if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
-    return (React__default['default'].createElement(react.Stack, { horizontal: false, styles: rootLayoutStyle },
-        screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+    const layerHostId = reactHooks.useId('layerhost');
+    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), {
+            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;
+    return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
+        wrappedLocalVideoComponent,
+        React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle },
+            screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
+            React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9700,22 +9804,6 @@ const DefaultLayout = (props) => {
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
-/**
- * @private
- * Set aside only 6 dominant speakers for remaining audio participants
- */
-const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-const DRAG_OPTIONS$1 = {
-    moveMenuItemText: 'Move',
-    closeMenuItemText: 'Close',
-    menu: react.ContextualMenu,
-    keepInBounds: true
-};
-// Manually override the max position used to keep the modal in the bounds of its container.
-// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
-// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
-// position the modal can be dragged to.
-const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -9723,53 +9811,17 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
-    const shouldFloatNonDraggableLocalVideo = !!(showCameraSwitcherInLocalPreview && shouldFloatLocalVideo);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
-    const visibleVideoParticipants = React.useRef([]);
-    const visibleAudioParticipants = React.useRef([]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const visibleCallingParticipants = React.useRef([]);
-    const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX$1.width : LARGE_FLOATING_MODAL_SIZE_PX$1.width;
-    const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX$1.height : LARGE_FLOATING_MODAL_SIZE_PX$1.height;
-    // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
-    // to be dragged offscreen and these are the top and left bounds of that calculation.
-    const modalMinDragPosition = React.useMemo(() => containerWidth && containerHeight
-        ? {
-            // We use -containerWidth/Height because our modal is positioned to start in the bottom right,
-            // hence (0,0) is the bottom right of the video gallery.
-            x: -containerWidth + modalWidth + localVideoTileOuterPaddingPX,
-            y: -containerHeight + modalHeight + localVideoTileOuterPaddingPX
-        }
-        : undefined, [containerHeight, containerWidth, modalHeight, modalWidth]);
-    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleVideoParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreams
-    }).slice(0, maxRemoteVideoStreams);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    visibleCallingParticipants.current = (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [];
-    // This set will be used to filter out participants already in visibleVideoParticipants
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));
-    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_c = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !visibleCallingParticipantsSet.has(p.userId))) !== null && _c !== void 0 ? _c : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleAudioParticipants.current,
-        maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
-    });
     /* @conditional-compile-remove(rooms) */
     const permissions = _usePermissions();
     /**
@@ -9817,73 +9869,16 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state })));
     }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
-    const videoTiles = onRenderRemoteVideoTile
-        ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleVideoParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, true);
-        });
-    const audioTiles = onRenderRemoteVideoTile
-        ? visibleAudioParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleAudioParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, false);
-        });
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingTiles = onRenderRemoteVideoTile
-        ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
-        : visibleCallingParticipants.current.map((participant) => {
-            return defaultOnRenderVideoTile(participant, false);
-        });
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const screenShareActive = screenShareParticipant || (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn);
-    const createGridTiles = () => {
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);
-    };
-    const gridTiles = createGridTiles();
-    const createHorizontalGalleryTiles = () => {
-        if (screenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return videoTiles.concat(audioTiles.concat(callingTiles));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];
-        }
-    };
-    const horizontalGalleryTiles = createHorizontalGalleryTiles();
-    if (!shouldFloatLocalVideo && localVideoTile) {
-        gridTiles.push(localVideoTile);
-    }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
-    const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
-    const layerHostId = reactHooks.useId('layerhost');
-    if (layout === 'floatingLocalVideo') {
-        return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-            shouldFloatLocalVideo &&
-                !shouldFloatNonDraggableLocalVideo &&
-                localVideoTile &&
-                (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
-            // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-            shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-                    boxShadow: theme.effects.elevation8,
-                    zIndex: LOCAL_VIDEO_TILE_ZINDEX
-                }) }, localVideoTile)),
-            React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle },
-                screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-                horizontalGalleryPresent && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { shouldFloatLocalVideo: true, isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
-                React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
-    }
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_a = screenShareParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isReceiving })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn
             ? localScreenShareStreamComponent
             : undefined;
-    return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        React__default['default'].createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles })));
+    const videoGalleryLayout = layout === 'floatingLocalVideo' ? (React__default['default'].createElement(FloatingLocalVideoLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, parentHeight: containerHeight, styles: styles })) : (React__default['default'].createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles }));
+    return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10582,7 +10577,7 @@ const DomainPermissionsContainer = (props) => {
     var _a, _b;
     const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
     const theme = react.useTheme();
-    return (React__default['default'].createElement(react.Stack, { style: { padding: '2rem', maxWidth: '25.375rem' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
+    return (React__default['default'].createElement(react.Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
         React__default['default'].createElement(react.Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
             props.cameraIconName && (React__default['default'].createElement(react.Stack, null,
                 React__default['default'].createElement(react.Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
@@ -11582,6 +11577,14 @@ const DialpadContainer = (props) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
                 setText(e.target.value);
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: (e) => {
+                const input = e.target;
+                const end = input.value.length;
+                // Move focus to end of input field
+                input.setSelectionRange(end, end);
+                input.focus();
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
                 return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
@@ -11945,6 +11948,21 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
     };
 };
+/** @private */
+const memoizeLocalParticipant = memoizeOne__default['default']((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => {
+    var _a, _b;
+    return ({
+        userId: identifier,
+        displayName: displayName !== null && displayName !== void 0 ? displayName : '',
+        isMuted: isMuted,
+        isScreenSharingOn: isScreenSharingOn,
+        videoStream: {
+            isAvailable: !!localVideoStream,
+            isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
+            renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
+        }
+    });
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11961,7 +11979,6 @@ const videoGallerySelector = reselect.createSelector([
     getIdentifier,
     getDominantSpeakers
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers) => {
-    var _a, _b;
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -11973,17 +11990,7 @@ const videoGallerySelector = reselect.createSelector([
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
             : undefined,
-        localParticipant: {
-            userId: identifier,
-            displayName: displayName !== null && displayName !== void 0 ? displayName : '',
-            isMuted: isMuted,
-            isScreenSharingOn: isScreenSharingOn,
-            videoStream: {
-                isAvailable: !!localVideoStream,
-                isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
-                renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
-            }
-        },
+        localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
         dominantSpeakers: dominantSpeakerIds
     };