npm - @azure/communication-react - Versions diffs - 1.19.0-alpha-202407250014 → 1.19.0-alpha-202407270014 - Mend

@azure/communication-react 1.19.0-alpha-202407250014 → 1.19.0-alpha-202407270014

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n cancelInlineImageUpload,\n hasIncompleteAttachmentUploads,\n insertImagesToContentString,\n isAttachmentUploadCompleted,\n removeBrokenImageContentAndClearImageSizeStyles\n} from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n\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, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage?: (imageUrl: string, imageFileName: string, messageId: 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 initialContent = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const content = message.content;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n document.querySelectorAll('.broken-image-wrapper').forEach((brokenImage) => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n\n const [textValue, setTextValue] = useState<string>(initialContent \|\| '');\n\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []);\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, textValue]);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const imageUploadErrorMessage = useMemo(() => {\n return imageUploadsInProgress?.filter((image) => image.error).pop()?.error?.message;\n }, [imageUploadsInProgress]);\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({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (isAttachmentUploadCompleted(imageUploadsInProgress)) {\n insertImagesToContentString(textValue, imageUploadsInProgress, (content) => {\n onSubmit(content, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata \|\| []);\n });\n return;\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.imageUploadsPendingError,\n onSubmit,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata\n ]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n onSubmitHandler();\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n onSubmitHandler\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const onChangeHandler = useCallback(\n (\n content: string \| undefined,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageSrcArray?: Array<string>\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cancelInlineImageUpload({\n imageSrcArray,\n imageUploadsInProgress,\n messageId: message.messageId,\n editBoxOnCancelInlineImageUpload: onCancelInlineImageUpload,\n sendBoxOnCancelInlineImageUpload: undefined\n });\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 / @conditional-compile-remove(rich-text-editor-image-upload) / message.messageId\n ]\n );\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors\n textTooLongMessage={textTooLongMessage}\n systemMessage={message.failureReason}\n / @conditional-compile-remove(rich-text-editor-image-upload) / attachmentUploadsPendingError={\n attachmentUploadsPendingError\n }\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n attachmentProgressError={\n imageUploadErrorMessage\n ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={initialContent}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage={(imageUrl: string, imageFileName: string) => {\n onUploadInlineImage && onUploadInlineImage(imageUrl, imageFileName, message.messageId);\n }}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../../utils/SendBoxUtils';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport {\n cancelInlineImageUpload,\n hasIncompleteAttachmentUploads,\n insertImagesToContentString,\n isAttachmentUploadCompleted,\n removeBrokenImageContentAndClearImageSizeStyles\n} from '../../utils/SendBoxUtils';\nimport {\n getMessageState,\n onRenderCancelIcon,\n onRenderSubmitIcon\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport {\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata,\n doesMessageContainMultipleAttachments\n} from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\n/ @conditional-compile-remove(file-sharing-acs) /\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\n/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\n\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, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImages?: AttachmentMetadataInProgress[];\n};\n\n/\n @private\n /\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const {\n onCancel,\n onSubmit,\n strings,\n message,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImages,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload\n } = props;\n\n const initialContent = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const content = message.content;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n // The broken image element is a div element with all the attributes of the original image element.\n // We need to convert it to a img element so the Rooster knows how to render it.\n // And we need to copy over all the attributes such as id, width, etc.\n // which is needed for sending the message with the images correctly.\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n document.querySelectorAll('.broken-image-wrapper').forEach((brokenImage) => {\n const imageElement = document.createElement('img');\n const attributes = brokenImage.attributes;\n for (const attribute of attributes) {\n imageElement.setAttribute(attribute.name, attribute.value);\n }\n\n imageElement.src = BROKEN_IMAGE_SVG_DATA;\n imageElement.style.width = '3rem';\n imageElement.style.height = '3rem';\n brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n });\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n return document.body.innerHTML;\n return message.content;\n }, [message]);\n\n const [textValue, setTextValue] = useState<string>(initialContent \|\| '');\n\n / @conditional-compile-remove(file-sharing-acs) /\n const [attachmentMetadata, handleAttachmentAction] = useReducer(\n attachmentMetadataReducer,\n getMessageWithAttachmentMetadata(message) ?? []\n );\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError \| undefined>(\n undefined\n );\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = useMemo(() => {\n return getMessageState(textValue, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata ?? []);\n }, [/ @conditional-compile-remove(file-sharing-acs) / attachmentMetadata, textValue]);\n\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n const imageUploadErrorMessage = useMemo(() => {\n return inlineImages?.filter((image) => image.error).pop()?.error?.message;\n }, [inlineImages]);\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(inlineImages)) {\n setAttachmentUploadsPendingError({\n message: strings.imageUploadsPendingError,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.info\n });\n return;\n }\n\n let content = textValue;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n content = removeBrokenImageContentAndClearImageSizeStyles(content);\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n if (isAttachmentUploadCompleted(inlineImages)) {\n insertImagesToContentString(textValue, inlineImages, (content) => {\n onSubmit(content, / @conditional-compile-remove(file-sharing-acs) / attachmentMetadata \|\| []);\n });\n return;\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 inlineImages,\n textValue,\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n strings.imageUploadsPendingError,\n onSubmit,\n / @conditional-compile-remove(file-sharing-acs) /\n attachmentMetadata\n ]);\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n data-testId={strings.editBoxCancelButton}\n />\n <InputBoxButton\n className={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n onSubmitHandler();\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n data-testId={strings.editBoxSubmitButton}\n />\n </Stack>\n );\n }, [\n message.messageId,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n onSubmitHandler\n ]);\n const richTextLocaleStrings = useMemo(() => {\n / @conditional-compile-remove(rich-text-editor) /\n return { ...locale.richTextSendBox, ...strings };\n return locale.sendBox;\n }, [\n / @conditional-compile-remove(rich-text-editor) / locale.richTextSendBox,\n / @conditional-compile-remove(rich-text-editor) / strings,\n locale.sendBox\n ]);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n // edit box only capable of removing attachments\n // we need to expand attachment actions\n // if we want to support more actions e.g. add\n handleAttachmentAction({ type: 'remove', id: attachmentId });\n }, []);\n\n / @conditional-compile-remove(file-sharing-acs) /\n const onRenderAttachmentUploads = useCallback(() => {\n return (\n <Stack className={attachmentUploadCardsStyles}>\n <FluentV9ThemeProvider v8Theme={theme}>\n <_AttachmentUploadCards\n attachments={attachmentMetadata}\n onCancelAttachmentUpload={onCancelAttachmentUpload}\n />\n </FluentV9ThemeProvider>\n </Stack>\n );\n }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n\n const onChangeHandler = useCallback(\n (\n content: string \| undefined,\n / @conditional-compile-remove(rich-text-editor-image-upload) / imageSrcArray?: Array<string>\n ) => {\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n cancelInlineImageUpload({\n imageSrcArray,\n inlineImages,\n messageId: message.messageId,\n editBoxOnCancelInlineImageUpload: onCancelInlineImageUpload,\n sendBoxOnCancelInlineImageUpload: undefined\n });\n setText(content);\n },\n [\n setText,\n / @conditional-compile-remove(rich-text-editor-image-upload) / inlineImages,\n / @conditional-compile-remove(rich-text-editor-image-upload) / onCancelInlineImageUpload,\n / @conditional-compile-remove(rich-text-editor-image-upload) / message.messageId\n ]\n );\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors\n textTooLongMessage={textTooLongMessage}\n systemMessage={message.failureReason}\n / @conditional-compile-remove(rich-text-editor-image-upload) / attachmentUploadsPendingError={\n attachmentUploadsPendingError\n }\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n attachmentProgressError={\n imageUploadErrorMessage\n ? {\n message: imageUploadErrorMessage,\n timestamp: Date.now(),\n errorBarType: SendBoxErrorBarType.error\n }\n : undefined\n }\n />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={onChangeHandler}\n editorComponentRef={editTextFieldRef}\n initialContent={initialContent}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n isHorizontalLayoutDisabled={true}\n / @conditional-compile-remove(file-sharing-acs) /\n onRenderAttachmentUploads={onRenderAttachmentUploads}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={(imageUrl: string, imageFileName: string) => {\n onInsertInlineImage && onInsertInlineImage(imageUrl, imageFileName, message.messageId);\n }}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: mergeClasses(\n chatMyMessageStyles.root,\n / @conditional-compile-remove(file-sharing-acs) */\n hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined\n )\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nexport default ChatMessageComponentAsRichTextEditBox;\n"]}

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

@@ -81,8 +81,8 @@ type ChatMyMessageComponentProps = {
         content: DocumentFragment;
     }) => void;
     onCancelInlineImageUpload?: (imageId: string, messageId: string) => void;
-    onUploadInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;
-    imageUploadsInProgress?: AttachmentMetadataInProgress[];
+    onInsertInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;
+    inlineImages?: AttachmentMetadataInProgress[];
 };
 /**
  * @private

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

@@ -86,9 +86,9 @@ export const ChatMyMessageComponent = (props) => {
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             onPaste: props.onPaste,
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            onUploadInlineImage: props.onUploadInlineImage,
+            onInsertInlineImage: props.onInsertInlineImage,
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
-            imageUploadsInProgress: props.imageUploadsInProgress,
+            inlineImages: props.inlineImages,
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             onCancelInlineImageUpload: props.onCancelInlineImageUpload }));
     }

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';\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(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } 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/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\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 isRichTextEditorEnabled?: boolean;\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, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress?: AttachmentMetadataInProgress[];\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 let newContent = content ?? '';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n onSendMessage &&\n onSendMessage(\n newContent,\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 / @conditional-compile-remove(rich-text-editor) /\n type: props.isRichTextEditorEnabled ? 'html' : 'text'\n }\n );\n }, [\n message,\n onDeleteMessage,\n clientMessageId,\n onSendMessage,\n content,\n / @conditional-compile-remove(rich-text-editor) / props.isRichTextEditorEnabled\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 isRichTextEditorEnabled={props.isRichTextEditorEnabled}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onUploadInlineImage={props.onUploadInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n imageUploadsInProgress={props.imageUploadsInProgress}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload={props.onCancelInlineImageUpload}\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';\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(rich-text-editor-image-upload) /\nimport { AttachmentMetadataInProgress } 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/ @conditional-compile-remove(rich-text-editor-image-upload) /\nimport { removeBrokenImageContentAndClearImageSizeStyles } from '../../utils/SendBoxUtils';\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 isRichTextEditorEnabled?: boolean;\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, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage?: (imageUrl: string, imageFileName: string, messageId: string) => void;\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImages?: AttachmentMetadataInProgress[];\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 let newContent = content ?? '';\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n newContent = removeBrokenImageContentAndClearImageSizeStyles(newContent);\n onSendMessage &&\n onSendMessage(\n newContent,\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 / @conditional-compile-remove(rich-text-editor) /\n type: props.isRichTextEditorEnabled ? 'html' : 'text'\n }\n );\n }, [\n message,\n onDeleteMessage,\n clientMessageId,\n onSendMessage,\n content,\n / @conditional-compile-remove(rich-text-editor) / props.isRichTextEditorEnabled\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 isRichTextEditorEnabled={props.isRichTextEditorEnabled}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onPaste={props.onPaste}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onInsertInlineImage={props.onInsertInlineImage}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n inlineImages={props.inlineImages}\n / @conditional-compile-remove(rich-text-editor-image-upload) /\n onCancelInlineImageUpload={props.onCancelInlineImageUpload}\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/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.js CHANGED Viewed

@@ -31,11 +31,11 @@ export const FluentChatMyMessageComponent = (props) => {
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     onPaste,
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    imageUploadsInProgress,
+    inlineImages,
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
     onCancelInlineImageUpload,
     /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    onUploadInlineImage } = props;
+    onInsertInlineImage } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
     const onRenderAttachmentDownloadsMemo = useMemo(() => {
@@ -68,9 +68,9 @@ export const FluentChatMyMessageComponent = (props) => {
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
                 onCancelInlineImageUpload: onCancelInlineImageUpload,
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                onUploadInlineImage: onUploadInlineImage,
+                onInsertInlineImage: onInsertInlineImage,
                 /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                imageUploadsInProgress: imageUploadsInProgress })));
+                inlineImages: inlineImages })));
         }
         return React.createElement(React.Fragment, null);
     }, [
@@ -98,9 +98,9 @@ export const FluentChatMyMessageComponent = (props) => {
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
         onCancelInlineImageUpload,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        onUploadInlineImage,
+        onInsertInlineImage,
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
-        imageUploadsInProgress
+        inlineImages
     ]);
     const messageRenderer = useCallback((messageProps) => {
         return onRenderMessage === undefined

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

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

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

@@ -15,7 +15,7 @@ import { concatStyleSets, DefaultButton, FocusZone, mergeStyles, Stack, Text, Te
 import { useState } from 'react';
 import { useLocale } from '../../localization';
 import { buttonStyles, containerStyles, iconButtonStyles, digitStyles, letterStyles, textFieldStyles } from '../styles/Dialpad.styles';
-import { formatPhoneNumber } from '../utils/formatPhoneNumber';
+import { _formatPhoneNumber } from '../utils/formatPhoneNumber';
 import useLongPress from '../utils/useLongPress';
 import { dtmfFrequencies, Tone } from './DTMFToneGenerator';
 const dialPadButtonsDefault = [
@@ -160,7 +160,7 @@ const DialpadContainer = (props) => {
         setText(modifiedInput);
     };
     return (React.createElement(Stack, { className: mergeStyles(containerStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
-        dialpadMode === 'dialer' && (React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue),
+        dialpadMode === 'dialer' && (React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : _formatPhoneNumber(plainTextValue),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
                 setText(e.target.value);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/*\n Strings of {@link Dialpad} that can be overridden.\n \n @public\n /\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/\n Styles for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/\n DTMF tone for PSTN calls.\n \n @public\n /\nexport type DtmfTone =\n \| 'A'\n \| 'B'\n \| 'C'\n \| 'D'\n \| 'Flash'\n \| 'Num0'\n \| 'Num1'\n \| 'Num2'\n \| 'Num3'\n \| 'Num4'\n \| 'Num5'\n \| 'Num6'\n \| 'Num7'\n \| 'Num8'\n \| 'Num9'\n \| 'Pound'\n \| 'Star';\n\n/\n Modes of the dialpad component.\n * @public\n /\nexport type DialpadMode = 'dtmf' \| 'dialer';\n\n/\n Modes of how the longpress handlers can be tiggered.\n * @public\n /\nexport type LongPressTrigger = 'mouseAndTouch' \| 'touch';\n\n/\n Props for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /\n function to send dtmf tones on button click\n /\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /\n Callback for dialpad button behavior\n /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /\n set dialpad textfield content\n /\n textFieldValue?: string;\n /\n on change function for text field, provides an unformatted plain text\n /\n onChange?: (input: string) => void;\n /\n flag to determine when to show/hide delete button, default true\n /\n showDeleteButton?: boolean;\n /\n Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n /\n longPressTrigger?: LongPressTrigger;\n /\n Styles for customizing the dialpad component\n /\n styles?: DialpadStyles;\n /\n Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n /\n disableDtmfPlayback?: boolean;\n /\n Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n /\n dialpadMode?: DialpadMode;\n /\n Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n /\n dtmfAudioContext?: AudioContext;\n}\n\ntype DialpadButtonContent = {\n /* Number displayed on each dialpad button /\n digit: DtmfFrequenciesKeys;\n /* Letters displayed on each dialpad button /\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: DtmfFrequenciesKeys;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' \|\|\n e.key === 'ArrowLeft' \|\|\n e.key === 'ArrowRight' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n return;\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /* Pass in custom content to dialpad textfield /\n textFieldValue?: string;\n /* on change function for text field, provides an unformatted plain text /\n onChange?: (input: string) => void;\n /* boolean input to determine when to show/hide delete button, default true /\n showDeleteButton?: boolean;\n /* boolean input to determine if dialpad is in mobile view, default false /\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer',\n dtmfAudioContext\n } = props;\n\n const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndexrows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n /\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/*\n A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n \n @public\n /\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n const localeStrings = useLocale().strings.dialpad;\n\n const strings = { ...localeStrings, ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
1	+ {"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { _formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, DtmfFrequenciesKeys, Tone } from './DTMFToneGenerator';\n\n/*\n Strings of {@link Dialpad} that can be overridden.\n \n @public\n /\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/\n Styles for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/\n DTMF tone for PSTN calls.\n \n @public\n /\nexport type DtmfTone =\n \| 'A'\n \| 'B'\n \| 'C'\n \| 'D'\n \| 'Flash'\n \| 'Num0'\n \| 'Num1'\n \| 'Num2'\n \| 'Num3'\n \| 'Num4'\n \| 'Num5'\n \| 'Num6'\n \| 'Num7'\n \| 'Num8'\n \| 'Num9'\n \| 'Pound'\n \| 'Star';\n\n/\n Modes of the dialpad component.\n * @public\n /\nexport type DialpadMode = 'dtmf' \| 'dialer';\n\n/\n Modes of how the longpress handlers can be tiggered.\n * @public\n /\nexport type LongPressTrigger = 'mouseAndTouch' \| 'touch';\n\n/\n Props for {@link Dialpad} component.\n \n @public\n /\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /\n function to send dtmf tones on button click\n /\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /\n Callback for dialpad button behavior\n /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /\n set dialpad textfield content\n /\n textFieldValue?: string;\n /\n on change function for text field, provides an unformatted plain text\n /\n onChange?: (input: string) => void;\n /\n flag to determine when to show/hide delete button, default true\n /\n showDeleteButton?: boolean;\n /\n Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n /\n longPressTrigger?: LongPressTrigger;\n /\n Styles for customizing the dialpad component\n /\n styles?: DialpadStyles;\n /\n Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n /\n disableDtmfPlayback?: boolean;\n /\n Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n /\n dialpadMode?: DialpadMode;\n /\n Audio context for generating DTMF tones. If this if not provided the dialpad will create one iteslf.\n /\n dtmfAudioContext?: AudioContext;\n}\n\ntype DialpadButtonContent = {\n /* Number displayed on each dialpad button /\n digit: DtmfFrequenciesKeys;\n /* Letters displayed on each dialpad button /\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: DtmfFrequenciesKeys;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' \|\|\n e.key === 'ArrowLeft' \|\|\n e.key === 'ArrowRight' \|\|\n e.key === 'ArrowUp' \|\|\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n return;\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' \|\| e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior /\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /* Pass in custom content to dialpad textfield /\n textFieldValue?: string;\n /* on change function for text field, provides an unformatted plain text /\n onChange?: (input: string) => void;\n /* boolean input to determine when to show/hide delete button, default true /\n showDeleteButton?: boolean;\n /* boolean input to determine if dialpad is in mobile view, default false /\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n dtmfAudioContext?: AudioContext;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer',\n dtmfAudioContext\n } = props;\n\n const dtmfToneAudioContext = useRef(dtmfAudioContext ? dtmfAudioContext : new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : _formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndexrows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n /\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/*\n A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n \n @public\n /\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n const localeStrings = useLocale().strings.dialpad;\n\n const strings = { ...localeStrings, ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, ,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}

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

@@ -7,7 +7,7 @@ import { IButtonStyles, IStackStyles } from '@fluentui/react';
  */
 export interface IncomingCallNotificationStrings {
     /**
-     *Placeholder CallerID for the incoming call notification.
+     * Placeholder CallerID for the incoming call notification.
      */
     incomingCallNotificationPlaceholderId?: string;
     /**
@@ -26,6 +26,18 @@ export interface IncomingCallNotificationStrings {
      * Aria label for the reject button in the incoming call notification.
      */
     incomingCallNoticicationRejectAriaLabel?: string;
+    /**
+     * Label for the accept button in the incoming call notification.
+     */
+    incomingCallNotificationAcceptButtonLabel?: string;
+    /**
+     * Label for the accept with video button in the incoming call notification.
+     */
+    incomingCallNotificationAccceptWithVideoButtonLabel?: string;
+    /**
+     * label for the reject button in the incoming call notification.
+     */
+    incomingCallNotificationRejectButtonLabel?: string;
 }
 /**
  * Styles for the incoming call notification component.
@@ -88,10 +100,24 @@ export interface IncomingCallNotificationProps {
      * Callback to reject the call
      */
     onReject: () => void;
+    /**
+     * Callback when the notification is dismissed
+     */
+    onDismiss?: () => void;
     /**
      * Styles for the incoming call notification component.
      */
     styles?: IncomingCallNotificationStyles;
+    /**
+     * Strings for the incoming call notification component.
+     */
+    strings?: IncomingCallNotificationStrings;
+    /**
+     * Options for whether to show the accept with video button
+     */
+    acceptOptions: {
+        showAcceptWithVideo: boolean;
+    };
 }
 /**
  * A Notification component that is to be used to represent incoming calls to the end user.