npm - @azure/communication-react - Versions diffs - 1.18.0-alpha-202407110015 → 1.18.0-alpha-202407120014 - Mend

@azure/communication-react 1.18.0-alpha-202407110015 → 1.18.0-alpha-202407120014

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n cancelInlineImageUpload,\n hasIncompleteAttachmentUploads,\n insertImagesToContentString,\n isAttachmentUploadCompleted\n} from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarError } from '../../SendBoxErrorBar';\n\n/* @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload?: (imageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload\n } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []);\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, textValue]);\n\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setText = useCallback((newValue?: string): void => {\n setTextValue(newValue ?? '');\n }, []);\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const textTooLongMessage = useMemo(() => {\n return messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n }, [messageState, strings.editBoxTextLimit]);\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n / @conditional-compile-remove(file-sharing-acs) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const onSubmitHandler = useCallback((): void => {\n if (!submitEnabled) {\n return;\n }\n // Don't send message until all attachments have been uploaded successfully\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setAttachmentUploadsPendingError(undefined);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (hasIncompleteAttachmentUploads(imageUploadsInProgress)) {\n setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (isAttachmentUploadCompleted(imageUploadsInProgress)) {\n content = insertImagesToContentString(textValue, imageUploadsInProgress);\n }\n // it's very important to pass an empty attachment here\n // so when user removes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n onSubmit(content, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata \|\| []);\n }, [\n submitEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress,\n textValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.attachmentUploadsPendingError,\n onSubmit,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata\n ]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n onSubmitHandler();\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n onSubmitHandler\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const onChangeHandler = useCallback(\n (\n content: string \| undefined,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageSrcArray?: Array<string>\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cancelInlineImageUpload(imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload);\n setText(content);\n },\n [\n setText,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageUploadsInProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onCancelInlineImageUpload\n ]\n );\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors\n textTooLongMessage={textTooLongMessage}\n systemMessage={message.failureReason}\n / @conditional-compile-remove(rich-text-editor-image-upload) / attachmentUploadsPendingError={\n attachmentUploadsPendingError\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage={onUploadInlineImage}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n cancelInlineImageUpload,\n hasIncompleteAttachmentUploads,\n insertImagesToContentString,\n isAttachmentUploadCompleted\n} from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarError } from '../../SendBoxErrorBar';\n\n/* @private /\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata?: AttachmentMetadata[]\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste?: (event: { content: DocumentFragment }) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload?: (imageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage?: (imageUrl: string, imageFileName: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload\n } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []);\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, textValue]);\n\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setText = useCallback((newValue?: string): void => {\n setTextValue(newValue ?? '');\n }, []);\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const textTooLongMessage = useMemo(() => {\n return messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n }, [messageState, strings.editBoxTextLimit]);\n\n const iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n / @conditional-compile-remove(file-sharing-acs) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message);\n }, [message]);\n\n const onSubmitHandler = useCallback((): void => {\n if (!submitEnabled) {\n return;\n }\n // Don't send message until all attachments have been uploaded successfully\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setAttachmentUploadsPendingError(undefined);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (hasIncompleteAttachmentUploads(imageUploadsInProgress)) {\n setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (isAttachmentUploadCompleted(imageUploadsInProgress)) {\n content = insertImagesToContentString(textValue, imageUploadsInProgress);\n }\n // it's very important to pass an empty attachment here\n // so when user removes all attachments, UI can reflect it instantly\n // if you set it to undefined, the attachments pre-edited would still be there\n // until edit message event is received\n onSubmit(content, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata \|\| []);\n }, [\n submitEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress,\n textValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.attachmentUploadsPendingError,\n onSubmit,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata\n ]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n onSubmitHandler();\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n onSubmitHandler\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const onChangeHandler = useCallback(\n (\n content: string \| undefined,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageSrcArray?: Array<string>\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cancelInlineImageUpload(imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload);\n setText(content);\n },\n [\n setText,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageUploadsInProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onCancelInlineImageUpload\n ]\n );\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors\n textTooLongMessage={textTooLongMessage}\n systemMessage={message.failureReason}\n / @conditional-compile-remove(rich-text-editor-image-upload) / attachmentUploadsPendingError={\n attachmentUploadsPendingError\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage={onUploadInlineImage}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}

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

@@ -107,13 +107,17 @@ 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
+                    className: mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body,
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    chatMessageCommonStyles.bodyWithPlaceholderImage,
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    chatMyMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
                         ? chatMessageCommonStyles.blocked
                         : props.message.status === 'failed'
                             ? chatMessageCommonStyles.failed
                             : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,
                     /* @conditional-compile-remove(file-sharing-acs) */
-                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachments : undefined, mergeStyles(messageContainerStyle)),
+                    hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInViewing : undefined, mergeStyles(messageContainerStyle)),
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
                     ref: messageRef
                 }, root: {

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

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

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js CHANGED Viewed

@@ -22,6 +22,9 @@ export class PlaceholderPlugin extends WatermarkPlugin {
     initialize(editor) {
         this.editorValue = editor;
         super.initialize(editor);
+        // Hide/show the placeholder as workaround for the placeholder not hiding in some cases
+        this.hide(this.editorValue);
+        this.show(this.editorValue);
     }
     dispose() {
         this.editorValue = null;

package/dist/dist-esm/react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;~~IA2B7C~~,CAAC;~~IAzBC~~,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;~~IAC3B~~,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/*\n PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n private isPlaceholderShown: boolean = false;\n private editorValue: IEditor \| null = null;\n\n updatePlaceholder(placeholder: string): void {\n this.watermark = placeholder;\n // hide and show the placeholder to show the latest one\n // this needs to be done only if the placeholder is currently shown\n if (this.editorValue && this.isPlaceholderShown) {\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n }\n initialize(editor: IEditor): void {\n this.editorValue = editor;\n super.initialize(editor);\n }\n dispose(): void {\n this.editorValue = null;\n super.dispose();\n }\n protected show(editor: IEditor): void {\n super.show(editor);\n this.isPlaceholderShown = true;\n }\n protected hide(editor: IEditor): void {\n super.hide(editor);\n this.isPlaceholderShown = false;\n }\n}\n"]}
1	+ {"version":3,"file":"PlaceholderPlugin.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/RichTextEditor/Plugins/PlaceholderPlugin.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QACU,uBAAkB,GAAY,KAAK,CAAC;QACpC,gBAAW,GAAmB,IAAI,CAAC;IA+B7C,CAAC;IA7BC,iBAAiB,CAAC,WAAmB;QACnC,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,uDAAuD;QACvD,mEAAmE;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,UAAU,CAAC,MAAe;QACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,uFAAuF;QACvF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IACD,OAAO;QACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IACS,IAAI,CAAC,MAAe;QAC5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { WatermarkPlugin } from 'roosterjs-content-model-plugins';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/*\n PlaceholderPlugin is a plugin for displaying placeholder and handle localization for it in the editor.\n */\nexport class PlaceholderPlugin extends WatermarkPlugin {\n private isPlaceholderShown: boolean = false;\n private editorValue: IEditor \| null = null;\n\n updatePlaceholder(placeholder: string): void {\n this.watermark = placeholder;\n // hide and show the placeholder to show the latest one\n // this needs to be done only if the placeholder is currently shown\n if (this.editorValue && this.isPlaceholderShown) {\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n }\n initialize(editor: IEditor): void {\n this.editorValue = editor;\n super.initialize(editor);\n\n // Hide/show the placeholder as workaround for the placeholder not hiding in some cases\n this.hide(this.editorValue);\n this.show(this.editorValue);\n }\n dispose(): void {\n this.editorValue = null;\n super.dispose();\n }\n protected show(editor: IEditor): void {\n super.show(editor);\n this.isPlaceholderShown = true;\n }\n protected hide(editor: IEditor): void {\n super.hide(editor);\n this.isPlaceholderShown = false;\n }\n}\n"]}

package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export declare const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;
 /**
  * @private
  */
-export declare const useAttachmentCardStyles: () => Record<"content" | "root" | "title" | "dynamicWidth" | "staticWidth" | "fileIcon" | "focusState" | "fileNameLabel", string>;
+export declare const useAttachmentCardStyles: () => Record<"content" | "title" | "root" | "dynamicWidth" | "staticWidth" | "fileIcon" | "focusState" | "fileNameLabel", string>;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export declare const useChatMessageRenderStyles: () => Record<"rootCommon" | "ro
 /**
  * @private
  */
-export declare const useChatMyMessageStyles: () => Record<"root" | "body" | "menu" | "menuHidden" | "multipleAttachments" | "bodyAttached" | "menuAttached" | "menuVisible", string>;
+export declare const useChatMyMessageStyles: () => Record<"body" | "menu" | "root" | "menuHidden" | "bodyWithPlaceholderImage" | "bodyAttached" | "menuAttached" | "menuVisible" | "multipleAttachmentsInViewing" | "multipleAttachmentsInEditing", string>;
 /**
  * @private
  */
@@ -36,11 +36,11 @@ export declare const chatMessageDateStyle: CSSProperties;
 /**
  * @private
  */
-export declare const useChatMessageStyles: () => Record<"root" | "body" | "multipleAttachments" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap" | "bodyWithPlaceholderImage", string>;
+export declare const useChatMessageStyles: () => Record<"body" | "root" | "multipleAttachments" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap", string>;
 /**
  * @private
  */
-export declare const useChatMessageCommonStyles: () => Record<"failed" | "blocked" | "body", string>;
+export declare const useChatMessageCommonStyles: () => Record<"failed" | "body" | "blocked" | "bodyWithPlaceholderImage", string>;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js CHANGED Viewed

@@ -127,6 +127,15 @@ export const useChatMyMessageStyles = makeStyles({
         }, '&:focus-visible': {
             outlineStyle: 'auto'
         } }),
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    bodyWithPlaceholderImage: {
+        // Adding width and height to the placeholder image only for myMessages
+        // because inline images sent from ACS doesn't have width and height in the image tag
+        '& img[src=""]': {
+            width: '12rem',
+            height: '12rem'
+        }
+    },
     bodyAttached: {
         marginTop: '0.125rem'
     },
@@ -143,9 +152,15 @@ export const useChatMyMessageStyles = makeStyles({
     menuVisible: {
         visibility: 'visible'
     },
-    multipleAttachments: {
+    multipleAttachmentsInViewing: {
         width: '100%',
         maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`
+    },
+    multipleAttachmentsInEditing: {
+        // when in editing state, the chat message width should not be
+        // limited by content length but occupying the full width instead
+        width: '100%',
+        float: 'right'
     }
 });
 /**
@@ -186,41 +201,6 @@ export const useChatMessageStyles = makeStyles({
         }, '&:focus-visible': {
             outlineStyle: 'auto'
         } }),
-    bodyWithPlaceholderImage: {
-        '& img[src=""]': {
-            display: 'block',
-            position: 'relative',
-            marginBottom: '5px'
-        },
-        '& img[src=""]:after': {
-            backgroundColor: tokens.colorNeutralBackground1Selected,
-            content: `url("data:image/gif;base64,R0lGODlhAQABAAAAACw=")`,
-            backgroundSize: 'center',
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: '0',
-            left: '0',
-            display: 'block'
-        },
-        '& .broken-image-wrapper': {
-            width: '12rem',
-            height: '12rem',
-            marginTop: '0.75rem',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            outline: `1px solid ${tokens.colorNeutralForegroundDisabled}`,
-            backgroundColor: tokens.colorNeutralBackground2
-        },
-        '& .broken-image-wrapper:after': {
-            content: `''`,
-            maskImage: `url("data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E");`,
-            width: '3rem',
-            height: '3rem',
-            backgroundColor: `${tokens.colorNeutralForeground2}`
-        }
-    },
     bodyWithoutAvatar: {
         marginTop: '0.125rem'
     },
@@ -250,6 +230,32 @@ export const useChatMessageCommonStyles = makeStyles({
             '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) })
         }
     },
+    bodyWithPlaceholderImage: {
+        '& img[src=""]': {
+            display: 'block',
+            position: 'relative',
+            marginBottom: '5px'
+        },
+        '& img[src=""]:after': {
+            backgroundColor: tokens.colorNeutralBackground1Selected,
+            content: `url("data:image/gif;base64,R0lGODlhAQABAAAAACw=")`,
+            backgroundSize: 'center',
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: '0',
+            left: '0',
+            display: 'block'
+        },
+        '& .broken-image-wrapper': Object.assign(Object.assign({ width: '12rem', height: '12rem', marginTop: '0.75rem', display: 'flex', justifyContent: 'center', alignItems: 'center' }, shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled)), { backgroundColor: tokens.colorNeutralBackground2 }),
+        '& .broken-image-wrapper:after': {
+            content: `''`,
+            maskImage: `url("data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E");`,
+            width: '3rem',
+            height: '3rem',
+            backgroundColor: `${tokens.colorNeutralForeground2}`
+        }
+    },
     failed: {
         //TODO: can we reuse a theme color here?
         backgroundColor: 'rgba(168, 0, 0, 0.2)'

package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { ERROR_IMAGE_SVG_PATH } from './Common.style';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachments: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n },\n '& .broken-image-wrapper': {\n width: '12rem',\n height: '12rem',\n marginTop: '0.75rem',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n outline: `1px solid ${tokens.colorNeutralForegroundDisabled}`,\n backgroundColor: tokens.colorNeutralBackground2\n },\n '& .broken-image-wrapper:after': {\n content: `''`,\n maskImage: `url(\"data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E\");`,\n width: '3rem',\n height: '3rem',\n backgroundColor: `${tokens.colorNeutralForeground2}`\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n /\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n\n/* @private */\nexport const dataLossIconStyle = mergeStyles({\n width: '1.25rem',\n height: '1.25rem'\n});\n"]}
1	+ {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { ERROR_IMAGE_SVG_PATH } from './Common.style';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n bodyWithPlaceholderImage: {\n // Adding width and height to the placeholder image only for myMessages\n // because inline images sent from ACS doesn't have width and height in the image tag\n '& img[src=\"\"]': {\n width: '12rem',\n height: '12rem'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachmentsInViewing: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n },\n multipleAttachmentsInEditing: {\n // when in editing state, the chat message width should not be\n // limited by content length but occupying the full width instead\n width: '100%',\n float: 'right'\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n },\n '& .broken-image-wrapper': {\n width: '12rem',\n height: '12rem',\n marginTop: '0.75rem',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n backgroundColor: tokens.colorNeutralBackground2\n },\n '& .broken-image-wrapper:after': {\n content: `''`,\n maskImage: `url(\"data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E\");`,\n width: '3rem',\n height: '3rem',\n backgroundColor: `${tokens.colorNeutralForeground2}`\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n /\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n\n/* @private */\nexport const dataLossIconStyle = mergeStyles({\n width: '1.25rem',\n height: '1.25rem'\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js CHANGED Viewed

@@ -29,15 +29,19 @@ export const ParticipantListWithHeading = (props) => {
     const tooltipId = getId('text-tooltip');
     const subheadingStyleThemed = useMemo(() => ({
         root: {
-            color: theme.palette.neutralSecondary,
-            margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
-            fontSize: theme.fonts.smallPlus.fontSize
+            h2: {
+                color: theme.palette.neutralSecondary,
+                margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',
+                fontSize: theme.fonts.smallPlus.fontSize,
+                fontWeight: 'normal'
+            }
         }
     }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
     return (React.createElement(Stack, { className: participantListStack },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
-            React.createElement(Stack.Item, { grow: true, styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId }, paneTitleTrampoline(title !== null && title !== void 0 ? title : '',
-            /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
+            React.createElement(Stack.Item, { grow: true, styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId },
+                React.createElement("h2", null, paneTitleTrampoline(title !== null && title !== void 0 ? title : '',
+                /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount))),
             (onClickHeadingMoreButton ||
                 ((headingMoreButtonMenuProps === null || headingMoreButtonMenuProps === void 0 ? void 0 : headingMoreButtonMenuProps.items) && headingMoreButtonMenuProps.items.length > 0)) && (React.createElement(Stack.Item, null,
                 React.createElement(DefaultButton, { "data-ui-id": "people-pane-header-more-button", ariaLabel: headingMoreButtonAriaLabel, styles: headingMoreButtonStyles(theme), iconProps: { iconName: 'PeoplePaneMoreButton' }, onClick: onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined, menuProps: props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps, onRenderMenuIcon: () => null })))),

package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAC1B,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAsD,yCAAmC;AACjH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5G,OAAO,EAAE,aAAa,EAAwB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,aAAa,EAA6B,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAUxD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,+BAA+B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9F,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,+BAA+B;QAC/C,oBAAC,0BAA0B,oBAAK,KAAK,EAAI,CACnC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAU1C,EAAe,EAAE;IAChB,MAAM,EACJ,wBAAwB,EACxB,2BAA2B,EAC3B,KAAK,EACL,oBAAoB,EACpB,0BAA0B,EAC1B,wBAAwB,EACxB,0BAA0B,EAC1B,kBAAkB,EACnB,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,KAAK,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,0DAA0D;IAC1D,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,qBAAqB,CAAC;IACzE,MAAM,SAAS,GAAW,KAAK,CAAC,cAAc,CAAC,CAAC;IAChD,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;~~YACrC~~,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ;~~YACjD~~,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;~~SACzC~~;KACF,CAAC,EACF,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CACjF,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,oBAAoB;QACpC,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ;YACtE,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,MAAM,EAAE,qBAAqB,gBAAc,KAAK,EAAE,EAAE,EAAE,kBAAkB,~~IACtF~~,mBAAmB,CAClB,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;~~YACX~~,0DAA0D,CAAC,qBAAqB,CACjF,~~CACU~~;YACZ,CAAC,wBAAwB;gBACxB,CAAC,CAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,KAAK,KAAI,0BAA0B,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CACvF,oBAAC,KAAK,CAAC,IAAI;gBACT,oBAAC,aAAa,kBACD,gCAAgC,EAC3C,SAAS,EAAE,0BAA0B,EACrC,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACtC,SAAS,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,EAC/C,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,SAAS,EAChF,SAAS,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,0BAA0B,EACxF,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,GAC5B,CACS,CACd,CACK;QACR,oBAAC,SAAS,IAAC,SAAS,EAAE,6BAA6B,EAAE,kBAAkB,EAAE,IAAI;YAC3E,oBAAC,eAAe,oBACV,oBAAoB,IACxB,kBAAkB,EAAE,kBAAkB,EACtC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,oBAAoB,EAC1E,cAAc,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,CACnC;oBACE,oBAAC,aAAa,gCACD,0CAA0C,EACrD,MAAM,EAAE,MAAM,IACV,OAAO,IACL,kBAAkB,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,EACzC,YAAY,EAAE,wBAAwB,EACtC,iBAAiB,EAAE,IAAI,IACvB;oBACD,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,KAAI,CAChB,6BAAK,KAAK,EAAE,iBAAiB;wBAC3B,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB,CAAC,MAAM;4BAC1F,oBAAC,IAAI,IAAC,MAAM,EAAE,KAAK,qBAAmB,SAAS,IAC5C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CACT,CACK,CACV,CACP,CACA,CACJ,EACD,2BAA2B,EAAE,2BAA2B,EACxD,8BAA8B,EAAE,CAAC,KAAK,CAAC,QAAQ,EAC/C,yBAAyB,EAAE,kBAAkB,IAC7C,CACQ,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,SAAiB,EAAE,qBAA8B,EAAU,EAAE;IACxF,MAAM,sBAAsB,GAAG,qBAAqB;QAClD,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,qBAAqB,GAAG,EAAE;QAClD,CAAC,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC;IAC5B,OAAO,aAAa,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n participantListContainerStyle,\n participantListMobileStyle,\n participantListStack,\n participantListStyle,\n participantListWrapper,\n displayNameStyles,\n headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n participantListProps: ParticipantListProps;\n title?: string;\n isMobile?: boolean;\n};\n\n/*\n @private\n /\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n const theme = useTheme();\n const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n return (\n <Stack className={participantListWrapperClassName}>\n <ParticipantListWithHeading {...props} />\n </Stack>\n );\n};\n\n/\n @private\n /\nexport const ParticipantListWithHeading = (props: {\n participantListProps: ParticipantListProps;\n title?: string;\n isMobile?: boolean;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n headingMoreButtonAriaLabel?: string;\n onClickHeadingMoreButton?: () => void;\n headingMoreButtonMenuProps?: IContextualMenuProps;\n pinnedParticipants?: string[];\n}): JSX.Element => {\n const {\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n title,\n participantListProps,\n headingMoreButtonAriaLabel,\n onClickHeadingMoreButton,\n headingMoreButtonMenuProps,\n pinnedParticipants\n } = props;\n const subheadingUniqueId = useId();\n const theme = useTheme();\n / @conditional-compile-remove(total-participant-count) /\n const totalParticipantCount = participantListProps.totalParticipantCount;\n const tooltipId: string = getId('text-tooltip');\n const subheadingStyleThemed = useMemo(\n () => ({\n root: {\n color: theme.palette.neutralSecondary,\n margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n fontSize: theme.fonts.smallPlus.fontSize\n }\n }),\n [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n );\n\n return (\n <Stack className={participantListStack}>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n {paneTitleTrampoline(\n title ?? '',\n / @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n )}\n </Stack.Item>\n {(onClickHeadingMoreButton \|\|\n (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n <Stack.Item>\n <DefaultButton\n data-ui-id=\"people-pane-header-more-button\"\n ariaLabel={headingMoreButtonAriaLabel}\n styles={headingMoreButtonStyles(theme)}\n iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n onRenderMenuIcon={() => null}\n />\n </Stack.Item>\n )}\n </Stack>\n <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n <ParticipantList\n {...participantListProps}\n pinnedParticipants={pinnedParticipants}\n styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n onRenderAvatar={(userId, options) => (\n <>\n <AvatarPersona\n data-ui-id=\"chat-composite-participant-custom-avatar\"\n userId={userId}\n {...options}\n {...{ hidePersonaDetails: !!options?.text }}\n dataProvider={onFetchAvatarPersonaData}\n allowActiveBorder={true}\n />\n {options?.text && (\n <div style={displayNameStyles}>\n <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n <Text nowrap={false} aria-labelledby={tooltipId}>\n {options?.text}\n </Text>\n </TooltipHost>\n </div>\n )}\n </>\n )}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n showParticipantOverflowTooltip={!props.isMobile}\n participantAriaLabelledBy={subheadingUniqueId}\n />\n </FocusZone>\n </Stack>\n );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n const participantCountString = totalParticipantCount\n ? { numberOfPeople: `(${totalParticipantCount})` }\n : { numberOfPeople: ' ' };\n return _formatString(paneTitle, participantCountString);\n};\n"]}
1	+ {"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n participantListContainerStyle,\n participantListMobileStyle,\n participantListStack,\n participantListStyle,\n participantListWrapper,\n displayNameStyles,\n headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n participantListProps: ParticipantListProps;\n title?: string;\n isMobile?: boolean;\n};\n\n/*\n @private\n /\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n const theme = useTheme();\n const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n return (\n <Stack className={participantListWrapperClassName}>\n <ParticipantListWithHeading {...props} />\n </Stack>\n );\n};\n\n/\n @private\n /\nexport const ParticipantListWithHeading = (props: {\n participantListProps: ParticipantListProps;\n title?: string;\n isMobile?: boolean;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n headingMoreButtonAriaLabel?: string;\n onClickHeadingMoreButton?: () => void;\n headingMoreButtonMenuProps?: IContextualMenuProps;\n pinnedParticipants?: string[];\n}): JSX.Element => {\n const {\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n title,\n participantListProps,\n headingMoreButtonAriaLabel,\n onClickHeadingMoreButton,\n headingMoreButtonMenuProps,\n pinnedParticipants\n } = props;\n const subheadingUniqueId = useId();\n const theme = useTheme();\n / @conditional-compile-remove(total-participant-count) /\n const totalParticipantCount = participantListProps.totalParticipantCount;\n const tooltipId: string = getId('text-tooltip');\n const subheadingStyleThemed = useMemo(\n () => ({\n root: {\n h2: {\n color: theme.palette.neutralSecondary,\n margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n fontSize: theme.fonts.smallPlus.fontSize,\n fontWeight: 'normal'\n }\n }\n }),\n [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n );\n\n return (\n <Stack className={participantListStack}>\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n <h2>\n {paneTitleTrampoline(\n title ?? '',\n / @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n )}\n </h2>\n </Stack.Item>\n {(onClickHeadingMoreButton \|\|\n (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n <Stack.Item>\n <DefaultButton\n data-ui-id=\"people-pane-header-more-button\"\n ariaLabel={headingMoreButtonAriaLabel}\n styles={headingMoreButtonStyles(theme)}\n iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n onRenderMenuIcon={() => null}\n />\n </Stack.Item>\n )}\n </Stack>\n <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n <ParticipantList\n {...participantListProps}\n pinnedParticipants={pinnedParticipants}\n styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n onRenderAvatar={(userId, options) => (\n <>\n <AvatarPersona\n data-ui-id=\"chat-composite-participant-custom-avatar\"\n userId={userId}\n {...options}\n {...{ hidePersonaDetails: !!options?.text }}\n dataProvider={onFetchAvatarPersonaData}\n allowActiveBorder={true}\n />\n {options?.text && (\n <div style={displayNameStyles}>\n <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n <Text nowrap={false} aria-labelledby={tooltipId}>\n {options?.text}\n </Text>\n </TooltipHost>\n </div>\n )}\n </>\n )}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n showParticipantOverflowTooltip={!props.isMobile}\n participantAriaLabelledBy={subheadingUniqueId}\n />\n </FocusZone>\n </Stack>\n );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n const participantCountString = totalParticipantCount\n ? { numberOfPeople: `(${totalParticipantCount})` }\n : { numberOfPeople: ' ' };\n return _formatString(paneTitle, participantCountString);\n};\n"]}