@azure/communication-react 1.7.0-alpha-202307120016 → 1.7.0-alpha-202307140015

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-202307120016';
+var telemetryVersion = '1.7.0-alpha-202307140015';
 
 // 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
@@ -7032,7 +7033,7 @@ const _MentionPopover = (props) => {
     const ids = useIdentifiers();
     const localeStrings = useLocale$1().strings;
     const popoverRef = React.useRef();
-    const [position, setPosition] = React.useState({ left: 0 });
+    const [position, setPosition] = React.useState();
     const [hoveredSuggestion, setHoveredSuggestion] = React.useState(undefined);
     const [changedSelection, setChangedSelection] = React.useState(undefined); // Selection UI as per teams
     const dismissPopoverWhenClickingOutside = React.useCallback((e) => {
@@ -7119,20 +7120,19 @@ const _MentionPopover = (props) => {
         /* @conditional-compile-remove(mention) */
         return localeStrings.mentionPopover.mentionPopoverHeader;
     }, [localeStrings, title]);
-    return (React__default['default'].createElement("div", { ref: popoverRef },
-        React__default['default'].createElement(react.Stack, { "data-testid": 'mention-suggestion-list-container', className: react.mergeStyles({
-                maxHeight: 212,
-                maxWidth: position.maxWidth
-            }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
-            React__default['default'].createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
-            React__default['default'].createElement(react.Stack
-            /* @conditional-compile-remove(mention) */
-            , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
-                const active = index === activeSuggestionIndex;
-                return onRenderSuggestionItem
-                    ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
-                    : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
-            })))));
+    return (React__default['default'].createElement("div", { ref: popoverRef }, position && (React__default['default'].createElement(react.Stack, { "data-testid": 'mention-suggestion-list-container', className: react.mergeStyles({
+            maxHeight: 212,
+            maxWidth: position.maxWidth
+        }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
+        React__default['default'].createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
+        React__default['default'].createElement(react.Stack
+        /* @conditional-compile-remove(mention) */
+        , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
+            const active = index === activeSuggestionIndex;
+            return onRenderSuggestionItem
+                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+        }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -7398,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)) {
@@ -7425,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) {
@@ -7457,7 +7476,6 @@ const TextFieldWithMention = (props) => {
                     setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
                 }
                 setInteractionStartSelection(undefined);
-                setShouldHandleOnMouseDownDuringSelect(false);
             }
         }
         else {