@azure/communication-react 1.5.1-alpha-202303280014 → 1.5.1-alpha-202303290014

package/dist/communication-react.d.ts

@@ -1802,7 +1802,7 @@ export declare type CallErrors = {
  *
  * @public
  */
-export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects';
+export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification';
 
 /**
  * Callback for {@link CallAdapterSubscribers} 'callIdChanged' event.
@@ -6700,7 +6700,7 @@ export declare interface OptionsDevice {
  *
  * @beta
  */
-export declare type OverflowGalleryLayout = 'HorizontalBottom' | 'VerticalRight';
+export declare type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
 
 /**
  * A system message notifying that a participant was added to the chat thread.
@@ -8518,7 +8518,7 @@ export declare interface VideoGalleryProps {
      * Determines the layout of the overflowGallery inside the VideoGallery.
      * @defaultValue 'HorizontalBottom'
      */
-    overflowGalleryLayout?: OverflowGalleryLayout;
+    overflowGalleryPosition?: OverflowGalleryPosition;
 }
 
 /**

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303280014';
+var telemetryVersion = '1.5.1-alpha-202303290014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9283,11 +9283,11 @@ const participantsById = (participants) => {
 
 // Copyright (c) Microsoft Corporation.
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
-    const visibleHorizontalGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxHorizontalGalleryDominantSpeakers = DEFAULT_MAX_HORIZONTAL_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const visibleOverflowGalleryParticipants = React.useRef([]);
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -9304,12 +9304,12 @@ const _useOrganizedParticipants = (props) => {
     const callingParticipants = remoteParticipantsOrdered.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));
-    visibleHorizontalGalleryParticipants.current = smartDominantSpeakerParticipants({
+    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
         participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleHorizontalGalleryParticipants.current,
-        maxDominantSpeakers: maxHorizontalGalleryDominantSpeakers
+        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
     const getGridParticipants = React.useCallback(() => {
         if (isScreenShareActive) {
@@ -9318,32 +9318,32 @@ const _useOrganizedParticipants = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         return visibleGridParticipants.current.length > 0
             ? visibleGridParticipants.current
-            : visibleHorizontalGalleryParticipants.current.concat(callingParticipants);
+            : visibleOverflowGalleryParticipants.current.concat(callingParticipants);
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
     ]);
     const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
+    const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
         if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleHorizontalGalleryParticipants.current.concat(callingParticipants));
+            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.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 visibleGridParticipants.current.length > 0
-                ? visibleHorizontalGalleryParticipants.current.concat(callingParticipants)
+                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
                 : [];
         }
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive
     ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
+    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
 };
 /* @conditional-compile-remove(pinned-participants) */
 const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
@@ -9373,9 +9373,9 @@ const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
-        horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+        overflowGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
     };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
@@ -9394,7 +9394,7 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     return remoteParticipantSortedByVideo;
 };
 /**
- * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
 const useOrganizedParticipants = (args) => {
@@ -10109,11 +10109,11 @@ const OverflowGallery = (props) => {
     const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, 
     /* @conditional-compile-remove(vertical-gallery) */
     isShort = false, overflowGalleryElements, horizontalGalleryStyles, 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom', 
