@azure/communication-react 1.17.0-alpha-202405290014 → 1.17.0-alpha-202406010014

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js

@@ -75,36 +75,48 @@ export const FluentChatMessageComponent = (props) => {
     const messageRootProps = useMemo(() => {
         return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const avatar = useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        let renderedAvatar;
+        if (onRenderAvatar) {
+            const avatarComponent = onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions);
+            if (!avatarComponent) {
+                return undefined;
+            }
+            else {
+                renderedAvatar = avatarComponent;
+            }
+        }
+        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, renderedAvatar ? renderedAvatar : React.createElement(Persona, Object.assign({}, personaOptions))));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     const messageBodyProps = useMemo(() => {
         return {
             // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
-            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
-            // make body not focusable to remove repetitions from narrators.
-            // inner components are already focusable
-            tabIndex: -1,
-            role: 'none'
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar
+                ? avatar
+                    ? chatMessageRenderStyles.bodyWithoutAvatar
+                    : chatMessageRenderStyles.bodyHiddenAvatar
+                : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {}
         };
     }, [
-        chatMessageRenderStyles.avatarNoOverlap,
-        chatMessageRenderStyles.avatarOverlap,
         chatMessageRenderStyles.bodyCommon,
-        chatMessageRenderStyles.bodyWithAvatar,
         chatMessageRenderStyles.bodyWithoutAvatar,
-        shouldOverlapAvatarAndMessage,
+        chatMessageRenderStyles.bodyHiddenAvatar,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.avatarNoOverlap,
         shouldShowAvatar,
+        avatar,
+        shouldOverlapAvatarAndMessage,
         styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
     ]);
-    const avatar = useMemo(() => {
-        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-        const personaOptions = {
-            hidePersonaDetails: true,
-            size: PersonaSize.size32,
-            text: message.senderDisplayName,
-            showOverflowTooltip: false
-        };
-        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))));
-    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n  gutterWithAvatar,\n  gutterWithHiddenAvatar,\n  useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment,\n    userId,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [onRenderAttachmentDownloads]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMessageComponentAsMessageBubble\n            {...messageProps}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(mention) */\n            mentionDisplayOptions={mentionOptions?.displayOptions}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloadsMemo,\n      userId,\n      shouldOverlapAvatarAndMessage,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions?.displayOptions\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const shouldShowAvatar = useMemo(() => {\n    return message.attached === 'top' || message.attached === false;\n  }, [message.attached]);\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const messageRootProps = useMemo(() => {\n    return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n  const messageBodyProps = useMemo(() => {\n    return {\n      // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.bodyCommon,\n        !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar,\n        shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n        mergeStyles(styles?.chatItemMessageContainer)\n      ),\n      style:\n        styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n      // make body not focusable to remove repetitions from narrators.\n      // inner components are already focusable\n      tabIndex: -1,\n      role: 'none'\n    };\n  }, [\n    chatMessageRenderStyles.avatarNoOverlap,\n    chatMessageRenderStyles.avatarOverlap,\n    chatMessageRenderStyles.bodyCommon,\n    chatMessageRenderStyles.bodyWithAvatar,\n    chatMessageRenderStyles.bodyWithoutAvatar,\n    shouldOverlapAvatarAndMessage,\n    shouldShowAvatar,\n    styles?.chatItemMessageContainer\n  ]);\n\n  const avatar = useMemo(() => {\n    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size32,\n      text: message.senderDisplayName,\n      showOverflowTooltip: false\n    };\n    return (\n      <div className={mergeStyles(chatAvatarStyle)}>\n        {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n      </div>\n    );\n  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n      {messageRenderer({ ...props })}\n    </FluentChatMessage>\n  );\n};\n"]}
+{"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n  gutterWithAvatar,\n  gutterWithHiddenAvatar,\n  useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment,\n    userId,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [onRenderAttachmentDownloads]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMessageComponentAsMessageBubble\n            {...messageProps}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(mention) */\n            mentionDisplayOptions={mentionOptions?.displayOptions}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloadsMemo,\n      userId,\n      shouldOverlapAvatarAndMessage,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions?.displayOptions\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const shouldShowAvatar = useMemo(() => {\n    return message.attached === 'top' || message.attached === false;\n  }, [message.attached]);\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const messageRootProps = useMemo(() => {\n    return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n  const avatar = useMemo(() => {\n    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size32,\n      text: message.senderDisplayName,\n      showOverflowTooltip: false\n    };\n    let renderedAvatar;\n    if (onRenderAvatar) {\n      const avatarComponent = onRenderAvatar?.(message.senderId, personaOptions);\n      if (!avatarComponent) {\n        return undefined;\n      } else {\n        renderedAvatar = avatarComponent;\n      }\n    }\n    return (\n      <div className={mergeStyles(chatAvatarStyle)}>\n        {renderedAvatar ? renderedAvatar : <Persona {...personaOptions} />}\n      </div>\n    );\n  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n  const messageBodyProps = useMemo(() => {\n    return {\n      // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.bodyCommon,\n        !shouldShowAvatar\n          ? avatar\n            ? chatMessageRenderStyles.bodyWithoutAvatar\n            : chatMessageRenderStyles.bodyHiddenAvatar\n          : chatMessageRenderStyles.bodyWithAvatar,\n        shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n        mergeStyles(styles?.chatItemMessageContainer)\n      ),\n      style:\n        styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {}\n    };\n  }, [\n    chatMessageRenderStyles.bodyCommon,\n    chatMessageRenderStyles.bodyWithoutAvatar,\n    chatMessageRenderStyles.bodyHiddenAvatar,\n    chatMessageRenderStyles.bodyWithAvatar,\n    chatMessageRenderStyles.avatarOverlap,\n    chatMessageRenderStyles.avatarNoOverlap,\n    shouldShowAvatar,\n    avatar,\n    shouldOverlapAvatarAndMessage,\n    styles?.chatItemMessageContainer\n  ]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n      {messageRenderer({ ...props })}\n    </FluentChatMessage>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js

@@ -132,12 +132,8 @@ const MessageBubble = (props) => {
                         // react onFocus is called even when nested component receives focus (i.e. it bubbles)
                         // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
                         setFocused(true);
-                    },
-                    // make body not focusable to remove repetitions from narrators.
-                    // inner components are already focusable
-                    role: 'none',
-                    tabIndex: -1
-                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                    }
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
                     children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                     className: mergeClasses(chatMyMessageStyles.menu, 
                     // Make actions menu visible when the message is focused or the flyout is shown

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n  generateCustomizedTimestamp,\n  generateDefaultTimestamp,\n  getMessageBubbleContent,\n  getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to render message attachments in the message component.\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/** @private */\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions,\n    onDisplayDateTimeString,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment\n  } = props;\n\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn\n      ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n      : undefined;\n\n    const customTimestamp = message.createdOn\n      ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n      : '';\n\n    return customTimestamp || defaultTimeStamp;\n  }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message as ChatMessage);\n  }, [message]);\n\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else {\n      return getMessageEditedDetails(message, theme, strings.editedTag);\n    }\n  }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  const getContent = useCallback(() => {\n    return getMessageBubbleContent(\n      message,\n      strings,\n      userId,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionDisplayOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloads,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions,\n    message,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = (\n    <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage\n          attached={attached}\n          key={props.message.messageId}\n          body={{\n            // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n            className: mergeClasses(\n              chatMessageCommonStyles.body,\n              chatMyMessageStyles.body,\n              isBlockedMessage\n                ? chatMessageCommonStyles.blocked\n                : props.message.status === 'failed'\n                ? chatMessageCommonStyles.failed\n                : undefined,\n              attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n              /* @conditional-compile-remove(attachment-upload) */\n              hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined,\n              mergeStyles(messageContainerStyle)\n            ),\n            style: { ...createStyleFromV8Style(messageContainerStyle) },\n            ref: messageRef\n          }}\n          root={{\n            className: chatMyMessageStyles.root,\n            onBlur: (e) => {\n              // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n              // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n              if (chatMessageActionFlyoutTarget?.current) {\n                // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n                return;\n              }\n              const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n              setFocused(shouldPreserveFocusState);\n            },\n            onFocus: () => {\n              // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n              // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n              setFocused(true);\n            },\n            // make body not focusable to remove repetitions from narrators.\n            // inner components are already focusable\n            role: 'none',\n            tabIndex: -1\n          }}\n          data-ui-id=\"chat-composite-message\"\n          author={\n            <Text className={chatMessageDateStyle} tabIndex={0}>\n              {message.senderDisplayName}\n            </Text>\n          }\n          timestamp={\n            <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n              {formattedTimestamp}\n            </Text>\n          }\n          details={getMessageDetails()}\n          actions={{\n            children: actionMenuProps?.children,\n            className: mergeClasses(\n              chatMyMessageStyles.menu,\n              // Make actions menu visible when the message is focused or the flyout is shown\n              focused || chatMessageActionFlyoutTarget?.current\n                ? chatMyMessageStyles.menuVisible\n                : chatMyMessageStyles.menuHidden,\n              attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n            )\n          }}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onClick={() => {\n            if (!wasInteractionByTouch) {\n              return;\n            }\n            // If the message was touched via touch we immediately open the menu\n            // flyout (when using mouse the 3-dot menu that appears on hover\n            // must be clicked to open the flyout).\n            // In doing so here we set the target of the flyout to be the message and\n            // not the 3-dot menu button to position the flyout correctly.\n            setChatMessageActionFlyoutTarget(messageRef);\n            if (message.messageType === 'chat') {\n              props.onActionButtonClick(message, setMessageReadBy);\n            }\n          }}\n        >\n          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
+{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { chatMessageDateStyle, chatMessageFailedTagStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { ChatMessageActionFlyout } from '../ChatMessageActionsFlyout';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n  generateCustomizedTimestamp,\n  generateDefaultTimestamp,\n  getMessageBubbleContent,\n  getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to render message attachments in the message component.\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/** @private */\nconst MessageBubble = (props: ChatMyMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions,\n    onDisplayDateTimeString,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment\n  } = props;\n\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn\n      ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n      : undefined;\n\n    const customTimestamp = message.createdOn\n      ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n      : '';\n\n    return customTimestamp || defaultTimeStamp;\n  }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message as ChatMessage);\n  }, [message]);\n\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else {\n      return getMessageEditedDetails(message, theme, strings.editedTag);\n    }\n  }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  const getContent = useCallback(() => {\n    return getMessageBubbleContent(\n      message,\n      strings,\n      userId,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionDisplayOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloads,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions,\n    message,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = (\n    <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage\n          attached={attached}\n          key={props.message.messageId}\n          body={{\n            // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n            className: mergeClasses(\n              chatMessageCommonStyles.body,\n              chatMyMessageStyles.body,\n              isBlockedMessage\n                ? chatMessageCommonStyles.blocked\n                : props.message.status === 'failed'\n                ? chatMessageCommonStyles.failed\n                : undefined,\n              attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n              /* @conditional-compile-remove(attachment-upload) */\n              hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined,\n              mergeStyles(messageContainerStyle)\n            ),\n            style: { ...createStyleFromV8Style(messageContainerStyle) },\n            ref: messageRef\n          }}\n          root={{\n            className: chatMyMessageStyles.root,\n            onBlur: (e) => {\n              // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n              // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n              if (chatMessageActionFlyoutTarget?.current) {\n                // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n                return;\n              }\n              const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n              setFocused(shouldPreserveFocusState);\n            },\n            onFocus: () => {\n              // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n              // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n              setFocused(true);\n            }\n          }}\n          data-ui-id=\"chat-composite-message\"\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          timestamp={\n            <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n              {formattedTimestamp}\n            </Text>\n          }\n          details={getMessageDetails()}\n          actions={{\n            children: actionMenuProps?.children,\n            className: mergeClasses(\n              chatMyMessageStyles.menu,\n              // Make actions menu visible when the message is focused or the flyout is shown\n              focused || chatMessageActionFlyoutTarget?.current\n                ? chatMyMessageStyles.menuVisible\n                : chatMyMessageStyles.menuHidden,\n              attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n            )\n          }}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onClick={() => {\n            if (!wasInteractionByTouch) {\n              return;\n            }\n            // If the message was touched via touch we immediately open the menu\n            // flyout (when using mouse the 3-dot menu that appears on hover\n            // must be clicked to open the flyout).\n            // In doing so here we set the target of the flyout to be the message and\n            // not the 3-dot menu button to position the flyout correctly.\n            setChatMessageActionFlyoutTarget(messageRef);\n            if (message.messageType === 'chat') {\n              props.onActionButtonClick(message, setMessageReadBy);\n            }\n          }}\n        >\n          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js

@@ -101,11 +101,7 @@ export const FluentChatMyMessageComponent = (props) => {
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer]);
     const myMessageBodyProps = useMemo(() => {
         return {
-            className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
-            // make body not focusable to remove repetitions from narrators.
-            // inner components are already focusable
-            tabIndex: -1,
-            role: 'none'
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)
         };
     }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);
     const myMessageStatusIcon = useMemo(() => {

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    showMessageStatus,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    onActionButtonClick,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(rich-text-editor) */\n    richTextEditor\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads\n  ]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMyMessageComponent\n            {...messageProps}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            remoteParticipantsCount={participantCount ? participantCount - 1 : 0}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            onRenderAvatar={onRenderAvatar}\n            showMessageStatus={showMessageStatus}\n            messageStatus={messageProps.message.status}\n            onActionButtonClick={onActionButtonClick}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(mention) */\n            mentionOptions={mentionOptions}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(rich-text-editor) */\n            richTextEditor={richTextEditor}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      onActionButtonClick,\n      onRenderAvatar,\n      participantCount,\n      shouldOverlapAvatarAndMessage,\n      showMessageStatus,\n      userId,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloadsMemo,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      new Date().toDateString(),\n      /* @conditional-compile-remove(rich-text-editor) */\n      richTextEditor\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const messageStatusRenderer = useCallback(\n    (\n      onRenderMessageStatus:\n        | ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null)\n        | undefined,\n      defaultStatusRenderer: (\n        message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n        participantCount: number,\n        readCount: number,\n        status?: MessageStatus\n      ) => JSX.Element,\n      showMessageStatus?: boolean,\n      participantCount?: number,\n      readCount?: number\n    ) => {\n      return showMessageStatus && statusToRender ? (\n        onRenderMessageStatus ? (\n          onRenderMessageStatus({ status: message.status })\n        ) : (\n          defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status)\n        )\n      ) : (\n        <div className={mergeStyles(noMessageStatusStyle)} />\n      );\n    },\n    [message, statusToRender]\n  );\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const myMessageRootProps = useMemo(() => {\n    return {\n      // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.rootMyMessage,\n        chatMessageRenderStyles.rootCommon,\n        mergeStyles(styles?.myChatItemMessageContainer)\n      ),\n      style:\n        styles?.myChatItemMessageContainer !== undefined\n          ? createStyleFromV8Style(styles?.myChatItemMessageContainer)\n          : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n      // make body not focusable to remove repetitions from narrators.\n      // inner components are already focusable\n      tabIndex: -1,\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n\n  const myMessageStatusIcon = useMemo(() => {\n    return (\n      <div\n        className={mergeStyles(\n          { paddingLeft: '0.25rem' },\n          styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : ''\n        )}\n      >\n        {message.status\n          ? messageStatusRenderer(\n              onRenderMessageStatus,\n              defaultStatusRenderer,\n              showMessageStatus,\n              participantCount,\n              readCount\n            )\n          : undefined}\n      </div>\n    );\n  }, [\n    defaultStatusRenderer,\n    message.mine,\n    message.status,\n    messageStatusRenderer,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    showMessageStatus,\n    styles\n  ]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Status and avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMyMessage\n      attached={attached}\n      root={myMessageRootProps}\n      body={myMessageBodyProps}\n      statusIcon={myMessageStatusIcon}\n    >\n      {messageRenderer({ ...props })}\n    </FluentChatMyMessage>\n  );\n};\n"]}
+{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types';\nimport { noMessageStatusStyle, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';\nimport { mergeStyles } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../../MessageStatusIndicator';\nimport { ChatMyMessageComponent } from './ChatMyMessageComponent';\nimport { ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    showMessageStatus,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    onActionButtonClick,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(rich-text-editor) */\n    richTextEditor\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads\n  ]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMyMessageComponent\n            {...messageProps}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            remoteParticipantsCount={participantCount ? participantCount - 1 : 0}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            onRenderAvatar={onRenderAvatar}\n            showMessageStatus={showMessageStatus}\n            messageStatus={messageProps.message.status}\n            onActionButtonClick={onActionButtonClick}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(mention) */\n            mentionOptions={mentionOptions}\n            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n            actionsForAttachment={actionsForAttachment}\n            /* @conditional-compile-remove(rich-text-editor) */\n            richTextEditor={richTextEditor}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      onActionButtonClick,\n      onRenderAvatar,\n      participantCount,\n      shouldOverlapAvatarAndMessage,\n      showMessageStatus,\n      userId,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      onRenderAttachmentDownloadsMemo,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      actionsForAttachment,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      new Date().toDateString(),\n      /* @conditional-compile-remove(rich-text-editor) */\n      richTextEditor\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const messageStatusRenderer = useCallback(\n    (\n      onRenderMessageStatus:\n        | ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null)\n        | undefined,\n      defaultStatusRenderer: (\n        message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n        participantCount: number,\n        readCount: number,\n        status?: MessageStatus\n      ) => JSX.Element,\n      showMessageStatus?: boolean,\n      participantCount?: number,\n      readCount?: number\n    ) => {\n      return showMessageStatus && statusToRender ? (\n        onRenderMessageStatus ? (\n          onRenderMessageStatus({ status: message.status })\n        ) : (\n          defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status)\n        )\n      ) : (\n        <div className={mergeStyles(noMessageStatusStyle)} />\n      );\n    },\n    [message, statusToRender]\n  );\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const myMessageRootProps = useMemo(() => {\n    return {\n      // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.rootMyMessage,\n        chatMessageRenderStyles.rootCommon,\n        mergeStyles(styles?.myChatItemMessageContainer)\n      ),\n      style:\n        styles?.myChatItemMessageContainer !== undefined\n          ? createStyleFromV8Style(styles?.myChatItemMessageContainer)\n          : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n\n  const myMessageStatusIcon = useMemo(() => {\n    return (\n      <div\n        className={mergeStyles(\n          { paddingLeft: '0.25rem' },\n          styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : ''\n        )}\n      >\n        {message.status\n          ? messageStatusRenderer(\n              onRenderMessageStatus,\n              defaultStatusRenderer,\n              showMessageStatus,\n              participantCount,\n              readCount\n            )\n          : undefined}\n      </div>\n    );\n  }, [\n    defaultStatusRenderer,\n    message.mine,\n    message.status,\n    messageStatusRenderer,\n    onRenderMessageStatus,\n    participantCount,\n    readCount,\n    showMessageStatus,\n    styles\n  ]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Status and avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMyMessage\n      attached={attached}\n      root={myMessageRootProps}\n      body={myMessageBodyProps}\n      statusIcon={myMessageStatusIcon}\n    >\n      {messageRenderer({ ...props })}\n    </FluentChatMyMessage>\n  );\n};\n"]}

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

@@ -50,7 +50,7 @@ export const ParticipantItem = (props) => {
     };
     const menuButton = useMemo(() => (React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary }), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
         React.createElement(Icon, { iconName: "ParticipantItemOptionsHovered", className: mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {}) }))), [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]);
-    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React.createElement("div", { ref: containerRef, role: 'menuitem', "aria-disabled": (menuItems && menuItems.length > 0) || props.onClick ? false : true, "data-is-focusable": true, "data-ui-id": "participant-item", className: mergeStyles(participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  displayNoneStyle,\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && menuItems?.length > 0;\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () =>\n      mergeStyles(\n        iconContainerStyle,\n        { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n        styles?.iconContainer\n      ),\n    [theme.palette.neutralSecondary, styles?.iconContainer]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName=\"ParticipantItemOptionsHovered\"\n          className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n        />\n      </Stack>\n    ),\n    [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n        if (!menuHidden) {\n          onDismissMenu();\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? (\n            <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text>\n          ) : (\n            <>\n              {menuItems && menuItems.length > 0 && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    items={menuItems}\n                    hidden={menuHidden}\n                    target={containerRef}\n                    onItemClick={onDismissMenu}\n                    onDismiss={onDismissMenu}\n                    directionalHint={DirectionalHint.bottomRightEdge}\n                    className={contextualMenuStyle}\n                    calloutProps={{\n                      preventDismissOnEvent\n                    }}\n                  />\n                </>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n"]}
+{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenu,\n  DirectionalHint,\n  Icon,\n  IContextualMenuItem,\n  IStyle,\n  mergeStyles,\n  Persona,\n  PersonaPresence,\n  PersonaSize,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n  displayNoneStyle,\n  iconContainerStyle,\n  iconStyles,\n  meContainerStyle,\n  menuButtonContainerStyle,\n  participantItemContainerStyle,\n  participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n  /** Styles for the avatar. */\n  avatar?: IStyle;\n  /** Styles for the (You) string. */\n  me?: IStyle;\n  /** Styles for the container of the icon. */\n  iconContainer?: IStyle;\n  /** Styles for the menu. */\n  menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n  /** String shown when participant is me */\n  isMeText: string;\n  /** String shown when hovering over menu button */\n  menuTitle: string;\n  /** Label for the remove button in participant menu  */\n  removeButtonLabel: string;\n  /** Label for the sharing icon in participant state stack  */\n  sharingIconLabel: string;\n  /** Label for the muted icon in participant state stack  */\n  mutedIconLabel: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Ringing` */\n  participantStateRinging?: string;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /** String shown when `participantState` is `Hold` */\n  participantStateHold?: string;\n  /* @conditional-compile-remove(hide-attendee-name) */\n  /** String for the attendee role */\n  attendeeRole: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n  /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n  userId?: string;\n  /** Name of participant. */\n  displayName?: string;\n  /** Optional indicator to show participant is the user. */\n  me?: boolean;\n  /** Optional callback returning a JSX element to override avatar. */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional array of IContextualMenuItem for contextual menu. */\n  menuItems?: IContextualMenuItem[];\n  /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n  onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n  /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n  presence?: PersonaPresence;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: ParticipantItemStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<ParticipantItemStrings>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: (props?: ParticipantItemProps) => void;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Optional value to determine and display a participants connection status.\n   * For example, `Connecting`, `Ringing` etc.\n   * The actual text that is displayed is determined by the localized string\n   * corresponding to the provided participant state.\n   * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Optional aria property that prefixes the ParticipantItems aria content\n   * Takes in a unique id value of the element you would like to be read before the ParticipantItem.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n  const {\n    userId,\n    displayName,\n    onRenderAvatar,\n    menuItems,\n    onRenderIcon,\n    presence,\n    styles,\n    me,\n    onClick,\n    showParticipantOverflowTooltip\n  } = props;\n  const [itemHovered, setItemHovered] = useState<boolean>(false);\n  const [menuHidden, setMenuHidden] = useState<boolean>(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.participantItem;\n  const ids = useIdentifiers();\n  const uniqueId = useId();\n\n  const strings = { ...localeStrings, ...props.strings };\n  const participantStateString = participantStateStringTrampoline(props, strings);\n  const showMenuIcon = !participantStateString && (itemHovered || !menuHidden) && menuItems && menuItems?.length > 0;\n\n  // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n  const meAvatarText = displayName?.trim() || '';\n\n  const avatarOptions = {\n    text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n    size: PersonaSize.size32,\n    presence: presence,\n    initialsTextColor: 'white',\n    showOverflowTooltip: showParticipantOverflowTooltip,\n    showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n  };\n\n  const avatar = onRenderAvatar ? (\n    onRenderAvatar(userId ?? '', avatarOptions)\n  ) : (\n    <Persona\n      className={mergeStyles(\n        {\n          // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n          lineHeight: '1.15rem'\n        },\n        styles?.avatar\n      )}\n      {...avatarOptions}\n    />\n  );\n\n  const meTextStyle = useMemo(\n    () => mergeStyles(meContainerStyle, { color: theme.palette.neutralSecondary }, styles?.me),\n    [theme.palette.neutralSecondary, styles?.me]\n  );\n  const contextualMenuStyle = useMemo(\n    () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n    [theme.palette.neutralLighterAlt, styles?.menu]\n  );\n  const infoContainerStyle = useMemo(\n    () =>\n      mergeStyles(\n        iconContainerStyle,\n        { color: theme.palette.neutralSecondary, marginLeft: 'auto' },\n        styles?.iconContainer\n      ),\n    [theme.palette.neutralSecondary, styles?.iconContainer]\n  );\n\n  const onDismissMenu = (): void => {\n    setItemHovered(false);\n    setMenuHidden(true);\n  };\n\n  const menuButton = useMemo(\n    () => (\n      <Stack\n        horizontal={true}\n        horizontalAlign=\"end\"\n        className={mergeStyles(menuButtonContainerStyle, { color: theme.palette.neutralPrimary })}\n        title={strings.menuTitle}\n        data-ui-id={ids.participantItemMenuButton}\n      >\n        <Icon\n          iconName=\"ParticipantItemOptionsHovered\"\n          className={mergeStyles(iconStyles, !showMenuIcon ? displayNoneStyle : {})}\n        />\n      </Stack>\n    ),\n    [theme.palette.neutralPrimary, strings.menuTitle, ids.participantItemMenuButton, showMenuIcon]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      role={'menuitem'}\n      aria-disabled={(menuItems && menuItems.length > 0) || props.onClick ? false : true}\n      data-is-focusable={true}\n      data-ui-id=\"participant-item\"\n      className={mergeStyles(\n        participantItemContainerStyle({ clickable: !!menuItems && menuItems.length > 0 }),\n        styles?.root\n      )}\n      onMouseEnter={() => setItemHovered(true)}\n      onMouseLeave={() => setItemHovered(false)}\n      onClick={() => {\n        if (!participantStateString) {\n          setItemHovered(true);\n          setMenuHidden(false);\n          onClick?.(props);\n        }\n        if (!menuHidden) {\n          onDismissMenu();\n        }\n      }}\n      tabIndex={0}\n    >\n      <Stack\n        horizontal\n        className={mergeStyles({\n          flexGrow: 1,\n          maxWidth: '100%',\n          alignItems: 'center'\n        })}\n        id={uniqueId}\n        aria-labelledby={`${props.ariaLabelledBy} ${uniqueId}`}\n      >\n        {avatar}\n        {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n        <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n          {!showMenuIcon && onRenderIcon && onRenderIcon(props)}\n          {/* When the participantStateString has a value, we don't show the menu  */}\n          {!me && participantStateString ? (\n            <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n              {participantStateString}\n            </Text>\n          ) : (\n            <>\n              {menuItems && menuItems.length > 0 && (\n                <>\n                  {menuButton}\n                  <ContextualMenu\n                    items={menuItems}\n                    hidden={menuHidden}\n                    target={containerRef}\n                    onItemClick={onDismissMenu}\n                    onDismiss={onDismissMenu}\n                    directionalHint={DirectionalHint.bottomRightEdge}\n                    className={contextualMenuStyle}\n                    calloutProps={{\n                      preventDismissOnEvent\n                    }}\n                  />\n                </>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\nconst participantStateStringTrampoline = (\n  props: ParticipantItemProps,\n  strings: ParticipantItemStrings\n): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n"]}

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

@@ -63,6 +63,8 @@ export type ParticipantListProps = {
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
     /** Optional callback when rendered ParticipantItem is clicked */
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
+    /** Optional callback to render a context menu to mute a participant */
+    onMuteParticipant?: (userId: string) => Promise<void>;
     styles?: ParticipantListStyles;
     /** Optional value to determine if the tooltip should be shown for participants or not */
     showParticipantOverflowTooltip?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  let displayName = participant.displayName;\n\n  /* @conditional-compile-remove(hide-attendee-name) */\n  const formatDisplayName = (): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n    }\n    return displayName;\n  };\n  /* @conditional-compile-remove(hide-attendee-name) */\n  displayName = formatDisplayName();\n\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.raisedHand && (\n              <Stack\n                horizontal={true}\n                tokens={{ childrenGap: '0.2rem' }}\n                style={{\n                  alignItems: 'center',\n                  padding: '0.1rem 0.2rem',\n                  backgroundColor: theme?.palette.neutralLighter,\n                  borderRadius: '0.3rem'\n                }}\n              >\n                {callingParticipant.raisedHand.raisedHandOrderPosition && (\n                  <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>\n                )}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>\n            )}\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n            {\n              /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (\n                <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n              )\n            }\n          </Stack>\n        )\n      : () => null;\n\n  const onRenderAvatarWithRaiseHand =\n    callingParticipant?.raisedHand && onRenderAvatar\n      ? (\n          userId?: string,\n          options?: CustomAvatarOptions,\n          defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n        ) =>\n          onRenderAvatar(\n            userId,\n            { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n            defaultOnRender\n          )\n      : onRenderAvatar;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatarWithRaiseHand}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  sortParticipants(displayedParticipants);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\n      const participantIsRemovable = participant.isRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: participantItemStrings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          iconProps: {\n            iconName: 'ContextMenuRemoveParticipant',\n            styles: { root: { lineHeight: 0 } }\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack,\n  Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n  /**\n   * String for rendering the count of participants not contained in the displayed participant list\n   */\n  overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /* @conditional-compile-remove(soft-mute) */\n  /** Optional callback to render a context menu to mute a participant */\n  onMuteParticipant?: (userId: string) => Promise<void>;\n  styles?: ParticipantListStyles;\n  /** Optional value to determine if the tooltip should be shown for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Total number of people in the call. This number can be larger than the remote participant count. */\n  totalParticipantCount?: number;\n  /* @conditional-compile-remove(total-participant-count) */\n  /** Strings for the participant list */\n  strings?: ParticipantListStrings;\n  /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n  participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean,\n  participantAriaLabelledBy?: string,\n  theme?: Theme\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    presence = PersonaPresence.none;\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  let displayName = participant.displayName;\n\n  /* @conditional-compile-remove(hide-attendee-name) */\n  const formatDisplayName = (): string | undefined => {\n    if (displayName && strings.attendeeRole) {\n      return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n    }\n    return displayName;\n  };\n  /* @conditional-compile-remove(hide-attendee-name) */\n  displayName = formatDisplayName();\n\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted || callingParticipant?.raisedHand\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.raisedHand && (\n              <Stack\n                horizontal={true}\n                tokens={{ childrenGap: '0.2rem' }}\n                style={{\n                  alignItems: 'center',\n                  padding: '0.1rem 0.2rem',\n                  backgroundColor: theme?.palette.neutralLighter,\n                  borderRadius: '0.3rem'\n                }}\n              >\n                {callingParticipant.raisedHand.raisedHandOrderPosition && (\n                  <Stack.Item>\n                    <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n                  </Stack.Item>\n                )}\n                <Stack.Item>\n                  <RaisedHandIcon />\n                </Stack.Item>\n              </Stack>\n            )}\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n            {\n              /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (\n                <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n              )\n            }\n          </Stack>\n        )\n      : () => null;\n\n  const onRenderAvatarWithRaiseHand =\n    callingParticipant?.raisedHand && onRenderAvatar\n      ? (\n          userId?: string,\n          options?: CustomAvatarOptions,\n          defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n        ) =>\n          onRenderAvatar(\n            userId,\n            { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n            defaultOnRender\n          )\n      : onRenderAvatar;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatarWithRaiseHand}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n      ariaLabelledBy={participantAriaLabelledBy}\n    />\n  );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n  const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n    return 'raisedHand' in participant;\n  };\n\n  participants.sort((a, b) => {\n    if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n      return 0;\n    }\n    const callA = a as CallParticipantListParticipant;\n    const callB = b as CallParticipantListParticipant;\n    if (callA.raisedHand && callB.raisedHand) {\n      return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n    } else if (callA.raisedHand) {\n      return -1;\n    } else if (callB.raisedHand) {\n      return 1;\n    }\n    return 0;\n  });\n  return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip,\n    /* @conditional-compile-remove(total-participant-count) */\n    totalParticipantCount,\n    /* @conditional-compile-remove(total-participant-count) */\n    strings,\n    participantAriaLabelledBy\n  } = props;\n\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const participantItemStrings = useLocale().strings.participantItem;\n  /* @conditional-compile-remove(total-participant-count) */\n  const participantListStrings = useLocale().strings.ParticipantList;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  sortParticipants(displayedParticipants);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n\n      const participantIsRemovable = participant.isRemovable;\n      if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n        menuItems.push({\n          key: 'remove',\n          text: participantItemStrings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          iconProps: {\n            iconName: 'ContextMenuRemoveParticipant',\n            styles: { root: { lineHeight: 0 } }\n          },\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      participantItemStrings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n\n  /* @conditional-compile-remove(total-participant-count) */\n  const overflowParticipantCountString =\n    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n  return (\n    <Stack\n      data-ui-id={ids.participantList}\n      className={mergeStyles(participantListStyle, props.styles?.root)}\n      role={'menu'}\n    >\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              participantItemStrings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip,\n              participantAriaLabelledBy,\n              theme\n            )\n      )}\n      {\n        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n          totalParticipantCount &&\n          totalParticipantCount > displayedParticipants.length && (\n            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n              {_formatString(overflowParticipantCountString, {\n                overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n              })}\n            </Text>\n          )\n      }\n    </Stack>\n  );\n};\n"]}

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

@@ -38,6 +38,7 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     onStartSpotlight?: (userIds: string[]) => void;
     onStopSpotlight?: (userIds: string[]) => void;
     maxParticipantsToSpotlight?: number;
+    onMuteParticipant?: (userId: string) => void;
     disablePinMenuItem?: boolean;
     toggleAnnouncerString?: (announcerString: string) => void;
     reactionResources?: ReactionResources;

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

@@ -27,7 +27,8 @@ export const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId } = props;
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(soft-mute) */ onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -67,7 +68,8 @@ export const _RemoteVideoTile = React.memo((props) => {
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(soft-mute) */ onMuteParticipant
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {