@azure/communication-react 1.5.1-alpha-202306030013 → 1.5.1-alpha-202306070014

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

@@ -0,0 +1,554 @@
+// 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, undefinedToNull } from '../utils';
+import { findMentionTagForSelection, findNewSelectionIndexForMention, findStringsDiffIndexes, getDisplayNameForMentionSuggestion, getValidatedIndexInRange, htmlStringForMentionSuggestion, rangeOfWordInSelection, 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('');
+    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);
+    // Point of start of touch/mouse selection
+    const [interactionStartPoint, setInteractionStartPoint] = useState();
+    // Target selection from mouse movement
+    const [targetSelection, setTargetSelection] = 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]);
+    // 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);
+        setInputTextValue(parsedHTMLData.plainText);
+        setTagsValue(parsedHTMLData.tags);
+        updateMentionSuggestions([]);
+    }, [textValue, 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.length, 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 newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
+        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,
+            oldPlainText,
+            newPlainText,
+            tags: tagsValue,
+            startIndex: currentTriggerStartIndex,
+            oldPlainTextEndIndex: selectionEnd,
+            change: mention,
+            mentionTrigger: triggerText
+        });
+        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,
+        textValue,
+        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;
+        const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
+        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 }) => {
+        if (shouldHandleOnMouseDownDuringSelect) {
+            if (targetSelection !== undefined) {
+                setSelectionStartValue(targetSelection.start);
+                setSelectionEndValue(targetSelection.end);
+                event.currentTarget.setSelectionRange(targetSelection.start, undefinedToNull(targetSelection.end));
+                setTargetSelection(undefined);
+            }
+            else if (event.currentTarget.selectionStart !== 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
+                    // Get range of word that was clicked on
+                    const selectionRange = rangeOfWordInSelection({
+                        textInput: inputTextValue,
+                        selectionStart: event.currentTarget.selectionStart,
+                        selectionEnd: nullToUndefined(event.currentTarget.selectionEnd),
+                        tag: mentionTag
+                    });
+                    if (event.currentTarget.selectionDirection === null) {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end);
+                    }
+                    else {
+                        event.currentTarget.setSelectionRange(selectionRange.start, selectionRange.end, event.currentTarget.selectionDirection);
+                    }
+                    setSelectionStartValue(selectionRange.start);
+                    setSelectionEndValue(selectionRange.end);
+                }
+                else {
+                    setSelectionStartValue(event.currentTarget.selectionStart);
+                    setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
+                }
+            }
+        }
+        else {
+            // selection was changed by keyboard
+            updateSelectionIndexesWithMentionIfNeeded({
+                event,
+                inputTextValue,
+                selectionStartValue,
+                selectionEndValue,
+                tagsValue: tags
+            });
+        }
+        // don't set setShouldHandleOnMouseDownDuringSelect(false) here as setSelectionRange
+        // could trigger additional calls of onSelect event and they may not be handled correctly
+        // (because of setSelectionRange calls or rerender)
+    }, [
+        updateSelectionIndexesWithMentionIfNeeded,
+        targetSelection,
+        setTargetSelection,
+        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, if not doing a lookup
+            setCaretPosition(Caret.getRelativePosition(event.currentTarget));
+            if (triggerPriorIndex !== undefined) {
+                // trigger is found
+                const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
+                const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);
+                let tagIndex = currentTriggerStartIndex;
+                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
+                    //no space before the trigger <- 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);
+                        }
+                    }
+                }
+            }
+        }
+        let result = '';
+        if (tagsValue.length === 0) {
+            // no tags in the string and newValue should be used as a result string
+            result = newValue;
+        }
+        else {
+            // there are tags in the text value and htmlTextValue is html string
+            // find diff between old and new text
+            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+                oldText: inputTextValue,
+                newText: newValue,
+                previousSelectionStart: previousSelectionStartValue,
+                previousSelectionEnd: previousSelectionEndValue,
+                currentSelectionStart: currentSelectionStartValue,
+                currentSelectionEnd: currentSelectionEndValue
+            });
+            const change = newValue.substring(changeStart, newChangeEnd);
+            // get updated html string
+            const updatedContent = updateHTML({
+                htmlText: htmlTextValue,
+                oldPlainText: inputTextValue,
+                newPlainText: newValue,
+                tags: tagsValue,
+                startIndex: changeStart,
+                oldPlainTextEndIndex: oldChangeEnd,
+                change,
+                mentionTrigger: triggerText
+            });
+            result = updatedContent.updatedHTML;
+            // update caret index if needed
+            if (updatedContent.updatedSelectionIndex !== undefined) {
+                setCaretIndex(updatedContent.updatedSelectionIndex);
+                setSelectionEndValue(updatedContent.updatedSelectionIndex);
+                setSelectionStartValue(updatedContent.updatedSelectionIndex);
+            }
+        }
+        onChange && onChange(event, result);
+    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
+    // Adjust the selection range based on a mouse / touch interaction
+    const handleOnMove = useCallback((event) => {
+        var _a;
+        let targetStart = event.currentTarget.selectionStart;
+        let targetEnd = event.currentTarget.selectionEnd;
+        // Should we do anything?
+        if (interactionStartPoint !== undefined &&
+            // And did selection change?
+            targetStart !== null &&
+            (targetStart !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.start) || targetEnd !== (targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.end))) {
+            const direction = event.clientX > interactionStartPoint.x ? 'forward' : 'backward';
+            const mentionTag = findMentionTagForSelection(tagsValue, direction === 'backward'
+                ? event.currentTarget.selectionStart
+                : (_a = event.currentTarget.selectionEnd) !== null && _a !== void 0 ? _a : event.currentTarget.selectionStart);
+            let updateCurrentTarget = false;
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                targetStart = Math.min(mentionTag.plainTextBeginIndex, targetStart);
+                if (mentionTag.plainTextEndIndex !== undefined && targetEnd !== null) {
+                    targetEnd = Math.max(mentionTag.plainTextEndIndex, targetEnd);
+                }
+                updateCurrentTarget = true;
+                setShouldHandleOnMouseDownDuringSelect(false);
+            }
+            // Update selection range
+            setTargetSelection({ start: targetStart, end: targetEnd });
+            if (updateCurrentTarget) {
+                // Only set the control, if the values are updated
+                event.currentTarget.setSelectionRange(targetStart, targetEnd, direction);
+            }
+        }
+    }, [setTargetSelection, targetSelection, setShouldHandleOnMouseDownDuringSelect, interactionStartPoint, tagsValue]);
+    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: textValue,
+                    inputTextValue,
+                    currentTriggerStartIndex,
+                    previousSelectionStart: nullToUndefined(selectionStartValue),
+                    previousSelectionEnd: nullToUndefined(selectionEndValue),
+                    currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),
+                    currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),
+                    updatedValue: newValue
+                });
+            }, onSelect: (e) => {
+                handleOnSelect({
+                    event: e,
+                    inputTextValue,
+                    shouldHandleOnMouseDownDuringSelect,
+                    selectionEndValue,
+                    selectionStartValue,
+                    tags: tagsValue
+                });
+            }, onMouseDown: (e) => {
+                setInteractionStartPoint({ x: e.clientX, y: e.clientY });
+                // 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
+                setShouldHandleOnMouseDownDuringSelect(true);
+            }, onMouseMove: handleOnMove, onMouseUp: () => {
+                setInteractionStartPoint(undefined);
+            }, onTouchStart: (e) => {
+                setInteractionStartPoint({
+                    x: e.targetTouches.item(0).clientX,
+                    y: e.targetTouches.item(0).clientY
+                });
+                // see onMouseDown for more details
+                setShouldHandleOnMouseDownDuringSelect(true);
+            }, onTouchMove: handleOnMove, onTouchEnd: () => {
+                setInteractionStartPoint(undefined);
+            }, onBlur: () => {
+                // setup all flags to default values when text field loses focus
+                setShouldHandleOnMouseDownDuringSelect(false);
+                setCaretIndex(undefined);
+                setSelectionStartValue(undefined);
+                setSelectionEndValue(undefined);
+            }, 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