@azure/communication-react 1.7.0-alpha-202307130015 → 1.7.0-alpha-202307150015

package/dist/communication-react.d.ts

@@ -428,6 +428,36 @@ export declare interface BaseCustomStyles {
     root?: IStyle;
 }
 
+/**
+ * Base interface that all Meta Data should extend.
+ * Typically used for ACS to ACS file transfers.
+ * @beta
+ */
+export declare interface BaseFileMetadata {
+    /**
+     * File name to be displayed.
+     */
+    name: string;
+    /**
+     * Extension is used for rendering the file icon.
+     * An unknown extension will be rendered as a generic icon.
+     * Example: `jpeg`
+     */
+    extension: string;
+    /**
+     * Download URL for the file.
+     */
+    url: string;
+    /**
+     * Unique ID of the file.
+     */
+    id: string;
+    /**
+     * Attachment Type
+     */
+    attachmentType: FileMetadataAttachmentType;
+}
+
 /**
  * Content blocked message type.
  *
@@ -6097,30 +6127,22 @@ export declare type FileDownloadHandler = (userId: string, fileMetadata: FileMet
  * Meta Data containing information about the uploaded file.
  * @beta
  */
-export declare interface FileMetadata {
-    attachmentType: FileMetadataAttachmentType;
-    id: string;
-    /**
-     * File name to be displayed.
-     */
-    name: string;
-    /**
-     * Extension is used for rendering the file icon.
-     * An unknown extension will be rendered as a generic icon.
-     * Example: `jpeg`
-     */
-    extension: string;
-    /**
-     * Download URL for the file.
-     */
-    url: string;
-    previewUrl?: string;
-}
+export declare type FileMetadata = FileSharingMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ ImageFileMetadata;
 
 /**
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'teamsInlineImage' | 'unknown';
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'attachedImage' | 'unknown';
+
+/**
+ * Meta Data containing basic information about the uploaded file.
+ * Typically used for ACS to ACS file transfers.
+ * @beta
+ */
+export declare interface FileSharingMetadata extends BaseFileMetadata {
+    attachmentType: 'fileSharing';
+    payload?: Record<string, string> | undefined;
+}
 
 /**
  * Properties for configuring the File Sharing feature.
@@ -6501,6 +6523,15 @@ export declare interface _Identifiers {
     mentionSuggestionItem: string;
 }
 
+/**
+ * Meta Data containing data for images.
+ * @beta
+ */
+export declare interface ImageFileMetadata extends BaseFileMetadata {
+    attachmentType: 'inlineImage' | 'attachedImage';
+    previewUrl?: string;
+}
+
 /**
  * @beta
  * This contains a readonly array that returns all the active `incomingCalls`.

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.0-alpha-202307130015';
+var telemetryVersion = '1.7.0-alpha-202307150015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6992,7 +6992,8 @@ react.mergeStyles({
  */
 const suggestionListStyle = react.mergeStyles({
     padding: '0.25rem 0rem 0',
-    overflow: 'visible'
+    overflow: 'visible',
+    overflowY: 'scroll'
 });
 /**
  * @private
@@ -7397,7 +7398,14 @@ const TextFieldWithMention = (props) => {
     }, [setSelectionStartValue, setSelectionEndValue]);
     const handleOnSelect = React.useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue, interactionStartSelection }) => {
         var _a;
-        if (shouldHandleOnMouseDownDuringSelect) {
+        if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputTextValue.length) {
+            // entire text is selected, no need to change anything
+            setSelectionStartValue(event.currentTarget.selectionStart);
+            setSelectionEndValue(event.currentTarget.selectionEnd);
+            setInteractionStartSelection(undefined);
+            setShouldHandleOnMouseDownDuringSelect(false);
+        }
+        else if (shouldHandleOnMouseDownDuringSelect) {
             if (interactionStartSelection !== undefined &&
                 (interactionStartSelection.start !== event.currentTarget.selectionStart ||
                     interactionStartSelection.end !== event.currentTarget.selectionEnd)) {
@@ -7424,15 +7432,27 @@ const TextFieldWithMention = (props) => {
                 setInteractionStartSelection(undefined);
                 setShouldHandleOnMouseDownDuringSelect(false);
             }
-            else if (event.currentTarget.selectionStart !== null) {
+            else if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionEnd !== null) {
                 // on select was triggered by mouse down/up with no movement
                 const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);
                 if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
                     // handle mention click by selecting the whole mention
                     // if the selection is not on the bounds of the mention
-                    const mentionEndIndex = (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex;
                     // disable selection for clicks on mention bounds
-                    if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||
+                    const mentionEndIndex = (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex;
+                    if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&
+                        event.currentTarget.selectionEnd > mentionEndIndex) {
+                        // handle triple click when the text starts from mention
+                        if (event.currentTarget.selectionDirection === null) {
+                            event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);
+                        }
+                        else {
+                            event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd, event.currentTarget.selectionDirection);
+                        }
+                        setSelectionStartValue(mentionTag.plainTextBeginIndex);
+                        setSelectionEndValue(event.currentTarget.selectionEnd);
+                    }
+                    else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||
                         (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&
                             event.currentTarget.selectionStart !== mentionEndIndex)) {
                         if (event.currentTarget.selectionDirection === null) {
@@ -7456,7 +7476,6 @@ const TextFieldWithMention = (props) => {
                     setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
                 }
                 setInteractionStartSelection(undefined);
-                setShouldHandleOnMouseDownDuringSelect(false);
             }
         }
         else {
@@ -9066,7 +9085,10 @@ const MessageContentAsRichTextHTML = (props) => {
     React.useEffect(() => {
         var _a;
         (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
-            if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
+            if (props.onFetchAttachment &&
+                props.attachmentsMap &&
+                fileMetadata.attachmentType === 'inlineImage' &&
+                props.attachmentsMap[fileMetadata.id] === undefined) {
                 props.onFetchAttachment(fileMetadata);
             }
         });
@@ -9127,12 +9149,15 @@ const processInlineImage = (props) => ({
     // Custom <img> processing
     shouldProcessNode: (node) => {
         var _a;
+        function isImageNode(file) {
+            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
+        }
         // Process img node with id in attachments list
         return (node.name &&
             node.name === 'img' &&
             node.attribs &&
             node.attribs.id &&
-            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
+            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
     },
     processNode: (node, children, index) => {
         // logic to check id in map/list
@@ -9238,14 +9263,24 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
+    const isFileSharingAttachment = React.useCallback((attachment) => {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing';
+    }, []);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const isShowDownloadIcon = React.useCallback((attachment) => {
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+    }, []);
     const fileCardGroupDescription = React.useMemo(() => () => {
         var _a, _b;
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${fileMetadata.filter((file) => file.attachmentType === 'fileSharing').length}`
+            fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
         });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
     const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -9269,7 +9304,7 @@ const _FileDownloadCards = (props) => {
     }), [props]);
     if (!fileMetadata ||
         fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some((attachment) => attachment.attachmentType === 'fileSharing')) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
@@ -9277,9 +9312,10 @@ const _FileDownloadCards = (props) => {
             fileMetadata
                 .filter((attachment) => {
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                return attachment.attachmentType === 'fileSharing';
+                return isFileSharingAttachment(attachment);
             })
-                .map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !file.previewUrl ? (React__default['default'].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                .map((file) => (React__default['default'].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default['default'].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    isShowDownloadIcon(file) ? (React__default['default'].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
                     React__default['default'].createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) }))))));
 };
 /**
@@ -9860,9 +9896,7 @@ const MessageThread = (props) => {
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$t(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments ||
-            attachment.id in inlineAttachments ||
-            attachment.attachmentType !== 'teamsInlineImage') {
+        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
             return;
         }
         setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
@@ -17390,22 +17424,37 @@ const extractAttachedFilesMetadata = (metadata) => {
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractTeamsAttachmentsMetadata = (attachments) => {
-    return attachments.map((attachment) => {
-        var _a, _b;
-        return ({
-            attachmentType: mapAttachmentType(attachment.attachmentType),
-            id: attachment.id,
-            name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
-            extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
-            url: extractAttachmentUrl(attachment),
-            previewUrl: attachment.previewUrl
-        });
+    const fileMetadata = [];
+    attachments.forEach((attachment) => {
+        var _a, _b, _c, _d;
+        const attachmentType = mapAttachmentType(attachment.attachmentType);
+        if (attachmentType === 'inlineImage') {
+            fileMetadata.push({
+                attachmentType: attachmentType,
+                id: attachment.id,
+                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
+                extension: (_b = attachment.contentType) !== null && _b !== void 0 ? _b : '',
+                url: extractAttachmentUrl(attachment),
+                previewUrl: attachment.previewUrl
+            });
+        }
+        else if (attachmentType === 'fileSharing') {
+            fileMetadata.push({
+                attachmentType: attachmentType,
+                id: attachment.id,
+                name: (_c = attachment.name) !== null && _c !== void 0 ? _c : '',
+                extension: (_d = attachment.contentType) !== null && _d !== void 0 ? _d : '',
+                url: extractAttachmentUrl(attachment),
+                payload: { teamsFileAttachment: 'true' }
+            });
+        }
     });
+    return fileMetadata;
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const mapAttachmentType = (attachmentType) => {
     if (attachmentType === 'teamsImage' || attachmentType === 'teamsInlineImage') {
-        return 'teamsInlineImage';
+        return 'inlineImage';
     }
     else if (attachmentType === 'file') {
         return 'fileSharing';
@@ -20643,7 +20692,7 @@ const ChatScreen = (props) => {
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$g(void 0, void 0, void 0, function* () {
-        if (attachment.previewUrl) {
+        if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {
             const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
             return blob;
         }
@@ -23332,8 +23381,8 @@ const PeopleAndChatHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', "aria-selected": activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', "aria-selected": activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any