@azure/communication-react 1.9.0 → 1.10.0-beta.1

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

@@ -0,0 +1,573 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useState, useCallback, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useLocale } from '../../localization';
+import { Announcer } from '../Announcer';
+import { Stack, TextField, mergeStyles, IconButton, TooltipHost } from '@fluentui/react';
+import { isEnterKeyEventFromCompositionSession, nullToUndefined } from '../utils';
+import { findMentionTagForSelection, findNewSelectionIndexForMention, findStringsDiffIndexes, getDisplayNameForMentionSuggestion, getValidatedIndexInRange, htmlStringForMentionSuggestion, textToTagParser, updateHTML } from './mentionTagUtils';
+import { inputButtonStyle, inputButtonTooltipStyle, iconWrapperStyle } from '../styles/InputBoxComponent.style';
+import { Caret } from 'textarea-caret-ts';
+import { isDarkThemed } from '../../theming/themeUtils';
+import { useTheme } from '../../theming';
+import { _MentionPopover } from '../MentionPopover';
+import { useDebouncedCallback } from 'use-debounce';
+const DEFAULT_MENTION_TRIGGER = '@';
+/**
+ * @private
+ */
+export const TextFieldWithMention = (props) => {
+    const { textFieldProps, dataUiId, textValue, onChange, textFieldRef, onKeyDown, onEnterKeyDown, supportNewline, mentionLookupOptions } = props;
+    const inputBoxRef = useRef(null);
+    // Current suggestion list, provided by the callback
+    const [mentionSuggestions, setMentionSuggestions] = useState([]);
+    // Current suggestion list, provided by the callback
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(undefined);
+    // 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();
+    // Index of the previous selection end in the text field
+    const [selectionEndValue, setSelectionEndValue] = useState();
+    // Boolean value to check if onMouseDown event should be handled during select as selection range
+    // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be
+    // updated in onSelect event if needed.
+    const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState(true);
+    // Boolean flag to check if mouse/touch move event should be handled
+    const [shouldHandleMoveEvent, setShouldHandleMoveEvent] = useState(false);
+    // Indexes of start of touch/mouse selection
+    const [interactionStartSelection, setInteractionStartSelection] = useState();
+    // Caret position in the text field
+    const [caretPosition, setCaretPosition] = useState(undefined);
+    // Index of where the caret is in the text field
+    const [caretIndex, setCaretIndex] = useState(undefined);
+    const localeStrings = useLocale().strings;
+    // Set mention suggestions
+    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(internalTextValue, trigger);
+        setInputTextValue(parsedHTMLData.plainText);
+        setTagsValue(parsedHTMLData.tags);
+        updateMentionSuggestions([]);
+    }, [internalTextValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
+    useEffect(() => {
+        var _a;
+        // effect for caret index update
+        if (caretIndex === undefined || textFieldRef === undefined || (textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === undefined) {
+            return;
+        }
+        // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index
+        const updatedCaretIndex = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: caretIndex
+        });
+        (_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, 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;
+        if (selectionEnd < 0) {
+            selectionEnd = 0;
+        }
+        else if (selectionEnd > inputTextValue.length) {
+            selectionEnd = inputTextValue.length;
+        }
+        const oldPlainText = inputTextValue;
+        const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
+        // update plain text with the mention html text
+        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: internalTextValue,
+            oldPlainText,
+            tags: tagsValue,
+            startIndex: currentTriggerStartIndex,
+            oldPlainTextEndIndex: selectionEnd,
+            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
+        setCaretIndex(newCaretIndex);
+        setSelectionEndValue(newCaretIndex);
+        setSelectionStartValue(newCaretIndex);
+        setCurrentTriggerStartIndex(-1);
+        updateMentionSuggestions([]);
+        // set focus back to text field
+        (_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, internalTextValue, tagsValue, updateMentionSuggestions, localeStrings]);
+    const onTextFieldKeyDown = useCallback((ev) => {
+        // caretIndex should be set to undefined when the user is typing
+        setCaretIndex(undefined);
+        // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.
+        // it shouldn't be updated in onMouseUp
+        // as onMouseUp can be triggered before or after onSelect event
+        // because its order depends on mouse events not selection.
+        setShouldHandleOnMouseDownDuringSelect(false);
+        if (isEnterKeyEventFromCompositionSession(ev)) {
+            return;
+        }
+        if (mentionSuggestions.length > 0) {
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                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);
+                setActiveSuggestionIndex(newActiveIndex);
+            }
+            else if (ev.key === 'Escape') {
+                updateMentionSuggestions([]);
+            }
+        }
+        if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
+            ev.preventDefault();
+            // If we are looking up a mention, select the focused suggestion
+            if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {
+                const selectedMention = mentionSuggestions[activeSuggestionIndex];
+                if (selectedMention) {
+                    onSuggestionSelected(selectedMention);
+                    return;
+                }
+            }
+            onEnterKeyDown && onEnterKeyDown();
+        }
+        onKeyDown && onKeyDown(ev);
+    }, [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() !== '');
+        if (suggestions.length === 0) {
+            setActiveSuggestionIndex(undefined);
+        }
+        else if (activeSuggestionIndex === undefined) {
+            // Set the active to the first, if it's not already set
+            setActiveSuggestionIndex(0);
+        }
+        updateMentionSuggestions(suggestions);
+    }), 500);
+    // Update selections index in mention to navigate by words
+    const updateSelectionIndexesWithMentionIfNeeded = useCallback(({ event, inputTextValue, selectionEndValue, selectionStartValue, tagsValue }) => {
+        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) {
+            // 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)) {
+                // get updated selection index
+                const newSelectionIndex = findNewSelectionIndexForMention({
+                    tag: mentionTag,
+                    textValue: inputTextValue,
+                    currentSelectionIndex: event.currentTarget.selectionStart,
+                    previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                });
+                updatedStartIndex = newSelectionIndex;
+                updatedEndIndex = newSelectionIndex;
+            }
+        }
+        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
+            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
+            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
+                // 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)) {
+                    updatedStartIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionStart,
+                        previousSelectionIndex: selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : inputTextValue.length
+                    });
+                }
+            }
+            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
+                // 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)) {
+                    updatedEndIndex = findNewSelectionIndexForMention({
+                        tag: mentionTag,
+                        textValue: inputTextValue,
+                        currentSelectionIndex: event.currentTarget.selectionEnd,
+                        previousSelectionIndex: selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : inputTextValue.length
+                    });
+                }
+            }
+        }
+        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
+        if (event.currentTarget.selectionDirection === null) {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
+        }
+        else {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
+        }
+        setSelectionStartValue(nullToUndefined(updatedStartIndex));
+        setSelectionEndValue(nullToUndefined(updatedEndIndex));
+    }, [setSelectionStartValue, setSelectionEndValue]);
+    const handleOnSelect = useCallback(({ event, inputTextValue, tags, shouldHandleOnMouseDownDuringSelect, selectionStartValue, selectionEndValue, interactionStartSelection }) => {
+        var _a;
+        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;
+                // 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
+                // to the beginning of the input to mimic selection from left to right for the right selection index
+                const updatedSelectionEndValue = event.currentTarget.selectionEnd === interactionStartSelection.end ? 0 : interactionStartSelection.end;
+                updateSelectionIndexesWithMentionIfNeeded({
+                    event,
+                    inputTextValue,
+                    selectionStartValue: updatedSelectionStartValue,
+                    selectionEndValue: updatedSelectionEndValue,
+                    tagsValue: tags
+                });
+                setInteractionStartSelection(undefined);
+                setShouldHandleOnMouseDownDuringSelect(false);
+            }
+            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
+                    // disable selection for clicks on mention bounds
+                    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);
+                        }
+                        else {
+                            event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex, event.currentTarget.selectionDirection);
+                        }
+                        setSelectionStartValue(mentionTag.plainTextBeginIndex);
+                        setSelectionEndValue(mentionEndIndex);
+                    }
+                    else {
+                        // bounds of the mention were selected
+                        setSelectionStartValue(event.currentTarget.selectionStart);
+                        setSelectionEndValue(event.currentTarget.selectionEnd);
+                    }
+                }
+                else {
+                    // not a mention tag
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
+                }
+                setInteractionStartSelection(undefined);
+            }
+        }
+        else {
+            // selection was changed by keyboard
+            updateSelectionIndexesWithMentionIfNeeded({
+                event,
+                inputTextValue,
+                selectionStartValue,
+                selectionEndValue,
+                tagsValue: tags
+            });
+        }
+    }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
+    const handleOnChange = useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        debouncedQueryUpdate.cancel();
+        if (event.currentTarget === null) {
+            return;
+        }
+        // handle backspace change
+        // onSelect is not called for backspace as selection is not changed and local caret index is outdated
+        setCaretIndex(undefined);
+        const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
+        const newTextLength = newValue.length;
+        // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
+        const currentSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionEnd
+        });
+        const currentSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: newTextLength,
+            currentValue: currentSelectionStart
+        });
+        const previousSelectionStartValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionStart
+        });
+        const previousSelectionEndValue = getValidatedIndexInRange({
+            min: 0,
+            max: inputTextValue.length,
+            currentValue: previousSelectionEnd
+        });
+        // If we are enabled for lookups,
+        if (mentionLookupOptions !== undefined) {
+            // Look at the range of the change for a trigger character
+            const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);
+            // Update the caret position, used for positioning the suggestions popover
+            const textField = event.currentTarget;
+            const relativePosition = Caret.getRelativePosition(textField);
+            if (textField.scrollHeight > textField.clientHeight) {
+                relativePosition.top -= textField.scrollTop;
+            }
+            setCaretPosition(relativePosition);
+            if (triggerPriorIndex !== undefined) {
+                // trigger is found
+                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 && 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);
+                }
+                else if (wordAtSelection === triggerText) {
+                    // start of the mention
+                    tagIndex = currentSelectionEndValue - triggerText.length;
+                    if (tagIndex < 0) {
+                        tagIndex = 0;
+                    }
+                    setCurrentTriggerStartIndex(tagIndex);
+                }
+                if (tagIndex === -1) {
+                    updateMentionSuggestions([]);
+                }
+                else {
+                    // In the middle of a @mention lookup
+                    if (tagIndex > -1) {
+                        const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);
+                        if (query !== undefined) {
+                            yield debouncedQueryUpdate(query);
+                        }
+                    }
+                }
+            }
+        }
+        const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+            oldText: inputTextValue,
+            newText: newValue,
+            previousSelectionStart: previousSelectionStartValue,
+            previousSelectionEnd: previousSelectionEndValue,
+            currentSelectionStart: currentSelectionStartValue,
+            currentSelectionEnd: currentSelectionEndValue
+        });
+        const change = newValue.substring(changeStart, newChangeEnd);
+        const updatedContent = updateHTML({
+            htmlText: htmlTextValue,
+            oldPlainText: inputTextValue,
+            tags: tagsValue,
+            startIndex: changeStart,
+            oldPlainTextEndIndex: oldChangeEnd,
+            change,
+            mentionTrigger: triggerText
+        });
+        setInternalTextValue(updatedContent.updatedHTML);
+        // update caret index if needed
+        if (updatedContent.updatedSelectionIndex !== undefined) {
+            setCaretIndex(updatedContent.updatedSelectionIndex);
+            setSelectionEndValue(updatedContent.updatedSelectionIndex);
+            setSelectionStartValue(updatedContent.updatedSelectionIndex);
+        }
+        onChange && onChange(event, updatedContent.updatedHTML);
+    }), [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)) {
+            setInteractionStartSelection({
+                start: nullToUndefined(event.currentTarget.selectionStart),
+                end: nullToUndefined(event.currentTarget.selectionEnd)
+            });
+        }
+    }, []);
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnInteractionStarted = useCallback(() => {
+        // reset caret index as a new selection is started or cursor position will be changed
+        setCaretIndex(undefined);
+        setInteractionStartSelection(undefined);
+        setShouldHandleMoveEvent(true);
+        setShouldHandleOnMouseDownDuringSelect(true);
+    }, []);
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnInteractionCompleted = useCallback(() => {
+        setShouldHandleMoveEvent(false);
+    }, []);
+    const announcerText = useMemo(() => {
+        if (activeSuggestionIndex === undefined) {
+            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;
+    }, [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: () => {
+                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
+                // Prevents React from resetting event's properties
+                e.persist();
+                setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                handleOnChange({
+                    event: e,
+                    tagsValue,
+                    htmlTextValue: internalTextValue,
+                    inputTextValue,
+                    currentTriggerStartIndex,
+                    previousSelectionStart: nullToUndefined(selectionStartValue),
+                    previousSelectionEnd: nullToUndefined(selectionEndValue),
+                    currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),
+                    currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
+                    updatedValue: newValue
+                });
+            }, onSelect: e => {
+                // update selection if needed
+                if (caretIndex !== undefined) {
+                    // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and
+                    // onSelect still returns outdated value for cursor position
+                    // e.g. when user select some text and a first name in a mention then delete or type something else
+                    if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {
+                        e.currentTarget.setSelectionRange(caretIndex, caretIndex);
+                    }
+                    // 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({
+                    event: e,
+                    inputTextValue,
+                    shouldHandleOnMouseDownDuringSelect,
+                    selectionEndValue,
+                    selectionStartValue,
+                    tags: tagsValue,
+                    interactionStartSelection
+                });
+            }, onMouseDown: () => {
+                // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick
+                // onClick and onMouseDown can't handle clicking on mention event because
+                // onMouseDown doesn't have correct selectionRange yet and
+                // 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 => {
+                handleOnMove({
+                    event,
+                    selectionStartValue,
+                    selectionEndValue,
+                    interactionStartSelection,
+                    shouldHandleMoveEvent
+                });
+            }, onMouseUp: () => {
+                handleOnInteractionCompleted();
+            }, onTouchStart: () => {
+                handleOnInteractionStarted();
+            }, onTouchMove: event => {
+                handleOnMove({
+                    event,
+                    selectionStartValue,
+                    selectionEndValue,
+                    interactionStartSelection,
+                    shouldHandleMoveEvent
+                });
+            }, onTouchEnd: () => {
+                handleOnInteractionCompleted;
+            }, onBlur: () => {
+                // setup shouldHandleOnMouseDownDuringSelect to false when text field loses focus
+                // as the click should be handled by text field anymore
+                setShouldHandleOnMouseDownDuringSelect(false);
+            }, onKeyDown: onTextFieldKeyDown, elementRef: inputBoxRef })));
+};
+/**
+ * @private
+ */
+export const InputBoxButton = (props) => {
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
+    const [isHover, setIsHover] = useState(false);
+    const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
+    const theme = useTheme();
+    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) },
+        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)) }));
+};
+//# sourceMappingURL=TextFieldWithMention.js.map