@azure/communication-react 1.17.0-beta.1 → 1.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.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, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } 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, MessageOptions } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\ntype ChatMyMessageComponentProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: UpdateMessageCallback;\n  onCancelEditMessage?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string, /* @conditional-compile-remove(attachment-upload) */\n  options?: MessageOptions) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /* @conditional-compile-remove(date-time-customization) */\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 lookup suggestions and display mentions in the mention scenario.\n   * @beta\n   */\n  mentionOptions?: MentionOptions;\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   * @beta\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   * @beta\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /* @conditional-compile-remove(rich-text-editor) */\n  /**\n   * Optional flag to enable rich text editor.\n   * @beta\n   */\n  richTextEditor?: boolean;\n};\n\n/**\n * @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n  const {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    /* @conditional-compile-remove(attachment-upload) */\n    const messageOptions = {\n      attachments: `attachments` in message ? message.attachments : undefined\n    };\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '', /* @conditional-compile-remove(attachment-upload) */\n    messageOptions);\n  }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);\n  const onSubmitHandler = useCallback(\n  // due to a bug in babel, we can't use arrow function here\n  // affecting conditional-compile-remove(attachment-upload)\n  async function (text: string, /* @conditional-compile-remove(attachment-upload) */\n  attachments?: AttachmentMetadata[] | undefined) {\n    /* @conditional-compile-remove(attachment-upload) */\n    if (`attachments` in message && attachments) {\n      message.attachments = attachments;\n    }\n    props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, /* @conditional-compile-remove(attachment-upload) */\n    {\n      attachments: attachments\n    }));\n    setIsEditing(false);\n  }, [message, props]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }}\n    /* @conditional-compile-remove(mention) */ mentionLookupOptions={props.mentionOptions?.lookupOptions}\n    /* @conditional-compile-remove(rich-text-editor) */ richTextEditor={props.richTextEditor} />;\n  } else {\n    return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar}\n    /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString={props.onDisplayDateTimeString} strings={props.strings} inlineImageOptions={props.inlineImageOptions}\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions={props.mentionOptions?.displayOptions} />;\n  }\n};"]}
+{"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.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, useState } from 'react';\nimport { MessageThreadStrings, UpdateMessageCallback } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\nimport { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';\ntype ChatMyMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: UpdateMessageCallback;\n  onCancelEditMessage?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to render message attachments in the message component.\n   * @beta\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to define custom actions for attachments.\n   * @beta\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/**\n * @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n  const {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);\n  const onSubmitHandler = useCallback(\n  // due to a bug in babel, we can't use arrow function here\n  // affecting conditional-compile-remove(attachment-upload)\n  async function (text: string) {\n    props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text));\n    setIsEditing(false);\n  }, [message, props]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBoxPicker message={message} strings={props.strings} onSubmit={onSubmitHandler} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }} />;\n  } else {\n    return <ChatMyMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} strings={props.strings} inlineImageOptions={props.inlineImageOptions} />;\n  }\n};"]}

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

@@ -1,14 +1,12 @@
 import React from 'react';
 import { InlineImageOptions } from '../ChatMessageContent';
 import { ChatMessage } from '../../../types/ChatMessage';
-import { BlockedMessage } from '../../../types/ChatMessage';
 import { MessageThreadStrings } from '../../MessageThread';
 import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';
 import { AttachmentMenuAction } from '../../../types/Attachment';
 import { AttachmentMetadata } from "../../../../../acs-ui-common/src";
-import { MentionDisplayOptions } from '../../MentionPopover';
 type ChatMyMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;
@@ -38,11 +36,6 @@ type ChatMyMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to display suggestions in the mention scenario.
-     * @internal
-     */
-    mentionDisplayOptions?: MentionDisplayOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta

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

@@ -13,20 +13,16 @@ import { createStyleFromV8Style } from '../../styles/v8StyleShim';
 import { mergeClasses } from '@fluentui/react-components';
 import { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
 import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
-/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-import { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
 /** @private */
 const MessageBubble = (props) => {
     var _a;
     const ids = useIdentifiers();
     const theme = useTheme();
     const locale = useLocale();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions, 
-    /* @conditional-compile-remove(mention) */
-    mentionDisplayOptions, onDisplayDateTimeString, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, inlineImageOptions, onDisplayDateTimeString, 
+    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
     onRenderAttachmentDownloads, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
     actionsForAttachment } = props;
     const formattedTimestamp = useMemo(() => {
         const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
@@ -43,7 +39,7 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -63,10 +59,6 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    /* @conditional-compile-remove(attachment-upload) */
-    const hasMultipleAttachments = useMemo(() => {
-        return doesMessageContainMultipleAttachments(message);
-    }, [message]);
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
             return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
@@ -76,9 +68,9 @@ const MessageBubble = (props) => {
         }
     }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = useCallback(() => {
-        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @conditional-compile-remove(mention) */ mentionDisplayOptions, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment);
-    }, [/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment, inlineImageOptions, /* @conditional-compile-remove(mention) */ mentionDisplayOptions, message, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads, strings, userId]);
-    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ actionsForAttachment);
+    }, [/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ actionsForAttachment, inlineImageOptions, message, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads, strings, userId]);
+    const isBlockedMessage = false;
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
@@ -86,7 +78,7 @@ const MessageBubble = (props) => {
         React.createElement("div", { key: props.message.messageId },
             React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                     // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, /* @conditional-compile-remove(attachment-upload) */ hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined, mergeStyles(messageContainerStyle)),
+                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {
@@ -105,12 +97,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":["../../../../../../../preprocess-dist/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 { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\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: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => 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  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  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\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<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{\n    id: string;\n    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  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  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  const getContent = useCallback(() => {\n    return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentDownloads, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    actionsForAttachment);\n  }, [/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */actionsForAttachment, inlineImageOptions, /* @conditional-compile-remove(mention) */mentionDisplayOptions, message, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */onRenderAttachmentDownloads, strings, userId]);\n  const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n        // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n        className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, /* @conditional-compile-remove(attachment-upload) */\n        hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined, mergeStyles(messageContainerStyle)),\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        },\n        ref: messageRef\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      }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle} tabIndex={0}>\n              {message.senderDisplayName}\n            </Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n              {formattedTimestamp}\n            </Text>} details={getMessageDetails()} actions={{\n        children: actionMenuProps?.children,\n        className: mergeClasses(chatMyMessageStyles.menu,\n        // Make actions menu visible when the message is focused or the flyout is shown\n        focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n      }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} 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          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n    </>;\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}
+{"version":3,"file":"ChatMyMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { chatMessageActionMenuProps } from '../ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMenuAction } from '../../../types/Attachment';\n/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMyMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';\ntype ChatMyMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage;\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: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => 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  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  /**\n   * Optional callback to render message attachments in the message component.\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\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  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    onDisplayDateTimeString,\n    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    onRenderAttachmentDownloads,\n    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    actionsForAttachment\n  } = props;\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;\n    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString) : '';\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<React.MutableRefObject<HTMLElement | null> | undefined>(undefined);\n  const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;\n  const [messageReadBy, setMessageReadBy] = useState<{\n    id: string;\n    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  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  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  const getContent = useCallback(() => {\n    return getMessageBubbleContent(message, strings, userId, inlineImageOptions, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    onRenderAttachmentDownloads, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    actionsForAttachment);\n  }, [/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */actionsForAttachment, inlineImageOptions, message, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */onRenderAttachmentDownloads, strings, userId]);\n  const isBlockedMessage = false;\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = <>\n      <div key={props.message.messageId}>\n        <ChatMyMessage attached={attached} key={props.message.messageId} body={{\n        // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n        className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),\n        style: {\n          ...createStyleFromV8Style(messageContainerStyle)\n        },\n        ref: messageRef\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      }} data-ui-id=\"chat-composite-message\" author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>} timestamp={<Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n              {formattedTimestamp}\n            </Text>} details={getMessageDetails()} actions={{\n        children: actionMenuProps?.children,\n        className: mergeClasses(chatMyMessageStyles.menu,\n        // Make actions menu visible when the message is focused or the flyout is shown\n        focused || chatMessageActionFlyoutTarget?.current ? chatMyMessageStyles.menuVisible : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)\n      }} onTouchStart={() => setWasInteractionByTouch(true)} onPointerDown={() => setWasInteractionByTouch(false)} onKeyDown={() => setWasInteractionByTouch(false)} 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          {getContent()}\n        </ChatMyMessage>\n      </div>\n      {chatActionsEnabled && <ChatMessageActionFlyout hidden={!chatMessageActionFlyoutTarget} target={chatMessageActionFlyoutTarget} increaseFlyoutItemSize={wasInteractionByTouch} onDismiss={onActionFlyoutDismiss} onEditClick={onEditClick} onRemoveClick={onRemoveClick} onResendClick={onResendClick} strings={strings} messageReadBy={messageReadBy} messageStatus={messageStatus ?? 'failed'} remoteParticipantsCount={remoteParticipantsCount} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} />}\n    </>;\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble);"]}

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

@@ -17,45 +17,32 @@ import { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils'
  * @private
  */
 export const FluentChatMyMessageComponent = (props) => {
-    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString, inlineImageOptions, 
-    /* @conditional-compile-remove(mention) */
-    mentionOptions, userId, defaultStatusRenderer, statusToRender, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, inlineImageOptions, userId, defaultStatusRenderer, statusToRender, 
+    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
     actionsForAttachment, 
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-    onRenderAttachmentDownloads, 
-    /* @conditional-compile-remove(rich-text-editor) */
-    richTextEditor } = props;
+    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
+    onRenderAttachmentDownloads } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
-    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
     const onRenderAttachmentDownloadsMemo = useMemo(() => {
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+        /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
         return onRenderAttachmentDownloads;
         return undefined;
-    }, [/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads]);
+    }, [/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+        if (messageProps.message.messageType === 'chat') {
             return React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { 
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads: onRenderAttachmentDownloadsMemo, 
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, 
-                /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
-                /* @conditional-compile-remove(mention) */ mentionOptions: mentionOptions, 
-                /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment: actionsForAttachment, 
-                /* @conditional-compile-remove(rich-text-editor) */ richTextEditor: richTextEditor }));
+                /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads: onRenderAttachmentDownloadsMemo, 
+                /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, inlineImageOptions: inlineImageOptions, actionsForAttachment: actionsForAttachment }));
         }
         return React.createElement(React.Fragment, null);
-    }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString, inlineImageOptions, /* @conditional-compile-remove(mention) */
-        mentionOptions, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-        onRenderAttachmentDownloadsMemo, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
+    }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
+        onRenderAttachmentDownloadsMemo, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
         actionsForAttachment,
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        new Date().toDateString(), /* @conditional-compile-remove(rich-text-editor) */
-        richTextEditor]);
+        new Date().toDateString()]);
     const messageRenderer = useCallback((messageProps) => {
         return onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign({}, messageProps)) : onRenderMessage(messageProps, defaultChatMessageRenderer);
     }, [defaultChatMessageRenderer, onRenderMessage]);
@@ -77,11 +64,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":["../../../../../../../preprocess-dist/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  }, [/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */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((messageProps: MessageProps) => {\n    if (messageProps.message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */messageProps.message.messageType === 'blocked') {\n      return <ChatMyMessageComponent {...messageProps}\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick}\n      /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString={onDisplayDateTimeString} inlineImageOptions={inlineImageOptions}\n      /* @conditional-compile-remove(mention) */ mentionOptions={mentionOptions}\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ actionsForAttachment={actionsForAttachment}\n      /* @conditional-compile-remove(rich-text-editor) */ richTextEditor={richTextEditor} />;\n    }\n    return <></>;\n  }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, /* @conditional-compile-remove(date-time-customization) */\n  onDisplayDateTimeString, inlineImageOptions, /* @conditional-compile-remove(mention) */\n  mentionOptions, /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentDownloadsMemo, /* @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(), /* @conditional-compile-remove(rich-text-editor) */\n  richTextEditor]);\n  const messageRenderer = useCallback((messageProps: MessageProps) => {\n    return onRenderMessage === undefined ? defaultChatMessageRenderer({\n      ...messageProps\n    }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n  }, [defaultChatMessageRenderer, onRenderMessage]);\n  const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n    return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n      status: message.status\n    }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n  }, [message, statusToRender]);\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\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(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n      style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\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  const myMessageStatusIcon = useMemo(() => {\n    return <div className={mergeStyles({\n      paddingLeft: '0.25rem'\n    }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n        {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n      </div>;\n  }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\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 <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMyMessage>;\n};"]}
+{"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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';\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    inlineImageOptions,\n    userId,\n    defaultStatusRenderer,\n    statusToRender,\n    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    actionsForAttachment,\n    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    onRenderAttachmentDownloads\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n  /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentDownloadsMemo = useMemo(() => {\n    /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n    return onRenderAttachmentDownloads;\n    return undefined;\n  }, [/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */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((messageProps: MessageProps) => {\n    if (messageProps.message.messageType === 'chat') {\n      return <ChatMyMessageComponent {...messageProps}\n      /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n      /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */ strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} inlineImageOptions={inlineImageOptions} /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n      actionsForAttachment={actionsForAttachment} />;\n    }\n    return <></>;\n  }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  onRenderAttachmentDownloadsMemo, /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */\n  actionsForAttachment,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  new Date().toDateString()]);\n  const messageRenderer = useCallback((messageProps: MessageProps) => {\n    return onRenderMessage === undefined ? defaultChatMessageRenderer({\n      ...messageProps\n    }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n  }, [defaultChatMessageRenderer, onRenderMessage]);\n  const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n    return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n      status: message.status\n    }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n  }, [message, statusToRender]);\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\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(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n      style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n      role: 'none'\n    };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n  const myMessageBodyProps = useMemo(() => {\n    return {\n      className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage)\n    };\n  }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\n  const myMessageStatusIcon = useMemo(() => {\n    return <div className={mergeStyles({\n      paddingLeft: '0.25rem'\n    }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n        {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n      </div>;\n  }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\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 <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n      {messageRenderer({\n      ...props\n    })}\n    </FluentChatMyMessage>;\n};"]}

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

@@ -21,6 +21,6 @@ export const ControlBarButton = (props) => {
     const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
     return React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
 };
 //# sourceMappingURL=ControlBarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText} allowDisabledFocus={props.allowDisabledFocus ?? true} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? labelText ?? tooltipContent} allowDisabledFocus={props.allowDisabledFocus ?? true} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}

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

@@ -80,6 +80,7 @@ const DialpadButton = (props) => {
             }
             if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                 dtmfToneSound.current.stop();
+                return;
             }
             longPressHandlers.onKeyDown();
         }, onKeyUp: e => {

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

@@ -1 +1 @@
-{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3H,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvI,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAuB,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAuGjF,MAAM,qBAAqB,GAA6B,CAAC,CAAC;YACxD,KAAK,EAAE,GAAG;SACX,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,MAAM;SACf,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,KAAK;SACd,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,MAAM;SACf,CAAC,EAAE,CAAC;YACH,KAAK,EAAE,GAAG;SACX,EAAE;YACD,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,EAAE;YACD,KAAK,EAAE,GAAG;SACX,CAAC,CAAC,CAAC;AACJ,MAAM,SAAS,GAAe,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAChI,MAAM,aAAa,GAAG,CAAC,KAUtB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,MAAM,CAAO,IAAI,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzH,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,EAAE,GAAS,EAAE;YAClB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC,CAAA;QACD,WAAW,EAAE,GAAS,EAAE;YACtB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACD,eAAe,EAAE,gBAAgB,KAAK,OAAO;KAC9C,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,oBAAC,aAAa,kCAAe,kBAAkB,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAM,iBAAiB,IAAE,SAAS,EAAE,CAAC,CAAC,EAAE;YAC7K,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC3D,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC/B,CAAC;gBACD,iBAAiB,CAAC,SAAS,EAAE,CAAC;gBAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACvH,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,SAAS,EAAE,CAAC;QAChC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,aAAa,EAAE,CAAC;gBAC1D,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,OAAO,EAAE,CAAC;gBAC5B,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;YACD,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE;YACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAClC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;YACjB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7B,iBAAiB,CAAC,SAAS,EAAE,CAAC;QAChC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;YACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACzB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YACD,iBAAiB,CAAC,YAAY,EAAE,CAAC;QACnC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE;YAClB,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7B,iBAAiB,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC;QACG,oBAAC,KAAK;YACJ,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAQ;YAE3F,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG,CAAQ,CAC/F,CACM,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAiBzB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EACJ,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,gBAAgB,GAAG,eAAe,EAClC,mBAAmB,EACnB,WAAW,GAAG,QAAQ,EACtB,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC;IAC9F,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAC3E,MAAM,iCAAiC,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iCAAiC,CAAC,OAAO,KAAK,cAAc,EAAE,CAAC;YACjE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,cAAc,CAAC,CAAC;QAC7B,CAAC;QACD,iCAAiC,CAAC,OAAO,GAAG,cAAc,CAAC;IAC7D,CAAC,EAAE,CAAC,iCAAiC,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IACrB,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAC5D,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;QAChC,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAChE,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,MAAM,OAAO,GAAG,CAAC,KAAa,EAAQ,EAAE;QACtC,sFAAsF;QACtF,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7E,OAAO,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,kBAAe,kBAAkB,gBAAY,kBAAkB,EAAC,eAAe,EAAE,QAAQ;QACpK,WAAW,KAAK,QAAQ,IAAI,oBAAC,SAAS,IAAC,MAAM,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,EAAE,cAAc,KAAK,EAAE,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC;YACrN,8DAA8D;YAC9D,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE;gBACnB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,kBAAe,eAAe,EAAC,cAAc,EAAE,GAAgB,EAAE;;gBAAC,OAAA,0CACpG,gBAAgB,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,oBAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,eAAe,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,CAAC,EAAE,SAAS,EAAE;wBACrO,QAAQ,EAAE,kBAAkB;qBAC7B,GAAI,CACI,CAAA;aAAA,GAAI;QACb,oBAAC,SAAS,QACP,qBAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;YAC9C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,GAAG,EAAE,OAAO,QAAQ,EAAE,EAAE,eAAe,EAAC,SAAS,EAAC,MAAM,EAAE;oBACjF,WAAW,EAAE,MAAM;iBACpB,IACM,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,oBAAC,aAAa,IAAC,GAAG,EAAE,UAAU,WAAW,EAAE;gBAClF;;;;;;;;;;;;;;;;kBAgBE,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,GAAI,CAAC,CACvS,CAAC;QACf,CAAC,CAAC,CACU,CACN,CAAC;AACb,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAClD,MAAM,OAAO,mCACR,aAAa,GACb,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,OAAO,oBAAC,gBAAgB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;AAC3D,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE;IAC9C,sFAAsF;IACtF,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**\n   * function to send dtmf tones on button click\n   */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**\n   * Callback for dialpad button behavior\n   */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /**\n   * set dialpad textfield content\n   */\n  textFieldValue?: string;\n  /**\n   * on change function for text field, provides an unformatted plain text\n   */\n  onChange?: (input: string) => void;\n  /**\n   * flag to determine when to show/hide delete button, default true\n   */\n  showDeleteButton?: boolean;\n  /**\n   * Determines what kind of device that the user is on and should respect that based on interaction\n   * interfaces available to the user\n   */\n  longPressTrigger?: LongPressTrigger;\n  /**\n   * Styles for customizing the dialpad component\n   */\n  styles?: DialpadStyles;\n  /**\n   * Disables DTMF sounds when dialpad buttons are pressed. the actual\n   * tones are still sent to the call.\n   */\n  disableDtmfPlayback?: boolean;\n  /**\n   * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n   * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n   * and can be edited to change the number being dialed.\n   */\n  dialpadMode?: DialpadMode;\n  /**\n   * Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n   */\n  dtmfAudioContext?: AudioContext;\n}\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: DtmfFrequenciesKeys;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n  digit: '1'\n}, {\n  digit: '2',\n  letter: 'ABC'\n}, {\n  digit: '3',\n  letter: 'DEF'\n}], [{\n  digit: '4',\n  letter: 'GHI'\n}, {\n  digit: '5',\n  letter: 'JKL'\n}, {\n  digit: '6',\n  letter: 'MNO'\n}], [{\n  digit: '7',\n  letter: 'PQRS'\n}, {\n  digit: '8',\n  letter: 'TUV'\n}, {\n  digit: '9',\n  letter: 'WXYZ'\n}], [{\n  digit: '*'\n}, {\n  digit: '0',\n  letter: '+'\n}, {\n  digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n  digit: DtmfFrequenciesKeys;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  longPressTrigger: LongPressTrigger;\n  dtmfToneAudioContext: AudioContext;\n  disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    digit,\n    index,\n    onClick,\n    onLongPress,\n    longPressTrigger,\n    dtmfToneAudioContext,\n    disableDtmfPlayback\n  } = props;\n  const [buttonPressed, setButtonPressed] = useState(false);\n  const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n  const useLongPressProps = React.useMemo(() => ({\n    onClick: async () => {\n      onClick(digit, index);\n    },\n    onLongPress: async () => {\n      onLongPress(digit, index);\n    },\n    touchEventsOnly: longPressTrigger === 'touch'\n  }), [digit, index, longPressTrigger, onClick, onLongPress]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n      if (!disableDtmfPlayback) {\n        dtmfToneSound.current.play();\n      }\n      longPressHandlers.onKeyDown();\n      setButtonPressed(true);\n      return;\n    }\n    if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      dtmfToneSound.current.stop();\n    }\n    longPressHandlers.onKeyDown();\n  }} onKeyUp={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n      dtmfToneSound.current.stop();\n      longPressHandlers.onKeyUp();\n      setButtonPressed(false);\n    }\n    longPressHandlers.onKeyUp();\n  }} onMouseDown={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onMouseDown();\n  }} onMouseUp={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onMouseUp();\n  }} onMouseLeave={() => {\n    dtmfToneSound.current.stop();\n  }} onTouchStart={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onTouchStart();\n  }} onTouchEnd={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onTouchEnd();\n  }}>\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>;\n};\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  longPressTrigger?: LongPressTrigger;\n  styles?: DialpadStyles;\n  disableDtmfPlayback?: boolean;\n  dialpadMode?: DialpadMode;\n  dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    longPressTrigger = 'mouseAndTouch',\n    disableDtmfPlayback,\n    dialpadMode = 'dialer',\n    dtmfAudioContext\n  } = props;\n  const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n  const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n  useEffect(() => {\n    if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n      onChange?.(plainTextValue);\n    }\n    plainTextValuePreviousRenderValue.current = plainTextValue;\n  }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n  return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n      {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onChange={(e: any) => {\n      setText(e.target.value);\n    }} onClick={e => {\n      e.preventDefault();\n    }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n              {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n        iconName: 'DialpadBackspace'\n      }} />}\n            </>} />}\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n        return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n          childrenGap: '1rem'\n        }}>\n              {rows.map((button, columnIndex) => <DialpadButton key={`button_${columnIndex}`}\n          /* row index = 0\n          columnIndex: (0,1,2) => (0,1,2)\n          row index = 1\n          columnIndex: (0,1,2)=> (3,4,5)\n          row index = 2\n          columnIndex: (0,1,2)=> (6,7,8)\n          row index = 3\n          columnIndex: (0,1,2)=> (9,10,11)\n          columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n          dialpad index:\n          0 1 2\n          3 4 5\n          6 7 8\n          9 10 11\n          then use this index to locate the corresponding dtmf tones\n          DtmfTones[index]\n          */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n            </Stack>;\n      })}\n      </FocusZone>\n    </Stack>;\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  const localeStrings = useLocale().strings.dialpad;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};"]}
+{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\nimport { IconButton } from '@fluentui/react';\nimport { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, TextField, useTheme } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @public\n */\nexport interface DialpadStrings {\n  placeholderText: string;\n  deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadStyles {\n  root?: IStyle;\n  button?: IButtonStyles;\n  textField?: Partial<ITextFieldStyles>;\n  digit?: IStyle;\n  letter?: IStyle;\n  deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @public\n */\nexport type DtmfTone = 'A' | 'B' | 'C' | 'D' | 'Flash' | 'Num0' | 'Num1' | 'Num2' | 'Num3' | 'Num4' | 'Num5' | 'Num6' | 'Num7' | 'Num8' | 'Num9' | 'Pound' | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @public\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @public\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @public\n */\nexport interface DialpadProps {\n  strings?: DialpadStrings;\n  /**\n   * function to send dtmf tones on button click\n   */\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**\n   * Callback for dialpad button behavior\n   */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /**\n   * set dialpad textfield content\n   */\n  textFieldValue?: string;\n  /**\n   * on change function for text field, provides an unformatted plain text\n   */\n  onChange?: (input: string) => void;\n  /**\n   * flag to determine when to show/hide delete button, default true\n   */\n  showDeleteButton?: boolean;\n  /**\n   * Determines what kind of device that the user is on and should respect that based on interaction\n   * interfaces available to the user\n   */\n  longPressTrigger?: LongPressTrigger;\n  /**\n   * Styles for customizing the dialpad component\n   */\n  styles?: DialpadStyles;\n  /**\n   * Disables DTMF sounds when dialpad buttons are pressed. the actual\n   * tones are still sent to the call.\n   */\n  disableDtmfPlayback?: boolean;\n  /**\n   * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n   * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n   * and can be edited to change the number being dialed.\n   */\n  dialpadMode?: DialpadMode;\n  /**\n   * Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n   */\n  dtmfAudioContext?: AudioContext;\n}\ntype DialpadButtonContent = {\n  /** Number displayed on each dialpad button */\n  digit: DtmfFrequenciesKeys;\n  /** Letters displayed on each dialpad button */\n  letter?: string;\n};\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [[{\n  digit: '1'\n}, {\n  digit: '2',\n  letter: 'ABC'\n}, {\n  digit: '3',\n  letter: 'DEF'\n}], [{\n  digit: '4',\n  letter: 'GHI'\n}, {\n  digit: '5',\n  letter: 'JKL'\n}, {\n  digit: '6',\n  letter: 'MNO'\n}], [{\n  digit: '7',\n  letter: 'PQRS'\n}, {\n  digit: '8',\n  letter: 'TUV'\n}, {\n  digit: '9',\n  letter: 'WXYZ'\n}], [{\n  digit: '*'\n}, {\n  digit: '0',\n  letter: '+'\n}, {\n  digit: '#'\n}]];\nconst DtmfTones: DtmfTone[] = ['Num1', 'Num2', 'Num3', 'Num4', 'Num5', 'Num6', 'Num7', 'Num8', 'Num9', 'Star', 'Num0', 'Pound'];\nconst DialpadButton = (props: {\n  digit: DtmfFrequenciesKeys;\n  letter?: string;\n  styles?: DialpadStyles;\n  index: number;\n  onClick: (input: string, index: number) => void;\n  onLongPress: (input: string, index: number) => void;\n  longPressTrigger: LongPressTrigger;\n  dtmfToneAudioContext: AudioContext;\n  disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    digit,\n    index,\n    onClick,\n    onLongPress,\n    longPressTrigger,\n    dtmfToneAudioContext,\n    disableDtmfPlayback\n  } = props;\n  const [buttonPressed, setButtonPressed] = useState(false);\n  const dtmfToneSound = useRef<Tone>(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));\n  const useLongPressProps = React.useMemo(() => ({\n    onClick: async () => {\n      onClick(digit, index);\n    },\n    onLongPress: async () => {\n      onLongPress(digit, index);\n    },\n    touchEventsOnly: longPressTrigger === 'touch'\n  }), [digit, index, longPressTrigger, onClick, onLongPress]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n  return <DefaultButton data-test-id={`dialpad-button-${props.index}`} styles={concatStyleSets(buttonStyles(theme), props.styles?.button)} {...longPressHandlers} onKeyDown={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n      if (!disableDtmfPlayback) {\n        dtmfToneSound.current.play();\n      }\n      longPressHandlers.onKeyDown();\n      setButtonPressed(true);\n      return;\n    }\n    if (e.key === 'Tab' || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      dtmfToneSound.current.stop();\n      return;\n    }\n    longPressHandlers.onKeyDown();\n  }} onKeyUp={e => {\n    if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n      dtmfToneSound.current.stop();\n      longPressHandlers.onKeyUp();\n      setButtonPressed(false);\n    }\n    longPressHandlers.onKeyUp();\n  }} onMouseDown={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onMouseDown();\n  }} onMouseUp={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onMouseUp();\n  }} onMouseLeave={() => {\n    dtmfToneSound.current.stop();\n  }} onTouchStart={() => {\n    if (!disableDtmfPlayback) {\n      dtmfToneSound.current.play();\n    }\n    longPressHandlers.onTouchStart();\n  }} onTouchEnd={() => {\n    dtmfToneSound.current.stop();\n    longPressHandlers.onTouchEnd();\n  }}>\n      <Stack>\n        <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n        <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n      </Stack>\n    </DefaultButton>;\n};\nconst DialpadContainer = (props: {\n  strings: DialpadStrings;\n  onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n  /**  Callback for dialpad button behavior */\n  onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n  /** Pass in custom content to dialpad textfield */\n  textFieldValue?: string;\n  /**  on change function for text field, provides an unformatted plain text */\n  onChange?: (input: string) => void;\n  /**  boolean input to determine when to show/hide delete button, default true */\n  showDeleteButton?: boolean;\n  /**  boolean input to determine if dialpad is in mobile view, default false */\n  longPressTrigger?: LongPressTrigger;\n  styles?: DialpadStyles;\n  disableDtmfPlayback?: boolean;\n  dialpadMode?: DialpadMode;\n  dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n  const theme = useTheme();\n  const {\n    onSendDtmfTone,\n    onClickDialpadButton,\n    textFieldValue,\n    onChange,\n    showDeleteButton = true,\n    longPressTrigger = 'mouseAndTouch',\n    disableDtmfPlayback,\n    dialpadMode = 'dialer',\n    dtmfAudioContext\n  } = props;\n  const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n  const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n  const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n  useEffect(() => {\n    if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n      onChange?.(plainTextValue);\n    }\n    plainTextValuePreviousRenderValue.current = plainTextValue;\n  }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n  useEffect(() => {\n    setText(textFieldValue ?? '');\n  }, [textFieldValue]);\n  const onClickDialpad = (input: string, index: number): void => {\n    setText(plainTextValue + input);\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n  const onLongPressDialpad = (input: string, index: number): void => {\n    if (input === '0' && index === 10) {\n      setText(plainTextValue + '+');\n    } else {\n      setText(plainTextValue + input);\n    }\n    if (onSendDtmfTone) {\n      onSendDtmfTone(DtmfTones[index]);\n    }\n    if (onClickDialpadButton) {\n      onClickDialpadButton(input, index);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setText = (input: string): void => {\n    // remove non-valid characters from input: letters,special characters excluding +, *,#\n    const plainInput = sanitizeInput(input);\n    setPlainTextValue(plainInput);\n  };\n  const deleteNumbers = (): void => {\n    const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n    setText(modifiedInput);\n  };\n  return <Stack className={mergeStyles(containerStyles(theme), props.styles?.root)} data-test-id=\"dialpadContainer\" data-ui-id=\"dialpadContainer\" horizontalAlign={'center'}>\n      {dialpadMode === 'dialer' && <TextField styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)} value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onChange={(e: any) => {\n      setText(e.target.value);\n    }} onClick={e => {\n      e.preventDefault();\n    }} placeholder={props.strings.placeholderText} data-test-id=\"dialpad-input\" onRenderSuffix={(): JSX.Element => <>\n              {showDeleteButton && plainTextValue.length !== 0 && <IconButton ariaLabel={props.strings.deleteButtonAriaLabel} onClick={deleteNumbers} styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)} iconProps={{\n        iconName: 'DialpadBackspace'\n      }} />}\n            </>} />}\n      <FocusZone>\n        {dialPadButtonsDefault.map((rows, rowIndex) => {\n        return <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{\n          childrenGap: '1rem'\n        }}>\n              {rows.map((button, columnIndex) => <DialpadButton key={`button_${columnIndex}`}\n          /* row index = 0\n          columnIndex: (0,1,2) => (0,1,2)\n          row index = 1\n          columnIndex: (0,1,2)=> (3,4,5)\n          row index = 2\n          columnIndex: (0,1,2)=> (6,7,8)\n          row index = 3\n          columnIndex: (0,1,2)=> (9,10,11)\n          columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n          dialpad index:\n          0 1 2\n          3 4 5\n          6 7 8\n          9 10 11\n          then use this index to locate the corresponding dtmf tones\n          DtmfTones[index]\n          */ index={columnIndex + rowIndex * rows.length} digit={button.digit} letter={button.letter} styles={props.styles} onClick={onClickDialpad} onLongPress={onLongPressDialpad} longPressTrigger={longPressTrigger} dtmfToneAudioContext={dtmfToneAudioContext.current} disableDtmfPlayback={disableDtmfPlayback} />)}\n            </Stack>;\n      })}\n      </FocusZone>\n    </Stack>;\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @public\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n  const localeStrings = useLocale().strings.dialpad;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  return <DialpadContainer strings={strings} {...props} />;\n};\nconst sanitizeInput = (input: string): string => {\n  // remove non-valid characters from input: letters,special characters excluding +, *,#\n  return input.replace(/[^\\d*#+]/g, '');\n};"]}

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

@@ -5,8 +5,6 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(image-overlay-theme) */
-import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
 /**
  * Component to render a fullscreen modal for a selected image.
@@ -18,8 +16,6 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const overlayTheme = useMemo(() => {
-        /* @conditional-compile-remove(image-overlay-theme) */
-        return imageOverlayTheme;
         return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);