npm - @azure/communication-react - Versions diffs - 1.18.0-alpha-202406200013 → 1.18.0-alpha-202406210015 - Mend

@azure/communication-react 1.18.0-alpha-202406200013 → 1.18.0-alpha-202406210015

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

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BxMyKmFB.js');
+var index = require('./index-DodrLCSW.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.18.0-alpha-202406200013';
+module.exports = '1.18.0-alpha-202406210015';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.18.0-alpha-~~202406200013~~';\n"]}
1	+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.18.0-alpha-202406210015';\n"]}

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

@@ -10,7 +10,7 @@ const AnnouncerMessage = (props) => {
         if (ariaLive === 'assertive') {
             announceAssertive(message || '', createGUID());
         }
-        if (ariaLive === 'polite') {
+        else if (ariaLive === 'polite') {
             announcePolite(message || '', createGUID());
         }
     }, [announceAssertive, announcePolite, ariaLive, message]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AnnouncerMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/AnnouncerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,UAAU,EAAE,MAAM,MAAM,CAAC;AAExC,eAAe;AACf,MAAM,gBAAgB,GAAG,CAAC,KAMzB,EAAQ,EAAE;IACT,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEvF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC7B,iBAAiB,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;QACjD,CAAC;~~QACD~~,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;~~YAC1B~~,cAAc,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC;QACX,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE,CAAC;gBACnB,iBAAiB,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;gBACpC,cAAc,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE3E,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerMessage.js\n\nimport { useCallback, useEffect } from 'react';\nimport { v1 as createGUID } from 'uuid';\n\n/** @private */\nconst AnnouncerMessage = (props: {\n message: string;\n ariaLive: string;\n clearOnUnmount?: boolean;\n announceAssertive: (message: string, id: string) => void;\n announcePolite: (message: string, id: string) => void;\n}): null => {\n const { message, ariaLive, clearOnUnmount, announceAssertive, announcePolite } = props;\n\n const announce = useCallback(() => {\n if (ariaLive === 'assertive') {\n announceAssertive(message \|\| '', createGUID());\n }\n if (ariaLive === 'polite') {\n announcePolite(message \|\| '', createGUID());\n }\n }, [announceAssertive, announcePolite, ariaLive, message]);\n\n useEffect(() => {\n announce();\n return () => {\n if (clearOnUnmount) {\n announceAssertive('', createGUID());\n announcePolite('', createGUID());\n }\n };\n }, [message, clearOnUnmount, announce, announceAssertive, announcePolite]);\n\n return null;\n};\n\nexport default AnnouncerMessage;\n"]}
1	+ {"version":3,"file":"AnnouncerMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/AnnouncerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,UAAU,EAAE,MAAM,MAAM,CAAC;AAExC,eAAe;AACf,MAAM,gBAAgB,GAAG,CAAC,KAMzB,EAAQ,EAAE;IACT,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEvF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC7B,iBAAiB,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,cAAc,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC;QACX,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE,CAAC;gBACnB,iBAAiB,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;gBACpC,cAAc,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE3E,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerMessage.js\n\nimport { useCallback, useEffect } from 'react';\nimport { v1 as createGUID } from 'uuid';\n\n/** @private */\nconst AnnouncerMessage = (props: {\n message: string;\n ariaLive: string;\n clearOnUnmount?: boolean;\n announceAssertive: (message: string, id: string) => void;\n announcePolite: (message: string, id: string) => void;\n}): null => {\n const { message, ariaLive, clearOnUnmount, announceAssertive, announcePolite } = props;\n\n const announce = useCallback(() => {\n if (ariaLive === 'assertive') {\n announceAssertive(message \|\| '', createGUID());\n } else if (ariaLive === 'polite') {\n announcePolite(message \|\| '', createGUID());\n }\n }, [announceAssertive, announcePolite, ariaLive, message]);\n\n useEffect(() => {\n announce();\n return () => {\n if (clearOnUnmount) {\n announceAssertive('', createGUID());\n announcePolite('', createGUID());\n }\n };\n }, [message, clearOnUnmount, announce, announceAssertive, announcePolite]);\n\n return null;\n};\n\nexport default AnnouncerMessage;\n"]}

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

@@ -12,6 +12,8 @@ import LiveMessage from '../Announcer/LiveMessage';
 /* @conditional-compile-remove(mention) */
 import { defaultOnMentionRender } from './MentionRenderer';
 import DOMPurify from 'dompurify';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { dataLossIconStyle } from '../styles/MessageThread.styles';
 /** @private */
 export const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -45,7 +47,7 @@ const MessageContentAsText = (props) => {
  */
 export const BlockedMessageContent = (props) => {
     var _a;
-    const Icon = React.createElement(FontIcon, { iconName: 'DataLossPreventionProhibited' });
+    const Icon = React.createElement(FontIcon, { className: dataLossIconStyle, iconName: 'DataLossPreventionProhibited' });
     const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
     const blockedMessageLink = props.message.link;
     const blockedMessageLinkText = blockedMessageLink

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../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';\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';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\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/\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/\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?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => 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};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <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 );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\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 =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n let attachments = undefined;\n / @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n attachments = props.message.attachments;\n if (props.message.content \|\| attachments) {\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\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 // Inject message attachment count for aria.\n // this is only applying to file attachments not for inline images.\n / @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n if (attachments && attachments.length > 0) {\n const attachmentCardDescription = attachmentCardGroupDescription(props);\n const attachmentTextNode = document.createElement('div');\n attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n parsedContent.appendChild(attachmentTextNode);\n }\n\n // Strip all html tags from the content for aria.\n let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n // decode HTML entities so that screen reader can read the content properly.\n message = decodeEntities(message);\n return message;\n }\n return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n const message = extractContentForAllyMessage(props);\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n status: props.message.status ?? '',\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n status: props.message.status ?? '',\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n};\n\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n const attachments = props.message.attachments;\n return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n/\n @private\n /\nexport const getAttachmentCountLiveMessage = (\n attachments: AttachmentMetadata[],\n attachmentCardGroupMessage: string\n): string => {\n if (attachments.length === 0) {\n return '';\n }\n return _formatString(attachmentCardGroupMessage, {\n attachmentCount: `${attachments.length}`\n });\n return '';\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img\n key={inlineImage.imageAttributes.id}\n tabIndex={0}\n data-ui-id={inlineImage.imageAttributes.id}\n {...inlineImage.imageAttributes}\n />\n );\n};\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 (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\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 const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n }\n\n // Transform links to open in new tab\n if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {\n return React.cloneElement(reactNode, {\n target: '_blank',\n rel: 'noreferrer noopener'\n });\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};\n\nconst decodeEntities = (encodedString: string): string => {\n // This regular expression matches HTML entities.\n const translate_re = /&(nbsp\|amp\|quot\|lt\|gt);/g;\n // This object maps HTML entities to their respective characters.\n const translate: Record<string, string> = {\n nbsp: ' ',\n amp: '&',\n quot: '\"',\n lt: '<',\n gt: '>'\n };\n\n return (\n encodedString\n // Find all matches of HTML entities defined in translate_re and\n // replace them with the corresponding character from the translate object.\n .replace(translate_re, function (match, entity) {\n return translate[entity];\n })\n // Find numeric entities (e.g., A)\n // and replace them with the equivalent character using the String.fromCharCode method,\n // which converts Unicode values into characters.\n .replace(/&#(\\d+);/gi, function (match, numStr) {\n const num = parseInt(numStr, 10);\n return String.fromCharCode(num);\n })\n );\n};\n"]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../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';\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';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { dataLossIconStyle } from '../styles/MessageThread.styles';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\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/\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/\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?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => 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};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <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 );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\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 className={dataLossIconStyle} iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n let attachments = undefined;\n / @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n attachments = props.message.attachments;\n if (props.message.content \|\| attachments) {\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\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 // Inject message attachment count for aria.\n // this is only applying to file attachments not for inline images.\n / @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n if (attachments && attachments.length > 0) {\n const attachmentCardDescription = attachmentCardGroupDescription(props);\n const attachmentTextNode = document.createElement('div');\n attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n parsedContent.appendChild(attachmentTextNode);\n }\n\n // Strip all html tags from the content for aria.\n let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n // decode HTML entities so that screen reader can read the content properly.\n message = decodeEntities(message);\n return message;\n }\n return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n const message = extractContentForAllyMessage(props);\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n status: props.message.status ?? '',\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n status: props.message.status ?? '',\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n};\n\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n const attachments = props.message.attachments;\n return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/ @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) /\n/\n @private\n /\nexport const getAttachmentCountLiveMessage = (\n attachments: AttachmentMetadata[],\n attachmentCardGroupMessage: string\n): string => {\n if (attachments.length === 0) {\n return '';\n }\n return _formatString(attachmentCardGroupMessage, {\n attachmentCount: `${attachments.length}`\n });\n return '';\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img\n key={inlineImage.imageAttributes.id}\n tabIndex={0}\n data-ui-id={inlineImage.imageAttributes.id}\n {...inlineImage.imageAttributes}\n />\n );\n};\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 (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\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 const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n }\n\n // Transform links to open in new tab\n if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {\n return React.cloneElement(reactNode, {\n target: '_blank',\n rel: 'noreferrer noopener'\n });\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};\n\nconst decodeEntities = (encodedString: string): string => {\n // This regular expression matches HTML entities.\n const translate_re = /&(nbsp\|amp\|quot\|lt\|gt);/g;\n // This object maps HTML entities to their respective characters.\n const translate: Record<string, string> = {\n nbsp: ' ',\n amp: '&',\n quot: '\"',\n lt: '<',\n gt: '>'\n };\n\n return (\n encodedString\n // Find all matches of HTML entities defined in translate_re and\n // replace them with the corresponding character from the translate object.\n .replace(translate_re, function (match, entity) {\n return translate[entity];\n })\n // Find numeric entities (e.g., A)\n // and replace them with the equivalent character using the String.fromCharCode method,\n // which converts Unicode values into characters.\n .replace(/&#(\\d+);/gi, function (match, numStr) {\n const num = parseInt(numStr, 10);\n return String.fromCharCode(num);\n })\n );\n};\n"]}

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

@@ -24,14 +24,14 @@ export const ImageOverlay = (props) => {
     }, []);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);
     const renderHeaderBar = () => {
-        return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
+        return (React.createElement(Stack, { className: mergeStyles(headerStyle), role: "heading", "aria-label": title || 'Image', "aria-level": 2 },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(overlayTheme)) }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
                 onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 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, ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss, "aria-label": localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
         return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "data-ui-id": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAgB,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,iCAAiC,EACjC,sBAAsB,EACtB,sBAAsB,EACtB,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,sDAAsD;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAoDvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAElE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAiB,EAAE;QAC9C,sDAAsD;QACtD,OAAO,iBAAiB,CAAC;QACzB,uCACK,SAAS,KACZ,cAAc,kCACT,SAAS,CAAC,cAAc,KAC3B,cAAc,EAAE,qBAAqB,OAEvC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAErF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC;~~YACxC~~,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC;gBAClD,SAAS;gBACV,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,~~gBAAc~~,KAAK,~~IAAI~~,~~OAAO,IACvF,KAAK,CACK,CACP~~;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACpD,uBAAuB,IAAI,CAC1B,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC,EAC3C,IAAI,EAAE,aAAa,CAAC,mBAAmB,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,EAC3E,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAC7F,QAAQ,gBACP,aAAa,CAAC,mBAAmB,EAC7C,QAAQ,EAAE,QAAQ,KAAK,EAAE,GACzB,CACH;gBACA,uBAAuB,IAAI,CAC1B,oBAAC,UAAU,IACT,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,YAAY,CAAC,CAAC,EACvE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,IAAI,uBAAuB,CAAC,QAAQ,CAAC,gBAC/D,aAAa,CAAC,mBAAmB,eAClC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,KAAK,EAAE,GACzB,CACH;gBACD,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,EACvD,OAAO,EAAE,SAAS,~~EAClB~~,~~SAAS,EAAE,~~aAAa,CAAC,sBAAsB,~~eACpC~~,QAAQ,GACnB,CACI,CACF,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,GAAgB,EAAE;QACnD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAC3E,QAAQ,IAAI,CACX,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,EAClC,GAAG,EAAE,OAAO,IAAI,OAAO,gBACX,0BAA0B,gBAC1B,0BAA0B,eAC3B,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAC3C,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,GACD,CACH,CACK,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,EAAE,MAAM,oBAAO,aAAa,CAAC,YAAY,CAAC,CAAE,EAAE,EACvD,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,EAC/E,aAAa,EAAE,IAAI;QAEnB,oBAAC,mBAAmB,IAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB;YAC9E,eAAe,EAAE;YACjB,0BAA0B,EAAE,CACT,CAChB,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport {\n bodyContainer,\n brokenImageStyle,\n cancelIcon,\n closeButtonStyles,\n controlBarContainerStyle,\n downloadButtonStyle,\n downloadIcon,\n downloadIconStyle,\n focusTrapZoneStyle,\n headerStyle,\n normalImageStyle,\n overlayStyles,\n scrollableContentStyle,\n smallDownloadButtonContainerStyle,\n themeProviderRootStyle,\n titleBarContainerStyle,\n titleStyle\n} from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) /\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\n\n/\n Props for {@link ImageOverlay}.\n \n @public\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n /\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @public\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n}\n/\n Component to render a fullscreen modal for a selected image.\n \n @public\n /\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n const localeStrings = useLocale().strings.imageOverlay;\n\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n const overlayTheme = useMemo((): PartialTheme => {\n / @conditional-compile-remove(image-overlay-theme) */\n return imageOverlayTheme;\n return {\n ...darkTheme,\n semanticColors: {\n ...darkTheme.semanticColors,\n bodyBackground: 'rgba(0, 0, 0, 0.85)'\n }\n };\n }, []);\n\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n\n const renderHeaderBar = (): JSX.Element => {\n return (\n <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 && (\n <DefaultButton\n className={mergeStyles(downloadButtonStyle)}\n text={localeStrings.downloadButtonLabel}\n onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n aria-live={'polite'}\n aria-label={localeStrings.downloadButtonLabel}\n disabled={imageSrc === ''}\n />\n )}\n {onDownloadButtonClicked && (\n <IconButton\n iconProps={downloadIcon}\n className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))}\n onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n aria-label={localeStrings.downloadButtonLabel}\n aria-live={'polite'}\n disabled={imageSrc === ''}\n />\n )}\n <IconButton\n iconProps={cancelIcon}\n className={mergeStyles(closeButtonStyles(overlayTheme))}\n onClick={onDismiss}\n ~~ariaLabel~~={localeStrings.dismissButtonAriaLabel}\n aria-live={'polite'}\n />\n </Stack>\n </Stack>\n );\n };\n\n const renderBodyWithLightDismiss = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n {imageSrc && (\n <img\n src={imageSrc}\n className={mergeStyles(imageStyle)}\n alt={altText \|\| 'image'}\n aria-label={'image-overlay-main-image'}\n data-ui-id={'image-overlay-main-image'}\n aria-live={'polite'}\n onError={() => {\n setIsImageLoaded(false);\n }}\n onClick={(event) => event.stopPropagation()}\n onDoubleClick={(event) => {\n event.persist();\n }}\n />\n )}\n </Stack>\n );\n };\n\n return (\n <Modal\n titleAriaId={title}\n isOpen={isOpen}\n onDismiss={onDismiss}\n overlay={{ styles: { ...overlayStyles(overlayTheme) } }}\n styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n isDarkOverlay={true}\n >\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>\n );\n};\n"]}
1	+ {"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IconButton, Modal, PartialTheme, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useMemo, useState } from 'react';\nimport {\n bodyContainer,\n brokenImageStyle,\n cancelIcon,\n closeButtonStyles,\n controlBarContainerStyle,\n downloadButtonStyle,\n downloadIcon,\n downloadIconStyle,\n focusTrapZoneStyle,\n headerStyle,\n normalImageStyle,\n overlayStyles,\n scrollableContentStyle,\n smallDownloadButtonContainerStyle,\n themeProviderRootStyle,\n titleBarContainerStyle,\n titleStyle\n} from './styles/ImageOverlay.style';\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay-theme) /\nimport { imageOverlayTheme } from '../theming';\nimport { darkTheme } from '../theming';\n\n/\n Props for {@link ImageOverlay}.\n \n @public\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n /\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @public\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n}\n/\n Component to render a fullscreen modal for a selected image.\n \n @public\n /\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n const localeStrings = useLocale().strings.imageOverlay;\n\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n const overlayTheme = useMemo((): PartialTheme => {\n / @conditional-compile-remove(image-overlay-theme) */\n return imageOverlayTheme;\n return {\n ...darkTheme,\n semanticColors: {\n ...darkTheme.semanticColors,\n bodyBackground: 'rgba(0, 0, 0, 0.85)'\n }\n };\n }, []);\n\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);\n\n const renderHeaderBar = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(headerStyle)} role=\"heading\" aria-label={title \|\| 'Image'} aria-level={2}>\n <Stack className={mergeStyles(titleBarContainerStyle)}>\n {titleIcon}\n <Stack.Item className={mergeStyles(titleStyle(overlayTheme))}>{title}</Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n {onDownloadButtonClicked && (\n <DefaultButton\n className={mergeStyles(downloadButtonStyle)}\n text={localeStrings.downloadButtonLabel}\n onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n aria-live={'polite'}\n aria-label={localeStrings.downloadButtonLabel}\n disabled={imageSrc === ''}\n />\n )}\n {onDownloadButtonClicked && (\n <IconButton\n iconProps={downloadIcon}\n className={mergeStyles(smallDownloadButtonContainerStyle(overlayTheme))}\n onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n aria-label={localeStrings.downloadButtonLabel}\n aria-live={'polite'}\n disabled={imageSrc === ''}\n />\n )}\n <IconButton\n iconProps={cancelIcon}\n className={mergeStyles(closeButtonStyles(overlayTheme))}\n onClick={onDismiss}\n aria-label={localeStrings.dismissButtonAriaLabel}\n aria-live={'polite'}\n />\n </Stack>\n </Stack>\n );\n };\n\n const renderBodyWithLightDismiss = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n {imageSrc && (\n <img\n src={imageSrc}\n className={mergeStyles(imageStyle)}\n alt={altText \|\| 'image'}\n aria-label={'image-overlay-main-image'}\n data-ui-id={'image-overlay-main-image'}\n aria-live={'polite'}\n onError={() => {\n setIsImageLoaded(false);\n }}\n onClick={(event) => event.stopPropagation()}\n onDoubleClick={(event) => {\n event.persist();\n }}\n />\n )}\n </Stack>\n );\n };\n\n return (\n <Modal\n titleAriaId={title}\n isOpen={isOpen}\n onDismiss={onDismiss}\n overlay={{ styles: { ...overlayStyles(overlayTheme) } }}\n styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n isDarkOverlay={true}\n >\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>\n );\n};\n"]}

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