-    /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles, onChildrenPerPageChange } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', 
+    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles, onChildrenPerPageChange } = props;
     const containerStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryLayout === 'VerticalRight') {
+        if (overflowGalleryPosition === 'VerticalRight') {
             return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
@@ -10121,23 +10121,23 @@ const OverflowGallery = (props) => {
         shouldFloatLocalVideo,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         isNarrow,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     ]);
     const galleryStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryLayout === 'VerticalRight') {
-            return react.concatStyleSets(verticalGalleryStyle(isShort), veritcalGalleryStyles);
+        if (overflowGalleryPosition === 'VerticalRight') {
+            return react.concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
         }
         return react.concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         horizontalGalleryStyles,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
-        /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
-    if (overflowGalleryLayout === 'VerticalRight') {
+    if (overflowGalleryPosition === 'VerticalRight') {
         return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
     }
     /* @conditional-compile-remove(pinned-participants) */
@@ -10153,7 +10153,7 @@ const OverflowGallery = (props) => {
 // Copyright (c) Microsoft Corporation.
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
- * a grid and horizontal gallery.
+ * a grid an overflow gallery.
  *
  * @private
  */
@@ -10161,19 +10161,19 @@ const DefaultLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
     /* @conditional-compile-remove(vertical-gallery) */
     parentHeight, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-    // This is for tracking the number of children in the first page of horizontal gallery.
-    // This number will be used for the maxHorizontalDominantSpeakers when organizing the remote participants.
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     const childrenPerPage = React.useRef(4);
-    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxHorizontalGalleryDominantSpeakers: screenShareComponent
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
@@ -10195,7 +10195,7 @@ const DefaultLayout = (props) => {
     const [indexesToRender, setIndexesToRender] = React.useState([
         ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
     ]);
-    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -10205,32 +10205,32 @@ const DefaultLayout = (props) => {
         gridTiles.push(localVideoComponent);
     }
     const overflowGallery = React.useMemo(() => {
-        if (horizontalGalleryTiles.length === 0) {
+        if (overflowGalleryTiles.length === 0) {
             return null;
         }
         return (React__default['default'].createElement(OverflowGallery, { isNarrow: isNarrow, 
             /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
-            veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(pinned-participants) */
-            overflowGalleryLayout: overflowGalleryLayout, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+            overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
             } }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        horizontalGalleryTiles,
+        overflowGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
     ]);
     return (React__default['default'].createElement(react.Stack
     /* @conditional-compile-remove(vertical-gallery) */
     , { 
         /* @conditional-compile-remove(vertical-gallery) */
-        horizontal: overflowGalleryLayout === 'VerticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
+        horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
         screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
         overflowGallery));
 };
@@ -10974,26 +10974,26 @@ const layerHostStyle = {
 // Copyright (c) Microsoft Corporation.
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
- * a grid and horizontal gallery while floating the local video
+ * a grid and overflow gallery while floating the local video
  *
  * @private
  */
 const FloatingLocalVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [] } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-    // This is for tracking the number of children in the first page of horizontal gallery.
-    // This number will be used for the maxHorizontalDominantSpeakers when organizing the remote participants.
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     const childrenPerPage = React.useRef(4);
-    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxHorizontalGalleryDominantSpeakers: screenShareComponent
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
@@ -11019,7 +11019,7 @@ const FloatingLocalVideoLayout = (props) => {
     const [indexesToRender, setIndexesToRender] = React.useState([
         ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
     ]);
-    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -11031,7 +11031,7 @@ const FloatingLocalVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
-        if ((horizontalGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
+        if ((overflowGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
             return isNarrow
                 ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
@@ -11040,10 +11040,10 @@ const FloatingLocalVideoLayout = (props) => {
         }
         return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
-        horizontalGalleryTiles.length,
+        overflowGalleryTiles.length,
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         /* @conditional-compile-remove(vertical-gallery) */ screenShareComponent
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
@@ -11051,30 +11051,30 @@ const FloatingLocalVideoLayout = (props) => {
     showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || !!screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
-        if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {
+        if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
         return (React__default['default'].createElement(OverflowGallery
         /* @conditional-compile-remove(vertical-gallery) */
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
-            veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
-            overflowGalleryLayout: overflowGalleryLayout, onChildrenPerPageChange: (n) => {
+            overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
             } }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        horizontalGalleryTiles,
+        overflowGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
         screenShareComponent,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
     ]);
     return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
@@ -11084,7 +11084,7 @@ const FloatingLocalVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
-            horizontal: overflowGalleryLayout === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
+            horizontal: overflowGalleryPosition === 'VerticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
             overflowGallery)));
 };
@@ -11135,7 +11135,7 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
-    overflowGalleryLayout = 'HorizontalBottom' } = props;
+    overflowGalleryPosition = 'HorizontalBottom' } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -11297,7 +11297,7 @@ const VideoGallery = (props) => {
         parentWidth: containerWidth,
         parentHeight: containerHeight,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -11311,7 +11311,7 @@ const VideoGallery = (props) => {
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     ]);
     const videoGalleryLayout = React.useMemo(() => {
         if (layout === 'floatingLocalVideo') {
@@ -13280,6 +13280,38 @@ const _DevicePermissionDropdown = (props) => {
         }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+react.mergeStyles({
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    width: '100%',
+    height: _pxToRem(60),
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    alignItems: 'stretch',
+    columnGap: _pxToRem(16),
+    padding: _pxToRem(8)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    fontWeight: 600,
+    fontSize: _pxToRem(12),
+    lineHeight: _pxToRem(30)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(16),
+    lineHeight: _pxToRem(30)
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -19581,7 +19613,7 @@ const CallArrangement = (props) => {
     const isMobileWithActivePane = props.mobileView && activePane;
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const callCompositeContainerCSS = React.useMemo(() => {
-        return { display: isMobileWithActivePane ? 'none' : 'flex', width: '100%', height: '100%' };
+        return { display: isMobileWithActivePane ? 'none' : 'flex', minWidth: 0, width: '100%', height: '100%' };
     }, [isMobileWithActivePane]);
     // To be removed once feature is out of beta, replace with callCompositeContainerCSS
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -19846,7 +19878,7 @@ const MediaGallery = (props) => {
                 : { kind: 'contextual' };
     }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
-    const overflowGalleryLayout = React.useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+    const overflowGalleryPosition = React.useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
         ? 'VerticalRight'
         : 'HorizontalBottom', [containerWidth, containerHeight]);
     const VideoGalleryMemoized = React.useMemo(() => {
@@ -19854,14 +19886,14 @@ const MediaGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
-            overflowGalleryLayout: overflowGalleryLayout })));
+            overflowGalleryPosition: overflowGalleryPosition })));
     }, [
         videoGalleryProps,
         props.isMobile,
         onRenderAvatar,
         cameraSwitcherProps,
         /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
     ]);
     return (React__default['default'].createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -22214,10 +22246,10 @@ class AzureCommunicationCallAdapter {
     }
     onRemoteParticipantsUpdated({ added, removed }) {
         if (added && added.length > 0) {
-            this.emitter.emit('participantsJoined', added);
+            this.emitter.emit('participantsJoined', { joined: added });
         }
         if (removed && removed.length > 0) {
-            this.emitter.emit('participantsLeft', removed);
+            this.emitter.emit('participantsLeft', { removed: removed });
         }
         added.forEach((participant) => {
             this.participantSubscribers.set(toFlatCommunicationIdentifier(participant.identifier), new ParticipantSubscriber(participant, this.emitter));