@azure/communication-react 1.7.0-beta.1 → 1.7.1-alpha-202308170011

package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js

@@ -36,6 +36,8 @@ export const TextFieldWithMention = (props) => {
     // Index of the current trigger character in the text field
     const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = useState(-1);
     const [inputTextValue, setInputTextValue] = useState('');
+    // Internal value for text value prop
+    const [internalTextValue, setInternalTextValue] = useState('');
     const [tagsValue, setTagsValue] = useState([]);
     // Index of the previous selection start in the text field
     const [selectionStartValue, setSelectionStartValue] = useState();
@@ -58,14 +60,19 @@ export const TextFieldWithMention = (props) => {
     const updateMentionSuggestions = useCallback((suggestions) => {
         setMentionSuggestions(suggestions);
     }, [setMentionSuggestions]);
+    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
     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]);
     useEffect(() => {
         var _a;
         // effect for caret index update
@@ -81,7 +88,7 @@ export 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 = 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;
@@ -97,7 +104,7 @@ export 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,
@@ -105,6 +112,7 @@ export 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
@@ -117,7 +125,17 @@ export const TextFieldWithMention = (props) => {
         (_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         setActiveSuggestionIndex(undefined);
         onChange && onChange(undefined, updatedContent.updatedHTML);
-    }, [textFieldRef, inputTextValue, currentTriggerStartIndex, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, onChange, textValue, tagsValue, updateMentionSuggestions, localeStrings]);
+    }, [
+        textFieldRef,
+        inputTextValue,
+        currentTriggerStartIndex,
+        mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
+        onChange,
+        internalTextValue,
+        tagsValue,
+        updateMentionSuggestions,
+        localeStrings
+    ]);
     const onTextFieldKeyDown = useCallback((ev) => {
         // caretIndex should be set to undefined when the user is typing
         setCaretIndex(undefined);
@@ -132,12 +150,16 @@ export const TextFieldWithMention = (props) => {
         if (mentionSuggestions.length > 0) {
             if (ev.key === 'ArrowUp') {
                 ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined ? mentionSuggestions.length - 1 : Math.max(activeSuggestionIndex - 1, 0);
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? mentionSuggestions.length - 1
+                    : Math.max(activeSuggestionIndex - 1, 0);
                 setActiveSuggestionIndex(newActiveIndex);
             }
             else if (ev.key === 'ArrowDown') {
                 ev.preventDefault();
-                const newActiveIndex = activeSuggestionIndex === undefined ? 0 : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? 0
+                    : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
             }
             else if (ev.key === 'Escape') {
@@ -157,11 +179,19 @@ export const TextFieldWithMention = (props) => {
             onEnterKeyDown && onEnterKeyDown();
         }
         onKeyDown && onKeyDown(ev);
-    }, [onEnterKeyDown, onKeyDown, supportNewline, mentionSuggestions, activeSuggestionIndex, onSuggestionSelected, updateMentionSuggestions]);
+    }, [
+        onEnterKeyDown,
+        onKeyDown,
+        supportNewline,
+        mentionSuggestions,
+        activeSuggestionIndex,
+        onSuggestionSelected,
+        updateMentionSuggestions
+    ]);
     const debouncedQueryUpdate = useDebouncedCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
-        suggestions = suggestions.filter(suggestion => suggestion.displayText.trim() !== '');
+        suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
         if (suggestions.length === 0) {
             setActiveSuggestionIndex(undefined);
         }
@@ -176,11 +206,16 @@ export const TextFieldWithMention = (props) => {
         var _a, _b, _c;
         let updatedStartIndex = event.currentTarget.selectionStart;
         let updatedEndIndex = event.currentTarget.selectionEnd;
-        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd && event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== -1) {
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
+            event.currentTarget.selectionStart !== null &&
+            event.currentTarget.selectionStart !== -1) {
             // just a caret movement/usual typing or deleting
             const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
             // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
+            if (mentionTag !== undefined &&
+                mentionTag.plainTextBeginIndex !== undefined &&
+                event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                event.currentTarget.selectionStart < ((_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex)) {
                 // get updated selection index
                 const newSelectionIndex = findNewSelectionIndexForMention({
                     tag: mentionTag,
@@ -198,7 +233,10 @@ export const TextFieldWithMention = (props) => {
                 // the selection start is changed
                 const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
                 // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionStart < ((_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex)) {
                     updatedStartIndex = findNewSelectionIndexForMention({
                         tag: mentionTag,
                         textValue: inputTextValue,
@@ -211,7 +249,10 @@ export const TextFieldWithMention = (props) => {
                 // the selection end is changed
                 const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
                 // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries
-                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined && event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex && event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
+                if (mentionTag !== undefined &&
+                    mentionTag.plainTextBeginIndex !== undefined &&
+                    event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&
+                    event.currentTarget.selectionEnd < ((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex)) {
                     updatedEndIndex = findNewSelectionIndexForMention({
                         tag: mentionTag,
                         textValue: inputTextValue,
@@ -233,14 +274,25 @@ export const TextFieldWithMention = (props) => {
     }, [setSelectionStartValue, setSelectionEndValue]);
     const handleOnSelect = useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue, interactionStartSelection }) => {
         var _a;
-        if (shouldHandleOnMouseDownDuringSelect) {
-            if (interactionStartSelection !== undefined && (interactionStartSelection.start !== event.currentTarget.selectionStart || interactionStartSelection.end !== event.currentTarget.selectionEnd)) {
+        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)) {
                 // selection was changed by mouse
                 // for mouse selection only, it's possible to start selection in the middle of a word in a mention
                 // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start
                 // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set
                 // to the end of the input to mimic selection from right to left for the left selection index
-                const updatedSelectionStartValue = event.currentTarget.selectionStart === interactionStartSelection.start ? inputTextValue.length : interactionStartSelection.start;
+                const updatedSelectionStartValue = event.currentTarget.selectionStart === interactionStartSelection.start
+                    ? inputTextValue.length
+                    : interactionStartSelection.start;
                 // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection
                 // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end
                 // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set
@@ -256,15 +308,29 @@ export 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 || event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex && event.currentTarget.selectionStart !== mentionEndIndex) {
+                    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) {
                             event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);
                         }
@@ -286,7 +352,6 @@ export const TextFieldWithMention = (props) => {
                     setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
                 }
                 setInteractionStartSelection(undefined);
-                setShouldHandleOnMouseDownDuringSelect(false);
             }
         }
         else {
@@ -340,18 +405,20 @@ export const TextFieldWithMention = (props) => {
             // Update the caret position, used for positioning the suggestions popover
             const textField = event.currentTarget;
             const relativePosition = Caret.getRelativePosition(textField);
-            const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);
-            if (relativePosition.top > adjustOffset) {
-                relativePosition.top -= adjustOffset;
+            if (textField.scrollHeight > textField.clientHeight) {
+                relativePosition.top -= textField.scrollTop;
             }
             setCaretPosition(relativePosition);
             if (triggerPriorIndex !== undefined) {
                 // trigger is found
-                const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
+                const symbolBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex);
+                const isSpaceBeforeTrigger = symbolBeforeTrigger === ' ';
+                // check if \r (Carriage Return), \n (Line Feed) or \r\n (End Of Line) is before the trigger
+                const isNewLineBeforeTrigger = /\r|\n/.exec(symbolBeforeTrigger);
                 const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);
                 let tagIndex = currentTriggerStartIndex;
-                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
-                    //no space before the trigger <- continuation of the previous word
+                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0 && isNewLineBeforeTrigger === null) {
+                    // no space before the trigger, it's not a beginning of the line and no new line before  <- continuation of the previous word
                     tagIndex = -1;
                     setCurrentTriggerStartIndex(tagIndex);
                 }
@@ -395,6 +462,7 @@ export const TextFieldWithMention = (props) => {
             change,
             mentionTrigger: triggerText
         });
+        setInternalTextValue(updatedContent.updatedHTML);
         // update caret index if needed
         if (updatedContent.updatedSelectionIndex !== undefined) {
             setCaretIndex(updatedContent.updatedSelectionIndex);
@@ -405,7 +473,10 @@ export const TextFieldWithMention = (props) => {
     }), [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]);
     // Adjust the selection range based on a mouse / touch interaction
     const handleOnMove = useCallback(({ event, selectionStartValue, selectionEndValue, interactionStartSelection, shouldHandleMoveEvent }) => {
-        if (shouldHandleMoveEvent && interactionStartSelection === undefined && (event.currentTarget.selectionStart !== selectionStartValue || event.currentTarget.selectionEnd !== selectionEndValue)) {
+        if (shouldHandleMoveEvent &&
+            interactionStartSelection === undefined &&
+            (event.currentTarget.selectionStart !== selectionStartValue ||
+                event.currentTarget.selectionEnd !== selectionEndValue)) {
             setInteractionStartSelection({
                 start: nullToUndefined(event.currentTarget.selectionStart),
                 end: nullToUndefined(event.currentTarget.selectionEnd)
@@ -429,12 +500,14 @@ export const TextFieldWithMention = (props) => {
             return undefined;
         }
         const currentMention = mentionSuggestions[activeSuggestionIndex !== null && activeSuggestionIndex !== void 0 ? activeSuggestionIndex : 0];
-        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0 ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText : localeStrings.participantItem.displayNamePlaceholder;
+        return (currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText.length) > 0
+            ? currentMention === null || currentMention === void 0 ? void 0 : currentMention.displayText
+            : localeStrings.participantItem.displayNamePlaceholder;
     }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);
-    return React.createElement(React.Fragment, null,
-        mentionSuggestions.length > 0 && React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
+    return (React.createElement(React.Fragment, null,
+        mentionSuggestions.length > 0 && (React.createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
                 updateMentionSuggestions([]);
-            } }),
+            } })),
         announcerText !== undefined && React.createElement(Announcer, { announcementString: announcerText, ariaLive: 'polite' }),
         React.createElement(TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: inputTextValue, onChange: (e, newValue) => {
                 // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html
@@ -444,7 +517,7 @@ export const TextFieldWithMention = (props) => {
                 handleOnChange({
                     event: e,
                     tagsValue,
-                    htmlTextValue: textValue,
+                    htmlTextValue: internalTextValue,
                     inputTextValue,
                     currentTriggerStartIndex,
                     previousSelectionStart: nullToUndefined(selectionStartValue),
@@ -453,7 +526,7 @@ export const TextFieldWithMention = (props) => {
                     currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
                     updatedValue: newValue
                 });
-            }, onSelect: e => {
+            }, onSelect: (e) => {
                 // update selection if needed
                 if (caretIndex !== undefined) {
                     // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and
@@ -462,7 +535,9 @@ export 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({
@@ -481,7 +556,7 @@ export const TextFieldWithMention = (props) => {
                 // onClick already has wrong range as it's called after onSelect that updates the selection range
                 // so we need to handle onMouseDown to prevent onSelect default behavior
                 handleOnInteractionStarted();
-            }, onMouseMove: event => {
+            }, onMouseMove: (event) => {
                 handleOnMove({
                     event,
                     selectionStartValue,
@@ -493,7 +568,7 @@ export const TextFieldWithMention = (props) => {
                 handleOnInteractionCompleted();
             }, onTouchStart: () => {
                 handleOnInteractionStarted();
-            }, onTouchMove: event => {
+            }, onTouchMove: (event) => {
                 handleOnMove({
                     event,
                     selectionStartValue,
@@ -504,12 +579,10 @@ export const TextFieldWithMention = (props) => {
             }, onTouchEnd: () => {
                 handleOnInteractionCompleted;
             }, 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 })));
+            }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef }))));
 };
 /**
  * @private
@@ -519,27 +592,20 @@ export const InputBoxButton = (props) => {
     const [isHover, setIsHover] = useState(false);
     const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
     const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return (React.createElement(TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
                 setIsHover(false);
             }, 
             // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) }));
+            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)) })));
 };
 //# sourceMappingURL=TextFieldWithMention.js.map