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

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-202303260014';
+var telemetryVersion = '1.5.1-alpha-202303290014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6128,7 +6128,7 @@ const FailedMyChatMessageContainer = Object.assign(Object.assign({}, defaultChat
 /**
  * @private
  */
-const defaultChatMessageContainer = {
+const defaultChatMessageContainer = (theme) => ({
     maxWidth: '100%',
     minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
     marginRight: '0rem',
@@ -6141,9 +6141,37 @@ const defaultChatMessageContainer = {
         // For more info see https://github.com/Azure/communication-ui-library/pull/1507
         marginBlock: '0.125rem'
     },
+    '& blockquote': {
+        backgroundColor: theme.palette.white,
+        clear: 'left',
+        minHeight: '2.25rem',
+        width: 'fit-content',
+        margin: '7px 0px',
+        padding: '7px 15px',
+        border: 'solid',
+        borderRadius: '4px',
+        borderWidth: '1px',
+        borderColor: theme.palette.neutralQuaternary,
+        borderLeftWidth: '4px'
+    },
+    '& table': {
+        backgroundColor: theme.palette.white,
+        border: theme.palette.neutralQuaternary,
+        borderCollapse: 'collapse',
+        tableLayout: 'auto',
+        width: '100%',
+        '& tr': {
+            border: `1px solid ${theme.palette.neutralQuaternary}`,
+            '& td': {
+                border: `1px solid ${theme.palette.neutralQuaternary}`,
+                wordBreak: 'normal',
+                padding: '0px 5px'
+            }
+        }
+    },
     // This makes message bubble show border in high contrast mode making each message distinguishable
     border: '1px solid transparent'
-};
+});
 /**
  * @private
  */
@@ -7178,7 +7206,7 @@ const DefaultSystemMessage = (props) => {
     }
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const messageProps = {
         message,
@@ -7194,7 +7222,7 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
             const myChatMessageStyle = message.status === 'failed'
                 ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
                 : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
-            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
+            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer(theme);
             messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
             const chatMessageComponent = onRenderMessage === undefined
                 ? defaultChatMessageRenderer(messageProps)
@@ -7521,6 +7549,7 @@ const MessageThread = (props) => {
             // -1 because participant count does not include myself
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
+    const theme = useTheme();
     const messagesToDisplay = React.useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
@@ -7549,7 +7578,7 @@ const MessageThread = (props) => {
                     statusToRender = 'failed';
                 }
             }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
             message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
@@ -7565,6 +7594,7 @@ const MessageThread = (props) => {
         defaultStatusRenderer,
         defaultChatMessageRenderer,
         strings,
+        theme,
         participantCount,
         readCountForHoveredIndicator,
         onRenderMessage,
@@ -7576,7 +7606,6 @@ const MessageThread = (props) => {
         lastDeliveredChatMessage,
         props.disableEditing
     ]);
-    const theme = useTheme();
     const chatBody = React.useMemo(() => {
         var _a;
         return (React__default['default'].createElement(reactAriaLive.LiveAnnouncer, null,
@@ -9254,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
@@ -9275,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) {
@@ -9289,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) => {
@@ -9344,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) => {
@@ -9365,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) => {
@@ -10080,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);
@@ -10092,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) */
@@ -10124,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
  */
@@ -10132,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
@@ -10166,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
@@ -10176,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));
 };
@@ -10945,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
@@ -10990,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
@@ -11002,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
@@ -11011,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 ? (
@@ -11022,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 },
@@ -11055,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)));
 };
@@ -11106,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;
@@ -11268,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,
@@ -11282,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') {
@@ -13251,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.
 /**
@@ -17839,15 +17900,15 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     }),
     /* @conditional-compile-remove(video-background-effects) */
     onRemoveVideoBackgroundEffects: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+        return yield adapter.stopVideoBackgroundEffect();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+    onBlurVideoBackground: (bgBlurConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+        return yield adapter.blurVideoBackground(bgBlurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: () => __awaiter$b(void 0, void 0, void 0, function* () {
-        throw new Error('Not implemented');
+    onReplaceVideoBackground: (bgReplacementConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+        return yield adapter.replaceVideoBackground(bgReplacementConfig);
     })
 }));
 
@@ -19552,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
@@ -19817,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(() => {
@@ -19825,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' }),
@@ -20822,7 +20883,7 @@ const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
+    const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -21658,6 +21719,7 @@ class CallContext {
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: clientState.environmentInfo,
             /* @conditional-compile-remove(unsupported-browser) */ unsupportedBrowserVersionsAllowed: false,
             /* @conditional-compile-remove(rooms) */ roleHint: options === null || options === void 0 ? void 0 : options.roleHint,
+            /* @conditional-compile-remove(video-background-effects) */ videoBackgroundImages: options === null || options === void 0 ? void 0 : options.videoBackgroundImages,
             cameraStatus: undefined
         };
         this.emitter.setMaxListeners((_b = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _b !== void 0 ? _b : 50);
@@ -21841,6 +21903,12 @@ class AzureCommunicationCallAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.blurVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.replaceVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.stopVideoBackgroundEffect.bind(this);
     }
     dispose() {
         this.resetDiagnosticsForwarder();
@@ -22049,6 +22117,24 @@ class AzureCommunicationCallAdapter {
         this.context.setAllowedUnsupportedBrowser();
         this.context.updateClientState(this.callClient.getState());
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onBlurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onReplaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            yield this.handlers.onRemoveVideoBackgroundEffects();
+        });
+    }
     startCall(participants, options) {
         var _a, _b;
         if (_isInCall((_b = (_a = this.getState().call) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'None')) {
@@ -22160,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));
@@ -23148,6 +23234,24 @@ class CallWithChatBackedCallAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callWithChatAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.blurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.replaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.stopVideoBackgroundEffect();
+        });
+    }
 }
 function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     return {
@@ -23971,6 +24075,12 @@ class AzureCommunicationCallWithChatAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.blurVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.replaceVideoBackground.bind(this);
+        /* @conditional-compile-remove(video-background-effects) */
+        this.stopVideoBackgroundEffect.bind(this);
     }
     /** Join existing Call. */
     joinCall(microphoneOn) {
@@ -24187,6 +24297,24 @@ class AzureCommunicationCallWithChatAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(video-background-effects) */
+    blurVideoBackground(bgBlurConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.blurVideoBackground(bgBlurConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    replaceVideoBackground(bgReplacementConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.replaceVideoBackground(bgReplacementConfig);
+        });
+    }
+    /* @conditional-compile-remove(video-background-effects) */
+    stopVideoBackgroundEffect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.stopVideoBackgroundEffect();
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {