npm - @azure/communication-react - Versions diffs - 1.13.0-alpha-202402110013 → 1.13.0-alpha-202402140012 - Mend

@azure/communication-react 1.13.0-alpha-202402110013 → 1.13.0-alpha-202402140012

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

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.13.0-alpha-202402110013';
+module.exports = '1.13.0-alpha-202402140012';
 //# 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.13.0-alpha-~~202402110013~~';\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.13.0-alpha-202402140012';\n"]}

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

@@ -70,21 +70,36 @@ const generateLiveMessage = (props) => {
     return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;
 };
 const messageContentAriaText = (props) => {
-    // Strip all html tags from the content for aria.
-    return props.message.content
-        ? props.message.mine
+    if (props.message.content) {
+        // Replace all <img> tags with 'image' for aria.
+        const parsedContent = DOMPurify.sanitize(props.message.content, {
+            ALLOWED_TAGS: ['img'],
+            RETURN_DOM_FRAGMENT: true
+        });
+        parsedContent.childNodes.forEach((child) => {
+            if (child.nodeName.toLowerCase() !== 'img') {
+                return;
+            }
+            const imageTextNode = document.createElement('div');
+            imageTextNode.innerHTML = 'image ';
+            parsedContent.replaceChild(imageTextNode, child);
+        });
+        // Strip all html tags from the content for aria.
+        const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
+        return props.message.mine
             ? _formatString(props.strings.messageContentMineAriaText, {
-                message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })
+                message: message
             })
             : _formatString(props.strings.messageContentAriaText, {
                 author: `${props.message.senderDisplayName}`,
-                message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })
-            })
-        : undefined;
+                message: message
+            });
+    }
+    return undefined;
 };
 /* @conditional-compile-remove(image-overlay) */
 const defaultOnRenderInlineImage = (inlineImage) => {
-    return (React.createElement("img", Object.assign({}, inlineImage.imgAttrs, { "data-ui-id": inlineImage.imgAttrs.id, tabIndex: 0, role: "button", style: Object.assign({ cursor: 'pointer' }, inlineImage.imgAttrs.style) })));
+    return React.createElement("img", Object.assign({ tabIndex: 0, "data-ui-id": inlineImage.imgAttrs.id }, inlineImage.imgAttrs));
 };
 const processHtmlToReact = (props) => {
     var _a;

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';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @beta\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @beta\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\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\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\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 } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n // Strip all html tags from the content for aria.\n\n return props.message.content\n ? props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n })\n : undefined;\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img\n {...inlineImage.imgAttrs}\n data-ui-id={inlineImage.imgAttrs.id}\n tabIndex={0}\n role=\"button\"\n style={{\n cursor: 'pointer',\n ...inlineImage.imgAttrs.style\n }}\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 (props.mentionDisplayOptions?.onRenderMention && 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 return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (\n domNode.name &&\n domNode.name === 'img' &&\n domNode.attribs &&\n domNode.attribs.id &&\n props.message.inlineImages?.find((metadata) => {\n return metadata.id === domNode.attribs.id;\n })\n ) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imgAttrs: imgProps };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n\n return <img {...imgProps} />;\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\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';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @beta\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @beta\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\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\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\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 } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n if (props.message.content) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n\n parsedContent.childNodes.forEach((child) => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Strip all html tags from the content for aria.\n const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n }\n return undefined;\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return <img tabIndex={0} data-ui-id={inlineImage.imgAttrs.id} {...inlineImage.imgAttrs} />;\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 (props.mentionDisplayOptions?.onRenderMention && 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 return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (\n domNode.name &&\n domNode.name === 'img' &&\n domNode.attribs &&\n domNode.attribs.id &&\n props.message.inlineImages?.find((metadata) => {\n return metadata.id === domNode.attribs.id;\n })\n ) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imgAttrs: imgProps };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n\n return <img {...imgProps} />;\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { SyntheticEvent } from 'react';
 /**
  * Props for {@link ImageOverlay}.
  *
@@ -30,9 +30,13 @@ export interface ImageOverlayProps {
      */
     onDismiss: () => void;
     /**
-     * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.
+     * Callback called when the download button is clicked.
      */
-    onDownloadButtonClicked?: (imageSrc: string) => void;
+    onDownloadButtonClicked: (imageSrc: string) => void;
+    /**
+     * Callback called when there's an error loading the image.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
 }
 /**
  * Strings of {@link ImageOverlay} that can be overridden.

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

@@ -7,47 +7,46 @@ import React, { useState } from 'react';
 /* @conditional-compile-remove(image-overlay) */
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 /* @conditional-compile-remove(image-overlay) */
-import { FluentThemeProvider } from '../theming/FluentThemeProvider';
+import { useTheme } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-overlay) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(image-overlay) */
-import { imageOverlayTheme } from '../theming';
-/* @conditional-compile-remove(image-overlay) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
  * @beta
  */
 export const ImageOverlay = (props) => {
-    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
+    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
+    const theme = useTheme();
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
     const renderHeaderBar = () => {
         return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": title || 'Image' }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle),
+                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)),
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
-                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss,
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
+                React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss,
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: 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', "aria-live": 'polite', onError: () => {
+        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', "aria-live": 'polite', onError: (event) => {
                 setIsImageLoaded(false);
+                onError && onError(event);
             }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme },
-        React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-            renderHeaderBar(),
-            renderBodyWithLightDismiss())));
+    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        renderHeaderBar(),
+        renderBodyWithLightDismiss()));
 };
 //# sourceMappingURL=ImageOverlay.js.map

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,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7F,gDAAgD;AAChD,OAAO,KAAK,EAAE,~~EAAE~~,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AACxC~~,gDAAgD;AAChD,OAAO,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,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,gDAAgD;AAChD,OAAO,EAAE,~~mBAAmB~~,EAAE,MAAM,gCAAgC,CAAC;~~AACrE~~,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;~~AAC5C~~,gDAAgD;AAChD~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAsD/C,gDAAgD;AAChD~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;~~IAElG~~,gDAAgD;IAChD,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,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,~~iBAAiB~~,CAAC,CAAC;~~IAE1F~~,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,~~iBAAiB~~,CAAC,CAAC,gBAAc,KAAK,IAAI,OAAO,~~IAC5F~~,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;~~oBAC3C~~,gDAAgD;oBAChD,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,gBAEP,aAAa,CAAC,mBAAmB,GAC7C~~,CACH~~;~~gBACA~~,~~uBAAuB,IAAI,CAC1B,~~oBAAC,UAAU,IACT,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,~~iBAAiB~~,CAAC,CAAC,~~EAC5E~~,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,~~IAAI,uBAAuB,~~CAAC,QAAQ,CAAC,~~gBAE/D~~,aAAa,CAAC,mBAAmB,eAClC,QAAQ,GACnB~~,CACH~~;~~gBACD~~,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,~~iBAAiB~~,CAAC,CAAC,~~EAC5D~~,OAAO,EAAE,SAAS;oBAClB,gDAAgD;oBAChD,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,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,~~mBAAmB,IAAC,WAAW,EAAE,iBAAiB;QACjD,oBAAC,~~KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,EAAE,MAAM,oBAAO,aAAa,CAAC,~~iBAAiB~~,CAAC,CAAE,EAAE,~~EAC5D~~,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,EAC/E,aAAa,EAAE,IAAI;~~YAElB~~,eAAe,EAAE;~~YACjB~~,0BAA0B,EAAE,CACvB,~~CACY~~,~~CACvB,~~CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) /\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/ @conditional-compile-remove(image-overlay) /\nimport React, { useState } from 'react';\n/ @conditional-compile-remove(image-overlay) /\nimport {\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 titleBarContainerStyle,\n titleStyle\n} from './styles/ImageOverlay.style';\n/ @conditional-compile-remove(image-overlay) /\nimport { ~~FluentThemeProvider~~ } from '../theming/FluentThemeProvider';\n/ @conditional-compile-remove(image-overlay) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(image-overlay) /\nimport { ~~imageOverlayTheme~~ } from '../theming';\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Props for {@link ImageOverlay}.\n \n @beta\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n ~~Optional~~ ~~callback~~ called when the download button is clicked. If ~~not~~ ~~provided,~~ ~~the~~ ~~download~~ ~~button~~ ~~will~~ ~~not~~ be ~~rendered~~.\n /\n ~~onDownloadButtonClicked~~?: (~~imageSrc~~: ~~string~~) => void;\n}\n/ @conditional-compile-remove(image-overlay) /\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @beta\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n}\n/ @conditional-compile-remove(image-overlay) /\n/\n Component to render a fullscreen modal for a selected image.\n \n @beta\n /\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n / @conditional-compile-remove(image-overlay) /\n const localeStrings = useLocale().strings.imageOverlay;\n\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(~~imageOverlayTheme~~);\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(~~imageOverlayTheme~~))} 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 / @conditional-compile-remove(image-overlay) /\n text={localeStrings.downloadButtonLabel}\n onClick={() => onDownloadButtonClicked ~~&& onDownloadButtonClicked~~(imageSrc)}\n onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n aria-live={'polite'}\n / @conditional-compile-remove(image-overlay) /\n aria-label={localeStrings.downloadButtonLabel}\n />\n ~~)}\n {onDownloadButtonClicked && (\n~~ <IconButton\n iconProps={downloadIcon}\n className={mergeStyles(smallDownloadButtonContainerStyle(~~imageOverlayTheme~~))}\n onClick={() => onDownloadButtonClicked ~~&& onDownloadButtonClicked~~(imageSrc)}\n / @conditional-compile-remove(image-overlay) /\n aria-label={localeStrings.downloadButtonLabel}\n aria-live={'polite'}\n />\n ~~)}\n~~ <IconButton\n iconProps={cancelIcon}\n className={mergeStyles(closeButtonStyles(~~imageOverlayTheme~~))}\n onClick={onDismiss}\n / @conditional-compile-remove(image-overlay) */\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 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 <~~FluentThemeProvider fluentTheme={imageOverlayTheme}>\n <~~Modal\n titleAriaId={title}\n isOpen={isOpen}\n onDismiss={onDismiss}\n overlay={{ styles: { ...overlayStyles(~~imageOverlayTheme~~) } }}\n styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n isDarkOverlay={true}\n >\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </Modal>\n ~~</FluentThemeProvider>\n~~ );\n};\n"]}
1	+ {"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7F,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,gDAAgD;AAChD,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,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,gDAAgD;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA4D5C,gDAAgD;AAChD;;;;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,OAAO,EAAE,GAAG,KAAK,CAAC;IAC3G,MAAM,KAAK,GAAG,QAAQ,EAA0B,CAAC;IAEjD,gDAAgD;IAChD,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,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9E,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,KAAK,CAAC,CAAC,gBAAc,KAAK,IAAI,OAAO,IAChF,KAAK,CACK,CACP;YACR,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC;gBACrD,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;oBAClD,gDAAgD;oBAChD,IAAI,EAAE,aAAa,CAAC,mBAAmB,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAChD,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAI,eAC7F,QAAQ,gBAEP,aAAa,CAAC,mBAAmB,GAC7C;gBACF,oBAAC,UAAU,IACT,SAAS,EAAE,YAAY,EACvB,SAAS,EAAE,WAAW,CAAC,iCAAiC,CAAC,KAAK,CAAC,CAAC,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,gBAEpC,aAAa,CAAC,mBAAmB,eAClC,QAAQ,GACnB;gBACF,oBAAC,UAAU,IACT,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAChD,OAAO,EAAE,SAAS;oBAClB,gDAAgD;oBAChD,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,eAC3B,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;YAC5B,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,KAAK,CAAC,CAAE,EAAE,EAChD,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,EAC/E,aAAa,EAAE,IAAI;QAElB,eAAe,EAAE;QACjB,0BAA0B,EAAE,CACvB,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) /\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/ @conditional-compile-remove(image-overlay) /\nimport React, { SyntheticEvent, useState } from 'react';\n/ @conditional-compile-remove(image-overlay) /\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 titleBarContainerStyle,\n titleStyle\n} from './styles/ImageOverlay.style';\n/ @conditional-compile-remove(image-overlay) /\nimport { useTheme } from '../theming/FluentThemeProvider';\n/ @conditional-compile-remove(image-overlay) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(image-overlay) /\nimport { ChatTheme } from '../theming';\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Props for {@link ImageOverlay}.\n \n @beta\n /\nexport interface ImageOverlayProps {\n /\n Boolean that controls whether the modal is displayed.\n /\n isOpen: boolean;\n /\n Image source used to display the image in a large scale.\n /\n imageSrc: string;\n /\n Optional string used as a alt text for the image. @default 'image'\n /\n altText?: string;\n /\n Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n /\n title?: string;\n /\n Optional JSX element used as a title icon and displayed to the left of the title element.\n /\n titleIcon?: JSX.Element;\n /\n Callback to invoke when the ImageOverlay modal is dismissed\n /\n onDismiss: () => void;\n /\n Callback called when the download button is clicked.\n /\n onDownloadButtonClicked: (imageSrc: string) => void;\n /\n Callback called when there's an error loading the image.\n /\n onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n/ @conditional-compile-remove(image-overlay) /\n/\n Strings of {@link ImageOverlay} that can be overridden.\n \n @beta\n /\nexport interface ImageOverlayStrings {\n /\n Download button label for ImageOverlay\n /\n downloadButtonLabel: string;\n /\n Dismiss button aria label for ImageOverlay\n /\n dismissButtonAriaLabel: string;\n}\n/ @conditional-compile-remove(image-overlay) /\n/\n Component to render a fullscreen modal for a selected image.\n \n @beta\n /\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;\n const theme = useTheme() as unknown as ChatTheme;\n\n / @conditional-compile-remove(image-overlay) /\n const localeStrings = useLocale().strings.imageOverlay;\n\n const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\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(theme))} aria-label={title \|\| 'Image'}>\n {title}\n </Stack.Item>\n </Stack>\n <Stack className={mergeStyles(controlBarContainerStyle)}>\n <DefaultButton\n className={mergeStyles(downloadButtonStyle(theme))}\n / @conditional-compile-remove(image-overlay) /\n text={localeStrings.downloadButtonLabel}\n onClick={() => onDownloadButtonClicked(imageSrc)}\n onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n aria-live={'polite'}\n / @conditional-compile-remove(image-overlay) /\n aria-label={localeStrings.downloadButtonLabel}\n />\n <IconButton\n iconProps={downloadIcon}\n className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n onClick={() => onDownloadButtonClicked(imageSrc)}\n / @conditional-compile-remove(image-overlay) /\n aria-label={localeStrings.downloadButtonLabel}\n aria-live={'polite'}\n />\n <IconButton\n iconProps={cancelIcon}\n className={mergeStyles(closeButtonStyles(theme))}\n onClick={onDismiss}\n / @conditional-compile-remove(image-overlay) */\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 aria-live={'polite'}\n onError={(event) => {\n setIsImageLoaded(false);\n onError && onError(event);\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(theme) } }}\n styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n isDarkOverlay={true}\n >\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </Modal>\n );\n};\n"]}

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

@@ -1,5 +1,6 @@
-import { IIconProps, IStyle, PartialTheme } from '@fluentui/react';
+import { IIconProps, IStyle } from '@fluentui/react';
 import { IOverlayStyles } from '@fluentui/react';
+import { ChatTheme } from '../../theming/themes';
 /**
  * @private
  */
@@ -11,7 +12,7 @@ export declare const downloadIcon: IIconProps;
 /**
  * @private
  */
-export declare const overlayStyles: (theme: PartialTheme) => IOverlayStyles;
+export declare const overlayStyles: (theme: ChatTheme) => IOverlayStyles;
 /**
  * @private
  */
@@ -31,7 +32,7 @@ export declare const titleBarContainerStyle: IStyle;
 /**
  * @private
  */
-export declare const titleStyle: (theme: PartialTheme) => IStyle;
+export declare const titleStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
@@ -51,17 +52,17 @@ export declare const normalImageStyle: IStyle;
 /**
  * @private
  */
-export declare const brokenImageStyle: (theme: PartialTheme) => IStyle;
+export declare const brokenImageStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const closeButtonStyles: (theme: PartialTheme) => IStyle;
+export declare const closeButtonStyles: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const downloadButtonStyle: IStyle;
+export declare const downloadButtonStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const smallDownloadButtonContainerStyle: (theme: PartialTheme) => IStyle;
+export declare const smallDownloadButtonContainerStyle: (theme: ChatTheme) => IStyle;
 //# sourceMappingURL=ImageOverlay.style.d.ts.map

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

@@ -15,11 +15,10 @@ export const downloadIcon = {
  * @private
  */
 export const overlayStyles = (theme) => {
-    var _a;
     return {
         root: {
-            background: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.white,
-            opacity: '0.95'
+            background: theme.chatPalette.modalOverlayBlack,
+            opacity: '0.85'
         }
     };
 };
@@ -68,14 +67,14 @@ export const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const titleStyle = (theme) => {
-    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
+        color: theme.chatPalette.modalTitleWhite,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -123,60 +122,77 @@ export const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const brokenImageStyle = (theme) => {
-    var _a;
     return {
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
+        color: theme.chatPalette.modalTitleWhite
     };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const closeButtonStyles = (theme) => {
-    var _a, _b, _c;
     return {
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
+        color: theme.chatPalette.modalTitleWhite,
         ':hover': {
-            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         }
     };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-export const downloadButtonStyle = {
-    margin: '0 0.5rem',
-    height: '32px',
-    borderWidth: '1px',
-    fontSize: '0.875rem', // 14px
-    fontWeight: 600,
-    padding: '0.38rem 0.75rem',
-    borderRadius: '4px',
-    whiteSpace: 'nowrap',
-    '@media (max-width: 25rem)': {
-        display: 'none'
-    }
+export const downloadButtonStyle = (theme) => {
+    return {
+        margin: '0 0.5rem',
+        height: '32px',
+        borderWidth: '1px',
+        fontSize: '0.875rem', // 14px
+        fontWeight: 600,
+        padding: '0.38rem 0.75rem',
+        borderRadius: '4px',
+        backgroundColor: theme.chatPalette.modalButtonBackground,
+        color: theme.chatPalette.modalTitleWhite,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+        },
+        ':active': {
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+        },
+        '@media (max-width: 25rem)': {
+            display: 'none'
+        }
+    };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const smallDownloadButtonContainerStyle = (theme) => {
-    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
+        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         },
         '@media (min-width: 25rem)': {
             display: 'none'

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;~~AAMlC~~;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAe;IACtC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,gDAAgD;AAChD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,~~KAAmB~~,EAAkB,EAAE~~;;IACnE~~,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,~~MAAA,~~KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~YAChC~~,OAAO,EAAE,MAAM;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAW;IACjC,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,eAAe;IAC/B,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,~~KAAmB~~,EAAU,EAAE~~;;IACxD~~,OAAO;QACL,WAAW,EAAE,QAAQ;QACrB,KAAK,EAAE,~~MAAA,~~KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~QAC3B~~,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,SAAS;KACtB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAW;IAC9C,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAW;IACvC,WAAW,EAAE,OAAO;IACpB,QAAQ,EAAE,UAAU,CAAC,OAAO;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAW;IACnC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,qBAAqB;IAC9B,kDAAkD,EAAE;QAClD,OAAO,EAAE,qBAAqB;KAC/B;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,~~KAAmB~~,EAAU,EAAE~~;;IAC9D~~,OAAO;QACL,KAAK,EAAE,~~MAAA,~~KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~KAC5B~~,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,~~KAAmB~~,EAAU,EAAE~~;;IAC/D~~,OAAO;QACL,KAAK,EAAE,~~MAAA,~~KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~QAC3B~~,QAAQ,EAAE;YACR,KAAK,EAAE,~~MAAA~~,KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~SAC5B~~;QACD,SAAS,EAAE;YACT,KAAK,EAAE,~~MAAA~~,KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~SAC5B~~;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,~~GAAW~~;~~IACzC~~,MAAM,EAAE,UAAU;~~IAClB~~,MAAM,EAAE,MAAM;~~IACd~~,WAAW,EAAE,KAAK;~~IAClB~~,QAAQ,EAAE,UAAU,EAAE,OAAO;~~IAC7B~~,UAAU,EAAE,GAAG;~~IACf~~,OAAO,EAAE,iBAAiB;~~IAC1B~~,YAAY,EAAE,KAAK;~~IACnB~~,UAAU,EAAE,QAAQ;~~IACpB~~,2BAA2B,EAAE;~~QAC3B~~,OAAO,EAAE,MAAM;~~KAChB~~;~~CACF~~,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,~~KAAmB~~,EAAU,EAAE~~;;IAC/E~~,OAAO;QACL,WAAW,EAAE,QAAQ;QACrB,~~UAAU~~,EAAE,~~QAAQ;QACpB,~~KAAK,~~EAAE~~,~~MAAA~~,~~KAAK,~~CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~QAC3B~~,QAAQ,EAAE;YACR,KAAK,EAAE,~~MAAA~~,KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~SAC5B~~;QACD,SAAS,EAAE;YACT,KAAK,EAAE,~~MAAA~~,KAAK,CAAC,~~OAAO~~,~~0CAAE~~,~~KAAK~~;~~SAC5B~~;QACD,2BAA2B,EAAE;YAC3B,OAAO,EAAE,MAAM;SAChB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, ~~PartialTheme~~ } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) /\nimport { IOverlayStyles } from '@fluentui/react';\n\n/\n @private\n /\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/\n @private\n /\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const overlayStyles = (theme: ~~PartialTheme~~): IOverlayStyles => {\n return {\n root: {\n background: theme.~~palette?.white~~,\n opacity: '0.95'\n }\n };\n};\n\n/\n @private\n /\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex',\n width: '100%',\n height: '100%',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/\n @private\n /\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n maxWidth: '100%',\n maxHeight: '100%',\n flexDirection: 'column',\n flexWrap: 'nowrap'\n};\n\n/\n @private\n /\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0.25rem 0.75rem'\n};\n\n/\n @private\n /\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const titleStyle = (theme: ~~PartialTheme~~): IStyle => {\n return {\n paddingLeft: '0.5rem',\n color: theme.~~palette?.black~~,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/\n @private\n /\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/\n @private\n /\nexport const bodyContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n padding: '1rem 2rem 3rem 2rem',\n '@media (max-width: 25rem) or (max-height: 25rem)': {\n padding: '0rem 1rem 2rem 1rem'\n }\n};\n\n/\n @private\n /\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%'\n};\n\n/\n @private\n /\nexport const brokenImageStyle = (theme: ~~PartialTheme~~): IStyle => {\n return {\n color: theme.~~palette?.black~~\n };\n};\n\n/\n @private\n /\nexport const closeButtonStyles = (theme: ~~PartialTheme~~): IStyle => {\n return {\n color: theme.~~palette?.black~~,\n ':hover': {\n color: theme.~~palette?.black~~\n },\n ':active': {\n color: theme.~~palette?.black~~\n }\n };\n};\n\n/\n @private\n /\nexport const downloadButtonStyle: IStyle = {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n whiteSpace: 'nowrap',\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n};\n\n/\n @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: ~~PartialTheme~~): IStyle => {\n return {\n marginRight: '0.5rem',\n ~~whiteSpace~~: ~~'nowrap'~~,\n ~~color~~: ~~theme.palette?.black~~,\n ':hover': {\n color: theme.~~palette?.black~~\n },\n ':active': {\n color: theme.~~palette?.black~~\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
1	+ {"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) /\nimport { IOverlayStyles } from '@fluentui/react';\n/ @conditional-compile-remove(image-overlay) /\nimport { ChatTheme } from '../../theming/themes';\n\n/\n @private\n /\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/\n @private\n /\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const overlayStyles = (theme: ChatTheme): IOverlayStyles => {\n return {\n root: {\n background: theme.chatPalette.modalOverlayBlack,\n opacity: '0.85'\n }\n };\n};\n\n/\n @private\n /\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex',\n width: '100%',\n height: '100%',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/\n @private\n /\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n maxWidth: '100%',\n maxHeight: '100%',\n flexDirection: 'column',\n flexWrap: 'nowrap'\n};\n\n/\n @private\n /\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0.25rem 0.75rem'\n};\n\n/\n @private\n /\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const titleStyle = (theme: ChatTheme): IStyle => {\n return {\n paddingLeft: '0.5rem',\n color: theme.chatPalette.modalTitleWhite,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/\n @private\n /\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/\n @private\n /\nexport const bodyContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n padding: '1rem 2rem 3rem 2rem',\n '@media (max-width: 25rem) or (max-height: 25rem)': {\n padding: '0rem 1rem 2rem 1rem'\n }\n};\n\n/\n @private\n /\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%'\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const brokenImageStyle = (theme: ChatTheme): IStyle => {\n return {\n color: theme.chatPalette.modalTitleWhite\n };\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const closeButtonStyles = (theme: ChatTheme): IStyle => {\n return {\n color: theme.chatPalette.modalTitleWhite,\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n }\n };\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n /\nexport const downloadButtonStyle = (theme: ChatTheme): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: theme.chatPalette.modalButtonBackground,\n color: theme.chatPalette.modalTitleWhite,\n whiteSpace: 'nowrap',\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: ChatTheme): IStyle => {\n return {\n marginRight: '0.5rem',\n color: theme.chatPalette.modalTitleWhite,\n whiteSpace: 'nowrap',\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/ar-SA/strings.json CHANGED Viewed

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "فشل في الانضمام إلى المكالمة.",
         "failedToJoinCallInvalidMeetingLink": "تعذر الانضمام إلى الاجتماع. ارتباط غير صالح.",
         "cameraFrozenForRemoteParticipants": "يواجه المستخدمون في المكالمة مشكلات في رؤية الفيديو الخاص بك. الرجاء التحقق من أجهزتك وشبكتك.",
-        "unableToStartVideoEffect": "يتعذر تطبيق تأثير الفيديو."
+        "unableToStartVideoEffect": "يتعذر تطبيق تأثير الفيديو.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "لا يمكن بدء تسليط الضوء على المشاركين (المشاركين) لأنه تم بالفعل تسليط الضوء على الحد الأقصى لعدد المشاركين."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "أنت تشارك شاشتك",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "تثبيت {participantName}",
         "unpinParticipantMenuItemAriaLabel": "إزالة تثبيت {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "تم تثبيت {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "تم إلغاء تثبيت {participantName}"
+        "unpinnedParticipantAnnouncementAriaLabel": "تم إلغاء تثبيت {participantName}",
+        "startSpotlightVideoTileMenuLabel": "تسليط الضوء لدى الجميع",
+        "addSpotlightVideoTileMenuLabel": "إضافة تسليط ضوء",
+        "spotlightLimitReachedMenuTitle": "تم الوصول إلى الحد الأقصى لتسليط الضوء",
+        "stopSpotlightVideoTileMenuLabel": "التوقف عن تسليط الضوء",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "الخروج من وضع تسليط الضوء"
     },
     "dialpad": {
         "placeholderText": "أدخل رقم الهاتف",

package/dist/dist-esm/react-components/src/localization/locales/cs-CZ/strings.json CHANGED Viewed

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "K hovoru se nepovedlo připojit.",
         "failedToJoinCallInvalidMeetingLink": "Ke schůzce se nelze připojit. Neplatný odkaz.",
         "cameraFrozenForRemoteParticipants": "Uživatelé v hovoru mají problémy s zobrazením vašeho videa. Zkontrolujte prosím svá zařízení a síť.",
-        "unableToStartVideoEffect": "Nelze použít efekt videa."
+        "unableToStartVideoEffect": "Nelze použít efekt videa.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Nelze zahájit vytváření hlavního výběru účastníků, protože je již v hlavním výběru maximální počet účastníků."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Sdílíte obrazovku",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Připnout {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Odepnout {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "Připnutý účastník {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} odepnut"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} odepnut",
+        "startSpotlightVideoTileMenuLabel": "Přidat do hlavního výběru všem",
+        "addSpotlightVideoTileMenuLabel": "Přidat do hlavního výběru",
+        "spotlightLimitReachedMenuTitle": "Dosáhlo se limitu hlavního výběru",
+        "stopSpotlightVideoTileMenuLabel": "Zastavit přidávání do hlavního výběru",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Ukončit hlavní výběr"
     },
     "dialpad": {
         "placeholderText": "Zadejte telefonní číslo",

package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json CHANGED Viewed

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Fehler bei der Teilnahme am Anruf.",
         "failedToJoinCallInvalidMeetingLink": "Teilnahme an Besprechung nicht möglich. Ungültiger Link.",
         "cameraFrozenForRemoteParticipants": "Benutzer im Anruf haben Probleme, Ihr Video zu sehen. Überprüfen Sie Ihre Geräte und Ihr Netzwerk.",
-        "unableToStartVideoEffect": "Videoeffekt kann nicht angewendet werden."
+        "unableToStartVideoEffect": "Videoeffekt kann nicht angewendet werden.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Das Spotlight für Teilnehmer*innen kann nicht gestartet werden, da die maximale Anzahl von Teilnehmer*innen bereits im Spotlight ist."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Sie teilen Ihren Bildschirm",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "{participantName} anheften",
         "unpinParticipantMenuItemAriaLabel": "{participantName} lösen",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} angeheftet",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} gelöst"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} gelöst",
+        "startSpotlightVideoTileMenuLabel": "Spotlight für alle",
+        "addSpotlightVideoTileMenuLabel": "Spotlight hinzufügen",
+        "spotlightLimitReachedMenuTitle": "Spotlight-Limit erreicht",
+        "stopSpotlightVideoTileMenuLabel": "Spotlight beenden",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Spotlight beenden"
     },
     "dialpad": {
         "placeholderText": "Telefonnummer eingeben",

package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json CHANGED Viewed

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Failed to join call.",
         "failedToJoinCallInvalidMeetingLink": "Unable to join Meeting. Invalid Link.",
         "cameraFrozenForRemoteParticipants": "Users in the call are having issues seeing your video. Please check your devices and network.",
-        "unableToStartVideoEffect": "Unable to apply video effect."
+        "unableToStartVideoEffect": "Unable to apply video effect.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "You are sharing your screen",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Pin {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Unpin {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "Pinned {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "Unpinned {participantName}"
+        "unpinnedParticipantAnnouncementAriaLabel": "Unpinned {participantName}",
+        "startSpotlightVideoTileMenuLabel": "Spotlight for everyone",
+        "addSpotlightVideoTileMenuLabel": "Add spotlight",
+        "spotlightLimitReachedMenuTitle": "Spotlight limit reached",
+        "stopSpotlightVideoTileMenuLabel": "Stop spotlighting",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Exit spotlight"
     },
     "dialpad": {
         "placeholderText": "Enter phone number",