@azure/communication-react 1.12.1-alpha-202401190013 → 1.12.1-alpha-202401230013

package/dist/communication-react.d.ts

@@ -2528,6 +2528,12 @@ export declare type CallParticipantListParticipant = ParticipantListParticipant
      * @beta
      * */
     reaction?: Reaction;
+    /**
+     * Whether calling participant is spotlighted
+     *
+     * @beta
+     * */
+    isSpotlighted?: Spotlight;
 };
 
 /**
@@ -6047,6 +6053,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     ParticipantItemOptions: React_2.JSX.Element;
     ParticipantItemOptionsHovered: React_2.JSX.Element;
     ParticipantItemScreenShareStart: React_2.JSX.Element;
+    ParticipantItemSpotlighted: React_2.JSX.Element;
     HoldCallContextualMenuItem: React_2.JSX.Element;
     HoldCallButton: React_2.JSX.Element;
     ResumeCall: React_2.JSX.Element;
@@ -6085,6 +6092,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     ContextMenuSpeakerIcon: React_2.JSX.Element;
     SurveyStarIcon: React_2.JSX.Element;
     SurveyStarIconFilled: React_2.JSX.Element;
+    VideoSpotlighted: React_2.JSX.Element;
 };
 
 /**
@@ -6193,6 +6201,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ErrorBarCallVideoRecoveredBySystem: React_2.JSX.Element;
     ErrorBarCallVideoStoppedBySystem: React_2.JSX.Element;
     MessageResend: React_2.JSX.Element;
+    ParticipantItemSpotlighted: React_2.JSX.Element;
     HoldCallContextualMenuItem: React_2.JSX.Element;
     HoldCallButton: React_2.JSX.Element;
     ResumeCall: React_2.JSX.Element;
@@ -6228,6 +6237,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ContextMenuSpeakerIcon: React_2.JSX.Element;
     SurveyStarIcon: React_2.JSX.Element;
     SurveyStarIconFilled: React_2.JSX.Element;
+    VideoSpotlighted: React_2.JSX.Element;
 };
 
 /**
@@ -9559,6 +9569,18 @@ export declare interface SpokenLanguageStrings {
     'zh-tw': string;
 }
 
+/**
+ * Spotlight state with order
+ *
+ * @beta
+ */
+export declare type Spotlight = {
+    /**
+     * Specifies the order position of the spotlight
+     */
+    spotlightOrderPosition?: number;
+};
+
 /**
  * State only version of {@link @azure/communication-calling#SpotlightCallFeature}
  *
@@ -10758,6 +10780,10 @@ export declare interface VideoGalleryProps {
      * This callback will be called when a participant video tile is un-pinned.
      */
     onUnpinParticipant?: (userId: string) => void;
+    /**
+     * List of spotlighted participant userIds.
+     */
+    spotlightedParticipants?: string[];
     /**
      * Options for showing the remote video tile menu.
      *
@@ -11057,6 +11083,10 @@ export declare interface VideoTileProps {
      * Callback triggered by video tile on touch and hold.
      */
     onLongTouch?: () => void;
+    /**
+     * If true, the video tile will show the spotlighted icon.
+     */
+    isSpotlighted?: boolean;
 }
 
 /**

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

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.12.1-alpha-202401190013';
+var telemetryVersion = '1.12.1-alpha-202401230013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6408,6 +6408,8 @@ const DEFAULT_COMPONENT_ICONS = {
     ParticipantItemOptions: React.createElement(React.Fragment, null),
     ParticipantItemOptionsHovered: React.createElement(reactIcons.MoreHorizontal20Filled, null),
     ParticipantItemScreenShareStart: React.createElement(reactIcons.ShareScreenStart20Filled, null),
+    /* @conditional-compile-remove(spotlight) */
+    ParticipantItemSpotlighted: React.createElement(reactIcons.VideoPersonStar20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
     HoldCallContextualMenuItem: React.createElement(reactIcons.CallPause20Regular, null),
     /* @conditional-compile-remove(PSTN-calls) */
@@ -6473,7 +6475,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(end-of-call-survey) */
     SurveyStarIcon: React.createElement(reactIcons.Star28Regular, null),
     /* @conditional-compile-remove(end-of-call-survey) */
-    SurveyStarIconFilled: React.createElement(reactIcons.Star28Filled, null)
+    SurveyStarIconFilled: React.createElement(reactIcons.Star28Filled, null),
+    /* @conditional-compile-remove(spotlight) */
+    VideoSpotlighted: React.createElement(reactIcons.VideoPersonStar20Filled, { style: { height: '16px', width: '16px' } })
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12341,7 +12345,8 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                     React.createElement(react.Stack.Item, null,
                         React.createElement(RaisedHandIcon, null)))),
                 callingParticipant.isScreenSharing && (React.createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
-                callingParticipant.isMuted && (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))));
+                callingParticipant.isMuted && (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })),
+                /* @conditional-compile-remove(spotlight) */ callingParticipant.isSpotlighted && (React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }))));
         }
         : () => null;
     /* @conditional-compile-remove(raise-hand) */
@@ -13262,6 +13267,8 @@ const VideoTileMoreOptionsButton = (props) => {
  */
 const VideoTile = (props) => {
     const { children, displayName, initialsName, isMirrored, isMuted, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted, 
     /* @conditional-compile-remove(pinned-participants) */
     isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
     /* @conditional-compile-remove(raise-hand) */
@@ -13396,11 +13403,14 @@ const VideoTile = (props) => {
                     participantStateString && (React.createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
                     showMuteIndicator && isMuted && (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React.createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
-                    /* @conditional-compile-remove(pinned-participants) */
-                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton }),
+                    /* @conditional-compile-remove(spotlight) */
+                    isSpotlighted && (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
+                        React.createElement(react.Icon, { iconName: "VideoSpotlighted" }))),
                     /* @conditional-compile-remove(pinned-participants) */
                     isPinned && (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
-                        React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),
+                        React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) }))),
+                    /* @conditional-compile-remove(pinned-participants) */
+                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton })))),
             children && (React.createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
             /* @conditional-compile-remove(raise-hand) */ raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(react.Stack.Item, null,
@@ -13441,7 +13451,8 @@ const bracketedParticipantString = (participantString, withBrackets) => {
 const _RemoteVideoTile = React.memo((props) => {
     var _a;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, 
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -13530,7 +13541,9 @@ const _RemoteVideoTile = React.memo((props) => {
             /* @conditional-compile-remove(pinned-participants) */
             isPinned: props.isPinned, 
             /* @conditional-compile-remove(pinned-participants) */
-            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))) })),
+            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted })),
         drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
@@ -13784,7 +13797,11 @@ const _LocalVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(raise-hand) */
     raisedHand, 
     /* @conditional-compile-remove(reaction) */
-    reaction } = props;
+    reaction, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted } = props;
+    /* @conditional-compile-remove(spotlight) */
+    const theme = useTheme();
     const localVideoStreamProps = React.useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
         isStreamAvailable: isAvailable,
@@ -13802,6 +13819,14 @@ const _LocalVideoTile = React.memo((props) => {
     ]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
+    /* @conditional-compile-remove(spotlight) */
+    const spotlightBorder = React.useMemo(() => (React.createElement(react.Stack, { className: react.mergeStyles({
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            zIndex: 100,
+            border: `0.25rem solid ${theme.palette.black}`
+        }) })), [theme.palette.black]);
     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)
@@ -13811,19 +13836,26 @@ const _LocalVideoTile = React.memo((props) => {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }), /* @conditional-compile-remove(spotlight) */
+            isSpotlighted && spotlightBorder));
     }, [
         localVideoCameraCycleButtonProps,
         localVideoCameraSwitcherLabel,
         localVideoSelectedDescription,
         renderElement,
-        showCameraSwitcherInLocalPreview
+        showCameraSwitcherInLocalPreview,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ spotlightBorder
     ]);
-    return (React.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, 
-        /* @conditional-compile-remove(raise-hand) */
-        raisedHand: raisedHand, 
-        /* @conditional-compile-remove(reaction) */
-        reaction: reaction }));
+    return (React.createElement(React.Fragment, null,
+        React.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, 
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            reaction: reaction, 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted }), /* @conditional-compile-remove(spotlight) */
+        isSpotlighted && spotlightBorder));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
@@ -14016,35 +14048,41 @@ const _useOrganizedParticipants = (props) => {
     return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
 };
 /* @conditional-compile-remove(pinned-participants) */
-const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
-    var _a;
+const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
+    var _a, _b;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
         map[remoteParticipant.userId] = remoteParticipant;
         return map;
     }, {});
-    // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
-    const pinnedParticipants = [];
-    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
+    const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
+    // declare focused participant user ids as spotlighted participants user ids followed by
+    // pinned participants user ids
+    const focusedParticipantUserIds = [
+        ...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))
+    ];
+    // get focused participants from map of remote participants in the order of the user ids
+    const focusedParticipants = [];
+    focusedParticipantUserIds.forEach((id) => {
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
-            pinnedParticipants.push(pinnedParticipant);
+            focusedParticipants.push(pinnedParticipant);
         }
     });
-    // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
-    const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
-    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
+    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
+    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
+    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
         // if there are pinned participants then we should only consider unpinned participants
-        remoteParticipants: unpinnedParticipants });
+        remoteParticipants: unfocusedParticipants });
     const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (pinnedParticipants.length === 0) {
+    if (focusedParticipants.length === 0) {
         return useOrganizedParticipantsResult;
     }
     return {
-        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
+        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
         overflowGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
             : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
     };
 };
@@ -14069,7 +14107,7 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
  */
 const useOrganizedParticipants = (args) => {
     /* @conditional-compile-remove(pinned-participants) */
-    return _useOrganizedParticipantsWithPinnedParticipants(args);
+    return _useOrganizedParticipantsWithFocusedParticipants(args);
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14869,7 +14907,8 @@ const DefaultLayout = (props) => {
     const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
     /* @conditional-compile-remove(vertical-gallery) */
     parentHeight, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom' } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom', 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
@@ -14887,7 +14926,8 @@ const DefaultLayout = (props) => {
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'default',
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -15709,7 +15749,8 @@ const layerHostStyle = {
 const FloatingLocalVideoLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom', pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize, 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
@@ -15726,7 +15767,8 @@ const FloatingLocalVideoLayout = (props) => {
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'
+        /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo',
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -16140,7 +16182,9 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(vertical-gallery) */
     overflowGalleryPosition = 'horizontalBottom', 
     /* @conditional-compile-remove(rooms) */
-    localVideoTileSize = 'followDeviceOrientation' } = props;
+    localVideoTileSize = 'followDeviceOrientation', 
+    /* @conditional-compile-remove(spotlight) */
+    spotlightedParticipants } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -16197,6 +16241,8 @@ const VideoGallery = (props) => {
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
+        /* @conditional-compile-remove(spotlight) */
+        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(localParticipant.userId);
         const localVideoTileStyles = react.concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
@@ -16210,7 +16256,9 @@ const VideoGallery = (props) => {
                 /* @conditional-compile-remove(raise-hand) */
                 raisedHand: localParticipant.raisedHand, 
                 /* @conditional-compile-remove(reaction) */
-                reaction: localParticipant.reaction })));
+                reaction: localParticipant.reaction, 
+                /* @conditional-compile-remove(spotlight) */
+                isSpotlighted: isSpotlighted })));
     }, [
         isNarrow,
         localParticipant,
@@ -16233,7 +16281,9 @@ const VideoGallery = (props) => {
         localVideoTileSize,
         /* @conditional-compile-remove(gallery-layouts) */
         layout,
-        showLocalVideoTileLabel
+        showLocalVideoTileLabel,
+        /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -16270,7 +16320,11 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(pinned-participants) */
         const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
         /* @conditional-compile-remove(pinned-participants) */
-        const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
+        let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
+        /* @conditional-compile-remove(spotlight) */
+        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(participant.userId);
+        /* @conditional-compile-remove(spotlight) */
+        isPinned = isSpotlighted ? false : isPinned;
         const createViewOptions = () => {
             var _a, _b;
             /* @conditional-compile-remove(pinned-participants) */
@@ -16310,7 +16364,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, 
             /* @conditional-compile-remove(pinned-participants) */
-            toggleAnnouncerString: toggleAnnouncerString }));
+            toggleAnnouncerString: toggleAnnouncerString, 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted }));
     }, [
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
@@ -16326,7 +16382,8 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
-        /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode
+        /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -16350,7 +16407,8 @@ const VideoGallery = (props) => {
         parentHeight: containerHeight,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants
     }), [
         remoteParticipants,
         localParticipant,
@@ -16366,7 +16424,8 @@ const VideoGallery = (props) => {
         defaultOnRenderVideoTile,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
     ]);
     const videoGalleryLayout = React.useMemo(() => {
         /* @conditional-compile-remove(gallery-layouts) */
@@ -18615,6 +18674,7 @@ const _TagsSurvey = (props) => {
     const [selectedTags, setSelectedTags] = React.useState({});
     const [textResponse, setTextResponse] = React.useState({});
     const [selectedTextResponse, setSelectedTextResponse] = React.useState({});
+    const [checkedTextFields, setCheckedTextFields] = React.useState([]);
     const tags = React.useMemo(() => {
         const tags = [];
         Object.keys(callIssuesToTag).forEach((issueCategory) => {
@@ -18652,6 +18712,7 @@ const _TagsSurvey = (props) => {
                 });
             }
             else {
+                setCheckedTextFields([...checkedTextFields, issueCategory]);
                 setSelectedTextResponse((prevState) => {
                     prevState[issueCategory] = textResponse[issueCategory];
                     return prevState;
@@ -18673,33 +18734,35 @@ const _TagsSurvey = (props) => {
                 });
             }
             else {
+                setCheckedTextFields(checkedTextFields.filter((id) => id !== issueCategory));
                 setSelectedTextResponse((prevState) => {
                     delete prevState[issueCategory];
                     return prevState;
                 });
             }
         }
-        if (onConfirm) {
-            onConfirm(selectedTags, selectedTextResponse);
-        }
-    }, [onConfirm, selectedTags, selectedTextResponse, textResponse]);
+    }, [textResponse, checkedTextFields]);
     const theme = react.useTheme();
     const onRenderLabel = React.useCallback((issueCategory) => {
         return (React.createElement(react.TextField, { key: issueCategory, className: freeFormTextFieldClassName, underlined: true, placeholder: strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText, onChange: (e, v) => {
                 if (v) {
+                    setCheckedTextFields([...checkedTextFields, issueCategory]);
                     setTextResponse((prevState) => {
                         prevState[issueCategory] = v;
                         return prevState;
                     });
                     setSelectedTextResponse((prevState) => {
-                        if (Object.keys(prevState).includes(issueCategory)) {
-                            prevState[issueCategory] = v;
-                        }
+                        prevState[issueCategory] = v;
                         return prevState;
                     });
                 }
             } }));
-    }, [strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText]);
+    }, [strings === null || strings === void 0 ? void 0 : strings.tagsSurveyTextFieldDefaultText, checkedTextFields]);
+    React.useEffect(() => {
+        if (onConfirm) {
+            onConfirm(selectedTags, selectedTextResponse);
+        }
+    }, [selectedTags, selectedTextResponse, onConfirm]);
     return (React.createElement(React.Fragment, null,
         React.createElement(react.Stack, { verticalAlign: "center" },
             React.createElement(react.Text, { className: questionTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
@@ -18711,7 +18774,7 @@ const _TagsSurvey = (props) => {
                 tags[key].map((t, i) => {
                     return (React.createElement(react.Checkbox, { className: checkboxClassName, key: `checkBox_${i}`, label: t.message, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false, t.issue) }));
                 }),
-                showFreeFormTextField && (React.createElement(react.Checkbox, { styles: freeFormTextCheckboxStyles, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false), onRenderLabel: () => {
+                showFreeFormTextField && (React.createElement(react.Checkbox, { checked: checkedTextFields.includes(key), styles: freeFormTextCheckboxStyles, onChange: (ev, checked) => onChange(key, checked !== null && checked !== void 0 ? checked : false), onRenderLabel: () => {
                         return onRenderLabel(key);
                     } }))));
         })),
@@ -19842,8 +19905,8 @@ const convertRemoteParticipantToParticipantListParticipant = (userId, displayNam
 /**
  * @private
  */
-const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction) => {
-    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction);
+const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
+    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted);
 });
 /* @conditional-compile-remove(reaction) */
 /**
@@ -19858,8 +19921,17 @@ const memoizedConvertToVideoTileReaction = memoizeOne((reactionState) => {
         : undefined;
 });
 /* @conditional-compile-remove(reaction) */
-const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction) => {
-    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers)), { reaction });
+/**
+ * @private
+ */
+const memoizedSpotlight = memoizeOne((spotlightedParticipants, userId) => {
+    const spotlightOrder = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.find((spotlightedParticipant) => toFlatCommunicationIdentifier(spotlightedParticipant.identifier) === userId);
+    return spotlightOrder ? { spotlightOrderPosition: spotlightOrder.order } : undefined;
+});
+/* @conditional-compile-remove(reaction) */
+const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
+    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers)), { reaction,
+        isSpotlighted });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -20092,7 +20164,7 @@ const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipants, localUserCanRemoveOthers, isHideAttendeeNamesEnabled, localUserRole) => {
+const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipants, localUserCanRemoveOthers, isHideAttendeeNamesEnabled, localUserRole, spotlightedParticipants) => {
     const conversionCallback = (memoizeFn) => {
         return (remoteParticipants
             // Filter out MicrosoftBot participants
@@ -20119,11 +20191,15 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             displayName = maskDisplayNameWithRole(displayName, localUserRole, participant.role, isHideAttendeeNamesEnabled);
             /* @conditional-compile-remove(reaction) */
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
+            /* @conditional-compile-remove(spotlight) */
+            const spotlight = memoizedSpotlight(spotlightedParticipants, toFlatCommunicationIdentifier(participant.identifier));
             return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, 
             /* @conditional-compile-remove(raise-hand) */
             participant.raisedHand, localUserCanRemoveOthers, 
             /* @conditional-compile-remove(reaction) */
-            remoteParticipantReaction);
+            remoteParticipantReaction, 
+            /* @conditional-compile-remove(spotlight) */
+            spotlight);
         })
             .sort((a, b) => {
             var _a, _b;
@@ -20160,21 +20236,27 @@ const participantListSelector = reselect.createSelector([
     /* @conditional-compile-remove(hide-attendee-name) */
     isHideAttendeeNamesEnabled,
     /* @conditional-compile-remove(reaction) */
-    getLocalParticipantReactionState
+    getLocalParticipantReactionState,
+    /* @conditional-compile-remove(spotlight) */
+    getSpotlightedParticipants
 ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, role, partitipantCount, 
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
-localParticipantReactionState) => {
+localParticipantReactionState, 
+/* @conditional-compile-remove(spotlight) */
+spotlightedParticipants) => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
         ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers, 
         /* @conditional-compile-remove(hide-attendee-name) */
         isHideAttendeeNamesEnabled, 
         /* @conditional-compile-remove(hide-attendee-name) */
-        role)
+        role, 
+        /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants)
         : [];
     /* @conditional-compile-remove(reaction) */
     const localParticipantReaction = memoizedConvertToVideoTileReaction(localParticipantReactionState);
@@ -20189,7 +20271,9 @@ localParticipantReactionState) => {
         // Local participant can never remove themselves.
         isRemovable: false,
         /* @conditional-compile-remove(reaction) */
-        reaction: localParticipantReaction
+        reaction: localParticipantReaction,
+        /* @conditional-compile-remove(spotlight) */
+        isSpotlighted: memoizedSpotlight(spotlightedParticipants, userId)
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;
@@ -26061,7 +26145,7 @@ const Reaction = (props) => {
     const reactionButtonProps = usePropsFor$1(ReactionButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     const reactionButtonDisabled = isDisabled(props.option) || reactionButtonProps.disabled;
-    return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles, disableTooltip: props.disableTooltip })));
+    return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles, disableTooltip: props.disableTooltip, persistMenu: true })));
 };
 /* @conditional-compile-remove(reaction) */
 const isDisabled = (option) => {