npm - @azure/communication-react - Versions diffs - 1.14.0-beta.1 → 1.14.0 - Mend

@azure/communication-react 1.14.0-beta.1 → 1.14.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 (538) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) /BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @beta\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @beta\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink ? props.message.linkText ?? props.strings.blockedWarningLinkText : '';\n const liveAuthor = props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return <MessageContentWithLiveAria message={props.message} liveMessage={liveBlockedWarningText} ariaLabel={liveBlockedWarningText} content={<Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>}\n </Stack>} />;\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content \|\| '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n if (props.message.content) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n parsedContent.childNodes.forEach(child => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Strip all html tags from the content for aria.\n const message = DOMPurify.sanitize(parsedContent, {\n ALLOWED_TAGS: []\n });\n return props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n }\n return undefined;\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return <img key={inlineImage.imgAttrs.id} tabIndex={0} data-ui-id={inlineImage.imgAttrs.id} {...inlineImage.imgAttrs} />;\n};\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n / @conditional-compile-remove(mention) /\n if (props.mentionDisplayOptions?.onRenderMention && domNode.name === 'msft-mention') {\n const {\n id\n } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: ((domNode.children[0] as unknown) as Text).nodeValue ?? ''\n };\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id && props.message.inlineImages?.find(metadata => {\n return metadata.id === domNode.attribs.id;\n })) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = {\n messageId: props.message.messageId,\n imgAttrs: imgProps\n };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);\n return <img key={(imgProps.id as string)} {...imgProps} />;\n }\n }\n // Pass through the original node\n return ((reactNode as unknown) as JSX.Element);\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};"]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @public\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @public\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>;\n }}>\n {props.message.content}\n </Linkify>} />;\n};\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n if (props.message.content) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n parsedContent.childNodes.forEach(child => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Strip all html tags from the content for aria.\n const message = DOMPurify.sanitize(parsedContent, {\n ALLOWED_TAGS: []\n });\n return message;\n }\n return '';\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n author: `${props.message.senderDisplayName}`\n });\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContentForAllyMessage(props)} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n const message = extractContentForAllyMessage(props);\n return props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n }) : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return <img key={inlineImage.imageAttributes.id} tabIndex={0} data-ui-id={inlineImage.imageAttributes.id} {...inlineImage.imageAttributes} />;\n};\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = {\n messageId: props.message.messageId,\n imageAttributes: imgProps\n };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);\n return <img key={(imgProps.id as string)} {...imgProps} />;\n }\n }\n // Pass through the original node\n return ((reactNode as unknown) as JSX.Element);\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};"]}

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { ChatMessage } from '../../types';
-import { BlockedMessage } from '../../types';
 import { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';
 /**
  * Props for {@link FluentChatMessageComponentWrapper}
@@ -8,7 +7,7 @@ import { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper'
  * @private
  */
 type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {
-    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    message: ChatMessage;
 };
 /**
  * The component for rendering a chat message using Fluent UI components

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

@@ -17,40 +17,21 @@ import { ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage
  */
 export const FluentChatMessageComponentWrapper = (props) => {
     const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick,
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString,
     /* @conditional-compile-remove(image-overlay) */
-    inlineImageOptions,
-    /* @conditional-compile-remove(mention) */
-    mentionOptions,
-    /* @conditional-compile-remove(file-sharing) */
-    fileDownloadHandler, userId,
-    /* @conditional-compile-remove(file-sharing) */
-    onRenderFileDownloads, defaultStatusRenderer, statusToRender } = props;
+    inlineImageOptions, userId, defaultStatusRenderer, statusToRender } = props;
     const chatMessageRenderStyles = useChatMessageRenderStyles();
     const onRenderFileDownloadsMemo = useMemo(() => {
-        /* @conditional-compile-remove(file-sharing) */
-        return onRenderFileDownloads;
         return undefined;
-    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    }, []);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, {
-                /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads: onRenderFileDownloadsMemo,
-                /* @conditional-compile-remove(file-sharing) */ 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,
-                /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString: onDisplayDateTimeString,
-                /* @conditional-compile-remove(image-overlay) */ inlineImageOptions: inlineImageOptions,
-                /* @conditional-compile-remove(mention) */ mentionOptions: mentionOptions,
-                /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler: fileDownloadHandler }));
+        if (messageProps.message.messageType === 'chat') {
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, inlineImageOptions: inlineImageOptions }));
         }
         return React.createElement(React.Fragment, null);
-    }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString, /* @conditional-compile-remove(image-overlay) */
-        inlineImageOptions, /* @conditional-compile-remove(mention) */
-        mentionOptions, /* @conditional-compile-remove(file-sharing) */
-        fileDownloadHandler,
+    }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         new Date().toDateString()]);
     const messageRenderer = useCallback((messageProps) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types';\nimport { gutterWithAvatar, gutterWithHiddenAvatar, noMessageStatusStyle, useChatMessageRenderStyles } from '../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';\nimport { ChatMessageComponent } from './ChatMessageComponent';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\n\n/\n Props for {@link FluentChatMessageComponentWrapper}\n \n @private\n /\ntype FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) /BlockedMessage;\n};\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 FluentChatMessageComponentWrapper = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionOptions,\n / @conditional-compile-remove(file-sharing) /\n fileDownloadHandler,\n userId,\n / @conditional-compile-remove(file-sharing) /\n onRenderFileDownloads,\n defaultStatusRenderer,\n statusToRender\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n const onRenderFileDownloadsMemo = useMemo(() => {\n / @conditional-compile-remove(file-sharing) /\n return onRenderFileDownloads;\n return undefined;\n }, [/ @conditional-compile-remove(file-sharing) /onRenderFileDownloads]);\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' \|\| / @conditional-compile-remove(data-loss-prevention) /messageProps.message.messageType === 'blocked') {\n return <ChatMessageComponent {...messageProps}\n / @conditional-compile-remove(file-sharing) / onRenderFileDownloads={onRenderFileDownloadsMemo}\n / @conditional-compile-remove(file-sharing) / 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}\n / @conditional-compile-remove(date-time-customization) / onDisplayDateTimeString={onDisplayDateTimeString}\n / @conditional-compile-remove(image-overlay) / inlineImageOptions={inlineImageOptions}\n / @conditional-compile-remove(mention) / mentionOptions={mentionOptions}\n / @conditional-compile-remove(file-sharing) / fileDownloadHandler={fileDownloadHandler} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString, / @conditional-compile-remove(image-overlay) /\n inlineImageOptions, / @conditional-compile-remove(mention) /\n mentionOptions, / @conditional-compile-remove(file-sharing) /\n fileDownloadHandler,\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 \| / @conditional-compile-remove(data-loss-prevention) */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 shouldShowAvatar = useMemo(() => {\n return message.attached === 'top' \|\| message.attached === false;\n }, [message.attached]);\n const attached = useMemo(() => {\n return shouldShowAvatar ? 'top' : 'center';\n }, [shouldShowAvatar]);\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 myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\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 const messageRootProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n const messageBodyProps = useMemo(() => {\n return {\n // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles?.chatItemMessageContainer)),\n style: styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles?.chatItemMessageContainer]);\n const avatar = useMemo(() => {\n const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: message.senderDisplayName,\n showOverflowTooltip: false\n };\n return <div className={mergeStyles(chatAvatarStyle)}>\n {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n </div>;\n }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\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 if (message.mine === true) {\n return <div>\n <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>\n </div>;\n } else {\n return <div>\n <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMessage>\n </div>;\n }\n};"]}
1	+ {"version":3,"file":"FluentChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/FluentChatMessageComponentWrapper.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 { gutterWithAvatar, gutterWithHiddenAvatar, noMessageStatusStyle, useChatMessageRenderStyles } from '../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { ChatMessageComponentWrapperProps } from './ChatMessageComponentWrapper';\nimport { ChatMessageComponent } from './ChatMessageComponent';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';\n\n/*\n Props for {@link FluentChatMessageComponentWrapper}\n \n @private\n /\ntype FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n message: ChatMessage;\n};\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 FluentChatMessageComponentWrapper = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n showMessageStatus,\n onRenderMessageStatus,\n participantCount,\n readCount,\n onActionButtonClick,\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions,\n userId,\n defaultStatusRenderer,\n statusToRender\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n const onRenderFileDownloadsMemo = useMemo(() => {\n return undefined;\n }, []);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback((messageProps: MessageProps) => {\n if (messageProps.message.messageType === 'chat') {\n return <ChatMessageComponent {...messageProps} message={messageProps.message} userId={userId} remoteParticipantsCount={participantCount ? participantCount - 1 : 0} shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage} onRenderAvatar={onRenderAvatar} showMessageStatus={showMessageStatus} messageStatus={messageProps.message.status} onActionButtonClick={onActionButtonClick} / @conditional-compile-remove(image-overlay) /\n inlineImageOptions={inlineImageOptions} />;\n }\n return <></>;\n }, [onActionButtonClick, onRenderAvatar, onRenderFileDownloadsMemo, participantCount, shouldOverlapAvatarAndMessage, showMessageStatus, userId, / @conditional-compile-remove(image-overlay) */\n inlineImageOptions,\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 shouldShowAvatar = useMemo(() => {\n return message.attached === 'top' \|\| message.attached === false;\n }, [message.attached]);\n const attached = useMemo(() => {\n return shouldShowAvatar ? 'top' : 'center';\n }, [shouldShowAvatar]);\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 myMessageBodyProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);\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 const messageRootProps = useMemo(() => {\n return {\n className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)\n };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n const messageBodyProps = useMemo(() => {\n return {\n // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles?.chatItemMessageContainer)),\n style: styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [chatMessageRenderStyles.avatarNoOverlap, chatMessageRenderStyles.avatarOverlap, chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyWithAvatar, chatMessageRenderStyles.bodyWithoutAvatar, shouldOverlapAvatarAndMessage, shouldShowAvatar, styles?.chatItemMessageContainer]);\n const avatar = useMemo(() => {\n const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: message.senderDisplayName,\n showOverflowTooltip: false\n };\n return <div className={mergeStyles(chatAvatarStyle)}>\n {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n </div>;\n }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\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 if (message.mine === true) {\n return <div>\n <FluentChatMyMessage attached={attached} root={myMessageRootProps} body={myMessageBodyProps} statusIcon={myMessageStatusIcon}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMyMessage>\n </div>;\n } else {\n return <div>\n <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n {messageRenderer({\n ...props\n })}\n </FluentChatMessage>\n </div>;\n }\n};"]}

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

@@ -1,16 +1,15 @@
 /// <reference types="react" />
 /**
  * Represents the type of attachment
- * @beta
+ * @public
  */
-export type ChatAttachmentType = 'unknown' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file';
+export type ChatAttachmentType = 'unknown' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'image';
 /**
  * Metadata containing basic information about the uploaded file.
  *
  * @beta
  */
-export interface FileMetadata {
-    attachmentType: 'file';
+export interface AttachmentMetadata {
     /**
      * Extension hint, useful for rendering a specific icon.
      * An unknown or empty extension will be rendered as a generic icon.
@@ -20,7 +19,6 @@ export interface FileMetadata {
     /**
      * Unique ID of the file.
      */
-    id: string;
     /**
      * File name to be displayed.
      */
@@ -29,34 +27,7 @@ export interface FileMetadata {
      * Download URL for the file.
      */
     url: string;
-    payload?: Record<string, string>;
 }
-/**
- * Metadata for rendering images inline with a message.
- * This does not include images attached as files.
- * @beta
- */
-export interface InlineImageMetadata {
-    attachmentType: 'inlineImage';
-    /**
-     * Unique ID of the attachment.
-     */
-    id: string;
-    previewUrl?: string;
-    /**
-     * Download URL for the full resolution version.
-     */
-    url: string;
-    /**
-     * Optional fetched Image source fot the full resolution version.
-     */
-    fullSizeImageSrc?: string;
-}
-/**
- * Metadata containing information about the uploaded file.
- * @beta
- */
-export type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;
 /**
  * Strings of _FileDownloadCards that can be overridden.
  *

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

@@ -12,8 +12,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';
 import React, { useCallback, useState } from 'react';
 import { useMemo } from 'react';
-/* @conditional-compile-remove(file-sharing) */
-import { useLocale } from '../localization';
 import { _FileCard } from './FileCard';
 import { _FileCardGroup } from './FileCardGroup';
 import { iconButtonClassName } from './styles/IconButton.styles';
@@ -36,29 +34,17 @@ export const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const isFileSharingAttachment = useCallback((attachment) => {
-        /* @conditional-compile-remove(file-sharing) */
-        return attachment.attachmentType === 'file';
-        return false;
-    }, []);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const isShowDownloadIcon = useCallback((attachment) => {
-        var _a;
-        /* @conditional-compile-remove(file-sharing) */
-        return attachment.attachmentType === 'file' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
         return true;
     }, []);
     const fileCardGroupDescription = useMemo(() => () => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
-        /* @conditional-compile-remove(file-sharing) */
-        return _formatString(fileGroupLocaleString, {
-            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.filter(isFileSharingAttachment).length) !== null && _c !== void 0 ? _c : 0}`
-        });
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${(_d = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _d !== void 0 ? _d : 0}`
+            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _c !== void 0 ? _c : 0}`
         });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
     const fileDownloadHandler = useCallback((userId, file) => __awaiter(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -80,15 +66,11 @@ export const _FileDownloadCards = (props) => {
             }
         }
     }), [props]);
-    if (!fileMetadata || fileMetadata.length === 0 || /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
+    if (!fileMetadata || fileMetadata.length === 0 || /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata) {
         return React.createElement(React.Fragment, null);
     }
     return React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata && fileMetadata.filter(attachment => {
-            /* @conditional-compile-remove(file-sharing) */
-            return isFileSharingAttachment(attachment);
-            return true;
-        }).map(file => file).map(file => React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
+        React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata && fileMetadata.map(file => React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
             React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' }) : true && /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(file) ? React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
                     React.createElement(DownloadIconTrampoline, null)) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))));
 };
@@ -96,14 +78,10 @@ export const _FileDownloadCards = (props) => {
  * @private
  */
 const DownloadIconTrampoline = () => {
-    // @conditional-compile-remove(file-sharing)
-    return React.createElement(Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
     // Return _some_ available icon, as the real icon is beta-only.
     return React.createElement(Icon, { iconName: "EditBoxCancel", style: actionIconStyle });
 };
 const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
-    return useLocale().strings.messageThread;
     return {
         downloadFile: '',
         fileCardGroupMessage: ''

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) /\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/ @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Represents the type of attachment\n * @beta\n /\nexport type ChatAttachmentType = 'unknown' \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) /'inlineImage' \| / @conditional-compile-remove(file-sharing) /'file';\n\n/\n Metadata containing basic information about the uploaded file.\n \n @beta\n /\nexport interface FileMetadata {\n / @conditional-compile-remove(file-sharing) /\n attachmentType: 'file';\n /\n Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n /\n extension: string;\n /\n Unique ID of the file.\n /\n / @conditional-compile-remove(file-sharing) /\n id: string;\n /\n File name to be displayed.\n /\n name: string;\n /\n Download URL for the file.\n /\n url: string;\n / @conditional-compile-remove(file-sharing) /\n /\n * Optional dictionary of meta data associated with the file.\n /\n payload?: Record<string, string>;\n}\n\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @beta\n /\nexport interface InlineImageMetadata {\n /\n * Type of the attachment\n /\n attachmentType: 'inlineImage';\n /\n Unique ID of the attachment.\n /\n id: string;\n /\n * Preview URL for low resolution version.\n /\n previewUrl?: string;\n /\n Download URL for the full resolution version.\n /\n url: string;\n /\n Optional fetched Image source fot the full resolution version.\n /\n fullSizeImageSrc?: string;\n}\n\n/\n Metadata containing information about the uploaded file.\n * @beta\n /\nexport type AttachmentMetadata = FileMetadata \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) /InlineImageMetadata;\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (userId: string, fileMetadata: AttachmentMetadata) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCardsProps {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that includes file metadata\n /\n fileMetadata?: AttachmentMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional aria label strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\nconst actionIconStyle = {\n height: '1rem'\n};\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const {\n userId,\n fileMetadata\n } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n const downloadFileButtonString = useMemo(() => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n }, [props.strings?.downloadFile, localeStrings.downloadFile]);\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n / @conditional-compile-remove(file-sharing) /\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n / @conditional-compile-remove(file-sharing) /\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n const fileCardGroupDescription = useMemo(() => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n / @conditional-compile-remove(file-sharing) /\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n }, [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);\n const fileDownloadHandler = useCallback(async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n }, [props]);\n if (!fileMetadata \|\| fileMetadata.length === 0 \|\| / @conditional-compile-remove(teams-inline-images-and-file-sharing) /!fileMetadata.some(isFileSharingAttachment)) {\n return <></>;\n }\n return <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata && fileMetadata.filter(attachment => {\n / @conditional-compile-remove(file-sharing) /\n return isFileSharingAttachment(attachment);\n return true;\n }).map(file => ((file as unknown) as FileMetadata)).map(file => <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard fileName={file.name} key={file.name} fileExtension={file.extension} actionIcon={showSpinner ? <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} /> : true && / @conditional-compile-remove(teams-inline-images-and-file-sharing) /isShowDownloadIcon(((file as unknown) as AttachmentMetadata)) ? <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton> : undefined} actionHandler={() => fileDownloadHandler(userId, ((file as unknown) as AttachmentMetadata))} />\n </TooltipHost>)}\n </_FileCardGroup>\n </div>;\n};\n\n/\n @private\n /\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n / @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n return useLocale().strings.messageThread;\n return {\n downloadFile: '',\n fileCardGroupMessage: ''\n };\n};"]}
1	+ {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Represents the type of attachment\n * @public\n /\nexport type ChatAttachmentType = 'unknown' \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) /'image';\n\n/\n Metadata containing basic information about the uploaded file.\n \n @beta\n /\nexport interface AttachmentMetadata {\n /\n Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n /\n extension: string;\n /\n Unique ID of the file.\n /\n /\n File name to be displayed.\n /\n name: string;\n /\n Download URL for the file.\n /\n url: string;\n}\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (userId: string, fileMetadata: AttachmentMetadata) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCardsProps {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that includes file metadata\n /\n fileMetadata?: AttachmentMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional aria label strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\nconst actionIconStyle = {\n height: '1rem'\n};\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const {\n userId,\n fileMetadata\n } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n const downloadFileButtonString = useMemo(() => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n }, [props.strings?.downloadFile, localeStrings.downloadFile]);\n\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n return true;\n }, []);\n const fileCardGroupDescription = useMemo(() => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n }, [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);\n const fileDownloadHandler = useCallback(async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n }, [props]);\n if (!fileMetadata \|\| fileMetadata.length === 0 \|\| / @conditional-compile-remove(teams-inline-images-and-file-sharing) /!fileMetadata) {\n return <></>;\n }\n return <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata && fileMetadata.map(file => <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard fileName={file.name} key={file.name} fileExtension={file.extension} actionIcon={showSpinner ? <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} /> : true && / @conditional-compile-remove(teams-inline-images-and-file-sharing) /isShowDownloadIcon(file) ? <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton> : undefined} actionHandler={() => fileDownloadHandler(userId, file)} />\n </TooltipHost>)}\n </_FileCardGroup>\n </div>;\n};\n\n/\n @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n return {\n downloadFile: '',\n fileCardGroupMessage: ''\n };\n};"]}

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

@@ -2,7 +2,7 @@
 /**
  * Props for {@link ImageOverlay}.
  *
- * @beta
+ * @public
  */
 export interface ImageOverlayProps {
     /**
@@ -37,7 +37,7 @@ export interface ImageOverlayProps {
 /**
  * Strings of {@link ImageOverlay} that can be overridden.
  *
- * @beta
+ * @public
  */
 export interface ImageOverlayStrings {
     /**
@@ -52,7 +52,7 @@ export interface ImageOverlayStrings {
 /**
  * Component to render a fullscreen modal for a selected image.
  *
- * @beta
+ * @public
  */
 export declare const ImageOverlay: (props: ImageOverlayProps) => JSX.Element;
 //# sourceMappingURL=ImageOverlay.d.ts.map

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

@@ -3,7 +3,7 @@
 /* @conditional-compile-remove(image-overlay) */
 import { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(image-overlay) */
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 /* @conditional-compile-remove(image-overlay) */
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 /* @conditional-compile-remove(image-overlay) */
@@ -11,29 +11,33 @@ import { FluentThemeProvider } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-overlay) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(image-overlay) */
-import { imageOverlayTheme } from '../theming';
+import { darkTheme } from '../theming';
 /* @conditional-compile-remove(image-overlay) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
- * @beta
+ * @public
  */
 export const ImageOverlay = (props) => {
     const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
+    /* @conditional-compile-remove(image-overlay) */
+    const overlayTheme = useMemo(() => {
+        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);
     const renderHeaderBar = () => {
         return React.createElement(Stack, { className: mergeStyles(headerStyle) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
                 onDownloadButtonClicked && React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle),
-                    /* @conditional-compile-remove(image-overlay) */ text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                onDownloadButtonClicked && React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss,
+                    /* @conditional-compile-remove(image-overlay) */ text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' }),
+                onDownloadButtonClicked && React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(overlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' }),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss,
                     /* @conditional-compile-remove(image-overlay) */ ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' })));
     };
     const renderBodyWithLightDismiss = () => {
@@ -44,12 +48,12 @@ export const ImageOverlay = (props) => {
             } }));
     };
     return React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: {
-            styles: Object.assign({}, overlayStyles(imageOverlayTheme))
+            styles: Object.assign({}, overlayStyles(overlayTheme))
         }, styles: {
             main: focusTrapZoneStyle,
             scrollableContent: scrollableContentStyle
         }, isDarkOverlay: true },
-        React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme, rootStyle: themeProviderRootStyle },
+        React.createElement(FluentThemeProvider, { fluentTheme: overlayTheme, rootStyle: themeProviderRootStyle },
             renderHeaderBar(),
             renderBodyWithLightDismiss()));
 };

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,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,~~EAAE~~,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;~~AAC7F~~,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AACxC~~,gDAAgD;AAChD,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,gDAAgD;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,gDAAgD;AAChD,OAAO,EAAE,~~iBAAiB~~,EAAE,MAAM,YAAY,CAAC;~~AAsD/C~~,gDAAgD;AAChD;;;;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;IAEV,gDAAgD;IAChD,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,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,~~iBAAiB~~,CAAC,CAAC;~~IAC1F~~,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC;YAC7C,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC;gBAClD,SAAS;gBACV,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,~~iBAAiB~~,CAAC,CAAC,gBAAc,KAAK,IAAI,OAAO,~~IAC5F~~,KAAK,CACK,CACP;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACpD,uBAAuB,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;oBACxF,gDAAgD,CAAC,IAAI,EAAE,aAAa,CAAC,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAAa,QAAQ,gBACvO,aAAa,CAAC,mBAAmB,GAAI;~~gBAC/F~~,uBAAuB,IAAI,oBAAC,UAAU,IAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,~~iBAAiB~~,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,~~gBAC/J~~,aAAa,CAAC,mBAAmB,eAAa,QAAQ,GAAI;~~gBACrH~~,oBAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,~~iBAAiB~~,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS;~~oBACrH~~,gDAAgD,CAAC,SAAS,EAAE,aAAa,CAAC,sBAAsB,eAAa,QAAQ,GAAI,CACjH,CACF,CAAC;IACb,CAAC,CAAC;IACF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;QACnD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAChF,QAAQ,IAAI,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,OAAO,IAAI,OAAO,gBAAc,0BAA0B,eAAa,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;gBACzK,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE;gBACnE,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,GAAI,CACG,CAAC;IACb,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,IAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE;YAC/E,MAAM,oBACD,aAAa,CAAC,~~iBAAiB~~,CAAC,~~CACpC~~;SACF,EAAE,MAAM,EAAE;YACT,IAAI,EAAE,kBAAkB;YACxB,iBAAiB,EAAE,sBAAsB;SAC1C,EAAE,aAAa,EAAE,IAAI;QAClB,oBAAC,mBAAmB,IAAC,WAAW,EAAE,~~iBAAiB~~,EAAE,SAAS,EAAE,sBAAsB;~~YACnF~~,eAAe,EAAE;YACjB,0BAA0B,EAAE,CACT,CAChB,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) /\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/ @conditional-compile-remove(image-overlay) /\nimport React, { useState } from 'react';\n/ @conditional-compile-remove(image-overlay) /\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\n/ @conditional-compile-remove(image-overlay) /\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/ @conditional-compile-remove(image-overlay) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(image-overlay) /\nimport { ~~imageOverlayTheme~~ } from '../theming';\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Props for {@link ImageOverlay}.\n \n @~~beta~~\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/ @conditional-compile-remove(image-overlay) /\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @~~beta~~\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/ @conditional-compile-remove(image-overlay) /\n/\n Component to render a fullscreen modal for a selected image.\n \n @~~beta~~\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\n / @conditional-compile-remove(image-overlay) /\n const localeStrings = useLocale().strings.imageOverlay;\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(~~imageOverlayTheme~~);\n const renderHeaderBar = (): JSX.Element => {\n return <Stack className={mergeStyles(headerStyle)}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(~~imageOverlayTheme~~))} aria-label={title \|\| 'Image'}>\n {title}\n </Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)}\n / @conditional-compile-remove(image-overlay) / text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'}\n / @conditional-compile-remove(image-overlay) / aria-label={localeStrings.downloadButtonLabel} />}\n {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(~~imageOverlayTheme~~))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n / @conditional-compile-remove(image-overlay) / aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} />}\n <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(~~imageOverlayTheme~~))} onClick={onDismiss}\n / @conditional-compile-remove(image-overlay) */ ariaLabel={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'} 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(~~imageOverlayTheme~~)\n }\n }} styles={{\n main: focusTrapZoneStyle,\n scrollableContent: scrollableContentStyle\n }} isDarkOverlay={true}>\n <FluentThemeProvider fluentTheme={~~imageOverlayTheme~~} 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\n/* @conditional-compile-remove(image-overlay) /\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\n/ @conditional-compile-remove(image-overlay) /\nimport React, { useMemo, useState } from 'react';\n/ @conditional-compile-remove(image-overlay) /\nimport { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, themeProviderRootStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';\n/ @conditional-compile-remove(image-overlay) /\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/ @conditional-compile-remove(image-overlay) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(image-overlay) /\nimport { darkTheme } from '../theming';\n\n/ @conditional-compile-remove(image-overlay) /\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/ @conditional-compile-remove(image-overlay) /\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/ @conditional-compile-remove(image-overlay) /\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\n / @conditional-compile-remove(image-overlay) /\n const localeStrings = useLocale().strings.imageOverlay;\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n / @conditional-compile-remove(image-overlay) /\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)}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(overlayTheme))} aria-label={title \|\| 'Image'}>\n {title}\n </Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && <DefaultButton className={mergeStyles(downloadButtonStyle)}\n / @conditional-compile-remove(image-overlay) / text={localeStrings.downloadButtonLabel} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)} onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />} aria-live={'polite'}\n / @conditional-compile-remove(image-overlay) / aria-label={localeStrings.downloadButtonLabel} disabled={imageSrc === ''} />}\n {onDownloadButtonClicked && <IconButton iconProps={downloadIcon} className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))} onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n / @conditional-compile-remove(image-overlay) / aria-label={localeStrings.downloadButtonLabel} aria-live={'polite'} disabled={imageSrc === ''} />}\n <IconButton iconProps={cancelIcon} className={mergeStyles(closeButtonStyles(overlayTheme))} onClick={onDismiss}\n / @conditional-compile-remove(image-overlay) */ ariaLabel={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'} 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 <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>;\n};"]}

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

@@ -11,6 +11,7 @@ export type InputBoxButtonProps = {
     id?: string;
     ariaLabel?: string;
     tooltipContent?: string;
+    'data-testId'?: string;
 };
 /**
  * @private

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

@@ -9,7 +9,7 @@ import { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } fro
  * @private
  */
 export const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId } = props;
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
     const theme = useTheme();
@@ -34,6 +34,6 @@ export const InputBoxButton = (props) => {
                 setIsHover(false);
             },
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) }));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId }));
 };
 //# sourceMappingURL=InputBoxButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;~~AAgBlH~~;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,~~EACf~~,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAC/F,YAAY;QAEb,oBAAC,UAAU,IAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;gBAC7G,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,GAAI,~~CAC7E~~,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/*\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{\n ...calloutProps\n }}>\n <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n setIsHover(true);\n }} onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} />\n </TooltipHost>;\n};"]}
1	+ {"version":3,"file":"InputBoxButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/InputBoxButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAiBlH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,EACF,cAAc,EACd,aAAa,EAAE,UAAU,EAC1B,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IAEF,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,IAAC,aAAa,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAC/F,YAAY;QAEb,oBAAC,UAAU,IAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;gBAC7G,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,iBAAe,UAAU,GAAI,CACtG,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ICalloutContentStyles, IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';\nimport { useState } from 'react';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport React from 'react';\nimport { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';\n\n/*\n Props for displaying a send button besides the text input area.\n \n @private\n /\nexport type InputBoxButtonProps = {\n onRenderIcon: (isHover: boolean) => JSX.Element;\n onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n className?: string;\n id?: string;\n ariaLabel?: string;\n tooltipContent?: string;\n 'data-testId'?: string;\n};\n\n/\n @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n const {\n onRenderIcon,\n onClick,\n ariaLabel,\n className,\n id,\n tooltipContent,\n 'data-testId': dataTestId\n } = props;\n const [isHover, setIsHover] = useState(false);\n const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);\n const theme = useTheme();\n const calloutStyle: Partial<ICalloutContentStyles> = {\n root: {\n padding: 0\n },\n calloutMain: {\n padding: '0.5rem'\n }\n };\n\n // Place callout with no gap between it and the button.\n const calloutProps = {\n gapSpace: 0,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n return <TooltipHost hostClassName={inputBoxButtonTooltipStyle} content={tooltipContent} calloutProps={{\n ...calloutProps\n }}>\n <IconButton className={mergedButtonStyle} ariaLabel={ariaLabel} onClick={onClick} id={id} onMouseEnter={() => {\n setIsHover(true);\n }} onMouseLeave={() => {\n setIsHover(false);\n }}\n // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>} data-testid={dataTestId} />\n </TooltipHost>;\n};"]}