@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js

@@ -1,12 +1,24 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Stack } from '@fluentui/react';
+import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(spotlight) */
+import { concatStyleSets, Layer } from '@fluentui/react';
 import { _formatString } from "../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
+/* @conditional-compile-remove(spotlight) */
+import { useCallback } from 'react';
 import { LocalVideoCameraCycleButton } from './LocalVideoCameraButton';
 import { StreamMedia } from './StreamMedia';
 import { useLocalVideoStreamLifecycleMaintainer } from './VideoGallery/useVideoStreamLifecycleMaintainer';
 import { VideoTile } from './VideoTile';
+/* @conditional-compile-remove(spotlight) */
+import { useTheme } from '../theming';
+/* @conditional-compile-remove(spotlight) */
+import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
+/* @conditional-compile-remove(spotlight) */
+import { _DrawerMenu } from './Drawer';
+/* @conditional-compile-remove(spotlight) */
+import { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';
 /**
  * A memoized version of VideoTile for rendering local participant.
  *
@@ -15,7 +27,27 @@ import { VideoTile } from './VideoTile';
 export const _LocalVideoTile = React.memo((props) => {
     const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, 
     /* @conditional-compile-remove(raise-hand) */
-    raisedHand } = props;
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */
+    spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    menuKind, 
+    /* @conditional-compile-remove(spotlight) */
+    strings, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources } = props;
+    /* @conditional-compile-remove(spotlight) */
+    const theme = useTheme();
     const localVideoStreamProps = useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
         isStreamAvailable: isAvailable,
@@ -23,9 +55,65 @@ export const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode
-    }), [isAvailable, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored, localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);
+    }), [
+        isAvailable,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
+        localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.scalingMode,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        renderElement
+    ]);
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
+    /* @conditional-compile-remove(spotlight) */
+    const contextualMenuProps = useVideoTileContextualMenuProps({
+        participant: { userId: userId !== null && userId !== void 0 ? userId : '' },
+        strings: Object.assign({}, strings),
+        spotlightedParticipantUserIds,
+        isSpotlighted,
+        onStartSpotlight,
+        onStopSpotlight,
+        maxParticipantsToSpotlight,
+        myUserId: userId
+    });
+    const videoTileContextualMenuProps = useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (menuKind !== 'contextual' || !contextualMenuProps) {
+            return {};
+        }
+        /* @conditional-compile-remove(spotlight) */
+        return {
+            contextualMenu: contextualMenuProps
+        };
+        return {};
+    }, [
+        /* @conditional-compile-remove(spotlight) */ contextualMenuProps,
+        /* @conditional-compile-remove(spotlight) */ menuKind
+    ]);
+    const videoTileStyles = useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (isSpotlighted) {
+            return concatStyleSets({
+                root: {
+                    outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,
+                    outlineOffset: '-0.25rem'
+                }
+            }, styles);
+        }
+        return styles;
+    }, [
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ theme.palette.neutralTertiaryAlt,
+        styles
+    ]);
+    /* @conditional-compile-remove(spotlight) */
+    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
+    /* @conditional-compile-remove(spotlight) */
+    const onKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+        }
+    }, [setDrawerMenuItemProps, contextualMenuProps]);
     const renderVideoStreamElement = 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)
@@ -33,19 +121,62 @@ export const _LocalVideoTile = React.memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React.createElement(React.Fragment, null,
+        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 }));
-    }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);
-    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 }));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
+    }, [
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview
+    ]);
+    return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), 
+        /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, 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 }, videoTileContextualMenuProps, { 
+            /* @conditional-compile-remove(spotlight) */
+            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources }), 
+        /* @conditional-compile-remove(spotlight) */ drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+            React.createElement(Stack, { styles: drawerMenuWrapperStyles },
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {
-        cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(localVideoSelectedDescription, {
+            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+        });
+    return (React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
+};
+/* @conditional-compile-remove(spotlight) */
+const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+    if (!contextualMenuProps) {
+        return [];
+    }
+    return contextualMenuProps.items.map((item) => {
+        return {
+            itemKey: item.key,
+            text: item.text,
+            iconProps: item.iconProps,
+            disabled: item.disabled,
+            onItemClick: () => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onLightDismiss === null || onLightDismiss === void 0 ? void 0 : onLightDismiss();
+            }
+        };
     });
-    return React.createElement(Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined && (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }));
 };
 //# sourceMappingURL=LocalVideoTile.js.map

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport { useLocalVideoStreamLifecycleMaintainer, LocalVideoStreamLifecycleMaintainerProps } from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo((props: {\n  userId?: string;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n  isAvailable?: boolean;\n  isMuted?: boolean;\n  renderElement?: HTMLElement;\n  displayName?: string;\n  initialsName?: string;\n  localVideoViewOptions?: VideoStreamOptions;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showLabel: boolean;\n  showMuteIndicator?: boolean;\n  showCameraSwitcherInLocalPreview?: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n  styles?: VideoTileStylesProps;\n  personaMinSize?: number;\n  /* @conditional-compile-remove(raise-hand) */\n  raisedHand?: RaisedHand;\n}) => {\n  const {\n    isAvailable,\n    isMuted,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    renderElement,\n    userId,\n    showLabel,\n    displayName,\n    initialsName,\n    onRenderAvatar,\n    showMuteIndicator,\n    styles,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription,\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand\n  } = props;\n  const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(() => ({\n    isMirrored: localVideoViewOptions?.isMirrored,\n    isStreamAvailable: isAvailable,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    renderElementExists: !!renderElement,\n    scalingMode: localVideoViewOptions?.scalingMode\n  }), [isAvailable, localVideoViewOptions?.isMirrored, localVideoViewOptions?.scalingMode, onCreateLocalStreamView, onDisposeLocalStreamView, renderElement]);\n\n  // Handle creating, destroying and updating the video stream as necessary\n  useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n  const renderVideoStreamElement = useMemo(() => {\n    // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n    // implies that, after their threshold, all streams have no child (blank video)\n    if (!renderElement || !renderElement.childElementCount) {\n      // Returning `undefined` results in the placeholder with avatar being shown\n      return undefined;\n    }\n    return <>\n          <FloatingLocalCameraCycleButton showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false} localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps} localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel} localVideoSelectedDescription={localVideoSelectedDescription} />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n          {}\n        </>;\n  }, [localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, renderElement, showCameraSwitcherInLocalPreview]);\n  return <>\n        <VideoTile key={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}\n    /* @conditional-compile-remove(raise-hand) */ raisedHand={raisedHand} />\n        {}\n      </>;\n});\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription = localVideoCameraCycleButtonProps?.selectedCamera && localVideoSelectedDescription && _formatString(localVideoSelectedDescription, {\n    cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n  });\n  return <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview && localVideoCameraCycleButtonProps?.cameras !== undefined && localVideoCameraCycleButtonProps?.selectedCamera !== undefined && localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && <LocalVideoCameraCycleButton cameras={localVideoCameraCycleButtonProps.cameras} selectedCamera={localVideoCameraCycleButtonProps.selectedCamera} onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera} label={localVideoCameraSwitcherLabel} ariaDescription={ariaDescription} />}\n    </Stack>;\n};"]}
+{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(spotlight) */\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(spotlight) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n  useLocalVideoStreamLifecycleMaintainer,\n  LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHand } from '../types';\n/* @conditional-compile-remove(spotlight) */\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n/* @conditional-compile-remove(spotlight) */\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\n/* @conditional-compile-remove(spotlight) */\nimport { VideoGalleryStrings } from './VideoGallery';\n/* @conditional-compile-remove(spotlight) */\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\n/* @conditional-compile-remove(spotlight) */\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n  (props: {\n    userId?: string;\n    onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeLocalStreamView?: () => void;\n    isAvailable?: boolean;\n    isMuted?: boolean;\n    renderElement?: HTMLElement;\n    displayName?: string;\n    initialsName?: string;\n    localVideoViewOptions?: VideoStreamOptions;\n    onRenderAvatar?: OnRenderAvatarCallback;\n    showLabel: boolean;\n    showMuteIndicator?: boolean;\n    showCameraSwitcherInLocalPreview?: boolean;\n    localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n    localVideoCameraSwitcherLabel?: string;\n    localVideoSelectedDescription?: string;\n    styles?: VideoTileStylesProps;\n    personaMinSize?: number;\n    /* @conditional-compile-remove(raise-hand) */\n    raisedHand?: RaisedHand;\n    /* @conditional-compile-remove(reaction) */\n    reaction?: Reaction;\n    /* @conditional-compile-remove(spotlight) */\n    spotlightedParticipantUserIds?: string[];\n    /* @conditional-compile-remove(spotlight) */\n    isSpotlighted?: boolean;\n    /* @conditional-compile-remove(spotlight) */\n    onStartSpotlight?: () => void;\n    /* @conditional-compile-remove(spotlight) */\n    onStopSpotlight?: () => void;\n    /* @conditional-compile-remove(spotlight) */\n    maxParticipantsToSpotlight?: number;\n    /* @conditional-compile-remove(spotlight) */\n    menuKind?: 'contextual' | 'drawer';\n    /* @conditional-compile-remove(spotlight) */\n    drawerMenuHostId?: string;\n    /* @conditional-compile-remove(spotlight) */\n    strings?: VideoGalleryStrings;\n    /* @conditional-compile-remove(reaction) */\n    reactionResources?: ReactionResources;\n  }) => {\n    const {\n      isAvailable,\n      isMuted,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      renderElement,\n      userId,\n      showLabel,\n      displayName,\n      initialsName,\n      onRenderAvatar,\n      showMuteIndicator,\n      styles,\n      showCameraSwitcherInLocalPreview,\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      /* @conditional-compile-remove(raise-hand) */\n      raisedHand,\n      /* @conditional-compile-remove(reaction) */\n      reaction,\n      /* @conditional-compile-remove(spotlight) */\n      isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */\n      spotlightedParticipantUserIds,\n      /* @conditional-compile-remove(spotlight) */\n      onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */\n      onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */\n      maxParticipantsToSpotlight,\n      /* @conditional-compile-remove(spotlight) */\n      menuKind,\n      /* @conditional-compile-remove(spotlight) */\n      strings,\n      /* @conditional-compile-remove(reaction) */\n      reactionResources\n    } = props;\n\n    /* @conditional-compile-remove(spotlight) */\n    const theme = useTheme();\n\n    const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n      () => ({\n        isMirrored: localVideoViewOptions?.isMirrored,\n        isStreamAvailable: isAvailable,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElementExists: !!renderElement,\n        scalingMode: localVideoViewOptions?.scalingMode\n      }),\n      [\n        isAvailable,\n        localVideoViewOptions?.isMirrored,\n        localVideoViewOptions?.scalingMode,\n        onCreateLocalStreamView,\n        onDisposeLocalStreamView,\n        renderElement\n      ]\n    );\n\n    // Handle creating, destroying and updating the video stream as necessary\n    useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n    /* @conditional-compile-remove(spotlight) */\n    const contextualMenuProps = useVideoTileContextualMenuProps({\n      participant: { userId: userId ?? '' },\n      strings: { ...strings },\n      spotlightedParticipantUserIds,\n      isSpotlighted,\n      onStartSpotlight,\n      onStopSpotlight,\n      maxParticipantsToSpotlight,\n      myUserId: userId\n    });\n\n    const videoTileContextualMenuProps = useMemo(() => {\n      /* @conditional-compile-remove(spotlight) */\n      if (menuKind !== 'contextual' || !contextualMenuProps) {\n        return {};\n      }\n      /* @conditional-compile-remove(spotlight) */\n      return {\n        contextualMenu: contextualMenuProps\n      };\n      return {};\n    }, [\n      /* @conditional-compile-remove(spotlight) */ contextualMenuProps,\n      /* @conditional-compile-remove(spotlight) */ menuKind\n    ]);\n\n    const videoTileStyles = useMemo(() => {\n      /* @conditional-compile-remove(spotlight) */\n      if (isSpotlighted) {\n        return concatStyleSets(\n          {\n            root: {\n              outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n              outlineOffset: '-0.25rem'\n            }\n          },\n          styles\n        );\n      }\n      return styles;\n    }, [\n      /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n      /* @conditional-compile-remove(spotlight) */ theme.palette.neutralTertiaryAlt,\n      styles\n    ]);\n\n    /* @conditional-compile-remove(spotlight) */\n    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n    /* @conditional-compile-remove(spotlight) */\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setDrawerMenuItemProps(\n            convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n          );\n        }\n      },\n      [setDrawerMenuItemProps, contextualMenuProps]\n    );\n\n    const renderVideoStreamElement = useMemo(() => {\n      // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n      // implies that, after their threshold, all streams have no child (blank video)\n      if (!renderElement || !renderElement.childElementCount) {\n        // Returning `undefined` results in the placeholder with avatar being shown\n        return undefined;\n      }\n\n      return (\n        <>\n          <FloatingLocalCameraCycleButton\n            showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n            localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n            localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n            localVideoSelectedDescription={localVideoSelectedDescription}\n          />\n          <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n        </>\n      );\n    }, [\n      localVideoCameraCycleButtonProps,\n      localVideoCameraSwitcherLabel,\n      localVideoSelectedDescription,\n      renderElement,\n      showCameraSwitcherInLocalPreview\n    ]);\n\n    return (\n      <Stack\n        className={mergeStyles({ width: '100%', height: '100%' })}\n        /* @conditional-compile-remove(spotlight) */ onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n      >\n        <VideoTile\n          key={userId ?? 'local-video-tile'}\n          userId={userId}\n          renderElement={renderVideoStreamElement}\n          showLabel={showLabel}\n          displayName={displayName}\n          initialsName={initialsName}\n          styles={videoTileStyles}\n          onRenderPlaceholder={onRenderAvatar}\n          isMuted={isMuted}\n          showMuteIndicator={showMuteIndicator}\n          personaMinSize={props.personaMinSize}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={reaction}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          {...videoTileContextualMenuProps}\n          /* @conditional-compile-remove(spotlight) */\n          onLongTouch={() =>\n            setDrawerMenuItemProps(\n              convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n            )\n          }\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        >\n          {\n            /* @conditional-compile-remove(spotlight) */ drawerMenuItemProps.length > 0 && (\n              <Layer hostId={props.drawerMenuHostId}>\n                <Stack styles={drawerMenuWrapperStyles}>\n                  <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n                </Stack>\n              </Layer>\n            )\n          }\n        </VideoTile>\n      </Stack>\n    );\n  }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n  showCameraSwitcherInLocalPreview: boolean;\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  localVideoCameraSwitcherLabel?: string;\n  localVideoSelectedDescription?: string;\n}): JSX.Element => {\n  const {\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    localVideoCameraSwitcherLabel,\n    localVideoSelectedDescription\n  } = props;\n  const ariaDescription =\n    localVideoCameraCycleButtonProps?.selectedCamera &&\n    localVideoSelectedDescription &&\n    _formatString(localVideoSelectedDescription, {\n      cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n    });\n  return (\n    <Stack horizontalAlign=\"end\">\n      {showCameraSwitcherInLocalPreview &&\n        localVideoCameraCycleButtonProps?.cameras !== undefined &&\n        localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n        localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n          <LocalVideoCameraCycleButton\n            cameras={localVideoCameraCycleButtonProps.cameras}\n            selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n            onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n            label={localVideoCameraSwitcherLabel}\n            ariaDescription={ariaDescription}\n          />\n        )}\n    </Stack>\n  );\n};\n\n/* @conditional-compile-remove(spotlight) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n  contextualMenuProps?: IContextualMenuProps,\n  onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n  if (!contextualMenuProps) {\n    return [];\n  }\n  return contextualMenuProps.items.map((item) => {\n    return {\n      itemKey: item.key,\n      text: item.text,\n      iconProps: item.iconProps,\n      disabled: item.disabled,\n      onItemClick: () => {\n        item.onClick?.();\n        onLightDismiss?.();\n      }\n    };\n  });\n};\n"]}

package/dist/dist-esm/react-components/src/components/MentionPopover.d.ts

@@ -66,7 +66,7 @@ export interface MentionLookupOptions {
     /**
      * Optional callback to render an item of the mention suggestions list.
      */
-    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;
+    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
 }
 /**
  * Options to display suggestions in the mention scenario.

package/dist/dist-esm/react-components/src/components/MentionPopover.js

@@ -35,10 +35,7 @@ export const _MentionPopover = (props) => {
         if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
             const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
             if (selectedItem) {
-                selectedItem.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest'
-                });
+                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
             }
         }
     }, [activeSuggestionIndex]);
@@ -53,9 +50,7 @@ export const _MentionPopover = (props) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         const maxWidth = 200;
-        const finalPosition = {
-            maxWidth
-        };
+        const finalPosition = { maxWidth };
         // Figure out whether it will fit horizontally
         const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
         if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
@@ -96,12 +91,18 @@ export const _MentionPopover = (props) => {
         return React.createElement(Persona, Object.assign({}, avatarOptions));
     }, [theme]);
     const defaultOnRenderSuggestionItem = useCallback((suggestion, onSuggestionSelected, active) => {
-        return React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: e => {
+        return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
                 handleOnKeyDown(e);
             }, className: suggestionItemWrapperStyle(theme) },
-            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText)));
-    }, [handleOnKeyDown, theme, /* @conditional-compile-remove(mention) */
-        ids, hoveredSuggestion, personaRenderer]);
+            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
+    }, [
+        handleOnKeyDown,
+        theme,
+        /* @conditional-compile-remove(mention) */
+        ids,
+        hoveredSuggestion,
+        personaRenderer
+    ]);
     const getHeaderTitle = useCallback(() => {
         if (title) {
             return title;
@@ -110,14 +111,16 @@ export const _MentionPopover = (props) => {
         return localeStrings.mentionPopover.mentionPopoverHeader;
         return '';
     }, [localeStrings, title]);
-    return React.createElement("div", { ref: popoverRef }, position && React.createElement(Stack, { "data-testid": 'mention-suggestion-list-container', className: mergeStyles({
+    return (React.createElement("div", { ref: popoverRef }, position && (React.createElement(Stack, { "data-testid": 'mention-suggestion-list-container', className: mergeStyles({
             maxHeight: 212,
             maxWidth: position.maxWidth
         }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
         React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
         React.createElement("div", { className: mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
             const active = index === activeSuggestionIndex;
-            return onRenderSuggestionItem ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active) : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
-        }))));
+            return onRenderSuggestionItem
+                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+        }))))));
 };
 //# sourceMappingURL=MentionPopover.js.map

package/dist/dist-esm/react-components/src/components/MentionPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { mentionPopoverContainerStyle, headerStyleThemed, suggestionItemStackStyle, suggestionItemWrapperStyle, useSuggestionListStyle } from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useDefaultStackStyles } from './styles/Stack.style';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: {\n    top: number;\n    left: number;\n  };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = (useRef() as React.MutableRefObject<HTMLDivElement>);\n  const suggestionsListRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<Position | undefined>();\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n  const suggestionListStyle = useSuggestionListStyle();\n  const defaultStackStyles = useDefaultStackStyles();\n  const dismissPopoverWhenClickingOutside = useCallback((e: MouseEvent) => {\n    const target = (e.target as HTMLElement);\n    if (popoverRef.current && !popoverRef.current.contains(target)) {\n      onDismiss && onDismiss();\n    }\n  }, [onDismiss]);\n  useEffect(() => {\n    if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {\n      const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];\n      if (selectedItem) {\n        selectedItem.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest'\n        });\n      }\n    }\n  }, [activeSuggestionIndex]);\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = {\n      maxWidth\n    };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n  const handleOnKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (e.key) {\n      case 'Escape':\n        onDismiss && onDismiss();\n        break;\n      default:\n        break;\n    }\n  }, [onDismiss]);\n  const personaRenderer = useCallback((displayName: string): JSX.Element => {\n    const avatarOptions = {\n      text: displayName.trim(),\n      size: PersonaSize.size24,\n      initialsColor: theme.palette.neutralLight,\n      initialsTextColor: theme.palette.neutralSecondary,\n      showOverflowTooltip: false,\n      showUnknownPersonaCoin: false\n    };\n    return <Persona {...avatarOptions} />;\n  }, [theme]);\n  const defaultOnRenderSuggestionItem = useCallback((suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n    return <div data-is-focusable={true}\n    /* @conditional-compile-remove(mention) */ data-ui-id={ids.mentionSuggestionItem} key={suggestion.id} onClick={() => onSuggestionSelected(suggestion)} onMouseEnter={() => setHoveredSuggestion(suggestion)} onMouseLeave={() => setHoveredSuggestion(undefined)} onKeyDown={e => {\n      handleOnKeyDown(e);\n    }} className={suggestionItemWrapperStyle(theme)}>\n          <Stack horizontal className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}>\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>;\n  }, [handleOnKeyDown, theme, /* @conditional-compile-remove(mention) */\n  ids, hoveredSuggestion, personaRenderer]);\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n  return <div ref={popoverRef}>\n      {position && <Stack data-testid={'mention-suggestion-list-container'} className={mergeStyles({\n      maxHeight: 212,\n      maxWidth: position.maxWidth\n    }, mentionPopoverContainerStyle(theme), {\n      ...position,\n      position: 'absolute'\n    })}>\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}\n          <div className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}\n      /* @conditional-compile-remove(mention) */ data-ui-id={ids.mentionSuggestionList} ref={suggestionsListRef}>\n            {suggestions.map((suggestion, index) => {\n          const active = index === activeSuggestionIndex;\n          return onRenderSuggestionItem ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active) : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n        })}\n          </div>\n        </Stack>}\n    </div>;\n};"]}
+{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle,\n  useSuggestionListStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useDefaultStackStyles } from './styles/Stack.style';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n  const suggestionsListRef = useRef<HTMLDivElement>(null);\n\n  const [position, setPosition] = useState<Position | undefined>();\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n\n  const suggestionListStyle = useSuggestionListStyle();\n  const defaultStackStyles = useDefaultStackStyles();\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {\n      const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];\n      if (selectedItem) {\n        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }\n  }, [activeSuggestionIndex]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName: string): JSX.Element => {\n      const avatarOptions = {\n        text: displayName.trim(),\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: false\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      {position && (\n        <Stack\n          data-testid={'mention-suggestion-list-container'}\n          className={mergeStyles(\n            {\n              maxHeight: 212,\n              maxWidth: position.maxWidth\n            },\n            mentionPopoverContainerStyle(theme),\n            {\n              ...position,\n              position: 'absolute'\n            }\n          )}\n        >\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}\n          <div\n            className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}\n            /* @conditional-compile-remove(mention) */\n            data-ui-id={ids.mentionSuggestionList}\n            ref={suggestionsListRef}\n          >\n            {suggestions.map((suggestion, index) => {\n              const active = index === activeSuggestionIndex;\n              return onRenderSuggestionItem\n                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n            })}\n          </div>\n        </Stack>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * Props for {@link MessageStatusIndicatorInternal}.
+ *
+ * @internal
+ */
+export interface MessageStatusIconProps {
+    shouldAnnounce: boolean;
+    iconName: string;
+    iconClassName: string;
+    ariaLabel?: string;
+}
+/**
+ * Component to display message status icon
+ *
+ * @internal
+ */
+export declare const MessageStatusIcon: (props: MessageStatusIconProps) => JSX.Element;
+//# sourceMappingURL=MessageStatusIcon.d.ts.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Icon } from '@fluentui/react';
+import React from 'react';
+import LiveMessage from './Announcer/LiveMessage';
+/**
+ * Component to display message status icon
+ *
+ * @internal
+ */
+export const MessageStatusIcon = (props) => {
+    const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
+    return (React.createElement(React.Fragment, null,
+        ariaLabel && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
+        React.createElement("div", { 
+            // make icon accessible
+            tabIndex: 0 },
+            React.createElement(Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
+};
+//# sourceMappingURL=MessageStatusIcon.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACL;QAEG,SAAS,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACnE;YACE,uBAAuB;YACvB,QAAQ,EAAE,CAAC;YAEX,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,eAKH,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAChC,oCAAoC,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,GACxB,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/**\n * Props for {@link MessageStatusIndicatorInternal}.\n *\n * @internal\n */\nexport interface MessageStatusIconProps {\n  shouldAnnounce: boolean;\n  iconName: string;\n  iconClassName: string;\n  ariaLabel?: string;\n}\n\n/**\n * Component to display message status icon\n *\n * @internal\n */\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n  const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;\n\n  return (\n    <>\n      {/* live message is used here so that aria labels are announced on mobile */}\n      {ariaLabel && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n      <div\n        // make icon accessible\n        tabIndex={0}\n      >\n        <Icon\n          role={'status'}\n          // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n          // it has aria-live prop set to `polite` by default.\n          // By setting it to `off` value, we disable live updates when they aren't needed\n          // and keep it available in the accessibility tree\n          aria-live={shouldAnnounce ? 'polite' : 'off'}\n          data-ui-id={'chat-composite-message-status-icon'}\n          aria-label={ariaLabel}\n          iconName={iconName}\n          className={iconClassName}\n        />\n      </div>\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js

@@ -1,13 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { Icon, mergeStyles, TooltipHost } from '@fluentui/react';
-import { _formatString } from "../../../acs-ui-common/src";
-import React, { useState } from 'react';
-import { useLocale } from '../localization';
-import { useTheme } from '../theming';
-import { isDarkThemed } from '../theming/themeUtils';
-import { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';
-import LiveMessage from './Announcer/LiveMessage';
+import React from 'react';
+import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 /**
  * Component to display the status of a sent message.
  *
@@ -16,74 +10,7 @@ import LiveMessage from './Announcer/LiveMessage';
  * @public
  */
 export const MessageStatusIndicator = (props) => {
-    const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;
-    const localeStrings = useLocale().strings.messageStatusIndicator;
-    const [isTooltipToggled, setIsTooltipToggled] = useState(false);
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
-    // Place callout with no gap between it and the button.
-    const calloutProps = {
-        gapSpace: 0,
-        styles: calloutStyle,
-        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
-    };
-    switch (status) {
-        case 'failed':
-            return React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.failedToSendAriaLabel &&
-                    // live message is used here and in the following tooltips so that aria labels are announced on mobile
-                    React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, {
-                        color: theme.palette.redDark
-                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
-        case 'sending':
-            return React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, {
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
-        case 'seen':
-            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
-                // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
-                // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back
-                // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
-                readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {
-                    messageThreadReadCount: `${readCount}`,
-                    remoteParticipantsCount: `${remoteParticipantsCount}`
-                }), onTooltipToggle: () => {
-                    if (onToggleToolTip) {
-                        onToggleToolTip(!isTooltipToggled);
-                        setIsTooltipToggled(!isTooltipToggled);
-                    }
-                } },
-                strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
-        case 'delivered':
-            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
-                strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, ariaLive: "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, {
-                        color: theme.palette.themePrimary
-                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
-        default:
-            return React.createElement(React.Fragment, null);
-    }
-};
-// The TooltipHost root uses display: inline by default.
-// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
-// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = {
-    root: {
-        display: 'inline-block'
-    }
+    const internalProps = Object.assign(Object.assign({}, props), { shouldAnnounce: true });
+    return React.createElement(MessageStatusIndicatorInternal, Object.assign({}, internalProps));
 };
 //# sourceMappingURL=MessageStatusIndicator.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const {\n    status,\n    styles,\n    remoteParticipantsCount,\n    onToggleToolTip,\n    readCount\n  } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  switch (status) {\n    case 'failed':\n      return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.failedToSendAriaLabel &&\n        // live message is used here and in the following tooltips so that aria labels are announced on mobile\n        <LiveMessage message={strings.failedToSendAriaLabel} ariaLive=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.failedToSendAriaLabel} iconName=\"MessageFailed\" className={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n          color: theme.palette.redDark\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'sending':\n      return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} ariaLive=\"polite\" />}\n\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.sendingAriaLabel} iconName=\"MessageSending\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'seen':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n      // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n      // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n      // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n      readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n        messageThreadReadCount: `${readCount}`,\n        remoteParticipantsCount: `${remoteParticipantsCount}`\n      })} onTooltipToggle={() => {\n        if (onToggleToolTip) {\n          onToggleToolTip(!isTooltipToggled);\n          setIsTooltipToggled(!isTooltipToggled);\n        }\n      }}>\n          {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} ariaLive=\"polite\" />}\n\n          <Icon data-ui-id=\"chat-composite-message-status-icon\" role=\"status\" aria-label={strings.seenAriaLabel} iconName=\"MessageSeen\" className={mergeStyles({\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'delivered':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\n          {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} ariaLive=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.deliveredAriaLabel} iconName=\"MessageDelivered\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};"]}
+{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,8BAA8B,EAAuC,MAAM,kCAAkC,CAAC;AAsDvH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,aAAa,mCACd,KAAK,KACR,cAAc,EAAE,IAAI,GACrB,CAAC;IAEF,OAAO,oBAAC,8BAA8B,oBAAK,aAAa,EAAmC,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorInternal, MessageStatusIndicatorInternalProps } from './MessageStatusIndicatorInternal';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const internalProps: MessageStatusIndicatorInternalProps = {\n    ...props,\n    shouldAnnounce: true\n  };\n\n  return <MessageStatusIndicatorInternal {...internalProps}></MessageStatusIndicatorInternal>;\n};\n"]}