@azure/communication-react 1.7.0-alpha-202307060015 → 1.7.0-alpha-202307070015

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-202307060015';
+var telemetryVersion = '1.7.0-alpha-202307070015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6265,7 +6265,7 @@ const handleMentionTagUpdate = (props) => {
     if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
         // the whole tag should be removed
         result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-        plainTextSelectionEndIndex = tag.plainTextBeginIndex + processedChange.length;
+        plainTextSelectionEndIndex = tag.plainTextBeginIndex + change.length;
         processedChange = '';
         lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
     }
@@ -6285,7 +6285,7 @@ const handleMentionTagUpdate = (props) => {
         }
         else {
             // if the change is inside the tag, the selection should start with rangeStart
-            plainTextSelectionEndIndex = rangeStart + processedChange.length;
+            plainTextSelectionEndIndex = rangeStart + change.length;
         }
         lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
         // processed change should not be changed as it should be added after the tag
@@ -6398,27 +6398,53 @@ const updateHTML = (props) => {
                 // the change is between the tag
                 if (isMentionTag) {
                     if (change !== '') {
-                        if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
-                            // mention tag should be deleted when user tries to edit it in the middle
-                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
-                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
-                        }
-                        else if (startIndex === tag.plainTextBeginIndex) {
-                            // non empty change at the beginning of the mention tag to be added before the mention tag
-                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
-                            lastProcessedHTMLIndex = tag.openTagIndex;
-                        }
-                        else if (startIndex === closingTagInfo.plainTextEndIndex) {
+                        // case for startIndex === tag.plainTextBeginIndex and closingTagInfo.plainTextEndIndex === startIndex
+                        // is handled in startIndex <= tag.plainTextBeginIndex condition check
+                        // the change will be added at the beginning before the mention tag
+                        if (startIndex === closingTagInfo.plainTextEndIndex) {
                             // non empty change at the end of the mention tag to be added after the mention tag
                             result +=
                                 htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
                                     processedChange;
                             changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                            processedChange = '';
+                            // the change is handled; exit
+                            break;
+                        }
+                        else if (startIndex > tag.plainTextBeginIndex &&
+                            oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex &&
+                            startIndex === oldPlainTextEndIndex) {
+                            // mention tag should be deleted when user tries to edit it in the middle
+                            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
+                            lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
+                            processedChange = '';
+                            // the change is handled; exit
+                            break;
+                        }
+                        else {
+                            // the selection for more that 1 symbol when 1 of the ends is included
+                            const updateMentionTagResult = handleMentionTagUpdate({
+                                htmlText,
+                                oldPlainText,
+                                lastProcessedHTMLIndex,
+                                processedChange,
+                                change,
+                                tag,
+                                closeTagIdx: closingTagInfo.closeTagIdx,
+                                closeTagLength: closingTagInfo.closeTagLength,
+                                plainTextEndIndex: closingTagInfo.plainTextEndIndex,
+                                startIndex,
+                                oldPlainTextEndIndex,
+                                mentionTagLength
+                            });
+                            result += updateMentionTagResult.result;
+                            changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
+                            processedChange = updateMentionTagResult.updatedChange;
+                            lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+                            // proceed with the next calculations
                         }
-                        processedChange = '';
                     }
                     else {
                         // When change is empty, it means that this change is a deletion
@@ -6440,6 +6466,8 @@ const updateHTML = (props) => {
                         changeNewEndIndex = updateMentionTagResult.plainTextSelectionEndIndex;
                         processedChange = updateMentionTagResult.updatedChange;
                         lastProcessedHTMLIndex = updateMentionTagResult.htmlIndex;
+                        // the change is handled; exit
+                        break;
                     }
                 }
                 else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
@@ -6457,6 +6485,8 @@ const updateHTML = (props) => {
                     });
                     result += stringBefore + updatedContent.updatedHTML;
                     changeNewEndIndex = updatedContent.updatedSelectionIndex;
+                    // the change is handled; exit
+                    break;
                 }
                 else {
                     // no subtags
@@ -6472,9 +6502,9 @@ const updateHTML = (props) => {
                     else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
                         lastProcessedHTMLIndex = closingTagInfo.closeTagIdx;
                     }
+                    // the change is handled; exit
+                    break;
                 }
-                // the change is handled; exit
-                break;
             }
             else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > closingTagInfo.plainTextEndIndex) {
                 // the change started in the tag but finishes somewhere further
@@ -7121,6 +7151,8 @@ const TextFieldWithMention = (props) => {
     // Index of the current trigger character in the text field
     const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = React.useState(-1);
     const [inputTextValue, setInputTextValue] = React.useState('');
+    // Internal value for text value prop
+    const [internalTextValue, setInternalTextValue] = React.useState('');
     const [tagsValue, setTagsValue] = React.useState([]);
     // Index of the previous selection start in the text field
     const [selectionStartValue, setSelectionStartValue] = React.useState();
@@ -7143,14 +7175,19 @@ const TextFieldWithMention = (props) => {
     const updateMentionSuggestions = React.useCallback((suggestions) => {
         setMentionSuggestions(suggestions);
     }, [setMentionSuggestions]);
+    React.useEffect(() => {
+        setInternalTextValue(textValue);
+        // update mention suggestions before the next render cycle
+        updateMentionSuggestions([]);
+    }, [textValue, updateMentionSuggestions]);
     // Parse the text and get the plain text version to display in the input box
     React.useEffect(() => {
         const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || DEFAULT_MENTION_TRIGGER;
-        const parsedHTMLData = textToTagParser(textValue, trigger);
+        const parsedHTMLData = textToTagParser(internalTextValue, trigger);
         setInputTextValue(parsedHTMLData.plainText);
         setTagsValue(parsedHTMLData.tags);
         updateMentionSuggestions([]);
-    }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
+    }, [internalTextValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
     React.useEffect(() => {
         var _a;
         // effect for caret index update
@@ -7166,7 +7203,7 @@ const TextFieldWithMention = (props) => {
         (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(updatedCaretIndex, updatedCaretIndex);
         setSelectionStartValue(updatedCaretIndex);
         setSelectionEndValue(updatedCaretIndex);
-    }, [caretIndex, inputTextValue.length, textFieldRef, setSelectionStartValue, setSelectionEndValue]);
+    }, [caretIndex, inputTextValue, textFieldRef, setSelectionStartValue, setSelectionEndValue]);
     const onSuggestionSelected = React.useCallback((suggestion) => {
         var _a, _b, _c;
         let selectionEnd = ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || -1;
@@ -7182,7 +7219,7 @@ const TextFieldWithMention = (props) => {
         const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
         // update html text with updated plain text
         const updatedContent = updateHTML({
-            htmlText: textValue,
+            htmlText: internalTextValue,
             oldPlainText,
             tags: tagsValue,
             startIndex: currentTriggerStartIndex,
@@ -7190,6 +7227,7 @@ const TextFieldWithMention = (props) => {
             change: mention,
             mentionTrigger: triggerText
         });
+        setInternalTextValue(updatedContent.updatedHTML);
         const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
         const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;
         // move the caret in the text field to the end of the mention plain text
@@ -7208,7 +7246,7 @@ const TextFieldWithMention = (props) => {
         currentTriggerStartIndex,
         mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
         onChange,
-        textValue,
+        internalTextValue,
         tagsValue,
         updateMentionSuggestions,
         localeStrings
@@ -7522,6 +7560,7 @@ const TextFieldWithMention = (props) => {
             change,
             mentionTrigger: triggerText
         });
+        setInternalTextValue(updatedContent.updatedHTML);
         // update caret index if needed
         if (updatedContent.updatedSelectionIndex !== undefined) {
             setCaretIndex(updatedContent.updatedSelectionIndex);
@@ -7576,7 +7615,7 @@ const TextFieldWithMention = (props) => {
                 handleOnChange({
                     event: e,
                     tagsValue,
-                    htmlTextValue: textValue,
+                    htmlTextValue: internalTextValue,
                     inputTextValue,
                     currentTriggerStartIndex,
                     previousSelectionStart: nullToUndefined(selectionStartValue),
@@ -7594,7 +7633,9 @@ const TextFieldWithMention = (props) => {
                     if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {
                         e.currentTarget.setSelectionRange(caretIndex, caretIndex);
                     }
-                    setCaretIndex(undefined);
+                    // caret index should not be set to undefined here
+                    // as it will cause issues when suggestion is selected by mouse
+                    // caret index will be set to undefined during keyboard/mouse or touch interactions
                     return;
                 }
                 handleOnSelect({
@@ -7635,11 +7676,9 @@ const TextFieldWithMention = (props) => {
                 });
             }, onTouchEnd: () => {
             }, onBlur: () => {
-                // setup all flags to default values when text field loses focus
+                // setup shouldHandleOnMouseDownDuringSelect to false when text field loses focus
+                // as the click should be handled by text field anymore
                 setShouldHandleOnMouseDownDuringSelect(false);
-                setCaretIndex(undefined);
-                setSelectionStartValue(undefined);
-                setSelectionEndValue(undefined);
             }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef }))));
 };
 
@@ -8327,6 +8366,10 @@ const defaultChatMessageContainer = (theme) => ({
         maxWidth: '100% !important',
         height: 'auto !important'
     },
+    '& video': {
+        maxWidth: '100% !important',
+        height: 'auto !important'
+    },
     '& p': {
         // Deal with awkward padding seen in messages from Teams.
         // For more info see https://github.com/Azure/communication-ui-library/pull/1507
@@ -17465,11 +17508,10 @@ const convertToUiSystemMessage = (message) => {
 /** Returns `true` if the message has participants and at least one participant has a display name. */
 const hasValidParticipant = (chatMessage) => { var _a; return !!((_a = chatMessage.content) === null || _a === void 0 ? void 0 : _a.participants) && chatMessage.content.participants.some((p) => !!p.displayName); };
 /**
- * Selector for {@link MessageThread} component.
  *
- * @public
+ * @private
  */
-const messageThreadSelector = reselect.createSelector([getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants], (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {
+const messageThreadSelectorWithThread = () => reselect.createSelector([getUserId, getChatMessages, getLatestReadTime, getIsLargeGroup, getReadReceipts, getParticipants], (userId, chatMessages, latestReadTime, isLargeGroup, readReceipts, participants) => {
     // We can't get displayName in teams meeting interop for now, disable rr feature when it is teams interop
     const isTeamsInterop = Object.values(participants).find((p) => 'microsoftTeamsUserId' in p.id) !== undefined;
     // get number of participants
@@ -17480,7 +17522,7 @@ const messageThreadSelector = reselect.createSelector([getUserId, getChatMessage
         : Object.values(participants).filter((p) => p.displayName && p.displayName !== '').length;
     // creating key value pairs of senderID: last read message information
     const readReceiptsBySenderId = {};
-    // readReceiptsBySenderId[senderID] gets updated everytime a new message is read by this sender
+    // readReceiptsBySenderId[senderID] gets updated every time a new message is read by this sender
     // in this way we can make sure that we are only saving the latest read message id and read on time for each sender
     readReceipts
         .filter((r) => r.sender && toFlatCommunicationIdentifier(r.sender) !== userId)
@@ -17537,6 +17579,12 @@ const isMessageValidToRender = (message) => {
     }
     return !!(message.content && ((_c = message.content) === null || _c === void 0 ? void 0 : _c.message) !== '');
 };
+/**
+ * Selector for {@link MessageThread} component.
+ *
+ * @public
+ */
+messageThreadSelectorWithThread();
 
 // Copyright (c) Microsoft Corporation.
 const filterTypingIndicators = (typingIndicators, userId) => {
@@ -17753,12 +17801,26 @@ const latestActiveErrorSatisfying = (errors, activeErrorType, predicate) => {
 const getSelector = (component) => {
     return findSelector(component);
 };
+const messageThreadSelectorsByThread = {};
 const findSelector = (component) => {
+    // For the message thread selector we need to create a new one for each thread
+    // If we have just one for the entire app, then we will have updates when not expecting due to
+    // the arguments changing
+    const getMessageThreadSelector = () => {
+        var _a, _b;
+        const threadId = (_b = (_a = React.useContext(ChatThreadClientContext)) === null || _a === void 0 ? void 0 : _a.threadId) !== null && _b !== void 0 ? _b : 'default-id-when-not-in-provider';
+        let messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];
+        if (!messageThreadSelectorImpl) {
+            messageThreadSelectorsByThread[threadId] = messageThreadSelectorWithThread();
+            messageThreadSelectorImpl = messageThreadSelectorsByThread[threadId];
+        }
+        return messageThreadSelectorImpl;
+    };
     switch (component) {
         case SendBox:
             return sendBoxSelector;
         case MessageThread:
-            return messageThreadSelector;
+            return getMessageThreadSelector();
         case TypingIndicator:
             return typingIndicatorSelector;
         case ParticipantList: