@azure/communication-react 1.22.0-alpha-202412140017 → 1.22.0-alpha-202412170017
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.
- package/dist/communication-react.d.ts +4 -0
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-Dl92p4eD.js → ChatMessageComponentAsRichTextEditBox-BgVWz6LK.js} +2 -2
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-Dl92p4eD.js.map → ChatMessageComponentAsRichTextEditBox-BgVWz6LK.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-33DU1VBo.js → RichTextSendBoxWrapper-D0RkwoOI.js} +2 -2
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-33DU1VBo.js.map → RichTextSendBoxWrapper-D0RkwoOI.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{index-DGukAwsx.js → index-CpnFA8og.js} +8 -7
- package/dist/dist-cjs/communication-react/index-CpnFA8og.js.map +1 -0
- package/dist/dist-cjs/communication-react/index.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ImageOverlay.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/ImageOverlay.js +2 -0
- package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +2 -1
- package/package.json +1 -1
- package/dist/dist-cjs/communication-react/index-DGukAwsx.js.map +0 -1
|
@@ -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.22.0-alpha-
|
|
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.22.0-alpha-202412170017';\n"]}
|
|
@@ -48,6 +48,10 @@ export interface ImageOverlayStrings {
|
|
|
48
48
|
* Dismiss button aria label for ImageOverlay
|
|
49
49
|
*/
|
|
50
50
|
dismissButtonAriaLabel: string;
|
|
51
|
+
/**
|
|
52
|
+
* Announcer message for when ImageOverlay becomes active
|
|
53
|
+
*/
|
|
54
|
+
overlayVisibleMessage: string;
|
|
51
55
|
}
|
|
52
56
|
/**
|
|
53
57
|
* Component to render a fullscreen modal for a selected image.
|
|
@@ -8,6 +8,7 @@ import { useLocale } from '../localization';
|
|
|
8
8
|
/* @conditional-compile-remove(image-overlay-theme) */
|
|
9
9
|
import { imageOverlayTheme } from '../theming';
|
|
10
10
|
import { darkTheme } from '../theming';
|
|
11
|
+
import { Announcer } from './Announcer';
|
|
11
12
|
/**
|
|
12
13
|
* Component to render a fullscreen modal for a selected image.
|
|
13
14
|
*
|
|
@@ -41,6 +42,7 @@ export const ImageOverlay = (props) => {
|
|
|
41
42
|
} }))));
|
|
42
43
|
};
|
|
43
44
|
return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(overlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
|
|
45
|
+
React.createElement(Announcer, { ariaLive: 'polite', announcementString: localeStrings.overlayVisibleMessage }),
|
|
44
46
|
React.createElement(FluentThemeProvider, { fluentTheme: overlayTheme, rootStyle: themeProviderRootStyle },
|
|
45
47
|
renderHeaderBar(),
|
|
46
48
|
renderBodyWithLightDismiss())));
|
|
@@ -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;
|
|
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';\nimport { Announcer } from './Announcer';\n\n/**\n * Props for {@link ImageOverlay}.\n *\n * @public\n */\nexport interface ImageOverlayProps {\n /**\n * Boolean that controls whether the modal is displayed.\n */\n isOpen: boolean;\n /**\n * Image source used to display the image in a large scale.\n */\n imageSrc: string;\n /**\n * Optional string used as a alt text for the image. @default 'image'\n */\n altText?: string;\n /**\n * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n */\n title?: string;\n /**\n * Optional JSX element used as a title icon and displayed to the left of the title element.\n */\n titleIcon?: JSX.Element;\n /**\n * Callback to invoke when the ImageOverlay modal is dismissed\n */\n onDismiss: () => void;\n /**\n * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n */\n onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @public\n */\nexport interface ImageOverlayStrings {\n /**\n * Download button label for ImageOverlay\n */\n downloadButtonLabel: string;\n /**\n * Dismiss button aria label for ImageOverlay\n */\n dismissButtonAriaLabel: string;\n /**\n * Announcer message for when ImageOverlay becomes active\n */\n overlayVisibleMessage: string;\n}\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @public\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n const { 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 <Announcer ariaLive={'polite'} announcementString={localeStrings.overlayVisibleMessage} />\n <FluentThemeProvider fluentTheme={overlayTheme} rootStyle={themeProviderRootStyle}>\n {renderHeaderBar()}\n {renderBodyWithLightDismiss()}\n </FluentThemeProvider>\n </Modal>\n );\n};\n"]}
|
|
@@ -85,7 +85,8 @@
|
|
|
85
85
|
},
|
|
86
86
|
"imageOverlay": {
|
|
87
87
|
"downloadButtonLabel": "Download",
|
|
88
|
-
"dismissButtonAriaLabel": "Close"
|
|
88
|
+
"dismissButtonAriaLabel": "Close",
|
|
89
|
+
"overlayVisibleMessage": "Image Details Overlay"
|
|
89
90
|
},
|
|
90
91
|
"messageStatusIndicator": {
|
|
91
92
|
"deliveredAriaLabel": "Message sent",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.22.0-alpha-
|
|
3
|
+
"version": "1.22.0-alpha-202412170017",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|