@azure/communication-react 1.7.1-alpha-202308250012 → 1.7.1-alpha-202308260012

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308250012';
+var telemetryVersion = '1.7.1-alpha-202308260012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8697,6 +8697,7 @@ const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(image-gallery) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
@@ -8706,7 +8707,7 @@ const ImageGallery = (props) => {
     const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const localeStrings = useLocale$1().strings.imageGallery;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
     const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);
@@ -8722,11 +8723,11 @@ const ImageGallery = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme, isDarkTheme)), "aria-label": image.title }, image.title)),
             React__default['default'].createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
                 React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme, isDarkTheme)), 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => React__default['default'].createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
                 React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
                 React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme, isDarkTheme)), onClick: onDismiss, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
@@ -8742,7 +8743,7 @@ const ImageGallery = (props) => {
                 React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', onError: (event) => {
                         setIsImageLoaded(false);
                         onError && onError(event);
-                    }, onClick: (event) => event.stopPropagation() }))));
+                    }, onClick: (event) => event.stopPropagation(), "aria-live": 'polite' }))));
     };
     return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme, isDarkTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
         renderHeaderBar(),
@@ -9739,16 +9740,23 @@ const processInlineImage = (props) => ({
             ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
     },
     processNode: (node, children, index) => {
+        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
         // logic to check id in map/list
         if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
             node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
         }
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         const handleOnClick = () => {
             props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
         };
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return (React__default['default'].createElement("span", { onClick: handleOnClick, "data-ui-id": node.attribs.id }, processNodeDefinitions.processDefaultNode(node, children, index)));
+        /* @conditional-compile-remove(image-gallery) */
+        return (React__default['default'].createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                cursor: 'pointer'
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    handleOnClick();
+                }
+            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
     }
 });
 /* @conditional-compile-remove(mention) */
@@ -9947,7 +9955,7 @@ const MessageBubble = (props) => {
     const theme = useTheme();
     const locale = useLocale$1();
     const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     onInlineImageClicked } = props;
     const defaultTimeStamp = message.createdOn
         ? generateDefaultTimestamp(message.createdOn, showDate, strings)
@@ -10007,7 +10015,7 @@ const MessageBubble = (props) => {
         }
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (onInlineImageClicked === undefined) {
             return;
@@ -10028,7 +10036,7 @@ const MessageBubble = (props) => {
                 attachmentsMap: props.attachmentsMap, 
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: handleOnInlineImageClicked }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
     }, [
@@ -10037,7 +10045,7 @@ const MessageBubble = (props) => {
         props,
         strings,
         userId,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         handleOnInlineImageClicked
     ]);
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -10115,9 +10123,9 @@ const ChatMessageComponent = (props) => {
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
             /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
             onFetchAttachments: props.onFetchAttachments, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+            /* @conditional-compile-remove(image-gallery) */
             onInlineImageClicked: props.onInlineImageClicked, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+            /* @conditional-compile-remove(image-gallery) */
             attachmentsMap: props.attachmentsMap, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
@@ -10491,7 +10499,7 @@ const MessageThread = (props) => {
     onFetchAttachments, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     onInlineImageClicked } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = React.useState([]);
@@ -10739,7 +10747,7 @@ const MessageThread = (props) => {
                 onDisplayDateTimeString: onDisplayDateTimeString, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 onFetchAttachments: onFetchInlineAttachment, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: onInlineImageClicked, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 attachmentsMap: inlineAttachments, 
@@ -10761,7 +10769,7 @@ const MessageThread = (props) => {
         onDisplayDateTimeString,
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         onFetchInlineAttachment,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         onInlineImageClicked,
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         inlineAttachments,
@@ -21927,9 +21935,9 @@ const ChatScreen = (props) => {
     const defaultNumberOfChatMessagesToReload = 5;
     /* @conditional-compile-remove(file-sharing) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const [fullSizeAttachments, setFullSizeAttachments] = React.useState({});
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const [galleryImages, setGalleryImages] = React.useState([]);
     const adapter = useAdapter$1();
     const theme = useTheme();
@@ -21976,7 +21984,7 @@ const ChatScreen = (props) => {
         }
         return [{ blobUrl: '' }];
     }), [adapter]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$i(void 0, void 0, void 0, function* () {
         var _a, _b;
         const messages = (_a = messageThreadProps.messages) === null || _a === void 0 ? void 0 : _a.filter((message) => {
@@ -22024,7 +22032,7 @@ const ChatScreen = (props) => {
             }
         }
     }), [adapter, fullSizeAttachments, messageThreadProps.messages, onRenderAvatarCallback]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(image-gallery) */
     const onImageDownloadButtonClicked = React.useCallback((imageUrl, saveAsName) => {
         if (react.isIOS()) {
             window.open(imageUrl, '_blank');
@@ -22063,7 +22071,7 @@ const ChatScreen = (props) => {
                     onRenderFileDownloads: onRenderFileDownloads, 
                     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                     onFetchAttachments: onRenderInlineAttachment, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    /* @conditional-compile-remove(image-gallery) */
                     onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
@@ -22079,7 +22087,7 @@ const ChatScreen = (props) => {
                         formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        /* @conditional-compile-remove(image-gallery) */
         React__default['default'].createElement(ImageGallery, { isOpen: galleryImages.length > 0, images: galleryImages, onDismiss: () => setGalleryImages([]), onImageDownloadButtonClicked: onImageDownloadButtonClicked })));
 };
 
@@ -22975,7 +22983,7 @@ const CaptionsBannerMoreButton = (props) => {
 /* @conditional-compile-remove(close-captions) */
 const mobileViewBannerWidth = '90%';
 /* @conditional-compile-remove(close-captions) */
-const desktopViewBannerWidth = '50%';
+const desktopViewBannerWidth = '35rem';
 /** @private */
 const CaptionsBanner = (props) => {
     /* @conditional-compile-remove(close-captions) */
@@ -23012,7 +23020,7 @@ const CaptionsBanner = (props) => {
         /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: true })),
         /* @conditional-compile-remove(close-captions) */ React__default['default'].createElement("div", { className: containerClassName },
             React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth, maxWidth: '35rem' } },
+                React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
                     React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
                 React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
@@ -24507,8 +24515,8 @@ const captionSettingsDrawerStyles = (theme) => ({
         drawerContentContainer: {
             root: {
                 span: {
-                    fontWeight: 600,
-                    fontSize: _pxToRem(17),
+                    fontWeight: 400,
+                    fontSize: _pxToRem(14),
                     lineHeight: _pxToRem(22),
                     color: theme.palette.neutralDark
                 }