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

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

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 (75) hide show

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

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

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

@@ -32,16 +32,23 @@ export const ChatMyMessageComponent = (props) => {
         }
     }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
     const onResendClick = useCallback(() => {
-        /* @conditional-compile-remove(file-sharing-acs) */
-        const messageOptions = {
-            attachments: `attachments` in message ? message.attachments : undefined
-        };
         onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
         onSendMessage &&
             onSendMessage(content !== undefined ? content : '',
             /* @conditional-compile-remove(file-sharing-acs) */
-            messageOptions);
-    }, [onDeleteMessage, clientMessageId, onSendMessage, content, message]);
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            {
+                /* @conditional-compile-remove(file-sharing-acs) */ attachments: `attachments` in message ? message.attachments : undefined,
+                type: props.richTextEditorOptions ? 'html' : 'text'
+            });
+    }, [
+        message,
+        onDeleteMessage,
+        clientMessageId,
+        onSendMessage,
+        content,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */ props.richTextEditorOptions
+    ]);
     const onSubmitHandler = useCallback(
     // due to a bug in babel, we can't use arrow function here
     // affecting conditional-compile-remove(attachment-upload)

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

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

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

@@ -95,6 +95,10 @@ export interface ErrorBarStrings {
      * Message shown when poor network quality is detected during a call.
      */
     callNetworkQualityLow: string;
+    /**
+     * Message shown when poor network quality is detected during a call.
+     */
+    teamsMeetingCallNetworkQualityLow: string;
     /**
      * Message shown on failure to detect audio output devices.
      */

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

@@ -45,8 +45,8 @@ export const ErrorBar = (props) => {
                 lineHeight: 'inherit'
             },
             dismissal: {
-                height: 0,
-                paddingTop: '0.8rem'
+                height: '2rem',
+                paddingBottom: '0.8rem'
             }
         }, key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), onDismiss: () => {
             var _a;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AA4PjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;YAC5B,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpG,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAEjF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,qBAAqB,IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE;;YACd,OAAA,8BAA8B;gBAC5B,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA;SAAA,EAEnC,sBAAsB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EACnF,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,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 { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Props for {@link ErrorBar}.\n \n In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n \n @public\n /\nexport interface ErrorBarProps extends IMessageBarProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: ErrorBarStrings;\n\n /\n Currently active errors.\n /\n activeErrorMessages: ActiveErrorMessage[];\n\n /\n If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountErrors?: boolean;\n\n /\n Callback called when the dismiss button is triggered.\n * Use this to control errors shown when they dismissed by the user.\n /\n onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/\n All strings that may be shown on the UI in the {@link ErrorBar}.\n \n @public\n /\nexport interface ErrorBarStrings {\n /\n Unable to reach Chat service.\n \n This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n /\n unableToReachChatService: string;\n\n /\n User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n /\n accessDenied: string;\n\n /\n User is no longer on the thread.\n \n See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n /\n userNotInChatThread: string;\n\n /\n Sending message failed because user is no longer on the thread.\n /\n sendMessageNotInChatThread: string;\n\n /\n A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n /\n sendMessageGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n startVideoGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric: string;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric: string;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric: string;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric: string;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric: string;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow: string;\n\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound: string;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari: string;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem: string;\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: string;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied: string;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari: string;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse: string;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem: string;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem: string;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied: string;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied: string;\n /\n Dimiss errorbar button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: string;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: string;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: string;\n /\n Error bar string letting you know remote participants see a frozen stream for you.\n /\n cameraFrozenForRemoteParticipants?: string;\n\n /\n Unable to start effect\n /\n unableToStartVideoEffect?: string;\n\n /\n An error message when starting spotlight while max participants are spotlighted\n /\n startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n\n / @conditional-compile-remove(soft-mute) /\n /\n An error message when local user is muted by a remote participant\n /\n mutedByRemoteParticipant: string;\n}\n\n/\n All errors that can be shown in the {@link ErrorBar}.\n \n @public\n /\nexport type ErrorType = keyof ErrorBarStrings;\n\n/\n Active error messages to be shown via {@link ErrorBar}.\n \n @public\n /\nexport interface ActiveErrorMessage {\n /\n Type of error that is active.\n /\n type: ErrorType;\n /\n The latest timestamp when this error was observed.\n \n When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n \n This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n \n Uses {@link @fluentui/react#MessageBar} UI element.\n \n @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const trackDismissedErrorsInternally = !props.onDismissError;\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 [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => {\n trackDismissedErrorsInternally &&\n setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() =>\n trackDismissedErrorsInternally\n ? setDismissedErrors(dismissError(dismissedErrors, error))\n : props.onDismissError?.(error)\n }\n dismissButtonAriaLabel={`${strings[error.type]}, ${strings.dismissButtonAriaLabel}`}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAiQjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,MAAM,8BAA8B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;IAE7D,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;YAC5B,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACpG,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,8BAA8B,CAAC,CAAC,CAAC;IAEjF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,qBAAqB,IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;aACxB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE;;YACd,OAAA,8BAA8B;gBAC5B,CAAC,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC1D,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,sDAAG,KAAK,CAAC,CAAA;SAAA,EAEnC,sBAAsB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,sBAAsB,EAAE,EACnF,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,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 { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/*\n Props for {@link ErrorBar}.\n \n In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n \n @public\n /\nexport interface ErrorBarProps extends IMessageBarProps {\n /\n Strings shown on the UI on errors.\n /\n strings?: ErrorBarStrings;\n\n /\n Currently active errors.\n /\n activeErrorMessages: ActiveErrorMessage[];\n\n /\n If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n \n This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n \n @defaultValue false\n /\n ignorePremountErrors?: boolean;\n\n /\n Callback called when the dismiss button is triggered.\n * Use this to control errors shown when they dismissed by the user.\n /\n onDismissError?: (dismissedError: ActiveErrorMessage) => void;\n}\n\n/\n All strings that may be shown on the UI in the {@link ErrorBar}.\n \n @public\n /\nexport interface ErrorBarStrings {\n /\n Unable to reach Chat service.\n \n This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n /\n unableToReachChatService: string;\n\n /\n User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n /\n accessDenied: string;\n\n /\n User is no longer on the thread.\n \n See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n /\n userNotInChatThread: string;\n\n /\n Sending message failed because user is no longer on the thread.\n /\n sendMessageNotInChatThread: string;\n\n /\n A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n /\n sendMessageGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n startVideoGeneric: string;\n\n /\n A generic message when starting video fails.\n /\n stopVideoGeneric: string;\n\n /\n A generic message when muting microphone fails.\n /\n muteGeneric: string;\n\n /\n A generic message when unmuting microphone fails.\n /\n unmuteGeneric: string;\n\n /\n A generic message when starting screenshare fails.\n /\n startScreenShareGeneric: string;\n\n /\n A generic message when stopping screenshare fails.\n /\n stopScreenShareGeneric: string;\n\n /\n Message shown when poor network quality is detected during a call.\n /\n callNetworkQualityLow: string;\n\n / @conditional-compile-remove(teams-meeting-conference) /\n /\n Message shown when poor network quality is detected during a call.\n /\n teamsMeetingCallNetworkQualityLow: string;\n /\n Message shown on failure to detect audio output devices.\n /\n callNoSpeakerFound: string;\n\n /\n Message shown on failure to detect audio input devices.\n /\n callNoMicrophoneFound: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system.\n /\n callMicrophoneAccessDenied: string;\n\n /\n Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n /\n callMicrophoneAccessDeniedSafari: string;\n\n /\n Message shown when microphone is muted by the system (not by local or remote participants)\n /\n callMicrophoneMutedBySystem: string;\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: string;\n\n /\n Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n /\n callMacOsMicrophoneAccessDenied: string;\n\n /\n Message shown when poor network causes local video stream to be frozen.\n /\n callLocalVideoFreeze: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system.\n /\n callCameraAccessDenied: string;\n\n /\n Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n /\n callCameraAccessDeniedSafari: string;\n\n /\n Message shown when local video fails to start because camera is already in use by\n * another applciation.\n /\n callCameraAlreadyInUse: string;\n\n /\n Message shown when local video is stopped by the system (not by local or remote participants)\n /\n callVideoStoppedBySystem: string;\n\n /\n Message shown when local video was recovered by the system (not by the local participant)\n /\n callVideoRecoveredBySystem: string;\n\n /\n Mac OS specific message shown when system denies access to camera.\n /\n callMacOsCameraAccessDenied: string;\n\n /\n Mac OS specific message shown when system denies sharing local screen on a call.\n /\n callMacOsScreenShareAccessDenied: string;\n /\n Dimiss errorbar button aria label read by screen reader accessibility tools\n /\n dismissButtonAriaLabel?: string;\n\n /\n An error message when joining a call fails.\n /\n failedToJoinCallGeneric?: string;\n\n /\n An error message when joining a call fails specifically due to an invalid meeting link.\n /\n failedToJoinCallInvalidMeetingLink?: string;\n /\n Error bar string letting you know remote participants see a frozen stream for you.\n /\n cameraFrozenForRemoteParticipants?: string;\n\n /\n Unable to start effect\n /\n unableToStartVideoEffect?: string;\n\n /\n An error message when starting spotlight while max participants are spotlighted\n /\n startSpotlightWhileMaxParticipantsAreSpotlighted: string;\n\n / @conditional-compile-remove(soft-mute) /\n /\n An error message when local user is muted by a remote participant\n /\n mutedByRemoteParticipant: string;\n}\n\n/\n All errors that can be shown in the {@link ErrorBar}.\n \n @public\n /\nexport type ErrorType = keyof ErrorBarStrings;\n\n/\n Active error messages to be shown via {@link ErrorBar}.\n \n @public\n /\nexport interface ActiveErrorMessage {\n /\n Type of error that is active.\n /\n type: ErrorType;\n /\n The latest timestamp when this error was observed.\n \n When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n /\n timestamp?: Date;\n}\n\n/\n A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n \n This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n \n Uses {@link @fluentui/react#MessageBar} UI element.\n \n @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const trackDismissedErrorsInternally = !props.onDismissError;\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 [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => {\n trackDismissedErrorsInternally &&\n setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors));\n }, [props.activeErrorMessages, dismissedErrors, trackDismissedErrorsInternally]);\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: '2rem',\n paddingBottom: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() =>\n trackDismissedErrorsInternally\n ? setDismissedErrors(dismissError(dismissedErrors, error))\n : props.onDismissError?.(error)\n }\n dismissButtonAriaLabel={`${strings[error.type]}, ${strings.dismissButtonAriaLabel}`}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/IncomingCallNotification.d.ts ADDED Viewed

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+/**
+ * Strings for the incoming call notification component.
+ * @beta
+ */
+export type IncomingCallNotificationStrings = {
+    /**
+     *Placeholder CallerID for the incoming call notification.
+     */
+    incomingCallNotificationPlaceholderId?: string;
+    /**
+     * Placeholder Alert for the incoming call notification.
+     */
+    incomingCallNotificationPlaceholderAlert?: string;
+    /**
+     * Aria label for the accept with audio button in the incoming call notification.
+     */
+    incomingCallNoticicationAcceptWithAudioAriaLabel?: string;
+    /**
+     * Aria label for the accept with video button in the incoming call notification.
+     */
+    incomingCallNoticicationAcceptWithVideoAriaLabel?: string;
+    /**
+     * Aria label for the reject button in the incoming call notification.
+     */
+    incomingCallNoticicationRejectAriaLabel?: string;
+};
+/**
+ * Properties for the incoming call notification component.
+ * @beta
+ */
+export type IncomingCallNotificationProps = {
+    /**
+     * Caller's Name
+     */
+    callerName?: string;
+    /**
+     * Alert Text"
+     */
+    alertText?: string;
+    /**
+     * URL to the avatar image for the user
+     */
+    avatar?: string;
+    /**
+     * Callback to accept the call with audio
+     */
+    onAcceptWithAudio: () => void;
+    /**
+     * Callback to accept the call with Video
+     */
+    onAcceptWithVideo: () => void;
+    /**
+     * Callback to reject the call
+     */
+    onReject: () => void;
+};
+/**
+ * A Notification component that is to be used to represent incoming calls to the end user.
+ * Allows the user to accept or reject the incoming call.
+ * @beta
+ */
+export declare const IncomingCallNotification: (props: IncomingCallNotificationProps) => JSX.Element;
+//# sourceMappingURL=IncomingCallNotification.d.ts.map

package/dist/dist-esm/react-components/src/components/IncomingCallNotification.js ADDED Viewed

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { IconButton, Persona, PersonaSize, Stack, Text, useTheme } from '@fluentui/react';
+import React from 'react';
+/* @conditional-compile-remove(one-to-n-calling) */
+import { useLocale } from '../localization';
+/**
+ * A Notification component that is to be used to represent incoming calls to the end user.
+ * Allows the user to accept or reject the incoming call.
+ * @beta
+ */
+export const IncomingCallNotification = (props) => {
+    const { callerName, alertText, avatar, onAcceptWithAudio, onAcceptWithVideo, onReject } = props;
+    const theme = useTheme();
+    /* @conditional-compile-remove(one-to-n-calling) */
+    const localeStrings = useLocale().strings.IncomingCallNotification;
+    return (React.createElement(Stack, { horizontal: true, verticalAlign: "center", styles: incomingCallToastStyle(theme) },
+        React.createElement(Stack, { horizontalAlign: "start", styles: incomingCallToastAvatarContainerStyle },
+            React.createElement(Persona, { imageUrl: avatar, text: callerName, size: PersonaSize.size40, hidePersonaDetails: true, "aria-label": callerName })),
+        React.createElement(Stack, { grow: 1, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
+            React.createElement(Stack, { style: { fontSize: '0.875rem' } },
+                React.createElement(Text, null, callerName !== null && callerName !== void 0 ? callerName :
+                /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderId)),
+            React.createElement(Stack, { style: { fontSize: '0.75rem' } },
+                React.createElement(Text, null, alertText !== null && alertText !== void 0 ? alertText :
+                /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderAlert))),
+        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 } },
+            React.createElement(IconButton, { styles: incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' },
+                /* @conditional-compile-remove(one-to-n-calling) */
+                ariaLabel: localeStrings.incomingCallNoticicationRejectAriaLabel }),
+            React.createElement(IconButton, { styles: incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithVideo(), iconProps: { iconName: 'IncomingCallNotificationAcceptWithVideoIcon' },
+                /* @conditional-compile-remove(one-to-n-calling) */
+                ariaLabel: localeStrings.incomingCallNoticicationAcceptWithVideoAriaLabel }),
+            React.createElement(IconButton, { styles: incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon' },
+                /* @conditional-compile-remove(one-to-n-calling) */
+                ariaLabel: localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel }))));
+};
+const incomingCallToastStyle = (theme) => {
+    return {
+        root: {
+            minWidth: '20rem',
+            opacity: 0.95,
+            borderRadius: '0.5rem',
+            boxShadow: theme.effects.elevation8,
+            padding: '1rem'
+        }
+    };
+};
+const incomingCallToastAvatarContainerStyle = {
+    root: {
+        marginRight: '0.5rem'
+    }
+};
+const incomingCallAcceptButtonStyle = (theme) => {
+    return {
+        root: {
+            backgroundColor: theme.palette.greenDark,
+            color: theme.palette.white,
+            borderRadius: '2rem',
+            minWidth: '2rem',
+            width: '2rem',
+            border: 'none'
+        },
+        rootHovered: {
+            backgroundColor: theme.palette.green,
+            color: theme.palette.white
+        }
+    };
+};
+const incomingCallRejectButtonStyle = (theme) => {
+    return {
+        root: {
+            backgroundColor: theme.palette.redDark,
+            color: theme.palette.white,
+            borderRadius: '2rem',
+            minWidth: '2rem',
+            width: '2rem',
+            border: 'none'
+        },
+        rootHovered: {
+            backgroundColor: theme.palette.red,
+            color: theme.palette.white
+        }
+    };
+};
+//# sourceMappingURL=IncomingCallNotification.js.map

package/dist/dist-esm/react-components/src/components/IncomingCallNotification.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n IButtonStyles,\n IStackStyles,\n IconButton,\n Persona,\n PersonaSize,\n Stack,\n Text,\n Theme,\n useTheme\n} from '@fluentui/react';\nimport React from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../localization';\n\n/**\n * Strings for the incoming call notification component.\n * @beta\n */\nexport type IncomingCallNotificationStrings = {\n /**\n *Placeholder CallerID for the incoming call notification.\n */\n incomingCallNotificationPlaceholderId?: string;\n /**\n * Placeholder Alert for the incoming call notification.\n */\n incomingCallNotificationPlaceholderAlert?: string;\n /**\n * Aria label for the accept with audio button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n /**\n * Aria label for the accept with video button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n /**\n * Aria label for the reject button in the incoming call notification.\n */\n incomingCallNoticicationRejectAriaLabel?: string;\n};\n\n/**\n * Properties for the incoming call notification component.\n * @beta\n */\nexport type IncomingCallNotificationProps = {\n /**\n * Caller's Name\n */\n callerName?: string;\n /**\n * Alert Text\"\n */\n alertText?: string;\n /**\n * URL to the avatar image for the user\n */\n avatar?: string;\n /**\n * Callback to accept the call with audio\n */\n onAcceptWithAudio: () => void;\n /**\n * Callback to accept the call with Video\n */\n onAcceptWithVideo: () => void;\n /**\n * Callback to reject the call\n */\n onReject: () => void;\n};\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @beta\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n const { callerName, alertText, avatar, onAcceptWithAudio, onAcceptWithVideo, onReject } = props;\n const theme = useTheme();\n /* @conditional-compile-remove(one-to-n-calling) */\n const localeStrings = useLocale().strings.IncomingCallNotification;\n return (\n <Stack horizontal verticalAlign=\"center\" styles={incomingCallToastStyle(theme)}>\n <Stack horizontalAlign=\"start\" styles={incomingCallToastAvatarContainerStyle}>\n <Persona\n imageUrl={avatar}\n text={callerName}\n size={PersonaSize.size40}\n hidePersonaDetails={true}\n aria-label={callerName}\n />\n </Stack>\n\n <Stack grow={1} horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n <Stack style={{ fontSize: '0.875rem' }}>\n <Text>\n {callerName ??\n /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderId}\n </Text>\n </Stack>\n <Stack style={{ fontSize: '0.75rem' }}>\n <Text>\n {alertText ??\n /* @conditional-compile-remove(one-to-n-calling) */ localeStrings.incomingCallNotificationPlaceholderAlert}\n </Text>\n </Stack>\n </Stack>\n\n <Stack horizontal tokens={{ childrenGap: 10 }}>\n <IconButton\n styles={incomingCallRejectButtonStyle(theme)}\n onClick={() => onReject()}\n iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={localeStrings.incomingCallNoticicationRejectAriaLabel}\n />\n <IconButton\n styles={incomingCallAcceptButtonStyle(theme)}\n onClick={() => onAcceptWithVideo()}\n iconProps={{ iconName: 'IncomingCallNotificationAcceptWithVideoIcon' }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={localeStrings.incomingCallNoticicationAcceptWithVideoAriaLabel}\n />\n <IconButton\n styles={incomingCallAcceptButtonStyle(theme)}\n onClick={() => onAcceptWithAudio()}\n iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon' }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel}\n />\n </Stack>\n </Stack>\n );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n return {\n root: {\n minWidth: '20rem',\n opacity: 0.95,\n borderRadius: '0.5rem',\n boxShadow: theme.effects.elevation8,\n padding: '1rem'\n }\n };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n root: {\n marginRight: '0.5rem'\n }\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n backgroundColor: theme.palette.greenDark,\n color: theme.palette.white,\n borderRadius: '2rem',\n minWidth: '2rem',\n width: '2rem',\n border: 'none'\n },\n rootHovered: {\n backgroundColor: theme.palette.green,\n color: theme.palette.white\n }\n };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n backgroundColor: theme.palette.redDark,\n color: theme.palette.white,\n borderRadius: '2rem',\n minWidth: '2rem',\n width: '2rem',\n border: 'none'\n },\n rootHovered: {\n backgroundColor: theme.palette.red,\n color: theme.palette.white\n }\n };\n};\n"]}

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

@@ -48,9 +48,9 @@ export interface NotificationStrings {
      */
     title: string;
     /**
-     * Notification bar close button aria label
+     * Notification bar dismiss button aria label
      */
-    closeButtonAriaLabel: string;
+    dismissButtonAriaLabel: string;
     /**
      * Notification bar message.
      */

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

@@ -30,7 +30,7 @@ export const Notification = (props) => {
                 React.createElement(Stack, { horizontal: true },
                     React.createElement(Icon, Object.assign({ className: notificationIconClassName, iconName: (_b = (_a = props.notificationIconProps) === null || _a === void 0 ? void 0 : _a.iconName) !== null && _b !== void 0 ? _b : 'ErrorBadge' }, props.notificationIconProps)),
                     React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
-                React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.closeButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
+                React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
             React.createElement(Text, { className: messageTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.message),
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
                 (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && (React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, style: { marginTop: '1rem' } }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel)),

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,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAc,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EACzB,kBAAkB,EACnB,MAAM,8BAA8B,CAAC;AA0EtC;;;;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,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;YACpE,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe;gBAC/C,oBAAC,KAAK,IAAC,UAAU;oBACf,oBAAC,IAAI,kBACH,SAAS,EAAE,yBAAyB,EACpC,QAAQ,EAAE,MAAA,MAAA,KAAK,CAAC,qBAAqB,0CAAE,QAAQ,mCAAI,YAAY,IAC3D,KAAK,CAAC,qBAAqB,EAC/B;oBACF,oBAAC,IAAI,IAAC,SAAS,EAAE,kBAAkB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAQ,CACtD;gBAER,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,~~oBAAoB~~,~~eAC7B~~,QAAQ,EACnB,OAAO,EAAE,KAAK,CAAC,SAAS,GACxB,CACI;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAQ;YACnE,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,cAAc;gBAC7C,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,KAAI,CAChC,oBAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAC/E,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAChB,CACjB;gBACA,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,KAAI,CAC9B,oBAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,IAC7E,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 { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyle,\n notificationIconClassName,\n titleTextClassName\n} from './styles/Notification.styles';\n\n/*\n Props for {@link Notification}.\n \n @beta\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/\n All strings that may be shown on the UI in the {@link Notification}.\n \n @beta\n /\nexport interface NotificationStrings {\n /\n Notification bar title.\n /\n title: string;\n /\n Notification bar ~~close~~ button aria label\n /\n ~~closeButtonAriaLabel~~: 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\n/\n A component to show notification messages on the UI.\n \n @beta\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\" className={containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n className={notificationIconClassName}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text className={titleTextClassName}>{strings?.title}</Text>\n </Stack>\n\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.~~closeButtonAriaLabel~~}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n </Stack>\n <Text className={messageTextStyle(theme)}>{strings?.message}</Text>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>\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 { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyle,\n notificationIconClassName,\n titleTextClassName\n} from './styles/Notification.styles';\n\n/*\n Props for {@link Notification}.\n \n @beta\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/\n All strings that may be shown on the UI in the {@link Notification}.\n \n @beta\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\n/\n A component to show notification messages on the UI.\n \n @beta\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\" className={containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n className={notificationIconClassName}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text className={titleTextClassName}>{strings?.title}</Text>\n </Stack>\n\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.dismissButtonAriaLabel}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n </Stack>\n <Text className={messageTextStyle(theme)}>{strings?.message}</Text>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>\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

@@ -69,6 +69,11 @@ export interface NotificationStackStrings {
      * Message shown when poor network quality is detected during a call.
      */
     callNetworkQualityLow?: NotificationStrings;
+    /**
+     * Message shown when poor network quality is detected during a teams meetings.
+     * Contains actions to open phone info modal.
+     */
+    teamsMeetingCallNetworkQualityLow?: NotificationStrings;
     /**
      * Message shown on failure to detect audio output devices.
      */

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":"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","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/* @conditional-compile-remove(notifications) /\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 * @beta\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 @beta\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 /\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 /\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 / @conditional-compile-remove(soft-mute) /\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}\n\n/\n All notifications that can be shown in the {@link NotificationStack}.\n \n @beta\n /\nexport type NotificationType = keyof NotificationStackStrings;\n\n/\n Active notifications to be shown via {@link NotificationStack}.\n \n @beta\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 * @beta\n /\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n / @conditional-compile-remove(notifications) /\n const localeStrings = useLocale().strings.notificationStack;\n const strings = props.strings ?? / @conditional-compile-remove(notifications) */ 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 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={() => {\n trackDismissedNotificationsInternally\n ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n : props.onDismissNotification?.(notification);\n notification.onDismiss && notification.onDismiss();\n }}\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":"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","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/* @conditional-compile-remove(notifications) /\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 * @beta\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 @beta\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 / @conditional-compile-remove(teams-meeting-conference) /\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 /\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 / @conditional-compile-remove(soft-mute) /\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}\n\n/\n All notifications that can be shown in the {@link NotificationStack}.\n \n @beta\n /\nexport type NotificationType = keyof NotificationStackStrings;\n\n/\n Active notifications to be shown via {@link NotificationStack}.\n \n @beta\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 * @beta\n /\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n / @conditional-compile-remove(notifications) /\n const localeStrings = useLocale().strings.notificationStack;\n const strings = props.strings ?? / @conditional-compile-remove(notifications) */ 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 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={() => {\n trackDismissedNotificationsInternally\n ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n : props.onDismissNotification?.(notification);\n notification.onDismiss && notification.onDismiss();\n }}\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"]}