npm - @azure/communication-react - Versions diffs - 1.22.0-alpha-202411210017 → 1.22.0-alpha-202411260017 - Mend

@azure/communication-react 1.22.0-alpha-202411210017 → 1.22.0-alpha-202411260017

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 (65) 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, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n hasIncompleteAttachmentUploads,\n removeBrokenImageContentAndClearImageSizeStyles,\n getContentWithUpdatedInlineImagesInfo,\n isMessageTooLong\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, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\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 onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress?: 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 onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage\n } = props;\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n\n const initialContent = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const content = message.content;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setInitialInlineImages(getPreviousInlineImages(content));\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n document.querySelectorAll('.broken-image-wrapper').forEach((brokenImage) => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n\n const [textValue, setTextValue] = useState<string>(initialContent \|\| '');\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n const imageUploadErrorMessage = useMemo(() => {\n return inlineImagesWithProgress?.filter((image) => image.error).pop()?.error?.message;\n }, [inlineImagesWithProgress]);\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 / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n }, [\n messageState,\n strings.editBoxTextLimit,\n / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ]);\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n textValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueWithInlineImagesOverflow state to display the error bar\n setContentValueWithInlineImagesOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to rely on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\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(inlineImagesWithProgress)) {\n setAttachmentUploadsPendingError({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n let initInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initInlineImages = initialInlineImages ?? [];\n modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\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 }, [\n submitEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initialInlineImages,\n textValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\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) /\n removedInlineImages?: Record<string, string>[]\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n });\n setText(content);\n },\n [\n setText,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onRemoveInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) / message.messageId\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n attachmentProgressError={\n imageUploadErrorMessage\n ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n onEnterKeyDown={onSubmitHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={initialContent}\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 onInsertInlineImage={\n onInsertInlineImage\n ? (imageAttributes: Record<string, string>) => {\n onInsertInlineImage(imageAttributes, message.messageId);\n }\n : undefined\n }\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"]}
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, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n hasIncompleteAttachmentUploads,\n removeBrokenImageContentAndClearImageSizeStyles,\n getContentWithUpdatedInlineImagesInfo,\n isMessageTooLong\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, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\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 onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress?: 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 onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onRemoveInlineImage\n } = props;\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n\n const initialContent = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const content = message.content;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n setInitialInlineImages(getPreviousInlineImages(content));\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n document.querySelectorAll('.broken-image-wrapper').forEach((brokenImage) => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n\n const [contentValue, setContentValue] = useState<string>(initialContent \|\| '');\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n\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 // get plain text content from the editor to check if the message is empty\n // as the content may contain tags even when the content is empty\n const plainTextContent = editTextFieldRef.current?.getPlainContent() ?? contentValue;\n return getMessageState(\n plainTextContent,\n / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []\n );\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, contentValue]);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const imageUploadErrorMessage = useMemo(() => {\n return inlineImagesWithProgress?.filter((image) => image.error).pop()?.error?.message;\n }, [inlineImagesWithProgress]);\n\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n const setContent = useCallback((newValue?: string): void => {\n setContentValue(newValue ?? '');\n }, []);\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const textTooLongMessage = useMemo(() => {\n return messageState === 'too long' \|\|\n / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n }, [\n messageState,\n strings.editBoxTextLimit,\n / @conditional-compile-remove(rich-text-editor-image-upload) / contentValueWithInlineImagesOverflow\n ]);\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(\n contentValue,\n inlineImagesWithProgress\n );\n const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n // Set contentValueWithInlineImagesOverflow state to display the error bar\n setContentValueWithInlineImagesOverflow(messageTooLong);\n // The change from the setContentValueOverflow in the previous line will not kick in yet.\n // We need to rely on the local value of messageTooLong to return early if the message is too long.\n if (messageTooLong) {\n return;\n }\n }\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(inlineImagesWithProgress)) {\n setAttachmentUploadsPendingError({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n let content = contentValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n let initInlineImages: Record<string, string>[] = [];\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initInlineImages = initialInlineImages ?? [];\n modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\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 }, [\n submitEnabled,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImagesWithProgress,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n initialInlineImages,\n contentValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\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={'chat-message-rich-text-edit-box-cancel-button'}\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={'chat-message-rich-text-edit-box-submit-button'}\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) /\n removedInlineImages?: Record<string, string>[]\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n });\n setContent(content);\n },\n [\n setContent,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onRemoveInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) / message.messageId\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 / @conditional-compile-remove(rich-text-editor-image-upload) /\n attachmentProgressError={\n imageUploadErrorMessage\n ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n onEnterKeyDown={onSubmitHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={initialContent}\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 onInsertInlineImage={\n onInsertInlineImage\n ? (imageAttributes: Record<string, string>) => {\n onInsertInlineImage(imageAttributes, message.messageId);\n }\n : undefined\n }\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

@@ -129,7 +129,7 @@ const MessageBubble = (props) => {
                         // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
                         setFocused(true);
                     }
-                }, "data-testid": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle(theme) }, message.senderDisplayName), timestamp: React.createElement(Text, { className: props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme), "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
+                }, "data-testid": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle(theme) }, message.senderDisplayName), timestamp: React.createElement(Text, { className: props.message.status === 'failed' ? chatMessageDateFailedStyle(theme) : chatMessageDateStyle(theme), "data-testid": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
                     children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                     className: mergeClasses(chatMyMessageStyles.menu,
                     // Make actions menu visible when the message is focused or the flyout is shown

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js.map 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';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\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 /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\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 onRenderAttachmentDownloads,\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 onRenderAttachmentDownloads,\n actionsForAttachment\n );\n }, [\n actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n 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-testid=\"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';\nimport { AttachmentMenuAction } from '../../../types/Attachment';\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 /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\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 onRenderAttachmentDownloads,\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 onRenderAttachmentDownloads,\n actionsForAttachment\n );\n }, [\n actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n 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-testid=\"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-testid={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/DevicePermissions/DevicePermissionDropdown.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { DefaultButton, Dropdown, Stack, Text } from '@fluentui/react';
+import { Dropdown, Stack, Text, mergeStyleSets } from '@fluentui/react';
 import React from 'react';
 /**
  * A dropdown to trigger device permission prompt
@@ -8,35 +8,46 @@ import React from 'react';
  * @internal
  */
 export const _DevicePermissionDropdown = (props) => {
-    const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;
+    const { icon, askDevicePermission, onClick, constrain, strings, options } = props;
     const onRenderPlaceholder = () => {
-        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center" },
+        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
             icon,
-            React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)));
+            React.createElement(Stack.Item, { styles: {
+                    root: {
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                        flex: 1
+                    }
+                } },
+                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)),
+            React.createElement(Stack.Item, { shrink: 0, styles: {
+                    root: {
+                        paddingLeft: '0.5rem'
+                    }
+                } },
+                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent))));
     };
-    const onRenderCaretDown = () => {
-        return React.createElement(DefaultButton, { styles: actionButtonStyles }, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
+    const showAsAllowPrompt = !options && !!askDevicePermission;
+    const styles = mergeStyleSets(showAsAllowPrompt
+        ? {
+            title: {
+                paddingRight: '0.625rem'
+            }
+        }
+        : {}, props.styles);
+    const click = () => {
+        if (askDevicePermission) {
+            void askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (React.createElement(Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
-            if (askDevicePermission) {
-                askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
+    return (React.createElement(Dropdown, { role: showAsAllowPrompt ? 'button' : undefined, "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: showAsAllowPrompt ? () => React.createElement(React.Fragment, null) : undefined, onClick: showAsAllowPrompt ? click : undefined, onKeyDown: showAsAllowPrompt
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    click();
+                }
             }
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
-};
-const actionButtonStyles = {
-    root: {
-        border: 'none',
-        height: '2rem',
-        padding: '0 0',
-        paddingTop: '0.1rem',
-        position: 'absolute',
-        right: '0',
-        lineHeight: '2rem',
-        minWidth: '3rem'
-    },
-    label: {
-        fontWeight: 400
-    }
+            : undefined, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 //# sourceMappingURL=DevicePermissionDropdown.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,~~aAAa,EAAE,~~QAAQ,~~EAAmD~~,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;~~AACxH~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,~~MAAM,EAAE,~~GAAG,KAAK,CAAC;~~IAE1F~~,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;~~YACrC~~,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,~~CACjC~~,~~CACT~~,~~CAAC;IACJ~~,CAAC,~~CAAC;IAEF~~,MAAM,~~iBAAiB~~,~~GAAG~~,~~GAAgB~~,EAAE;~~QAC1C~~,~~OAAO~~,~~oBAAC~~,~~aAAa~~,~~IAAC~~,~~MAAM~~,~~EAAE~~,~~kBAAkB~~,~~IAAG~~,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,~~CAAiB~~,CAAC;~~IACnG~~,CAAC,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~oBAAC~~,~~QAAQ~~,~~kBACK~~,~~qBAAqB~~,~~EACjC~~,~~WAAW~~,~~EAAE~~,~~OAAO~~,~~aAAP~~,~~OAAO~~,~~uBAAP~~,~~OAAO~~,~~CAAE~~,~~eAAe~~,~~EACrC~~,KAAK,EAAE,~~OAAO~~,~~aAAP~~,~~OAAO~~,~~uBAAP~~,~~OAAO~~,~~CAAE~~,~~KAAK~~,~~qBACJ,~~KAAK,CAAC,~~cAAc~~,~~EACrC~~,~~mBAAmB~~,~~EAAE~~,~~mBAAmB~~,~~EACxC~~,~~iBAAiB~~,EAAE~~,iBAAiB,EACpC,OAAO,EAAE,GAAG,EAAE~~;~~YACZ~~,IAAI,mBAAmB,EAAE,CAAC;~~gBACxB~~,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;~~YACjE~~,CAAC;~~YACD~~,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;~~QACd~~,CAAC,~~EACD~~,OAAO,EAAE,OAAO,aAAP,OAAO,~~cAAP~~,OAAO,~~GAAI~~,~~EAAE~~,~~EACtB~~,~~MAAM~~,EAAE,~~MAAM~~,~~GACd~~,~~CACH~~,~~CAAC;AACJ~~,~~CAAC~~,CAAC~~;AAYF~~,~~MAAM~~,~~kBAAkB~~,~~GAAkB;IACxC~~,~~IAAI,~~EAAE~~;QACJ~~,~~MAAM~~,EAAE,~~MAAM;QACd~~,~~MAAM~~,EAAE,~~MAAM;QACd~~,OAAO,EAAE,KAAK~~;QACd~~,~~UAAU~~,~~EAAE~~,~~QAAQ~~;~~QACpB~~,~~QAAQ~~,EAAE,~~UAAU~~;~~QACpB~~,KAAK,~~EAAE~~,GAAG~~;QACV~~,~~UAAU~~,EAAE,~~MAAM~~;~~QAClB~~,~~QAAQ~~,EAAE,~~MAAM~~;~~KACjB~~;~~IACD~~,~~KAAK~~,EAAE~~;QACL~~,~~UAAU~~,EAAE,~~GAAG~~;~~KAChB;CACF~~,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ~~DefaultButton,~~ Dropdown, ~~IButtonStyles,~~ IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Strings of {@link DevicePermissionDropdown} that can be overridden.\n \n @internal\n /\nexport interface _DevicePermissionDropdownStrings {\n /\n dropdown label\n /\n\n label?: string;\n /\n dropdown placeholder\n /\n placeHolderText: string;\n /* string for action button /\n actionButtonContent?: string;\n}\n\n/\n Props for {@link _DevicePermissionDropdown}.\n \n @internal\n /\nexport interface _DevicePermissionDropdownProps {\n /\n icon shown in dropdown placeholder\n /\n icon?: JSX.Element;\n /\n Dropdown content\n /\n options?: IDropdownOption[];\n /\n Ask for permissions of devices.\n \n @remarks\n * Browser permission window will pop up if permissions are not granted yet\n \n @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n /\n Optional callback when component is clicked\n /\n onClick?: () => void;\n /\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n constrain?: _PermissionConstraints;\n /\n Strings for devicepermissiondropdown\n /\n strings?: _DevicePermissionDropdownStrings;\n /\n Styles for devicepermissiondropdown\n /\n styles?: Partial<IDropdownStyles>;\n /\n Aria-labelledby for the dropdown\n /\n ariaLabelledby?: string;\n}\n\n/\n A dropdown to trigger device permission prompt\n \n @internal\n /\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n const { icon, askDevicePermission, onClick, constrain, strings, options, ~~styles~~ } = props;\n\n const onRenderPlaceholder = (): JSX.Element => {\n return (\n <Stack horizontal verticalAlign=\"center\">\n {icon}\n <Text>{strings?.placeHolderText}</Text>\n </Stack>\n );\n };\n\n const ~~onRenderCaretDown~~ = (): ~~JSX~~.~~Element~~ => {\n ~~return~~ ~~<DefaultButton~~ ~~styles=~~{~~actionButtonStyles}>~~{~~strings?.actionButtonContent~~}~~</DefaultButton>;\~~n };\n\n return (\n <Dropdown\n data-ui-id={'permission-dropdown'}\n placeholder={strings?.placeHolderText}\n label={strings?.label}\n aria-labelledby={props.ariaLabelledby}\n onRenderPlaceholder={onRenderPlaceholder}\n onRenderCaretDown={~~onRenderCaretDown~~}\n onClick={() => {\n if (~~askDevicePermission~~) {\n ~~askDevicePermission~~(~~constrain~~ ?? { ~~video:~~ ~~true,~~ ~~audio:~~ ~~true~~ })~~;\n }~~\n ~~onClick?.~~();\n }}\n options={options ?? []}\n styles={styles}\n />\n );\n};\n\n/\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n \n @internal\n */\nexport type _PermissionConstraints = {\n audio: boolean;\n video: boolean;\n};\n\nconst actionButtonStyles: IButtonStyles = {\n root: {\n border: 'none',\n height: '2rem',\n padding: '0 0',\n paddingTop: '0.1rem',\n position: 'absolute',\n right: '0',\n lineHeight: '2rem',\n minWidth: '3rem'\n },\n label: {\n fontWeight: 400\n }\n};\n"]}
1	+ {"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElF,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,eAAe;YACrE,IAAI;YACL,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,UAAU;wBACxB,IAAI,EAAE,CAAC;qBACR;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CAC5B;YACb,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;qBACtB;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAChC,CACP,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC;IAC5D,MAAM,MAAM,GAAG,cAAc,CAC3B,iBAAiB;QACf,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,YAAY,EAAE,UAAU;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACN,KAAK,CAAC,MAAM,CACb,CAAC;IAEF,MAAM,KAAK,GAAG,GAAS,EAAE;QACvB,IAAI,mBAAmB,EAAE,CAAC;YACxB,KAAK,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAClC,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,qBACJ,KAAK,CAAC,cAAc,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,yCAAK,CAAC,CAAC,CAAC,SAAS,EAC9D,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EACP,iBAAiB;YACf,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,KAAK,EAAE,CAAC;gBACV,CAAC;YACH,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text, mergeStyleSets } from '@fluentui/react';\nimport React from 'react';\n\n/*\n Strings of {@link DevicePermissionDropdown} that can be overridden.\n \n @internal\n /\nexport interface _DevicePermissionDropdownStrings {\n /\n dropdown label\n /\n\n label?: string;\n /\n dropdown placeholder\n /\n placeHolderText: string;\n /* string for action button /\n actionButtonContent?: string;\n}\n\n/\n Props for {@link _DevicePermissionDropdown}.\n \n @internal\n /\nexport interface _DevicePermissionDropdownProps {\n /\n icon shown in dropdown placeholder\n /\n icon?: JSX.Element;\n /\n Dropdown content\n /\n options?: IDropdownOption[];\n /\n Ask for permissions of devices.\n \n @remarks\n * Browser permission window will pop up if permissions are not granted yet\n \n @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n /\n Optional callback when component is clicked\n /\n onClick?: () => void;\n /\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n /\n constrain?: _PermissionConstraints;\n /\n Strings for devicepermissiondropdown\n /\n strings?: _DevicePermissionDropdownStrings;\n /\n Styles for devicepermissiondropdown\n /\n styles?: Partial<IDropdownStyles>;\n /\n Aria-labelledby for the dropdown\n /\n ariaLabelledby?: string;\n}\n\n/\n A dropdown to trigger device permission prompt\n \n @internal\n /\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n const { icon, askDevicePermission, onClick, constrain, strings, options } = props;\n\n const onRenderPlaceholder = (): JSX.Element => {\n return (\n <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n {icon}\n <Stack.Item\n styles={{\n root: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n flex: 1\n }\n }}\n >\n <Text>{strings?.placeHolderText}</Text>\n </Stack.Item>\n <Stack.Item\n shrink={0}\n styles={{\n root: {\n paddingLeft: '0.5rem'\n }\n }}\n >\n <Text>{strings?.actionButtonContent}</Text>\n </Stack.Item>\n </Stack>\n );\n };\n\n const showAsAllowPrompt = !options && !!askDevicePermission;\n const styles = mergeStyleSets(\n showAsAllowPrompt\n ? {\n title: {\n paddingRight: '0.625rem'\n }\n }\n : {},\n props.styles\n );\n\n const click = (): void => {\n if (askDevicePermission) {\n void askDevicePermission(constrain ?? { video: true, audio: true });\n }\n onClick?.();\n };\n\n return (\n <Dropdown\n role={showAsAllowPrompt ? 'button' : undefined}\n data-ui-id={'permission-dropdown'}\n placeholder={strings?.placeHolderText}\n label={strings?.label}\n aria-labelledby={props.ariaLabelledby}\n onRenderPlaceholder={onRenderPlaceholder}\n onRenderCaretDown={showAsAllowPrompt ? () => <></> : undefined}\n onClick={showAsAllowPrompt ? click : undefined}\n onKeyDown={\n showAsAllowPrompt\n ? (e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n click();\n }\n }\n : undefined\n }\n options={options ?? []}\n styles={styles}\n />\n );\n};\n\n/\n Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n \n @internal\n */\nexport type _PermissionConstraints = {\n audio: boolean;\n video: boolean;\n};\n"]}

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

@@ -24,6 +24,16 @@ export interface NotificationProps {
      * @defaultValue false
      */
     showStackedEffect?: boolean;
+    /**
+     * Role html property for the notification bar.
+     * @defaultValue alert
+     */
+    role?: 'alert' | 'status' | 'presentation' | 'none';
+    /**
+     * Aria-live property for the notification bar.
+     * @defaultValue assertive
+     */
+    ariaLive?: 'assertive' | 'off' | 'polite';
     /**
      * Callback called when the primary button inside notification bar is clicked.
      */

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

@@ -14,6 +14,7 @@ export const Notification = (props) => {
     const strings = props.notificationStrings;
     const theme = useTheme();
     const [show, setShow] = useState(true);
+    const { ariaLive = 'assertive', role = 'alert' } = props;
     if (props.autoDismiss) {
         setTimeout(() => {
             // After 5 seconds set the show value to false
@@ -24,7 +25,7 @@ export const Notification = (props) => {
             return React.createElement(React.Fragment, null);
         }
     }
-    return (React.createElement(Stack, { horizontalAlign: "center" },
+    return (React.createElement(Stack, { horizontalAlign: "center", "aria-live": ariaLive, role: role },
         React.createElement(Stack, { "data-ui-id": "notification-bar", styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : containerStyles(theme) },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                 React.createElement(Stack, { horizontal: true },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Notification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,IAAI,EACJ,UAAU,EACV,aAAa,EACb,KAAK,EACL,QAAQ,EACR,IAAI,EAEJ,aAAa,EACb,IAAI,EAIL,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,sBAAsB,EACtB,sBAAsB,EACtB,eAAe,EAChB,MAAM,8BAA8B,CAAC;~~AA4HtC~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,OAAO,GAAG,KAAK,CAAC,mBAAmB,CAAC;IAC1C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;~~IAEvC~~,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACtB,UAAU,CAAC,GAAG,EAAE;YACd,8CAA8C;YAC9C,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACrC,OAAO,yCAAK,CAAC;QACf,CAAC;IACH,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;~~QAC7B~~,oBAAC,KAAK,kBAAY,kBAAkB,EAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,eAAe,CAAC,KAAK,CAAC;YACvF,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACf,oBAAC,IAAI,kBACH,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,sBAAsB,EAAE,EACtD,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,qBAAqB,0CAAE,QAAQ,mCAAI,YAAY,IAC3D,KAAK,CAAC,qBAAqB,EAC/B;oBACF,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,mCAAI,eAAe,EAAE,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACzE;gBACP,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,eAC/B,QAAQ,EACnB,OAAO,EAAE,KAAK,CAAC,SAAS,GACxB,CACH,CACK;YACR;gBACE,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,mCAAI,iBAAiB,CAAC,KAAK,CAAC;yBAAI,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,OAAO,CAAQ;gBAC1F,KAAK,CAAC,WAAW,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAA,IAAI,CAC1C,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,mCAAI,sBAAsB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,IAC1F,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CACd,CACR,CACI;YACP,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,cAAc;gBAC7C,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,KAAI,CAChC,oBAAC,aAAa,IACZ,OAAO,EAAE,KAAK,CAAC,sBAAsB,EACrC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,eAAe,mCAAI,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,IAEvE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAChB,CACjB;gBACA,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,KAAI,CAC9B,oBAAC,aAAa,IACZ,OAAO,EAAE,KAAK,CAAC,oBAAoB,EACnC,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,mCAAI,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,IAErE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CACd,CACjB,CACK,CACF;QACP,KAAK,CAAC,iBAAiB,IAAI,oBAAC,KAAK,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,GAAU,CAC9E,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport {\n Icon,\n IconButton,\n PrimaryButton,\n Stack,\n useTheme,\n Text,\n IIconProps,\n DefaultButton,\n Link,\n IStackStyles,\n IButtonStyles,\n IIconStyles\n} from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyles,\n notificationIconStyles,\n notificationLinkStyles,\n titleTextStyles\n} from './styles/Notification.styles';\n\n/*\n Props for {@link Notification}.\n \n @public\n /\nexport interface NotificationProps {\n /\n Notification bar strings;\n /\n notificationStrings?: NotificationStrings;\n\n /\n Notification bar icon;\n /\n notificationIconProps?: IIconProps;\n\n /\n If set, notifications will automatically dismiss after 5 seconds\n * @defaultValue false\n /\n autoDismiss?: boolean;\n\n /\n If set, notifications will be shown in a stacked effect\n * @defaultValue false\n /\n showStackedEffect?: boolean;\n\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickPrimaryButton?: () => void;\n\n /\n Callback called when the secondary button inside notification bar is clicked.\n /\n onClickSecondaryButton?: () => void;\n\n /\n Callback called when the notification is dismissed.\n /\n onDismiss?: () => void;\n\n /\n Optional callback to supply users with further troubleshooting steps or more information for the notification.\n /\n onClickLink?: () => void;\n\n /\n Styles for the incoming call notifications.\n /\n styles?: NotificationStyles;\n}\n\n/\n All strings that may be shown on the UI in the {@link Notification}.\n \n @public\n /\nexport interface NotificationStrings {\n /\n Notification bar title.\n /\n title: string;\n /\n Notification bar dismiss button aria label\n /\n dismissButtonAriaLabel?: string;\n /\n Notification bar message.\n /\n message?: string;\n /\n Notification bar primary button label\n /\n primaryButtonLabel?: string;\n /\n Notification bar secondary button label\n /\n secondaryButtonLabel?: string;\n /\n Notification bar link label\n /\n linkLabel?: string;\n}\n\n/\n Styles for the notification component.\n \n @public\n /\nexport interface NotificationStyles {\n /\n Styles for the primary button.\n /\n primaryButton?: IButtonStyles;\n /\n Styles for the secondary button.\n /\n secondaryButton?: IButtonStyles;\n /\n Styles for the root container.\n /\n root?: IStackStyles;\n /\n Styles for the notification title.\n /\n title?: IStackStyles;\n /\n Styles for the notification icon.\n /\n icon?: IIconStyles;\n /\n Styles for the notification content.\n /\n content?: IStackStyles;\n /\n Styles for the notification hyperlink.\n /\n link?: IStackStyles;\n}\n\n/\n A component to show notification messages on the UI.\n \n @public\n */\nexport const Notification = (props: NotificationProps): JSX.Element => {\n const strings = props.notificationStrings;\n const theme = useTheme();\n const [show, setShow] = useState(true);\n\n if (props.autoDismiss) {\n setTimeout(() => {\n // After 5 seconds set the show value to false\n setShow(false);\n }, 5000);\n\n if (!show) {\n props.onDismiss && props.onDismiss();\n return <></>;\n }\n }\n\n return (\n <Stack horizontalAlign=\"center\">\n <Stack data-ui-id=\"notification-bar\" styles={props.styles?.root ?? containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n styles={props.styles?.icon ?? notificationIconStyles()}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text styles={props.styles?.title ?? titleTextStyles()}>{strings?.title}</Text>\n </Stack>\n {props.onDismiss && (\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.dismissButtonAriaLabel}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n )}\n </Stack>\n <span>\n <Text styles={props.styles?.content ?? messageTextStyles(theme)}> {strings?.message}</Text>\n {props.onClickLink && strings?.linkLabel && (\n <Link styles={props.styles?.link ?? notificationLinkStyles(theme)} onClick={props.onClickLink}>\n {strings?.linkLabel}\n </Link>\n )}\n </span>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton\n onClick={props.onClickSecondaryButton}\n styles={props.styles?.secondaryButton ?? { root: { marginTop: '1rem' } }}\n >\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton\n onClick={props.onClickPrimaryButton}\n styles={props.styles?.primaryButton ?? { root: { marginTop: '1rem' } }}\n >\n {strings?.primaryButtonLabel}\n </PrimaryButton>\n )}\n </Stack>\n </Stack>\n {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Notification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport {\n Icon,\n IconButton,\n PrimaryButton,\n Stack,\n useTheme,\n Text,\n IIconProps,\n DefaultButton,\n Link,\n IStackStyles,\n IButtonStyles,\n IIconStyles\n} from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyles,\n notificationIconStyles,\n notificationLinkStyles,\n titleTextStyles\n} from './styles/Notification.styles';\n\n/*\n Props for {@link Notification}.\n \n @public\n /\nexport interface NotificationProps {\n /\n Notification bar strings;\n /\n notificationStrings?: NotificationStrings;\n\n /\n Notification bar icon;\n /\n notificationIconProps?: IIconProps;\n\n /\n If set, notifications will automatically dismiss after 5 seconds\n * @defaultValue false\n /\n autoDismiss?: boolean;\n\n /\n If set, notifications will be shown in a stacked effect\n * @defaultValue false\n /\n showStackedEffect?: boolean;\n\n /\n Role html property for the notification bar.\n * @defaultValue alert\n /\n role?: 'alert' \| 'status' \| 'presentation' \| 'none';\n\n /\n Aria-live property for the notification bar.\n * @defaultValue assertive\n /\n ariaLive?: 'assertive' \| 'off' \| 'polite';\n\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickPrimaryButton?: () => void;\n\n /\n Callback called when the secondary button inside notification bar is clicked.\n /\n onClickSecondaryButton?: () => void;\n\n /\n Callback called when the notification is dismissed.\n /\n onDismiss?: () => void;\n\n /\n Optional callback to supply users with further troubleshooting steps or more information for the notification.\n /\n onClickLink?: () => void;\n\n /\n Styles for the incoming call notifications.\n /\n styles?: NotificationStyles;\n}\n\n/\n All strings that may be shown on the UI in the {@link Notification}.\n \n @public\n /\nexport interface NotificationStrings {\n /\n Notification bar title.\n /\n title: string;\n /\n Notification bar dismiss button aria label\n /\n dismissButtonAriaLabel?: string;\n /\n Notification bar message.\n /\n message?: string;\n /\n Notification bar primary button label\n /\n primaryButtonLabel?: string;\n /\n Notification bar secondary button label\n /\n secondaryButtonLabel?: string;\n /\n Notification bar link label\n /\n linkLabel?: string;\n}\n\n/\n Styles for the notification component.\n \n @public\n /\nexport interface NotificationStyles {\n /\n Styles for the primary button.\n /\n primaryButton?: IButtonStyles;\n /\n Styles for the secondary button.\n /\n secondaryButton?: IButtonStyles;\n /\n Styles for the root container.\n /\n root?: IStackStyles;\n /\n Styles for the notification title.\n /\n title?: IStackStyles;\n /\n Styles for the notification icon.\n /\n icon?: IIconStyles;\n /\n Styles for the notification content.\n /\n content?: IStackStyles;\n /\n Styles for the notification hyperlink.\n /\n link?: IStackStyles;\n}\n\n/\n A component to show notification messages on the UI.\n \n @public\n */\nexport const Notification = (props: NotificationProps): JSX.Element => {\n const strings = props.notificationStrings;\n const theme = useTheme();\n const [show, setShow] = useState(true);\n const { ariaLive = 'assertive', role = 'alert' } = props;\n\n if (props.autoDismiss) {\n setTimeout(() => {\n // After 5 seconds set the show value to false\n setShow(false);\n }, 5000);\n\n if (!show) {\n props.onDismiss && props.onDismiss();\n return <></>;\n }\n }\n\n return (\n <Stack horizontalAlign=\"center\" aria-live={ariaLive} role={role}>\n <Stack data-ui-id=\"notification-bar\" styles={props.styles?.root ?? containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n styles={props.styles?.icon ?? notificationIconStyles()}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text styles={props.styles?.title ?? titleTextStyles()}>{strings?.title}</Text>\n </Stack>\n {props.onDismiss && (\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.dismissButtonAriaLabel}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n )}\n </Stack>\n <span>\n <Text styles={props.styles?.content ?? messageTextStyles(theme)}> {strings?.message}</Text>\n {props.onClickLink && strings?.linkLabel && (\n <Link styles={props.styles?.link ?? notificationLinkStyles(theme)} onClick={props.onClickLink}>\n {strings?.linkLabel}\n </Link>\n )}\n </span>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton\n onClick={props.onClickSecondaryButton}\n styles={props.styles?.secondaryButton ?? { root: { marginTop: '1rem' } }}\n >\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton\n onClick={props.onClickPrimaryButton}\n styles={props.styles?.primaryButton ?? { root: { marginTop: '1rem' } }}\n >\n {strings?.primaryButtonLabel}\n </PrimaryButton>\n )}\n </Stack>\n </Stack>\n {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n </Stack>\n );\n};\n"]}

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

@@ -261,6 +261,11 @@ export interface ActiveNotification {
      * by the user.
      */
     timestamp?: Date;
+    /**
+     * Aria-live property for the notification.
+     * @defaultValue polite
+     */
+    ariaLive?: 'assertive' | 'off' | 'polite';
 }
 /**
  * A component to show notifications on the UI.

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

@@ -55,7 +55,7 @@ export const NotificationStack = (props) => {
                     : () => onDismiss();
             }
             return (React.createElement("div", { key: index, style: { marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` } },
-                React.createElement(Notification, { notificationStrings: strings ? strings[notification.type] : undefined, notificationIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: onDismiss, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss })));
+                React.createElement(Notification, { notificationStrings: strings ? strings[notification.type] : undefined, notificationIconProps: NotificationIconProps(notification.type), onClickPrimaryButton: () => { var _a; return (_a = notification.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onClickSecondaryButton: () => { var _a; return (_a = notification.onClickSecondaryButton) === null || _a === void 0 ? void 0 : _a.call(notification); }, onDismiss: onDismiss, showStackedEffect: index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow, autoDismiss: notification.autoDismiss, ariaLive: notification.ariaLive })));
         }
         else {
             return React.createElement(React.Fragment, null);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/NotificationStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,qBAAqB,EACrB,mBAAmB,EACnB,sCAAsC,EACtC,mBAAmB,EACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAuB,MAAM,gBAAgB,CAAC;AAgTnE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAC/C,MAAM,sBAAsB,GAAG,MAAA,KAAK,CAAC,sBAAsB,mCAAI,CAAC,CAAC;IAEjE,MAAM,qCAAqC,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC;IAE3E,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAElG,0GAA0G;IAC1G,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,qCAAqC;YACnC,yBAAyB,CACvB,sCAAsC,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAC1F,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,qCAAqC,CAAC,CAAC,CAAC;IAE/F,MAAM,mBAAmB,GAAG,mBAAmB,CAC7C,KAAK,CAAC,mBAAmB,EACzB,sBAAsB,EACtB,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,qBAAqB,EAChC,KAAK,EAAE;YACL,KAAK,EAAE,aAAa;SACrB,IAEA,mBAAmB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE;QAC/C,IAAI,KAAK,GAAG,sBAAsB,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,GAAS,EAAE;;gBAC3B,qCAAqC;oBACnC,CAAC,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC;oBACtF,CAAC,CAAC,MAAA,KAAK,CAAC,qBAAqB,sDAAG,YAAY,CAAC,CAAC;gBAChD,YAAY,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;YACrD,CAAC,CAAC;YACF,iDAAiD;YACjD,IAAI,YAAY,CAAC,IAAI,KAAK,sCAAsC,EAAE,CAAC;gBACjE,qGAAqG;gBACrG,iCAAiC;gBACjC,YAAY,CAAC,sBAAsB,GAAG,YAAY,CAAC,sBAAsB;oBACvE,CAAC,CAAC,YAAY,CAAC,sBAAsB;oBACrC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,KAAK,KAAK,sBAAsB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE;gBACjG,oBAAC,YAAY,IACX,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACrE,qBAAqB,EAAE,qBAAqB,CAAC,YAAY,CAAC,IAAI,CAAC,EAC/D,oBAAoB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,oBAAoB,4DAAI,CAAA,EAAA,EACjE,sBAAsB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,sBAAsB,4DAAI,CAAA,EAAA,EACrE,SAAS,EAAE,SAAS,EACpB,iBAAiB,EACf,KAAK,KAAK,sBAAsB,GAAG,CAAC,IAAI,mBAAmB,CAAC,MAAM,GAAG,sBAAsB,EAE7F,WAAW,EAAE,YAAY,CAAC,WAAW,GACrC,CACE,CACP,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,yCAAK,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Stack } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport {\n DismissedNotification,\n NotificationIconProps,\n dismissNotification,\n dropDismissalsForInactiveNotifications,\n notificationsToShow\n} from './utils';\nimport { Notification, NotificationStrings } from './Notification';\n\n/*\n Props for {@link NotificationStack}.\n * @public\n /\nexport interface NotificationStackProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: NotificationStackStrings;\n\n /\n Currently active notifications.\n /\n activeNotifications: ActiveNotification[];\n\n /\n Max notifications to show at a time.\n * @defaultValue 2\n /\n maxNotificationsToShow?: number;\n\n /\n Callback called when the dismiss button is triggered.\n * Use this to control notifications shown when they dismissed by the user.\n * Note this onDismiss function will affect all notifications in the same stack\n /\n onDismissNotification?: (dismissedNotification: ActiveNotification) => void;\n\n /\n If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore notifications from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountNotifications?: boolean;\n}\n\n/\n All strings that may be shown on the UI in the {@link NotificationStack}.\n \n @public\n /\nexport interface NotificationStackStrings {\n /\n A generic message when starting video fails.\n /\n startVideoGeneric?: NotificationStrings;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric?: NotificationStrings;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric?: NotificationStrings;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric?: NotificationStrings;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric?: NotificationStrings;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric?: NotificationStrings;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow?: NotificationStrings;\n /\n Message shown when poor network quality is detected during a teams meetings.\n * Contains actions to open phone info modal.\n /\n teamsMeetingCallNetworkQualityLow?: NotificationStrings;\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound?: NotificationStrings;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound?: NotificationStrings;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied?: NotificationStrings;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari?: NotificationStrings;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem?: NotificationStrings;\n\n /\n Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n /\n callMicrophoneUnmutedBySystem?: NotificationStrings;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied?: NotificationStrings;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze?: NotificationStrings;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied?: NotificationStrings;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari?: NotificationStrings;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse?: NotificationStrings;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem?: NotificationStrings;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem?: NotificationStrings;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied?: NotificationStrings;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied?: NotificationStrings;\n\n /\n Dimiss Notifications button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: NotificationStrings;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: NotificationStrings;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: NotificationStrings;\n /\n Error string letting you know remote participants see a frozen stream for you.\n /\n cameraFrozenForRemoteParticipants?: NotificationStrings;\n /\n Unable to start effect\n /\n unableToStartVideoEffect?: NotificationStrings;\n /\n An error message when starting spotlight while max participants are spotlighted\n /\n startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;\n /\n Muted by a remote participant message\n /\n mutedByRemoteParticipant?: NotificationStrings;\n /\n Speaking while muted message\n /\n speakingWhileMuted?: NotificationStrings;\n /\n Recording started message\n /\n recordingStarted?: NotificationStrings;\n /\n Transcription started message\n /\n transcriptionStarted?: NotificationStrings;\n /\n Recording stopped message\n /\n recordingStopped?: NotificationStrings;\n /\n Transcription stopped message\n /\n transcriptionStopped?: NotificationStrings;\n /\n Recording and transcription both started message\n /\n recordingAndTranscriptionStarted?: NotificationStrings;\n /\n Recording and transcription both stopped message\n /\n recordingAndTranscriptionStopped?: NotificationStrings;\n /\n Recording stopped but transcription still going on message\n /\n recordingStoppedStillTranscribing?: NotificationStrings;\n /\n Transcription stopped but recording still going on message\n /\n transcriptionStoppedStillRecording?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n /\n assignedBreakoutRoomOpened?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n /\n assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user is assigned breakout room is changed\n /\n assignedBreakoutRoomChanged?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when breakout room is joined\n /\n breakoutRoomJoined?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when breakout room is closing soon\n /\n breakoutRoomClosingSoon?: NotificationStrings;\n}\n\n/\n All notifications that can be shown in the {@link NotificationStack}.\n \n @public\n /\nexport type NotificationType = keyof NotificationStackStrings;\n\n/\n Active notifications to be shown via {@link NotificationStack}.\n \n @public\n /\nexport interface ActiveNotification {\n /\n Type of error that is active.\n /\n type: NotificationType;\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickPrimaryButton?: () => void;\n\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickSecondaryButton?: () => void;\n\n /\n Callback called when the notification is dismissed.\n /\n onDismiss?: () => void;\n\n /\n If set, notification will automatically dismiss after 5 seconds\n /\n autoDismiss?: boolean;\n\n /\n The latest timestamp when this notification was observed.\n \n When available, this is used to track notifications that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n A component to show notifications on the UI.\n * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.\n * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.\n \n This component internally tracks dismissed by the user.\n * * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.\n * * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.\n * If the notification recurs, it is shown in the UI.\n \n \n * @public\n /\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n const localeStrings = useLocale().strings.notificationStack;\n const strings = props.strings ?? localeStrings;\n const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\n\n const trackDismissedNotificationsInternally = !props.onDismissNotification;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedNotifications, setDismissedNotifications] = useState<DismissedNotification[]>([]);\n\n // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => {\n trackDismissedNotificationsInternally &&\n setDismissedNotifications(\n dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications)\n );\n }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n\n const activeNotifications = notificationsToShow(\n props.activeNotifications,\n dismissedNotifications,\n props.ignorePremountNotifications ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack\n data-ui-id=\"notifications-stack\"\n style={{\n width: 'fit-content'\n }}\n >\n {activeNotifications.map((notification, index) => {\n if (index < maxNotificationsToShow) {\n const onDismiss = (): void => {\n trackDismissedNotificationsInternally\n ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n : props.onDismissNotification?.(notification);\n notification.onDismiss && notification.onDismiss();\n };\n / @conditional-compile-remove(breakout-rooms) */\n if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n // onDismiss if it is not defined\n notification.onClickSecondaryButton = notification.onClickSecondaryButton\n ? notification.onClickSecondaryButton\n : () => onDismiss();\n }\n return (\n <div key={index} style={{ marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` }}>\n <Notification\n notificationStrings={strings ? strings[notification.type] : undefined}\n notificationIconProps={NotificationIconProps(notification.type)}\n onClickPrimaryButton={() => notification.onClickPrimaryButton?.()}\n onClickSecondaryButton={() => notification.onClickSecondaryButton?.()}\n onDismiss={onDismiss}\n showStackedEffect={\n index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow\n }\n autoDismiss={notification.autoDismiss}\n />\n </div>\n );\n } else {\n return <></>;\n }\n })}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/NotificationStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,qBAAqB,EACrB,mBAAmB,EACnB,sCAAsC,EACtC,mBAAmB,EACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAuB,MAAM,gBAAgB,CAAC;AAsTnE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAC/C,MAAM,sBAAsB,GAAG,MAAA,KAAK,CAAC,sBAAsB,mCAAI,CAAC,CAAC;IAEjE,MAAM,qCAAqC,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC;IAE3E,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAElG,0GAA0G;IAC1G,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,qCAAqC;YACnC,yBAAyB,CACvB,sCAAsC,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAC1F,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,qCAAqC,CAAC,CAAC,CAAC;IAE/F,MAAM,mBAAmB,GAAG,mBAAmB,CAC7C,KAAK,CAAC,mBAAmB,EACzB,sBAAsB,EACtB,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,qBAAqB,EAChC,KAAK,EAAE;YACL,KAAK,EAAE,aAAa;SACrB,IAEA,mBAAmB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE;QAC/C,IAAI,KAAK,GAAG,sBAAsB,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,GAAS,EAAE;;gBAC3B,qCAAqC;oBACnC,CAAC,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC;oBACtF,CAAC,CAAC,MAAA,KAAK,CAAC,qBAAqB,sDAAG,YAAY,CAAC,CAAC;gBAChD,YAAY,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;YACrD,CAAC,CAAC;YACF,iDAAiD;YACjD,IAAI,YAAY,CAAC,IAAI,KAAK,sCAAsC,EAAE,CAAC;gBACjE,qGAAqG;gBACrG,iCAAiC;gBACjC,YAAY,CAAC,sBAAsB,GAAG,YAAY,CAAC,sBAAsB;oBACvE,CAAC,CAAC,YAAY,CAAC,sBAAsB;oBACrC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,KAAK,KAAK,sBAAsB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE;gBACjG,oBAAC,YAAY,IACX,mBAAmB,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACrE,qBAAqB,EAAE,qBAAqB,CAAC,YAAY,CAAC,IAAI,CAAC,EAC/D,oBAAoB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,oBAAoB,4DAAI,CAAA,EAAA,EACjE,sBAAsB,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,YAAY,CAAC,sBAAsB,4DAAI,CAAA,EAAA,EACrE,SAAS,EAAE,SAAS,EACpB,iBAAiB,EACf,KAAK,KAAK,sBAAsB,GAAG,CAAC,IAAI,mBAAmB,CAAC,MAAM,GAAG,sBAAsB,EAE7F,WAAW,EAAE,YAAY,CAAC,WAAW,EACrC,QAAQ,EAAE,YAAY,CAAC,QAAQ,GAC/B,CACE,CACP,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,yCAAK,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Stack } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport {\n DismissedNotification,\n NotificationIconProps,\n dismissNotification,\n dropDismissalsForInactiveNotifications,\n notificationsToShow\n} from './utils';\nimport { Notification, NotificationStrings } from './Notification';\n\n/*\n Props for {@link NotificationStack}.\n * @public\n /\nexport interface NotificationStackProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: NotificationStackStrings;\n\n /\n Currently active notifications.\n /\n activeNotifications: ActiveNotification[];\n\n /\n Max notifications to show at a time.\n * @defaultValue 2\n /\n maxNotificationsToShow?: number;\n\n /\n Callback called when the dismiss button is triggered.\n * Use this to control notifications shown when they dismissed by the user.\n * Note this onDismiss function will affect all notifications in the same stack\n /\n onDismissNotification?: (dismissedNotification: ActiveNotification) => void;\n\n /\n If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore notifications from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountNotifications?: boolean;\n}\n\n/\n All strings that may be shown on the UI in the {@link NotificationStack}.\n \n @public\n /\nexport interface NotificationStackStrings {\n /\n A generic message when starting video fails.\n /\n startVideoGeneric?: NotificationStrings;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric?: NotificationStrings;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric?: NotificationStrings;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric?: NotificationStrings;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric?: NotificationStrings;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric?: NotificationStrings;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow?: NotificationStrings;\n /\n Message shown when poor network quality is detected during a teams meetings.\n * Contains actions to open phone info modal.\n /\n teamsMeetingCallNetworkQualityLow?: NotificationStrings;\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound?: NotificationStrings;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound?: NotificationStrings;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied?: NotificationStrings;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari?: NotificationStrings;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem?: NotificationStrings;\n\n /\n Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n /\n callMicrophoneUnmutedBySystem?: NotificationStrings;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied?: NotificationStrings;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze?: NotificationStrings;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied?: NotificationStrings;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari?: NotificationStrings;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse?: NotificationStrings;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem?: NotificationStrings;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem?: NotificationStrings;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied?: NotificationStrings;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied?: NotificationStrings;\n\n /\n Dimiss Notifications button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: NotificationStrings;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: NotificationStrings;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: NotificationStrings;\n /\n Error string letting you know remote participants see a frozen stream for you.\n /\n cameraFrozenForRemoteParticipants?: NotificationStrings;\n /\n Unable to start effect\n /\n unableToStartVideoEffect?: NotificationStrings;\n /\n An error message when starting spotlight while max participants are spotlighted\n /\n startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;\n /\n Muted by a remote participant message\n /\n mutedByRemoteParticipant?: NotificationStrings;\n /\n Speaking while muted message\n /\n speakingWhileMuted?: NotificationStrings;\n /\n Recording started message\n /\n recordingStarted?: NotificationStrings;\n /\n Transcription started message\n /\n transcriptionStarted?: NotificationStrings;\n /\n Recording stopped message\n /\n recordingStopped?: NotificationStrings;\n /\n Transcription stopped message\n /\n transcriptionStopped?: NotificationStrings;\n /\n Recording and transcription both started message\n /\n recordingAndTranscriptionStarted?: NotificationStrings;\n /\n Recording and transcription both stopped message\n /\n recordingAndTranscriptionStopped?: NotificationStrings;\n /\n Recording stopped but transcription still going on message\n /\n recordingStoppedStillTranscribing?: NotificationStrings;\n /\n Transcription stopped but recording still going on message\n /\n transcriptionStoppedStillRecording?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n /\n assignedBreakoutRoomOpened?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n /\n assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when the user is assigned breakout room is changed\n /\n assignedBreakoutRoomChanged?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when breakout room is joined\n /\n breakoutRoomJoined?: NotificationStrings;\n / @conditional-compile-remove(breakout-rooms) /\n /\n Message shown in notification when breakout room is closing soon\n /\n breakoutRoomClosingSoon?: NotificationStrings;\n}\n\n/\n All notifications that can be shown in the {@link NotificationStack}.\n \n @public\n /\nexport type NotificationType = keyof NotificationStackStrings;\n\n/\n Active notifications to be shown via {@link NotificationStack}.\n \n @public\n /\nexport interface ActiveNotification {\n /\n Type of error that is active.\n /\n type: NotificationType;\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickPrimaryButton?: () => void;\n\n /\n Callback called when the primary button inside notification bar is clicked.\n /\n onClickSecondaryButton?: () => void;\n\n /\n Callback called when the notification is dismissed.\n /\n onDismiss?: () => void;\n\n /\n If set, notification will automatically dismiss after 5 seconds\n /\n autoDismiss?: boolean;\n\n /\n The latest timestamp when this notification was observed.\n \n When available, this is used to track notifications that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n\n /\n Aria-live property for the notification.\n * @defaultValue polite\n /\n ariaLive?: 'assertive' \| 'off' \| 'polite';\n}\n\n/\n A component to show notifications on the UI.\n * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.\n * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.\n \n This component internally tracks dismissed by the user.\n * * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.\n * * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.\n * If the notification recurs, it is shown in the UI.\n \n \n * @public\n /\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n const localeStrings = useLocale().strings.notificationStack;\n const strings = props.strings ?? localeStrings;\n const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\n\n const trackDismissedNotificationsInternally = !props.onDismissNotification;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedNotifications, setDismissedNotifications] = useState<DismissedNotification[]>([]);\n\n // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => {\n trackDismissedNotificationsInternally &&\n setDismissedNotifications(\n dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications)\n );\n }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n\n const activeNotifications = notificationsToShow(\n props.activeNotifications,\n dismissedNotifications,\n props.ignorePremountNotifications ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack\n data-ui-id=\"notifications-stack\"\n style={{\n width: 'fit-content'\n }}\n >\n {activeNotifications.map((notification, index) => {\n if (index < maxNotificationsToShow) {\n const onDismiss = (): void => {\n trackDismissedNotificationsInternally\n ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n : props.onDismissNotification?.(notification);\n notification.onDismiss && notification.onDismiss();\n };\n / @conditional-compile-remove(breakout-rooms) */\n if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n // onDismiss if it is not defined\n notification.onClickSecondaryButton = notification.onClickSecondaryButton\n ? notification.onClickSecondaryButton\n : () => onDismiss();\n }\n return (\n <div key={index} style={{ marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` }}>\n <Notification\n notificationStrings={strings ? strings[notification.type] : undefined}\n notificationIconProps={NotificationIconProps(notification.type)}\n onClickPrimaryButton={() => notification.onClickPrimaryButton?.()}\n onClickSecondaryButton={() => notification.onClickSecondaryButton?.()}\n onDismiss={onDismiss}\n showStackedEffect={\n index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow\n }\n autoDismiss={notification.autoDismiss}\n ariaLive={notification.ariaLive}\n />\n </div>\n );\n } else {\n return <></>;\n }\n })}\n </Stack>\n );\n};\n"]}

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

@@ -33,12 +33,18 @@ export interface ParticipantItemStrings {
     sharingIconLabel: string;
     /** Label for the muted icon in participant state stack  */
     mutedIconLabel: string;
+    /** Label for the raised hand icon in participant state stack  */
+    handRaisedIconLabel?: string;
     /** placeholder text for participants who does not have a display name*/
     displayNamePlaceholder?: string;
     /** String shown when `participantState` is `Ringing` */
     participantStateRinging?: string;
     /** String shown when `participantState` is `Hold` */
     participantStateHold?: string;
+    /** Aria Label applied to the base element of the `participantItem` */
+    participantItemAriaLabel?: string;
+    /** Aria Label applied to the base element of the `participantItem` when there are more options present */
+    participantItemWithMoreOptionsAriaLabel?: string;
     /** String for the attendee role */
     attendeeRole: string;
 }
@@ -102,4 +108,6 @@ export interface ParticipantItemProps {
  * @public
  */
 export declare const ParticipantItem: (props: ParticipantItemProps) => JSX.Element;
+/** @private */
+export declare const formatParticipantStateString: (props: ParticipantItemProps, strings: ParticipantItemStrings) => string | undefined;
 //# sourceMappingURL=ParticipantItem.d.ts.map