@@ -65,4 +65,6 @@ export declare const loadPreviousMessageButtonStyle: string;
  * @private
  */
 export declare const DownIconStyle: string;
+/** @private */
+export declare const dataLossIconStyle: string;
 //# sourceMappingURL=MessageThread.styles.d.ts.map

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

@@ -289,4 +289,9 @@ export const loadPreviousMessageButtonStyle = mergeStyles({
 export const DownIconStyle = mergeStyles({
     marginRight: '0.5em'
 });
+/** @private */
+export const dataLossIconStyle = mergeStyles({
+    width: '1.25rem',
+    height: '1.25rem'
+});
 //# sourceMappingURL=MessageThread.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachments: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n */\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n"]}
1	+ {"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/*\n @private\n /\nexport const messageThreadContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'auto',\n position: 'relative',\n alignSelf: 'center'\n});\n\n/\n @private\n /\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n height: '100%',\n width: '100%',\n position: 'relative'\n});\n\n/\n @private\n /\nexport const noMessageStatusStyle = mergeStyles({\n // This should match the size of the message status indicator icon to ensure\n // multiple messages sent by the user are aligned correctly.\n width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/\n @private\n /\nexport const useChatStyles = makeStyles({\n root: {\n // chat components sets max width value to 1056px, override it to 100%\n maxWidth: '100%',\n paddingTop: '0.8rem',\n paddingBottom: '0.5rem',\n paddingRight: '0.6rem',\n paddingLeft: '0.6rem',\n ...shorthands.border('none'),\n ...shorthands.overflow('auto'),\n // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n // to prevent intermittent scrollbars when GIFs are present in the chat.\n height: '100%',\n\n '& a:link': {\n color: tokens.colorBrandForegroundLink\n },\n '& a:visited': {\n color: tokens.colorBrandForegroundLinkHover\n },\n '& a:hover': {\n color: tokens.colorBrandForegroundLinkHover\n }\n }\n});\n\n/\n @private\n /\nexport const useChatMessageRenderStyles = makeStyles({\n rootCommon: {},\n rootMessage: {\n ...shorthands.padding('0'),\n ...shorthands.margin('0'),\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n },\n rootMyMessage: {\n gridTemplateColumns: 'auto fit-content(0)',\n gridTemplateAreas: `\n \"body status\"\n `,\n columnGap: '0',\n gridGap: '0',\n ...shorthands.padding('0'),\n marginTop: '0',\n marginRight: '0',\n marginBottom: '0',\n marginLeft: '50px',\n width: `calc(100% - 50px)`\n },\n bodyCommon: {\n ...shorthands.padding('0'),\n marginRight: '0',\n marginBottom: '0',\n backgroundColor: 'transparent',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyMyMessage: {\n width: '100%',\n marginTop: '0'\n },\n bodyWithoutAvatar: {\n marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n marginTop: '0'\n },\n bodyHiddenAvatar: {\n marginLeft: 0,\n marginTop: 0\n },\n bodyWithAvatar: {\n marginLeft: `0`,\n marginTop: '0.75rem'\n },\n avatarNoOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n },\n avatarOverlap: {\n width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n }\n});\n\n/\n @private\n /\nexport const useChatMyMessageStyles = makeStyles({\n root: {\n // The first column's width should be set to 1fr\n // because otherwise rich text editor's width will grow indefinitely\n gridTemplateColumns: '1fr auto',\n gridTemplateAreas: `\n \". actions\"\n \"body body\"\n `,\n gridGap: '0',\n columnGap: '0',\n paddingTop: '0',\n marginLeft: '0'\n },\n body: {\n paddingBottom: '10px',\n marginTop: '1rem',\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginLeft: '0rem',\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n\n '&:hover ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '&:focus ~ .fui-ChatMyMessage__actions': {\n visibility: 'visible'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: 600\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyAttached: {\n marginTop: '0.125rem'\n },\n menu: {\n boxShadow: tokens.shadow4,\n backgroundColor: tokens.colorNeutralBackground1,\n marginRight: '1px',\n position: 'absolute',\n top: '-2px',\n right: '0',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n zIndex: 1,\n lineHeight: tokens.lineHeightBase100,\n visibility: 'hidden',\n\n '&:hover, &:focus': {\n cursor: 'pointer',\n visibility: 'visible'\n }\n },\n menuAttached: {\n top: '-18px'\n },\n menuHidden: {\n visibility: 'hidden'\n },\n menuVisible: {\n visibility: 'visible'\n },\n multipleAttachments: {\n width: '100%',\n maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const newMessageButtonContainerStyle = mergeStyles({\n position: 'absolute',\n zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n bottom: 0,\n right: '1.5rem'\n});\n\n/\n @private\n /\nexport const chatMessageDateStyle: CSSProperties = {\n fontWeight: 600\n};\n\n/\n @private\n /\nexport const useChatMessageStyles = makeStyles({\n root: {\n paddingTop: '0'\n },\n body: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n paddingBottom: '10px',\n zIndex: CHAT_MESSAGE_ZINDEX,\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& > div:first-of-type': {\n flexWrap: 'wrap'\n },\n '& msft-mention': {\n color: tokens.colorStatusWarningBackground3,\n fontWeight: tokens.fontWeightSemibold\n },\n '& img': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& video': {\n maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n height: 'auto !important'\n },\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem')\n },\n '& blockquote': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n clear: 'left',\n minHeight: '2.25rem',\n width: 'fit-content',\n marginTop: '7px',\n marginRight: '0px',\n marginLeft: '0px',\n marginBottom: '7px',\n paddingTop: '7px',\n paddingRight: '15px',\n paddingLeft: '15px',\n paddingBottom: '7px',\n ...shorthands.border('solid'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.borderWidth('1px'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n borderLeftWidth: '4px'\n },\n '& code': {\n whiteSpace: 'pre-wrap'\n },\n '&:focus-visible': {\n outlineStyle: 'auto'\n }\n },\n bodyWithPlaceholderImage: {\n '& img[src=\"\"]': {\n display: 'block',\n position: 'relative',\n marginBottom: '5px'\n },\n '& img[src=\"\"]:after': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n backgroundSize: 'center',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: '0',\n left: '0',\n display: 'block'\n }\n },\n bodyWithoutAvatar: {\n marginTop: '0.125rem'\n },\n bodyWithAvatar: {\n marginTop: `0.375rem`\n },\n avatarNoOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n },\n avatarOverlap: {\n marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n },\n multipleAttachments: {\n width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) 2}rem`\n }\n});\n\n/*\n @private\n /\nexport const useChatMessageCommonStyles = makeStyles({\n body: {\n '& table': {\n backgroundColor: tokens.colorBrandBackgroundInverted,\n borderCollapse: 'collapse',\n tableLayout: 'auto',\n width: '100%',\n\n '& tr': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n '& td': {\n ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n wordBreak: 'normal',\n paddingTop: '0px',\n paddingRight: '5px'\n }\n }\n }\n },\n failed: {\n //TODO: can we reuse a theme color here?\n backgroundColor: 'rgba(168, 0, 0, 0.2)'\n },\n blocked: {\n maxWidth: '100%',\n minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n marginRight: '0rem',\n color: tokens.colorNeutralForeground2,\n\n // This makes message bubble show border in high contrast mode making each message distinguishable\n ...shorthands.border('1px', 'solid', 'transparent'),\n '& i': {\n paddingTop: '0.25rem'\n },\n\n '& p': {\n // Deal with awkward padding seen in messages from Teams.\n // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n ...shorthands.marginBlock('0.125rem'),\n paddingRight: '0.75rem',\n fontStyle: 'italic'\n },\n\n '& a': {\n ...shorthands.marginBlock('0.125rem'),\n fontStyle: 'normal',\n color: tokens.colorBrandForegroundLink,\n ...shorthands.textDecoration('none')\n }\n }\n});\n\n/\n @private\n /\nexport const gutterWithAvatar: ComponentSlotStyle = {\n paddingTop: '1.65rem',\n width: `${AVATAR_WIDTH_REM}rem`,\n position: 'relative',\n float: 'left',\n display: 'block',\n visibility: 'visible',\n zIndex: AVATAR_ZINDEX\n};\n\n/\n @private\n /\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n ...gutterWithAvatar,\n visibility: 'hidden',\n // we use this hidden avatar just as a width placeholder\n // the placeholder is needed for responsive bubble width\n height: 0\n};\n\n/\n @private\n /\nexport const newMessageButtonStyle = mergeStyles({\n float: 'right',\n width: 'fit-content'\n});\n\n/\n @private\n /\nexport const buttonWithIconStyles: IButtonStyles = {\n textContainer: {\n display: 'contents'\n }\n};\n\n/\n @private\n /\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n border: 'none',\n minHeight: '1.5rem',\n '&:hover': { background: 'none' },\n '&:active': { background: 'none' }\n});\n\n/\n @private\n /\nexport const DownIconStyle = mergeStyles({\n marginRight: '0.5em'\n});\n\n/* @private */\nexport const dataLossIconStyle = mergeStyles({\n width: '1.25rem',\n height: '1.25rem'\n});\n"]}

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

@@ -244,9 +244,9 @@ export const sendBoxRichTextEditorStyle = (isExpanded) => {
  */
 export const insertTableMenuCellButtonStyles = (theme) => {
     return {
-        width: '16px',
-        height: '16px',
-        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,
+        width: '24px',
+        height: '24px',
+        border: `solid 0.5px ${theme.palette.neutralSecondary}`,
         cursor: 'pointer',
         background: 'transparent'
     };
@@ -274,7 +274,7 @@ export const insertTableMenuFocusZone = (theme) => {
     return mergeStyles({
         display: 'inline-grid',
         gridTemplateColumns: 'auto auto auto auto auto',
-        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`
+        border: `solid 0.5px ${theme.palette.neutralSecondary}`
     });
 };
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/*\n @private\n /\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n return mergeStyles({\n border: 'none',\n overflow: 'auto',\n outline: 'none',\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n maxWidth: '100%',\n // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n // it gets both horizontal margins because of the user agent stylesheet\n // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n '& blockquote': {\n marginInlineEnd: '0'\n }\n });\n};\n\n/\n @private\n /\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n return mergeStyles({\n paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n paddingInlineStart: `0.75rem`,\n paddingInlineEnd: `0.75rem`,\n maxWidth: '100%',\n color: theme.palette.neutralPrimary,\n\n '& table': {\n background: 'transparent',\n borderCollapse: 'collapse',\n width: '100%',\n borderSpacing: '0',\n tableLayout: 'auto',\n\n '& tr': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n\n '& td': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n wordBreak: 'normal',\n padding: '0.125rem 0.25rem',\n verticalAlign: 'top'\n }\n }\n }\n });\n};\n\n/\n @private\n /\nexport const richTextActionButtonsStackStyle = mergeStyles({\n paddingRight: `0.125rem`\n});\n\n/\n @private\n /\nexport const richTextActionButtonsStyle = mergeStyles({\n height: '2.25rem',\n width: '2.25rem',\n margin: 'auto'\n});\n\n/\n @private\n /\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0.375rem -0.5rem 0 -0.5rem',\n backgroundColor: 'transparent'\n });\n};\n\n/\n @private\n /\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n return {\n subComponentStyles: {\n menuItem: {\n icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n root: ribbonOverflowButtonRootStyles(theme)\n },\n callout: {}\n }\n };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n return {\n selectors: {\n // Icon's color doesn't work here because of the specificity\n '&:hover': {\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: theme.palette.neutralPrimary\n }\n }\n },\n '.ribbon-table-button-regular-icon': {\n display: 'inline-block',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n width: '1.25rem',\n height: '1.25rem'\n },\n '.ribbon-table-button-filled-icon': {\n display: 'none'\n }\n }\n };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n // media query applies only if the device allows real hover interactions\n // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n '@media (hover: hover)': {\n ':hover .ms-Button-icon': {\n color: hoverIconColor\n },\n ':hover .ms-Button-menuIcon': {\n color: hoverIconColor\n }\n },\n // the classes needs here to apply to styles for icons because of the specificity\n '.ms-Button-icon': {\n color: iconColor\n },\n '.ms-Button-menuIcon': {\n color: iconColor\n }\n }\n };\n};\n\n/\n @private\n /\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n root: { minWidth: 'auto', backgroundColor: 'transparent' },\n rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n // there is a bug for Android where the press action is considered hover sometimes\n rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n // merge IStyles props\n return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/\n @private\n /\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { height: 'auto' },\n menuIcon: { height: 'auto' },\n root: rootRibbonTableButtonStyle(theme),\n rootChecked: ribbonTableButtonRootStyles(theme, true),\n rootHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n rootPressed: ribbonTableButtonRootStyles(theme, true),\n rootExpanded: ribbonTableButtonRootStyles(theme, true),\n rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n '.ribbon-table-button-regular-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.neutralPrimary,\n display: isSelected ? 'none' : 'inline-block'\n },\n '.ribbon-table-button-filled-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.themePrimary,\n display: isSelected ? 'inline-block' : 'none'\n }\n }\n };\n};\n\n/\n @private\n /\nexport const ribbonDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0 -0.5rem',\n paddingTop: '0.5rem'\n });\n};\n\n/\n @private\n /\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n // Override for the default white color of the Ribbon component\n root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/\n @private\n /\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n return mergeStyles(editorTextBoxButtonStyle, {\n color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n });\n};\n\n/\n @private\n /\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n return {\n minHeight: '2.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n return {\n minHeight: isExpanded ? '4rem' : '1.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n return {\n width: '16px',\n height: '16px',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,\n cursor: 'pointer',\n background: 'transparent'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n return {\n background: theme.palette.themePrimary\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuTablePane = mergeStyles({\n padding: '8px 10px 12px 10px',\n boxSizing: 'content-box',\n minWidth: 'auto'\n});\n\n/\n @private\n /\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n return mergeStyles({\n display: 'inline-grid',\n gridTemplateColumns: 'auto auto auto auto auto',\n border: `solid 1px ${theme.palette.neutralTertiaryAlt}`\n });\n};\n\n/\n @private\n /\nexport const insertTableMenuTitleStyles = mergeStyles({\n width: '100%',\n height: '1rem',\n fontSize: '0.75rem',\n marginBottom: '0.5rem'\n});\n\n/\n @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n marginTop: '0.375rem'\n});\n"]}
1	+ {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/*\n @private\n /\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n return mergeStyles({\n border: 'none',\n overflow: 'auto',\n outline: 'none',\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n maxWidth: '100%',\n // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n // it gets both horizontal margins because of the user agent stylesheet\n // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n '& blockquote': {\n marginInlineEnd: '0'\n }\n });\n};\n\n/\n @private\n /\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n return mergeStyles({\n paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n paddingInlineStart: `0.75rem`,\n paddingInlineEnd: `0.75rem`,\n maxWidth: '100%',\n color: theme.palette.neutralPrimary,\n\n '& table': {\n background: 'transparent',\n borderCollapse: 'collapse',\n width: '100%',\n borderSpacing: '0',\n tableLayout: 'auto',\n\n '& tr': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n\n '& td': {\n background: 'transparent',\n border: `1px solid ${theme.palette.neutralSecondary}`,\n wordBreak: 'normal',\n padding: '0.125rem 0.25rem',\n verticalAlign: 'top'\n }\n }\n }\n });\n};\n\n/\n @private\n /\nexport const richTextActionButtonsStackStyle = mergeStyles({\n paddingRight: `0.125rem`\n});\n\n/\n @private\n /\nexport const richTextActionButtonsStyle = mergeStyles({\n height: '2.25rem',\n width: '2.25rem',\n margin: 'auto'\n});\n\n/\n @private\n /\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0.375rem -0.5rem 0 -0.5rem',\n backgroundColor: 'transparent'\n });\n};\n\n/\n @private\n /\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n return {\n subComponentStyles: {\n menuItem: {\n icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n root: ribbonOverflowButtonRootStyles(theme)\n },\n callout: {}\n }\n };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n return {\n selectors: {\n // Icon's color doesn't work here because of the specificity\n '&:hover': {\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: theme.palette.neutralPrimary\n }\n }\n },\n '.ribbon-table-button-regular-icon': {\n display: 'inline-block',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n width: '1.25rem',\n height: '1.25rem'\n },\n '.ribbon-table-button-filled-icon': {\n display: 'none'\n }\n }\n };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n // media query applies only if the device allows real hover interactions\n // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n '@media (hover: hover)': {\n ':hover .ms-Button-icon': {\n color: hoverIconColor\n },\n ':hover .ms-Button-menuIcon': {\n color: hoverIconColor\n }\n },\n // the classes needs here to apply to styles for icons because of the specificity\n '.ms-Button-icon': {\n color: iconColor\n },\n '.ms-Button-menuIcon': {\n color: iconColor\n }\n }\n };\n};\n\n/\n @private\n /\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n root: { minWidth: 'auto', backgroundColor: 'transparent' },\n rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n // there is a bug for Android where the press action is considered hover sometimes\n rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n // merge IStyles props\n return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/\n @private\n /\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n return {\n icon: { height: 'auto' },\n menuIcon: { height: 'auto' },\n root: rootRibbonTableButtonStyle(theme),\n rootChecked: ribbonTableButtonRootStyles(theme, true),\n rootHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n rootPressed: ribbonTableButtonRootStyles(theme, true),\n rootExpanded: ribbonTableButtonRootStyles(theme, true),\n rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n return {\n backgroundColor: 'transparent',\n selectors: {\n '.ribbon-table-button-regular-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.neutralPrimary,\n display: isSelected ? 'none' : 'inline-block'\n },\n '.ribbon-table-button-filled-icon': {\n width: '1.25rem',\n height: '1.25rem',\n margin: '-0.25rem 0.25rem 0 0.25rem',\n color: theme.palette.themePrimary,\n display: isSelected ? 'inline-block' : 'none'\n }\n }\n };\n};\n\n/\n @private\n /\nexport const ribbonDividerStyle = (theme: Theme): string => {\n return mergeStyles({\n color: theme.palette.neutralQuaternaryAlt,\n margin: '0 -0.5rem',\n paddingTop: '0.5rem'\n });\n};\n\n/\n @private\n /\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n // Override for the default white color of the Ribbon component\n root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/\n @private\n /\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n return mergeStyles(editorTextBoxButtonStyle, {\n color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n });\n};\n\n/\n @private\n /\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n return {\n minHeight: '2.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n return {\n minHeight: isExpanded ? '4rem' : '1.25rem',\n maxHeight: '8rem'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n return {\n width: '24px',\n height: '24px',\n border: `solid 0.5px ${theme.palette.neutralSecondary}`,\n cursor: 'pointer',\n background: 'transparent'\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n return {\n background: theme.palette.themePrimary\n };\n};\n\n/\n @private\n /\nexport const insertTableMenuTablePane = mergeStyles({\n padding: '8px 10px 12px 10px',\n boxSizing: 'content-box',\n minWidth: 'auto'\n});\n\n/\n @private\n /\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n return mergeStyles({\n display: 'inline-grid',\n gridTemplateColumns: 'auto auto auto auto auto',\n border: `solid 0.5px ${theme.palette.neutralSecondary}`\n });\n};\n\n/\n @private\n /\nexport const insertTableMenuTitleStyles = mergeStyles({\n width: '100%',\n height: '1rem',\n fontSize: '0.75rem',\n marginBottom: '0.5rem'\n});\n\n/\n @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n marginTop: '0.375rem'\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export type ModalLocalAndRemotePIPStyles = {
  */
 export declare const MODAL_PIP_DEFAULT_PX: {
     rightPositionPx: number;
-    topPositionPx: number;
+    bottomPositionPx: number;
     widthPx: number;
     heightPx: number;
 };

package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { _pxToRem } from "../../../../../acs-ui-common/src";
  */
 export const MODAL_PIP_DEFAULT_PX = {
     rightPositionPx: 16,
-    topPositionPx: 52,
+    bottomPositionPx: 64,
     widthPx: 88,
     heightPx: 128
 };
@@ -22,7 +22,7 @@ export const getPipStyles = (theme) => ({
             // Above the message thread / people pane.
             zIndex: 2 }, (theme.rtl
             ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
-            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { bottom: _pxToRem(MODAL_PIP_DEFAULT_PX.bottomPositionPx) })
     }
 });
 /**

package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalLocalAndRemotePIP.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAOnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,eAAe,EAAE,EAAE;IACnB,~~aAAa~~,EAAE,EAAE;~~IACjB~~,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAgC,EAAE,CAAC,CAAC;IAC5E,KAAK,EAAE;QACL,IAAI,gCACF,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,0CAA0C;YAC1C,MAAM,EAAE,CAAC,IACN,CAAC,KAAK,CAAC,GAAG;YACX,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE;YAC1D,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,CAAC,KAC9D,~~GAAG~~,EAAE,QAAQ,CAAC,oBAAoB,CAAC,~~aAAa~~,CAAC,~~GAClD~~;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC7C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;SAC/B;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiB,eAAe,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAA2D;IAChF,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,QAAQ;QAClB,sFAAsF;QACtF,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,gFAAgF;QAChF,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;YAC9B,aAAa,EAAE,MAAM;SACtB;KACF;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAW;IACzC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,QAAQ;IAChB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n IModalStyleProps,\n IModalStyles,\n IStackStyles,\n IStyle,\n IStyleFunctionOrObject,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n Styles for {@link ModalLocalAndRemotePIP} component\n /\nexport type ModalLocalAndRemotePIPStyles = { modal?: Partial<IModalStyles> };\n\n/\n Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.\n \n @private\n /\nexport const MODAL_PIP_DEFAULT_PX = {\n rightPositionPx: 16,\n ~~topPositionPx~~: 52,\n widthPx: 88,\n heightPx: 128\n};\n\n/\n @private\n /\nexport const getPipStyles = (theme: ITheme): ModalLocalAndRemotePIPStyles => ({\n modal: {\n main: {\n borderRadius: theme.effects.roundedCorner4,\n boxShadow: theme.effects.elevation8,\n // Above the message thread / people pane.\n zIndex: 2,\n ...(theme.rtl\n ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }\n : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }),\n ~~top~~: _pxToRem(MODAL_PIP_DEFAULT_PX.~~topPositionPx~~)\n }\n }\n});\n\n/\n @private\n /\nexport const PIPContainerStyle: IStackStyles = {\n root: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n ':focus-within': {\n outline: '1px solid #00000000'\n }\n }\n};\n\n/\n @private\n /\nexport const hiddenStyle: IStackStyles = concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });\n\n/\n @private\n /\nexport const modalStyle: IStyleFunctionOrObject<IModalStyleProps, IModalStyles> = {\n main: {\n minWidth: 'min-content',\n minHeight: 'min-content',\n position: 'absolute',\n overflow: 'hidden',\n // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive\n pointerEvents: 'auto',\n touchAction: 'none'\n },\n root: {\n width: '100%',\n height: '100%',\n // pointer events for root Modal div set to none to make descendants interactive\n pointerEvents: 'none',\n ':focus-within': {\n outline: '3px solid #00000000',\n outlineOffset: '-3px'\n }\n }\n};\n\n/\n Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.\n * @private\n */\nexport const modalLayerHostStyle: IStyle = {\n display: 'flex',\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n zIndex: '100000',\n // pointer events for layerHost set to none to make descendants interactive\n pointerEvents: 'none'\n};\n"]}
1	+ {"version":3,"file":"ModalLocalAndRemotePIP.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAOnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,eAAe,EAAE,EAAE;IACnB,gBAAgB,EAAE,EAAE;IACpB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAgC,EAAE,CAAC,CAAC;IAC5E,KAAK,EAAE;QACL,IAAI,gCACF,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,0CAA0C;YAC1C,MAAM,EAAE,CAAC,IACN,CAAC,KAAK,CAAC,GAAG;YACX,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE;YAC1D,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,CAAC,KAC9D,MAAM,EAAE,QAAQ,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,GACxD;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC7C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;SAC/B;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiB,eAAe,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAA2D;IAChF,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,QAAQ;QAClB,sFAAsF;QACtF,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,gFAAgF;QAChF,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;YAC9B,aAAa,EAAE,MAAM;SACtB;KACF;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAW;IACzC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,QAAQ;IAChB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n IModalStyleProps,\n IModalStyles,\n IStackStyles,\n IStyle,\n IStyleFunctionOrObject,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\n Styles for {@link ModalLocalAndRemotePIP} component\n /\nexport type ModalLocalAndRemotePIPStyles = { modal?: Partial<IModalStyles> };\n\n/\n Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.\n \n @private\n /\nexport const MODAL_PIP_DEFAULT_PX = {\n rightPositionPx: 16,\n bottomPositionPx: 64,\n widthPx: 88,\n heightPx: 128\n};\n\n/\n @private\n /\nexport const getPipStyles = (theme: ITheme): ModalLocalAndRemotePIPStyles => ({\n modal: {\n main: {\n borderRadius: theme.effects.roundedCorner4,\n boxShadow: theme.effects.elevation8,\n // Above the message thread / people pane.\n zIndex: 2,\n ...(theme.rtl\n ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }\n : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }),\n bottom: _pxToRem(MODAL_PIP_DEFAULT_PX.bottomPositionPx)\n }\n }\n});\n\n/\n @private\n /\nexport const PIPContainerStyle: IStackStyles = {\n root: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n ':focus-within': {\n outline: '1px solid #00000000'\n }\n }\n};\n\n/\n @private\n /\nexport const hiddenStyle: IStackStyles = concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });\n\n/\n @private\n /\nexport const modalStyle: IStyleFunctionOrObject<IModalStyleProps, IModalStyles> = {\n main: {\n minWidth: 'min-content',\n minHeight: 'min-content',\n position: 'absolute',\n overflow: 'hidden',\n // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive\n pointerEvents: 'auto',\n touchAction: 'none'\n },\n root: {\n width: '100%',\n height: '100%',\n // pointer events for root Modal div set to none to make descendants interactive\n pointerEvents: 'none',\n ':focus-within': {\n outline: '3px solid #00000000',\n outlineOffset: '-3px'\n }\n }\n};\n\n/\n Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.\n * @private\n */\nexport const modalLayerHostStyle: IStyle = {\n display: 'flex',\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n zIndex: '100000',\n // pointer events for layerHost set to none to make descendants interactive\n pointerEvents: 'none'\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/utils.js CHANGED Viewed

@@ -17,22 +17,22 @@ export const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
     const modalHostRef = useRef(document.getElementById(modalLayerHostId));
     const modalHostWidth = _useContainerWidth(modalHostRef);
     const modalHostHeight = _useContainerHeight(modalHostRef);
-    const minDragPosition = useMemo(() => modalHostWidth === undefined
+    const minDragPosition = useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
         ? undefined
         : {
             x: rtl
                 ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
                 : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
-            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
-        }, [modalHostWidth, rtl]);
-    const maxDragPosition = useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
+            y: -1 * modalHostHeight + MODAL_PIP_DEFAULT_PX.heightPx + MODAL_PIP_DEFAULT_PX.bottomPositionPx
+        }, [modalHostHeight, modalHostWidth, rtl]);
+    const maxDragPosition = useMemo(() => modalHostWidth === undefined
         ? undefined
         : {
             x: rtl
                 ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
                 : MODAL_PIP_DEFAULT_PX.rightPositionPx,
-            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
-        }, [modalHostHeight, modalHostWidth, rtl]);
+            y: MODAL_PIP_DEFAULT_PX.bottomPositionPx
+        }, [modalHostWidth, rtl]);
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
 /**

package/dist/dist-esm/react-composites/src/composites/common/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,mBAAmB,EAAE,kBAAkB,EAAE,yCAAmC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAU9E;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAc,EAAoB,EAAE;IAC5D,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF;;GAEG;AACH,sIAAsI;AACtI,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,GAAa,EAAsB,EAAE;IACnG,MAAM,YAAY,GAAG,MAAM,CAAc,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS;~~QAC1B~~,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,eAAe;gBAC3C,CAAC,CAAC,oBAAoB,CAAC,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC,OAAO;YACxF,CAAC,EAAE,CAAC,CAAC,GAAG,oBAAoB,CAAC,~~aAAa~~;~~SAC3C~~,EACP,CAAC,cAAc,EAAE,GAAG,CAAC,~~CACtB~~,CAAC;IACF,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS~~,IAAI,eAAe,KAAK,SAAS~~;~~QAC3D~~,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,cAAc,GAAG,oBAAoB,CAAC,eAAe,GAAG,oBAAoB,CAAC,OAAO;gBACtF,CAAC,CAAC,oBAAoB,CAAC,eAAe;YACxC,CAAC,EAAE,~~eAAe,GAAG,~~oBAAoB,CAAC,~~aAAa,GAAG,oBAAoB,CAAC,QAAQ~~;~~SACxF~~,EACP,CAAC,~~eAAe,EAAE,~~cAAc,EAAE,GAAG,CAAC,~~CACvC~~,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,OAAO,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _ICoordinates, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useMemo, useRef } from 'react';\nimport { MODAL_PIP_DEFAULT_PX } from './styles/ModalLocalAndRemotePIP.styles';\n\n/*\n Interface for ModalLocalAndRemotePIP drag positions\n /\ninterface MinMaxDragPosition {\n minDragPosition: _ICoordinates \| undefined;\n maxDragPosition: _ICoordinates \| undefined;\n}\n\n/\n @private\n /\nexport const isBoolean = (value: unknown): value is boolean => {\n return value !== null && typeof value === 'boolean';\n};\n\n/\n @private\n /\n// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410\nexport const useMinMaxDragPosition = (modalLayerHostId: string, rtl?: boolean): MinMaxDragPosition => {\n const modalHostRef = useRef<HTMLElement>(document.getElementById(modalLayerHostId));\n const modalHostWidth = _useContainerWidth(modalHostRef);\n const modalHostHeight = _useContainerHeight(modalHostRef);\n const minDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n modalHostWidth === undefined\n ? undefined\n : {\n x: rtl\n ? -1 MODAL_PIP_DEFAULT_PX.rightPositionPx\n : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,\n y: -1 * MODAL_PIP_DEFAULT_PX.~~topPositionPx~~\n },\n [modalHostWidth, rtl]\n );\n const maxDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n modalHostWidth === undefined ~~\|\| modalHostHeight === undefined~~\n ? undefined\n : {\n x: rtl\n ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx\n : MODAL_PIP_DEFAULT_PX.rightPositionPx,\n y: ~~modalHostHeight -~~ MODAL_PIP_DEFAULT_PX.~~topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx~~\n },\n [~~modalHostHeight,~~ modalHostWidth, rtl]\n );\n\n return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };\n};\n\n/*\n @private\n */\nexport const defaultSpokenLanguage = 'en-us';\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAiB,mBAAmB,EAAE,kBAAkB,EAAE,yCAAmC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAU9E;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAc,EAAoB,EAAE;IAC5D,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF;;GAEG;AACH,sIAAsI;AACtI,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,GAAa,EAAsB,EAAE;IACnG,MAAM,YAAY,GAAG,MAAM,CAAc,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS,IAAI,eAAe,KAAK,SAAS;QAC3D,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,eAAe;gBAC3C,CAAC,CAAC,oBAAoB,CAAC,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC,OAAO;YACxF,CAAC,EAAE,CAAC,CAAC,GAAG,eAAe,GAAG,oBAAoB,CAAC,QAAQ,GAAG,oBAAoB,CAAC,gBAAgB;SAChG,EACP,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,CAAC,CACvC,CAAC;IACF,MAAM,eAAe,GAA8B,OAAO,CACxD,GAAG,EAAE,CACH,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,CAAC,EAAE,GAAG;gBACJ,CAAC,CAAC,cAAc,GAAG,oBAAoB,CAAC,eAAe,GAAG,oBAAoB,CAAC,OAAO;gBACtF,CAAC,CAAC,oBAAoB,CAAC,eAAe;YACxC,CAAC,EAAE,oBAAoB,CAAC,gBAAgB;SACzC,EACP,CAAC,cAAc,EAAE,GAAG,CAAC,CACtB,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,OAAO,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _ICoordinates, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useMemo, useRef } from 'react';\nimport { MODAL_PIP_DEFAULT_PX } from './styles/ModalLocalAndRemotePIP.styles';\n\n/*\n Interface for ModalLocalAndRemotePIP drag positions\n /\ninterface MinMaxDragPosition {\n minDragPosition: _ICoordinates \| undefined;\n maxDragPosition: _ICoordinates \| undefined;\n}\n\n/\n @private\n /\nexport const isBoolean = (value: unknown): value is boolean => {\n return value !== null && typeof value === 'boolean';\n};\n\n/\n @private\n /\n// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410\nexport const useMinMaxDragPosition = (modalLayerHostId: string, rtl?: boolean): MinMaxDragPosition => {\n const modalHostRef = useRef<HTMLElement>(document.getElementById(modalLayerHostId));\n const modalHostWidth = _useContainerWidth(modalHostRef);\n const modalHostHeight = _useContainerHeight(modalHostRef);\n const minDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n modalHostWidth === undefined \|\| modalHostHeight === undefined\n ? undefined\n : {\n x: rtl\n ? -1 MODAL_PIP_DEFAULT_PX.rightPositionPx\n : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,\n y: -1 * modalHostHeight + MODAL_PIP_DEFAULT_PX.heightPx + MODAL_PIP_DEFAULT_PX.bottomPositionPx\n },\n [modalHostHeight, modalHostWidth, rtl]\n );\n const maxDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n modalHostWidth === undefined\n ? undefined\n : {\n x: rtl\n ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx\n : MODAL_PIP_DEFAULT_PX.rightPositionPx,\n y: MODAL_PIP_DEFAULT_PX.bottomPositionPx\n },\n [modalHostWidth, rtl]\n );\n\n return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };\n};\n\n/*\n @private\n */\nexport const defaultSpokenLanguage = 'en-us';\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.18.0-alpha-202406200013",
+  "version": "1.18.0-alpha-202406210015",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [