npm - @azure/communication-react - Versions diffs - 1.28.0-beta.2 → 1.28.0 - Mend

@azure/communication-react 1.28.0-beta.2 → 1.28.0

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

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":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AACrG,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,wBAAwB,EAAE,sCAAsC,EAAE,MAAM,uCAAuC,CAAC;AAGzH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAA6C,EAAe,EAAE;IACzG,MAAM,EACJ,OAAO,EACP,MAAM,EACN,6BAA6B,EAC7B,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,EACd,MAAM,EACN,qBAAqB,EACrB,cAAc,EACd,oBAAoB,EACpB,2BAA2B,EAC3B,uBAAuB,EACvB,OAAO,EACP,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAE7D,sGAAsG;IACtG,qFAAqF;IACrF,MAAM,0BAA0B,GAAG,WAAW,CAAC,CAAC,YAA0B,EAAE,EAAE;QAC5E,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YAClG,OAAO,oBAAC,sBAAsB,oBAAK,YAAY,IAAE,2BAA2B,EAAE,2BAA2B,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,uBAAuB,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,wBAAwB,IAAI,CAAC;QACh1B,CAAC;QACD,OAAO,yCAAK,CAAC;IACf,CAAC,EAAE,CAAC,mBAAmB,EAAE,cAAc,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,iBAAiB,EAAE,MAAM,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,cAAc,EAAE,2BAA2B,EAAE,oBAAoB;QACnO,uDAAuD;QACvD,IAAI,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,uBAAuB,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAClI,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,YAA0B,EAAE,EAAE;QACjE,OAAO,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,0BAA0B,mBAC5D,YAAY,EACf,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,0BAA0B,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,0BAA0B,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,qBAAqH,EAAE,qBAAkJ,EAAE,iBAA2B,EAAE,gBAAyB,EAAE,SAAkB,EAAE,EAAE;QAClY,OAAO,iBAAiB,IAAI,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;YACzF,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,CAAC,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,GAAI,CAAC;IACrJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,wBAAwB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,uGAAuG;YACvG,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,aAAa,EAAE,uBAAuB,CAAC,UAAU,EAAE,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC;YACnJ,KAAK,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,MAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;YACzH,IAAI,EAAE,MAAM;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,0BAA0B,CAAC,CAAC,CAAC;IACpH,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,IAA2B,EAAE,EAAE;QACzE,sCAAsC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,CAAC;YAClG,GAAG,EAAE,sBAAsB;SAC5B,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,aAAa,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACxG,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACvC,OAAO,6BAAK,SAAS,EAAE,WAAW,CAAC;gBACjC,WAAW,EAAE,SAAS;aACvB,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,EAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,MAAA,OAAO,CAAC,IAAI,mCAAI,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IACzF,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAC7I,CAAC;IACX,CAAC,EAAE,CAAC,qBAAqB,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhK,8EAA8E;IAC9E,uFAAuF;IACvF,iFAAiF;IACjF,2EAA2E;IAC3E,OAAO,oBAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,mBAAmB,IAC9H,eAAe,mBACb,KAAK,EACR,CACoB,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\nimport { 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, removeFluentUIKeyboardNavigationStyles } 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 onDisplayDateTimeString,\n inlineImageOptions,\n mentionOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads,\n isRichTextEditorEnabled,\n onPaste,\n inlineImagesWithProgress,\n onRemoveInlineImage,\n onInsertInlineImage\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat' \|\| messageProps.message.messageType === 'blocked') {\n return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} onDisplayDateTimeString={onDisplayDateTimeString} inlineImageOptions={inlineImageOptions} mentionOptions={mentionOptions} actionsForAttachment={actionsForAttachment} isRichTextEditorEnabled={isRichTextEditorEnabled} onPaste={onPaste} onRemoveInlineImage={onRemoveInlineImage} onInsertInlineImage={onInsertInlineImage} inlineImagesWithProgress={inlineImagesWithProgress} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, onDisplayDateTimeString, inlineImageOptions, mentionOptions, onRenderAttachmentDownloads, actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString(), isRichTextEditorEnabled, onPaste, onRemoveInlineImage, onInsertInlineImage, inlineImagesWithProgress]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null) \| undefined, defaultStatusRenderer: (message: ChatMessage \| BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const setMessageContainerRef = useCallback((node: HTMLDivElement \| null) => {\n removeFluentUIKeyboardNavigationStyles(node);\n }, []);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n ref: setMessageContainerRef\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage, setMessageContainerRef]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>;\n};"]}
1	+ {"version":3,"file":"FluentChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/FluentChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport { ChatMessage } from '../../../types';\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, removeFluentUIKeyboardNavigationStyles } from '../../utils/ChatMessageComponentUtils';\nimport type { FluentChatMessageComponentWrapperProps } from '../MessageComponents/FluentChatMessageComponent';\n\n/*\n The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n \n @private\n */\nexport const FluentChatMyMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n inlineImageOptions,\n userId,\n defaultStatusRenderer,\n statusToRender,\n actionsForAttachment,\n onRenderAttachmentDownloads\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat') {\n return <ChatMyMessageComponent {...messageProps} onRenderAttachmentDownloads={onRenderAttachmentDownloads} strings={messageProps.strings} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} inlineImageOptions={inlineImageOptions} actionsForAttachment={actionsForAttachment} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, inlineImageOptions, onRenderAttachmentDownloads, actionsForAttachment,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n new Date().toDateString()]);\n const messageRenderer = useCallback((messageProps: MessageProps) => {\n return onRenderMessage === undefined ? defaultChatMessageRenderer({\n ...messageProps\n }) : onRenderMessage(messageProps, defaultChatMessageRenderer);\n }, [defaultChatMessageRenderer, onRenderMessage]);\n const messageStatusRenderer = useCallback((onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element \| null) \| undefined, defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element, showMessageStatus?: boolean, participantCount?: number, readCount?: number) => {\n return showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({\n status: message.status\n }) : defaultStatusRenderer(message, participantCount ?? 0, readCount ?? 0, message.status) : <div className={mergeStyles(noMessageStatusStyle)} />;\n }, [message, statusToRender]);\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n const myMessageRootProps = useMemo(() => {\n return {\n // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles?.myChatItemMessageContainer)),\n style: styles?.myChatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.myChatItemMessageContainer) : {},\n role: 'none'\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles?.myChatItemMessageContainer]);\n const setMessageContainerRef = useCallback((node: HTMLDivElement \| null) => {\n removeFluentUIKeyboardNavigationStyles(node);\n }, []);\n const myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n ref: setMessageContainerRef\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage, setMessageContainerRef]);\n const myMessageStatusIcon = useMemo(() => {\n return <div className={mergeStyles({\n paddingLeft: '0.25rem'\n }, styles?.messageStatusContainer ? styles.messageStatusContainer(message.mine ?? false) : '')}>\n {message.status ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) : undefined}\n </div>;\n }, [defaultStatusRenderer, message.mine, message.status, messageStatusRenderer, onRenderMessageStatus, participantCount, readCount, showMessageStatus, styles]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Status and avatar should be shown for both custom and default renderers.\n return <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>;\n};"]}

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

@@ -154,7 +154,6 @@ const DialpadContainer = (props) => {
             onClickDialpadButton(input, index);
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setText = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
         const plainInput = sanitizeInput(input);

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

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

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

@@ -5,7 +5,6 @@ import React, { useMemo, useState } from 'react';
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 import { useLocale } from '../localization';
-import { imageOverlayTheme } from '../theming';
 import { darkTheme } from '../theming';
 import { Announcer } from './Announcer';
 /**
@@ -18,7 +17,6 @@ export const ImageOverlay = (props) => {
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
     const overlayTheme = useMemo(() => {
-        return imageOverlayTheme;
         return Object.assign(Object.assign({}, darkTheme), { semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' }) });
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAgB,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACtX,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,~~iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,~~SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAwDxC;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,uBAAuB,EACvB,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAiB,EAAE;QAC9C,~~OAAO,iBAAiB,CAAC;QACzB,~~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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { ~~imageOverlayTheme } from '../theming';\nimport {~~ darkTheme } from '../theming';\nimport { Announcer } from './Announcer';\n\n/*\n Props for {@link ImageOverlay}.\n \n @public\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n /\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @public\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n /\n Announcer message for when ImageOverlay becomes active\n /\n overlayVisibleMessage: string;\n}\n/\n Component to render a fullscreen modal for a selected image.\n \n @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const {\n isOpen,\n imageSrc,\n title,\n titleIcon,\n altText,\n onDownloadButtonClicked,\n onDismiss\n } = props;\n const localeStrings = useLocale().strings.imageOverlay;\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n const overlayTheme = useMemo((): PartialTheme => {\n return ~~imageOverlayTheme;\n return~~ {\n ...darkTheme,\n semanticColors: {\n ...darkTheme.semanticColors,\n bodyBackground: 'rgba(0, 0, 0, 0.85)'\n }\n };\n }, []);\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n const renderHeaderBar = (): JSX.Element => {\n return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title \|\| 'Image'} aria-level={2}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n </Stack>\n </Stack>;\n };\n const renderBodyWithLightDismiss = (): JSX.Element => {\n return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText \|\| 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n setIsImageLoaded(false);\n }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n event.persist();\n }} />}\n </Stack>;\n };\n return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n styles: {\n ...overlayStyles(overlayTheme)\n }\n }} styles={{\n main: focusTrapZoneStyle,\n scrollableContent: scrollableContentStyle\n }} isDarkOverlay={true}>\n <Announcer ariaLive={'polite'} announcementString={localeStrings.overlayVisibleMessage} />\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>;\n};"]}
1	+ {"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\nimport { darkTheme } from '../theming';\nimport { Announcer } from './Announcer';\n\n/*\n Props for {@link ImageOverlay}.\n \n @public\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n /\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @public\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n /\n Announcer message for when ImageOverlay becomes active\n /\n overlayVisibleMessage: string;\n}\n/\n Component to render a fullscreen modal for a selected image.\n \n @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const {\n isOpen,\n imageSrc,\n title,\n titleIcon,\n altText,\n onDownloadButtonClicked,\n onDismiss\n } = props;\n const localeStrings = useLocale().strings.imageOverlay;\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n const overlayTheme = useMemo((): PartialTheme => {\n return {\n ...darkTheme,\n semanticColors: {\n ...darkTheme.semanticColors,\n bodyBackground: 'rgba(0, 0, 0, 0.85)'\n }\n };\n }, []);\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n const renderHeaderBar = (): JSX.Element => {\n return <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title \|\| 'Image'} aria-level={2}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)} text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'} aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss} aria-label={localeStrings.dismissButtonAriaLabel} aria-live={'polite'} />\n </Stack>\n </Stack>;\n };\n const renderBodyWithLightDismiss = (): JSX.Element => {\n return <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n {imageSrc && <img src={imageSrc} className={mergeStyles(imageStyle)} alt={altText \|\| 'image'} aria-label={'image-overlay-main-image'} data-ui-id={'image-overlay-main-image'} aria-live={'polite'} onError={() => {\n setIsImageLoaded(false);\n }} onClick={event => event.stopPropagation()} onDoubleClick={event => {\n event.persist();\n }} />}\n </Stack>;\n };\n return <Modal titleAriaId={title} isOpen={isOpen} onDismiss={onDismiss} overlay={{\n styles: {\n ...overlayStyles(overlayTheme)\n }\n }} styles={{\n main: focusTrapZoneStyle,\n scrollableContent: scrollableContentStyle\n }} isDarkOverlay={true}>\n <Announcer ariaLive={'polite'} announcementString={localeStrings.overlayVisibleMessage} />\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>;\n};"]}

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, FormEvent } from 'react';
 import { IStyle, ITextField } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
-import { MentionLookupOptions } from './MentionPopover';
 /**
  * @private
  */
@@ -30,7 +29,6 @@ type InputBoxComponentProps = {
     disabled?: boolean;
     styles?: InputBoxStylesProps;
     autoFocus?: 'sendBoxTextField';
-    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

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

@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
 import { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';
-import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMention';
 /**
  * @private
  */
@@ -51,20 +50,6 @@ export const InputBoxComponent = (props) => {
             errorMessage,
             onRenderSuffix: props.children ? onRenderChildren : undefined
         };
-        const textFieldWithMentionProps = {
-            textFieldProps: textFieldProps,
-            dataUiId: dataUiId,
-            textValue: textValue,
-            onChange: onChange,
-            onKeyDown: onKeyDown,
-            onEnterKeyDown: onEnterKeyDown,
-            textFieldRef: textFieldRef,
-            supportNewline: supportNewline,
-            mentionLookupOptions: props.mentionLookupOptions
-        };
-        if (props.mentionLookupOptions) {
-            return React.createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
-        }
         return React.createElement("div", { style: textFieldProps.errorMessage ? {
                 padding: '0 0 5px 5px'
             } : undefined },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAwB,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAsB,eAAe,EAAmB,MAAM,iBAAiB,CAAC;AAEtH,OAAO,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;~~AAE3H,OAAO,EAAE,oBAAoB,EAA6B,MAAM,6CAA6C,CAAC;AAmC9G~~;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EACJ,MAAM,EACN,EAAE,EACF,YAAY,EAAE,QAAQ,EACtB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACxE,MAAM,qBAAqB,GAAG,WAAW,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;IACzE,MAAM,wBAAwB,GAAG,WAAW,CAAC,kBAAkB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,kBAAkB,CAAC,CAAC;IAC7F,MAAM,oBAAoB,GAAG,eAAe,CAAC,cAAc,EAAE;QAC3D,UAAU,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS;QAC7B,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa;QACnC,MAAM,EAAE;YACN,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,KAAK;SACf;KACF,CAAC,CAAC;IACH,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,EAA+D,EAAE,EAAE;QACzG,IAAI,qCAAqC,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1D,OAAO;QACT,CAAC;QACD,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACrE,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,CAAC;QACD,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAChD,MAAM,gBAAgB,GAAG,GAAgB,EAAE;QACzC,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,MAAM,cAAc,GAAoB;YACtC,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,kBAAkB;YACjD,SAAS,EAAE,IAAI;YACf,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,KAAK;YACf,SAAS,EAAE,KAAK;YAChB,YAAY,EAAE,YAAY;YAC1B,EAAE;YACF,cAAc,EAAE,qBAAqB;YACrC,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,oBAAoB;YAC5B,QAAQ;YACR,YAAY;YACZ,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;SAC9D,CAAC;QACF,MAAM,yBAAyB,GAA8B;YAC3D,cAAc,EAAE,cAAc;YAC9B,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,cAAc;YAC9B,YAAY,EAAE,YAAY;YAC1B,cAAc,EAAE,cAAc;YAC9B,oBAAoB,EAAE,KAAK,CAAC,oBAAoB;SACjD,CAAC;QACF,IAAI,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC/B,OAAO,~~oBAAC,oBAAoB,oBAAK,yBAAyB,EAAI,CAAC;QACjE,CAAC;QACD,OAAO,~~6BAAK,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;gBAC/C,OAAO,EAAE,aAAa;aACvB,CAAC,CAAC,CAAC,SAAS;YACT,oBAAC,SAAS,oBAAK,cAAc,kBAAc,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACvI,4EAA4E;oBAC5E,mEAAmE;oBACnE,CAAC,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,GAAG,SAAS,CAAC;gBACpC,CAAC,IAAI,CACC,CAAC;IACX,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,eAAe;QACpC,6BAAK,SAAS,EAAE,wBAAwB,IAAG,eAAe,EAAE,CAAO,CAC7D,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\~~nimport { MentionLookupOptions } from './MentionPopover';\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\~~n\n/*\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n children?: ReactNode;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n ~~mentionLookupOptions?: MentionLookupOptions;\n~~};\n\n/\n @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }, [onEnterKeyDown, onKeyDown, supportNewline]);\n const onRenderChildren = (): JSX.Element => {\n return <>{children}</>;\n };\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: props.children ? onRenderChildren : undefined\n };\n const textFieldWithMentionProps: TextFieldWithMentionProps = {\n textFieldProps: textFieldProps,\n dataUiId: dataUiId,\n textValue: textValue,\n onChange: onChange,\n onKeyDown: onKeyDown,\n onEnterKeyDown: onEnterKeyDown,\n textFieldRef: textFieldRef,\n supportNewline: supportNewline,\n mentionLookupOptions: props.mentionLookupOptions\n };\n if (props.mentionLookupOptions) {\n return <~~TextFieldWithMention {...textFieldWithMentionProps} />;\n }\n return <~~div style={textFieldProps.errorMessage ? {\n padding: '0 0 5px 5px'\n } : undefined}>\n <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }} />\n </div>;\n };\n return <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, FormEvent, useCallback } from 'react';\nimport { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, ITextFieldProps } from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\nimport { inputBoxStyle, inputBoxWrapperStyle, textFieldStyle, textContainerStyle } from './styles/InputBoxComponent.style';\n/*\n @private\n /\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n /* Styles for the text field. /\n textField?: IStyle;\n\n /* Styles for the system message; These styles will be ignored when a custom system message component is provided. /\n systemMessage?: IStyle;\n\n /* Styles for customizing the container of the text field /\n textFieldContainer?: IStyle;\n}\ntype InputBoxComponentProps = {\n children?: ReactNode;\n 'data-ui-id'?: string;\n id?: string;\n textValue: string; // This could be plain text or HTML.\n onChange: (event?: FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string) => void;\n textFieldRef?: React.RefObject<ITextField>;\n inputClassName?: string;\n placeholderText?: string;\n supportNewline?: boolean;\n maxLength: number;\n onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => void;\n onEnterKeyDown?: () => void;\n errorMessage?: string \| React.ReactElement;\n disabled?: boolean;\n styles?: InputBoxStylesProps;\n autoFocus?: 'sendBoxTextField';\n};\n\n/\n @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n const {\n styles,\n id,\n 'data-ui-id': dataUiId,\n textValue,\n onChange,\n textFieldRef,\n placeholderText,\n onKeyDown,\n onEnterKeyDown,\n supportNewline,\n inputClassName,\n errorMessage,\n disabled,\n children\n } = props;\n const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n fieldGroup: styles?.textField,\n errorMessage: styles?.systemMessage,\n suffix: {\n backgroundColor: 'transparent',\n padding: '0 0'\n }\n });\n const onTextFieldKeyDown = useCallback((ev: React.KeyboardEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n if (isEnterKeyEventFromCompositionSession(ev.nativeEvent)) {\n return;\n }\n if (ev.key === 'Enter' && (ev.shiftKey === false \|\| !supportNewline)) {\n ev.preventDefault();\n onEnterKeyDown && onEnterKeyDown();\n }\n onKeyDown && onKeyDown(ev);\n }, [onEnterKeyDown, onKeyDown, supportNewline]);\n const onRenderChildren = (): JSX.Element => {\n return <>{children}</>;\n };\n const renderTextField = (): JSX.Element => {\n const textFieldProps: ITextFieldProps = {\n autoFocus: props.autoFocus === 'sendBoxTextField',\n multiline: true,\n autoAdjustHeight: true,\n multiple: false,\n resizable: false,\n componentRef: textFieldRef,\n id,\n inputClassName: mergedInputFieldStyle,\n placeholder: placeholderText,\n autoComplete: 'off',\n styles: mergedTextFieldStyle,\n disabled,\n errorMessage,\n onRenderSuffix: props.children ? onRenderChildren : undefined\n };\n return <div style={textFieldProps.errorMessage ? {\n padding: '0 0 5px 5px'\n } : undefined}>\n <TextField {...textFieldProps} data-ui-id={dataUiId} value={textValue} onChange={onChange} onKeyDown={onTextFieldKeyDown} onFocus={e => {\n // Fix for setting the cursor to the correct position when multiline is true\n // This approach should be reviewed during migration to FluentUI v9\n e.currentTarget.value = '';\n e.currentTarget.value = textValue;\n }} />\n </div>;\n };\n return <Stack className={mergedRootStyle}>\n <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n </Stack>;\n};"]}

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

@@ -1,15 +1,9 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { MessageStatus } from "../../../acs-ui-common/src";
-import { AttachmentMetadataInProgress } from "../../../acs-ui-common/src";
-import { MessageOptions } from "../../../acs-ui-common/src";
-import { AttachmentOptions } from '../types/Attachment';
-import { MentionOptions } from './MentionPopover';
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
-import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -35,7 +29,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -103,20 +96,10 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** Aria label to announce when a message is deleted */
     messageDeletedAnnouncementAriaLabel: string;
-    /** String for download attachment button in attachment card */
-    downloadAttachment: string;
     /** String for open attachment button in attachment card */
     openAttachment: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
     /** String for aria text in attachment card group*/
     attachmentCardGroupMessage: string;
-    /**
-     * Error message indicating that one or more image uploads are not complete.
-     */
-    imageUploadsPendingError: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -139,7 +122,7 @@ export type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -158,7 +141,7 @@ export type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -239,11 +222,6 @@ export type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render attachments in the message component.
-     * @beta
-     */
-    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -272,7 +250,7 @@ export type MessageThreadProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -286,66 +264,12 @@ export type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional attachment options, which defines behvaiour for uploading and downloading attachments.
-     * As this moment, the uploadOptions would be ignored and this option is intended for download only.
-     */
-    attachmentOptions?: AttachmentOptions;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to lookup a mention query and display mentions
-     * @beta
-     */
-    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
      */
     inlineImageOptions?: InlineImageOptions;
-    /**
-     * Options to enable rich text editor for the edit box.
-     * @beta
-     */
-    richTextEditorOptions?: RichTextEditBoxOptions;
 };
-/**
- * Options for the rich text editor edit box configuration.
- *
- * @beta
- */
-export interface RichTextEditBoxOptions extends RichTextEditorOptions {
-    /**
-     * Optional callback to handle an inline image that's inserted in the rich text editor.
-     * When not provided, pasting images into rich text editor will be disabled.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional callback invoked after inline image is removed from the UI.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
-     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional Record of type {@link AttachmentMetadataInProgress}
-     * to render the errorBar for inline images inserted in the MessageThread's edit boxes when:
-     *   - there is an error provided in the messagesInlineImagesWithProgress
-     *   - progress is less than 1 when the send button is clicked
-     *   - content html string is longer than the max allowed length.
-     *     (Note that the id and the url prop of the messagesInlineImagesWithProgress will be used as the id and src attribute of the content html
-     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
-     */
-    messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>;
-}
 /**
  * Props to render a single message.
  *
@@ -361,7 +285,7 @@ export type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings & Partial<RichTextStrings>;
+    strings: MessageThreadStrings;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -407,7 +331,7 @@ export type MessageProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
 };
 /**
  * @internal

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

@@ -26,7 +26,6 @@ import { createStyleFromV8Style } from './styles/v8StyleShim';
 import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
-import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 const isMessageSame = (first, second) => {
     return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn);
 };
@@ -79,7 +78,7 @@ const DefaultJumpToNewMessageButton = (props) => {
 const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
     let key = message.messageId;
     let statusToRender = undefined;
-    if (message.messageType === 'chat' || message.messageType === 'blocked') {
+    if (message.messageType === 'chat') {
         if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
             key = message.clientMessageId;
         }
@@ -163,7 +162,7 @@ export const MessageThread = (props) => {
  */
 export const MessageThreadWrapper = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, onDisplayDateTimeString, mentionOptions, inlineImageOptions, attachmentOptions, onRenderAttachmentDownloads, richTextEditorOptions } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, inlineImageOptions } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = useState(false);
@@ -189,14 +188,6 @@ export const MessageThreadWrapper = (props) => {
     const previousMessagesRef = useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
-    useEffect(() => {
-        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
-        if (richTextEditorOptions !== undefined) {
-            // this line is needed to load the Rooster JS dependencies early in the lifecycle
-            // when the rich text editor is enabled
-            loadChatMessageComponentAsRichTextEditBox();
-        }
-    }, [richTextEditorOptions]);
     const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
@@ -486,8 +477,7 @@ export const MessageThreadWrapper = (props) => {
                     className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, chatArrowNavigationAttributes),
                     latestDeletedMessageId && React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' }),
                     messagesToDisplay.map((message) => {
-                        var _a;
-                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, actionsForAttachment: (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _a === void 0 ? void 0 : _a.actionsForAttachment, inlineImageOptions: inlineImageOptions, onDisplayDateTimeString: onDisplayDateTimeString, mentionOptions: mentionOptions, onRenderAttachmentDownloads: onRenderAttachmentDownloads, isRichTextEditorEnabled: !!richTextEditorOptions, onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) && (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage }));
+                        return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, inlineImageOptions: inlineImageOptions }));
                     })))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {