@azure/communication-react 1.11.1-alpha-202401050013 → 1.11.1-alpha-202401090013

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.11.1-alpha-202401050013';
+module.exports = '1.11.1-alpha-202401090013';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.11.1-alpha-202401050013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.11.1-alpha-202401090013';\n"]}

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

@@ -2,10 +2,12 @@
 // Licensed under the MIT License.
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';
-import { mentionPopoverContainerStyle, headerStyleThemed, suggestionListStyle, suggestionItemStackStyle, suggestionItemWrapperStyle } from './styles/MentionPopover.style';
+import { mergeClasses } from '@fluentui/react-components';
+import { mentionPopoverContainerStyle, headerStyleThemed, suggestionItemStackStyle, suggestionItemWrapperStyle, useSuggestionListStyle } from './styles/MentionPopover.style';
 /* @conditional-compile-remove(mention) */
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
+import { useDefaultStackStyles } from './styles/Stack.style';
 /**
  * Component to render a pop-up of mention suggestions.
  *
@@ -18,9 +20,11 @@ export const _MentionPopover = (props) => {
     const ids = useIdentifiers();
     const localeStrings = useLocale().strings;
     const popoverRef = useRef();
+    const suggestionsListRef = useRef(null);
     const [position, setPosition] = useState();
     const [hoveredSuggestion, setHoveredSuggestion] = useState(undefined);
-    const [changedSelection, setChangedSelection] = useState(undefined); // Selection UI as per teams
+    const suggestionListStyle = useSuggestionListStyle();
+    const defaultStackStyles = useDefaultStackStyles();
     const dismissPopoverWhenClickingOutside = useCallback((e) => {
         const target = e.target;
         if (popoverRef.current && !popoverRef.current.contains(target)) {
@@ -28,13 +32,13 @@ export const _MentionPopover = (props) => {
         }
     }, [onDismiss]);
     useEffect(() => {
-        if (changedSelection === undefined) {
-            setChangedSelection(false);
+        if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
+            const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
         }
-        else if (changedSelection === false) {
-            setChangedSelection(true);
-        }
-    }, [activeSuggestionIndex, changedSelection]);
+    }, [activeSuggestionIndex]);
     useEffect(() => {
         window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
         return () => {
@@ -90,14 +94,13 @@ export const _MentionPopover = (props) => {
         return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
                 handleOnKeyDown(e);
             }, className: suggestionItemWrapperStyle(theme) },
-            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText))));
+            React.createElement(Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
     }, [
         handleOnKeyDown,
         theme,
         /* @conditional-compile-remove(mention) */
         ids,
         hoveredSuggestion,
-        changedSelection,
         personaRenderer
     ]);
     const getHeaderTitle = useCallback(() => {
@@ -113,9 +116,7 @@ export const _MentionPopover = (props) => {
             maxWidth: position.maxWidth
         }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
         React.createElement(Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
-        React.createElement(Stack
-        /* @conditional-compile-remove(mention) */
-        , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
+        React.createElement("div", { className: mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
             const active = index === activeSuggestionIndex;
             return onRenderSuggestionItem
                 ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)

package/dist/dist-esm/react-components/src/components/MentionPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EACL,4BAA4B,EAC5B,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,+BAA+B,CAAC;AACvC,0CAA0C;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA0H5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAS1E,MAAM,EACJ,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,SAAS,EACT,QAAQ,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,0CAA0C;IAC1C,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAC1C,MAAM,UAAU,GAAG,MAAM,EAA4C,CAAC;IAEtE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAwB,CAAC;IACjE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAC3F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC,CAAC,4BAA4B;IAEtH,MAAM,iCAAiC,GAAG,WAAW,CACnD,CAAC,CAAa,EAAE,EAAE;QAChB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;QACvC,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/D,SAAS,IAAI,SAAS,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,gBAAgB,KAAK,KAAK,EAAE,CAAC;YACtC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,iCAAiC,CAAC,CAAC;QAC9E,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,iCAAiC,CAAC,CAAC;QACnF,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAExC,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,IAAI,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QACtD,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,aAAa,GAAa,EAAE,QAAQ,EAAE,CAAC;QAE7C,8CAA8C;QAC9C,MAAM,UAAU,GAAG,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,mCAAI,CAAC,CAAC;QACnD,IAAI,UAAU,GAAG,QAAQ,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,CAAC,CAAC,EAAE,CAAC;YAC/C,aAAa,CAAC,KAAK,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,CAAC,CAAC,GAAG,UAAU,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,CAAC;QACD,4CAA4C;QAC5C,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;YACzB,aAAa,CAAC,GAAG,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,GAAG,mCAAI,CAAC,CAAC,GAAG,cAAc,CAAC;QAC9F,CAAC;aAAM,CAAC;YACN,yBAAyB;YACzB,aAAa,CAAC,MAAM,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,GAAG,mCAAI,CAAC,CAAC,GAAG,cAAc,CAAC;QACjG,CAAC;QACD,WAAW,CAAC,aAAa,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAsC,EAAE,EAAE;QACzC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,QAAQ;gBACX,SAAS,IAAI,SAAS,EAAE,CAAC;gBACzB,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,WAAmB,EAAe,EAAE;QACnC,MAAM,aAAa,GAAG;YACpB,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE;YACxB,IAAI,EAAE,WAAW,CAAC,MAAM;YACxB,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;YACzC,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACjD,mBAAmB,EAAE,KAAK;YAC1B,sBAAsB,EAAE,KAAK;SAC9B,CAAC;QAEF,OAAO,oBAAC,OAAO,oBAAK,aAAa,EAAI,CAAC;IACxC,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,6BAA6B,GAAG,WAAW,CAC/C,CAAC,UAAmB,EAAE,oBAAmD,EAAE,MAAe,EAAe,EAAE;QACzG,OAAO,CACL,kDACqB,IAAI,gBAEX,GAAG,CAAC,qBAAqB,EACrC,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,EAC/C,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,EACpD,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,EACnD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,eAAe,CAAC,CAAC,CAAC,CAAC;YACrB,CAAC,EACD,SAAS,EAAE,0BAA0B,CAAC,KAAK,CAAC;YAE5C,oBAAC,KAAK,IACJ,UAAU,QACV,SAAS,EAAE,wBAAwB,CACjC,KAAK,EACL,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,EAAE,MAAK,UAAU,CAAC,EAAE,EACvC,CAAC,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,KAAK,CAAC,IAAI,MAAM,CACtC,IAEA,eAAe,CAAC,UAAU,CAAC,WAAW,CAAC,CAClC,CACJ,CACP,CAAC;IACJ,CAAC,EACD;QACE,eAAe;QACf,KAAK;QACL,0CAA0C;QAC1C,GAAG;QACH,iBAAiB;QACjB,gBAAgB;QAChB,eAAe;KAChB,CACF,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAAC,GAAW,EAAE;QAC9C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,KAAK,CAAC;QACf,CAAC;QACD,0CAA0C;QAC1C,OAAO,aAAa,CAAC,cAAc,CAAC,oBAAoB,CAAC;QACzD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,6BAAK,GAAG,EAAE,UAAU,IACjB,QAAQ,IAAI,CACX,oBAAC,KAAK,mBACS,mCAAmC,EAChD,SAAS,EAAE,WAAW,CACpB;YACE,SAAS,EAAE,GAAG;YACd,QAAQ,EAAE,QAAQ,CAAC,QAAQ;SAC5B,EACD,4BAA4B,CAAC,KAAK,CAAC,kCAE9B,QAAQ,KACX,QAAQ,EAAE,UAAU,IAEvB;QAED,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,gBAAc,KAAK,IAC5D,cAAc,EAAE,CACN;QACb,oBAAC,KAAK;QACJ,0CAA0C;0BAC9B,GAAG,CAAC,qBAAqB,EACrC,SAAS,EAAE,mBAAmB,IAE7B,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,KAAK,qBAAqB,CAAC;YAC/C,OAAO,sBAAsB;gBAC3B,CAAC,CAAC,sBAAsB,CAAC,UAAU,EAAE,oBAAoB,EAAE,MAAM,CAAC;gBAClE,CAAC,CAAC,6BAA6B,CAAC,UAAU,EAAE,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC9E,CAAC,CAAC,CACI,CACF,CACT,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionListStyle,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n\n  const [position, setPosition] = useState<Position | undefined>();\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n  const [changedSelection, setChangedSelection] = useState<boolean | undefined>(undefined); // Selection UI as per teams\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (changedSelection === undefined) {\n      setChangedSelection(false);\n    } else if (changedSelection === false) {\n      setChangedSelection(true);\n    }\n  }, [activeSuggestionIndex, changedSelection]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName: string): JSX.Element => {\n      const avatarOptions = {\n        text: displayName.trim(),\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: false\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(\n              theme,\n              hoveredSuggestion?.id === suggestion.id,\n              (changedSelection ?? false) && active\n            )}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      changedSelection,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      {position && (\n        <Stack\n          data-testid={'mention-suggestion-list-container'}\n          className={mergeStyles(\n            {\n              maxHeight: 212,\n              maxWidth: position.maxWidth\n            },\n            mentionPopoverContainerStyle(theme),\n            {\n              ...position,\n              position: 'absolute'\n            }\n          )}\n        >\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          <Stack\n            /* @conditional-compile-remove(mention) */\n            data-ui-id={ids.mentionSuggestionList}\n            className={suggestionListStyle}\n          >\n            {suggestions.map((suggestion, index) => {\n              const active = index === activeSuggestionIndex;\n              return onRenderSuggestionItem\n                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n            })}\n          </Stack>\n        </Stack>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MentionPopover.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MentionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Persona, PersonaSize, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  mentionPopoverContainerStyle,\n  headerStyleThemed,\n  suggestionItemStackStyle,\n  suggestionItemWrapperStyle,\n  useSuggestionListStyle\n} from './styles/MentionPopover.style';\n/* @conditional-compile-remove(mention) */\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useDefaultStackStyles } from './styles/Stack.style';\n\n/**\n * Props for {@link _MentionPopover}.\n *\n * @internal\n */\nexport interface _MentionPopoverProps {\n  /**\n   * Array of mention suggestions used to populate the suggestion list\n   */\n  suggestions: Mention[];\n  /**\n   * Index of the currently focused suggestion, if any\n   */\n  activeSuggestionIndex?: number;\n  /**\n   * Optional string used as mention popover's title.\n   * @defaultValue `Suggestions`\n   */\n  title?: string;\n  /**\n   * Element to anchor the popover to.\n   */\n  target: React.RefObject<Element>;\n  /**\n   * When rendering the popover, where to position it relative to the target.\n   */\n  targetPositionOffset?: { top: number; left: number };\n  /**\n   * Where to display the suggestions relative to the target.\n   * @defaultValue `above`\n   */\n  location?: 'above' | 'below';\n  /**\n   * Callback called when a mention suggestion is selected.\n   */\n  onSuggestionSelected: (suggestion: Mention) => void;\n  /**\n   * Callback to invoke when the popover is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (\n    suggestion: Mention,\n    onSuggestionSelected: (suggestion: Mention) => void,\n    isActive: boolean\n  ) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionLookupOptions {\n  /**\n   * Optional string to set trigger keyword for mention a specific participant.\n   *\n   * @defaultValue `@`\n   */\n  trigger?: string;\n  /**\n   * Optional callback to fetch a list of mention suggestions base on the query.\n   */\n  onQueryUpdated: (query: string) => Promise<Mention[]>;\n  /**\n   * Optional callback to render an item of the mention suggestions list.\n   */\n  onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void) => JSX.Element;\n}\n\n/**\n * Options to display suggestions in the mention scenario.\n *\n * @beta\n */\nexport interface MentionDisplayOptions {\n  /**\n   * Optional callback for customizing the mention renderer in a message thread.\n   */\n  onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;\n}\n\n/**\n * Options to lookup suggestions and display mentions in the mention scenario.\n *\n * @beta\n */\nexport type MentionOptions = {\n  lookupOptions?: MentionLookupOptions;\n  displayOptions?: MentionDisplayOptions;\n};\n\n/**\n * Mention's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface Mention {\n  /** ID of a mention */\n  id: string;\n  /** Display text of a mention */\n  displayText: string;\n  /** Optional React element to render an item icon of a mention suggestion */\n  icon?: JSX.Element;\n}\n\n/**\n * Strings of {@link _MentionPopover} that can be overridden.\n *\n * @beta\n */\nexport interface MentionPopoverStrings {\n  /**\n   * Header text for MentionPopover\n   */\n  mentionPopoverHeader: string;\n}\n\n/**\n * Component to render a pop-up of mention suggestions.\n *\n * @internal\n */\nexport const _MentionPopover = (props: _MentionPopoverProps): JSX.Element => {\n  interface Position {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n    maxWidth?: number;\n  }\n\n  const {\n    suggestions,\n    activeSuggestionIndex,\n    title,\n    target,\n    targetPositionOffset,\n    onRenderSuggestionItem,\n    onSuggestionSelected,\n    onDismiss,\n    location\n  } = props;\n\n  const theme = useTheme();\n  /* @conditional-compile-remove(mention) */\n  const ids = useIdentifiers();\n  const localeStrings = useLocale().strings;\n  const popoverRef = useRef() as React.MutableRefObject<HTMLDivElement>;\n  const suggestionsListRef = useRef<HTMLDivElement>(null);\n\n  const [position, setPosition] = useState<Position | undefined>();\n  const [hoveredSuggestion, setHoveredSuggestion] = useState<Mention | undefined>(undefined);\n\n  const suggestionListStyle = useSuggestionListStyle();\n  const defaultStackStyles = useDefaultStackStyles();\n\n  const dismissPopoverWhenClickingOutside = useCallback(\n    (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        onDismiss && onDismiss();\n      }\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {\n      const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];\n      if (selectedItem) {\n        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }\n  }, [activeSuggestionIndex]);\n\n  useEffect(() => {\n    window && window.addEventListener('click', dismissPopoverWhenClickingOutside);\n    return () => {\n      window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);\n    };\n  }, [dismissPopoverWhenClickingOutside]);\n\n  // Determine popover position\n  useEffect(() => {\n    const rect = target?.current?.getBoundingClientRect();\n    const maxWidth = 200;\n    const finalPosition: Position = { maxWidth };\n\n    // Figure out whether it will fit horizontally\n    const leftOffset = targetPositionOffset?.left ?? 0;\n    if (leftOffset + maxWidth > (rect?.width ?? 0)) {\n      finalPosition.right = (rect?.width ?? 0) - leftOffset;\n    } else {\n      finalPosition.left = leftOffset;\n    }\n    // Offset between cursor and mention popover\n    const verticalOffset = 4;\n    if (location === 'below') {\n      finalPosition.top = (rect?.height ?? 0) + (targetPositionOffset?.top ?? 0) + verticalOffset;\n    } else {\n      // (location === 'above')\n      finalPosition.bottom = (rect?.height ?? 0) - (targetPositionOffset?.top ?? 0) + verticalOffset;\n    }\n    setPosition(finalPosition);\n  }, [location, target, targetPositionOffset]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'Escape':\n          onDismiss && onDismiss();\n          break;\n        default:\n          break;\n      }\n    },\n    [onDismiss]\n  );\n\n  const personaRenderer = useCallback(\n    (displayName: string): JSX.Element => {\n      const avatarOptions = {\n        text: displayName.trim(),\n        size: PersonaSize.size24,\n        initialsColor: theme.palette.neutralLight,\n        initialsTextColor: theme.palette.neutralSecondary,\n        showOverflowTooltip: false,\n        showUnknownPersonaCoin: false\n      };\n\n      return <Persona {...avatarOptions} />;\n    },\n    [theme]\n  );\n\n  const defaultOnRenderSuggestionItem = useCallback(\n    (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, active: boolean): JSX.Element => {\n      return (\n        <div\n          data-is-focusable={true}\n          /* @conditional-compile-remove(mention) */\n          data-ui-id={ids.mentionSuggestionItem}\n          key={suggestion.id}\n          onClick={() => onSuggestionSelected(suggestion)}\n          onMouseEnter={() => setHoveredSuggestion(suggestion)}\n          onMouseLeave={() => setHoveredSuggestion(undefined)}\n          onKeyDown={(e) => {\n            handleOnKeyDown(e);\n          }}\n          className={suggestionItemWrapperStyle(theme)}\n        >\n          <Stack\n            horizontal\n            className={suggestionItemStackStyle(theme, hoveredSuggestion?.id === suggestion.id, active)}\n          >\n            {personaRenderer(suggestion.displayText)}\n          </Stack>\n        </div>\n      );\n    },\n    [\n      handleOnKeyDown,\n      theme,\n      /* @conditional-compile-remove(mention) */\n      ids,\n      hoveredSuggestion,\n      personaRenderer\n    ]\n  );\n\n  const getHeaderTitle = useCallback((): string => {\n    if (title) {\n      return title;\n    }\n    /* @conditional-compile-remove(mention) */\n    return localeStrings.mentionPopover.mentionPopoverHeader;\n    return '';\n  }, [localeStrings, title]);\n\n  return (\n    <div ref={popoverRef}>\n      {position && (\n        <Stack\n          data-testid={'mention-suggestion-list-container'}\n          className={mergeStyles(\n            {\n              maxHeight: 212,\n              maxWidth: position.maxWidth\n            },\n            mentionPopoverContainerStyle(theme),\n            {\n              ...position,\n              position: 'absolute'\n            }\n          )}\n        >\n          <Stack.Item styles={headerStyleThemed(theme)} aria-label={title}>\n            {getHeaderTitle()}\n          </Stack.Item>\n          {/* FluentUI v9 approach is used here instead of Stack because Stack doesn't have ref prop */}\n          <div\n            className={mergeClasses(defaultStackStyles.root, suggestionListStyle.root)}\n            /* @conditional-compile-remove(mention) */\n            data-ui-id={ids.mentionSuggestionList}\n            ref={suggestionsListRef}\n          >\n            {suggestions.map((suggestion, index) => {\n              const active = index === activeSuggestionIndex;\n              return onRenderSuggestionItem\n                ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)\n                : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);\n            })}\n          </div>\n        </Stack>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * Props for {@link RTESendBox}.
+ *
+ * @beta
+ */
+export interface RTESendBoxProps {
+    valueToDisplay?: string;
+}
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export declare const RTESendBox: (props: RTESendBoxProps) => JSX.Element;
+//# sourceMappingURL=RTESendBox.d.ts.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export const RTESendBox = (props) => {
+    const { valueToDisplay = 'Hello World!' } = props;
+    return React.createElement("div", null, valueToDisplay);
+};
+//# sourceMappingURL=RTESendBox.js.map

package/dist/dist-esm/react-components/src/components/RTE/RTESendBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RTESendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RTESendBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,cAAc,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAClD,OAAO,iCAAM,cAAc,CAAO,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\n/**\n * Props for {@link RTESendBox}.\n *\n * @beta\n */\nexport interface RTESendBoxProps {\n  // just a value to be displayed for now but it should be deleted when the component development starts\n  valueToDisplay?: string;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RTESendBox = (props: RTESendBoxProps): JSX.Element => {\n  const { valueToDisplay = 'Hello World!' } = props;\n  return <div>{valueToDisplay}</div>;\n};\n"]}

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

@@ -147,6 +147,7 @@ export const TextFieldWithMention = (props) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
         }
+        let isActiveSuggestionIndexUpdated = false;
         if (mentionSuggestions.length > 0) {
             if (ev.key === 'ArrowUp') {
                 ev.preventDefault();
@@ -154,6 +155,7 @@ export const TextFieldWithMention = (props) => {
                     ? mentionSuggestions.length - 1
                     : Math.max(activeSuggestionIndex - 1, 0);
                 setActiveSuggestionIndex(newActiveIndex);
+                isActiveSuggestionIndexUpdated = true;
             }
             else if (ev.key === 'ArrowDown') {
                 ev.preventDefault();
@@ -161,9 +163,13 @@ export const TextFieldWithMention = (props) => {
                     ? 0
                     : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
+                isActiveSuggestionIndexUpdated = true;
             }
             else if (ev.key === 'Escape') {
                 updateMentionSuggestions([]);
+                // reset active suggestion index when suggestions are closed
+                setActiveSuggestionIndex(undefined);
+                isActiveSuggestionIndexUpdated = true;
             }
         }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
@@ -178,6 +184,11 @@ export const TextFieldWithMention = (props) => {
             }
             onEnterKeyDown && onEnterKeyDown();
         }
+        else if (!isActiveSuggestionIndexUpdated) {
+            // Update the active suggestion index if the user is typing,
+            // otherwise the focus will be lost
+            setActiveSuggestionIndex(undefined);
+        }
         onKeyDown && onKeyDown(ev);
     }, [
         onEnterKeyDown,

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldWithMention.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/TextFieldWithMention/TextFieldWithMention.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, FormEvent, useCallback, useRef } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { Announcer } from '../Announcer';\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  ITextField,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\n\nimport { isEnterKeyEventFromCompositionSession, nullToUndefined } from '../utils';\nimport {\n  TagData,\n  findMentionTagForSelection,\n  findNewSelectionIndexForMention,\n  findStringsDiffIndexes,\n  getDisplayNameForMentionSuggestion,\n  getValidatedIndexInRange,\n  htmlStringForMentionSuggestion,\n  textToTagParser,\n  updateHTML\n} from './mentionTagUtils';\nimport { inputButtonStyle, inputButtonTooltipStyle, iconWrapperStyle } from '../styles/InputBoxComponent.style';\n\nimport { Caret } from 'textarea-caret-ts';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { useTheme } from '../../theming';\n\nimport { MentionLookupOptions, _MentionPopover, Mention } from '../MentionPopover';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst DEFAULT_MENTION_TRIGGER = '@';\n\n/**\n * Props for the TextFieldWithMention component.\n *\n * @private\n */\nexport interface TextFieldWithMentionProps {\n  textFieldProps: ITextFieldProps;\n  dataUiId?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  supportNewline?: boolean;\n  mentionLookupOptions?: MentionLookupOptions;\n}\n\n/**\n * @private\n */\nexport const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Element => {\n  const {\n    textFieldProps,\n    dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    mentionLookupOptions\n  } = props;\n  const inputBoxRef = useRef<HTMLDivElement>(null);\n\n  // Current suggestion list, provided by the callback\n  const [mentionSuggestions, setMentionSuggestions] = useState<Mention[]>([]);\n\n  // Current suggestion list, provided by the callback\n  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number | undefined>(undefined);\n\n  // Index of the current trigger character in the text field\n  const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = useState<number>(-1);\n\n  const [inputTextValue, setInputTextValue] = useState<string>('');\n\n  // Internal value for text value prop\n  const [internalTextValue, setInternalTextValue] = useState<string>('');\n\n  const [tagsValue, setTagsValue] = useState<TagData[]>([]);\n\n  // Index of the previous selection start in the text field\n  const [selectionStartValue, setSelectionStartValue] = useState<number | undefined>();\n\n  // Index of the previous selection end in the text field\n  const [selectionEndValue, setSelectionEndValue] = useState<number | undefined>();\n\n  // Boolean value to check if onMouseDown event should be handled during select as selection range\n  // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be\n  // updated in onSelect event if needed.\n  const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState<boolean>(true);\n\n  // Boolean flag to check if mouse/touch move event should be handled\n  const [shouldHandleMoveEvent, setShouldHandleMoveEvent] = useState<boolean>(false);\n\n  // Indexes of start of touch/mouse selection\n  const [interactionStartSelection, setInteractionStartSelection] = useState<\n    { start: number | undefined; end: number | undefined } | undefined\n  >();\n\n  // Caret position in the text field\n  const [caretPosition, setCaretPosition] = useState<Caret.Position | undefined>(undefined);\n\n  // Index of where the caret is in the text field\n  const [caretIndex, setCaretIndex] = useState<number | undefined>(undefined);\n\n  const localeStrings = useLocale().strings;\n\n  // Set mention suggestions\n  const updateMentionSuggestions = useCallback(\n    (suggestions: Mention[]) => {\n      setMentionSuggestions(suggestions);\n    },\n    [setMentionSuggestions]\n  );\n\n  useEffect(() => {\n    setInternalTextValue(textValue);\n    // update mention suggestions before the next render cycle\n    updateMentionSuggestions([]);\n  }, [textValue, updateMentionSuggestions]);\n\n  // Parse the text and get the plain text version to display in the input box\n  useEffect(() => {\n    const trigger = mentionLookupOptions?.trigger || DEFAULT_MENTION_TRIGGER;\n    const parsedHTMLData = textToTagParser(internalTextValue, trigger);\n    setInputTextValue(parsedHTMLData.plainText);\n    setTagsValue(parsedHTMLData.tags);\n    updateMentionSuggestions([]);\n  }, [internalTextValue, mentionLookupOptions?.trigger, updateMentionSuggestions]);\n\n  useEffect(() => {\n    // effect for caret index update\n    if (caretIndex === undefined || textFieldRef === undefined || textFieldRef?.current === undefined) {\n      return;\n    }\n    // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index\n    const updatedCaretIndex = getValidatedIndexInRange({\n      min: 0,\n      max: inputTextValue.length,\n      currentValue: caretIndex\n    });\n    textFieldRef?.current?.setSelectionRange(updatedCaretIndex, updatedCaretIndex);\n    setSelectionStartValue(updatedCaretIndex);\n    setSelectionEndValue(updatedCaretIndex);\n  }, [caretIndex, inputTextValue, textFieldRef, setSelectionStartValue, setSelectionEndValue]);\n\n  const onSuggestionSelected = useCallback(\n    (suggestion: Mention) => {\n      let selectionEnd = textFieldRef?.current?.selectionEnd || -1;\n      if (selectionEnd < 0) {\n        selectionEnd = 0;\n      } else if (selectionEnd > inputTextValue.length) {\n        selectionEnd = inputTextValue.length;\n      }\n      const oldPlainText = inputTextValue;\n      const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);\n\n      // update plain text with the mention html text\n      const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n      // update html text with updated plain text\n      const updatedContent = updateHTML({\n        htmlText: internalTextValue,\n        oldPlainText,\n        tags: tagsValue,\n        startIndex: currentTriggerStartIndex,\n        oldPlainTextEndIndex: selectionEnd,\n        change: mention,\n        mentionTrigger: triggerText\n      });\n\n      setInternalTextValue(updatedContent.updatedHTML);\n      const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);\n      const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;\n      // move the caret in the text field to the end of the mention plain text\n      setCaretIndex(newCaretIndex);\n      setSelectionEndValue(newCaretIndex);\n      setSelectionStartValue(newCaretIndex);\n      setCurrentTriggerStartIndex(-1);\n      updateMentionSuggestions([]);\n      // set focus back to text field\n      textFieldRef?.current?.focus();\n      setActiveSuggestionIndex(undefined);\n      onChange && onChange(undefined, updatedContent.updatedHTML);\n    },\n    [\n      textFieldRef,\n      inputTextValue,\n      currentTriggerStartIndex,\n      mentionLookupOptions?.trigger,\n      onChange,\n      internalTextValue,\n      tagsValue,\n      updateMentionSuggestions,\n      localeStrings\n    ]\n  );\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      // caretIndex should be set to undefined when the user is typing\n      setCaretIndex(undefined);\n      // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.\n      // it shouldn't be updated in onMouseUp\n      // as onMouseUp can be triggered before or after onSelect event\n      // because its order depends on mouse events not selection.\n      setShouldHandleOnMouseDownDuringSelect(false);\n\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n\n      if (mentionSuggestions.length > 0) {\n        if (ev.key === 'ArrowUp') {\n          ev.preventDefault();\n          const newActiveIndex =\n            activeSuggestionIndex === undefined\n              ? mentionSuggestions.length - 1\n              : Math.max(activeSuggestionIndex - 1, 0);\n          setActiveSuggestionIndex(newActiveIndex);\n        } else if (ev.key === 'ArrowDown') {\n          ev.preventDefault();\n          const newActiveIndex =\n            activeSuggestionIndex === undefined\n              ? 0\n              : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);\n          setActiveSuggestionIndex(newActiveIndex);\n        } else if (ev.key === 'Escape') {\n          updateMentionSuggestions([]);\n        }\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n\n        // If we are looking up a mention, select the focused suggestion\n        if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {\n          const selectedMention = mentionSuggestions[activeSuggestionIndex];\n          if (selectedMention) {\n            onSuggestionSelected(selectedMention);\n            return;\n          }\n        }\n\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [\n      onEnterKeyDown,\n      onKeyDown,\n      supportNewline,\n      mentionSuggestions,\n      activeSuggestionIndex,\n      onSuggestionSelected,\n      updateMentionSuggestions\n    ]\n  );\n\n  const debouncedQueryUpdate = useDebouncedCallback(async (query: string) => {\n    let suggestions = (await mentionLookupOptions?.onQueryUpdated(query)) ?? [];\n    suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');\n    if (suggestions.length === 0) {\n      setActiveSuggestionIndex(undefined);\n    } else if (activeSuggestionIndex === undefined) {\n      // Set the active to the first, if it's not already set\n      setActiveSuggestionIndex(0);\n    }\n    updateMentionSuggestions(suggestions);\n  }, 500);\n\n  // Update selections index in mention to navigate by words\n  const updateSelectionIndexesWithMentionIfNeeded = useCallback(\n    ({\n      event,\n      inputTextValue,\n      selectionEndValue,\n      selectionStartValue,\n      tagsValue\n    }: {\n      event: FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n      inputTextValue: string;\n      selectionEndValue?: number;\n      selectionStartValue?: number;\n      tagsValue: TagData[];\n    }): void => {\n      let updatedStartIndex = event.currentTarget.selectionStart;\n      let updatedEndIndex = event.currentTarget.selectionEnd;\n      if (\n        event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&\n        event.currentTarget.selectionStart !== null &&\n        event.currentTarget.selectionStart !== -1\n      ) {\n        // just a caret movement/usual typing or deleting\n        const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n        // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n        if (\n          mentionTag !== undefined &&\n          mentionTag.plainTextBeginIndex !== undefined &&\n          event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n          event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n        ) {\n          // get updated selection index\n          const newSelectionIndex = findNewSelectionIndexForMention({\n            tag: mentionTag,\n            textValue: inputTextValue,\n            currentSelectionIndex: event.currentTarget.selectionStart,\n            previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n          });\n          updatedStartIndex = newSelectionIndex;\n          updatedEndIndex = newSelectionIndex;\n        }\n      } else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {\n        // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click\n        if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {\n          // the selection start is changed\n          const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n          // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n          if (\n            mentionTag !== undefined &&\n            mentionTag.plainTextBeginIndex !== undefined &&\n            event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n            event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n          ) {\n            updatedStartIndex = findNewSelectionIndexForMention({\n              tag: mentionTag,\n              textValue: inputTextValue,\n              currentSelectionIndex: event.currentTarget.selectionStart,\n              previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n            });\n          }\n        }\n        if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {\n          // the selection end is changed\n          const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);\n          // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n          if (\n            mentionTag !== undefined &&\n            mentionTag.plainTextBeginIndex !== undefined &&\n            event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&\n            event.currentTarget.selectionEnd < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n          ) {\n            updatedEndIndex = findNewSelectionIndexForMention({\n              tag: mentionTag,\n              textValue: inputTextValue,\n              currentSelectionIndex: event.currentTarget.selectionEnd,\n              previousSelectionIndex: selectionEndValue ?? inputTextValue.length\n            });\n          }\n        }\n      }\n      // e.currentTarget.selectionDirection should be set to handle shift + arrow keys\n      if (event.currentTarget.selectionDirection === null) {\n        event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);\n      } else {\n        event.currentTarget.setSelectionRange(\n          updatedStartIndex,\n          updatedEndIndex,\n          event.currentTarget.selectionDirection\n        );\n      }\n      setSelectionStartValue(nullToUndefined(updatedStartIndex));\n      setSelectionEndValue(nullToUndefined(updatedEndIndex));\n    },\n    [setSelectionStartValue, setSelectionEndValue]\n  );\n\n  const handleOnSelect = useCallback(\n    ({\n      event,\n      inputTextValue,\n      tags,\n      shouldHandleOnMouseDownDuringSelect,\n      selectionStartValue,\n      selectionEndValue,\n      interactionStartSelection\n    }: {\n      event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n      inputTextValue: string;\n      tags: TagData[];\n      shouldHandleOnMouseDownDuringSelect: boolean;\n      selectionStartValue?: number;\n      selectionEndValue?: number;\n      interactionStartSelection?: { start: number | undefined; end: number | undefined };\n    }): void => {\n      if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputTextValue.length) {\n        // entire text is selected, no need to change anything\n        setSelectionStartValue(event.currentTarget.selectionStart);\n        setSelectionEndValue(event.currentTarget.selectionEnd);\n        setInteractionStartSelection(undefined);\n        setShouldHandleOnMouseDownDuringSelect(false);\n      } else if (shouldHandleOnMouseDownDuringSelect) {\n        if (\n          interactionStartSelection !== undefined &&\n          (interactionStartSelection.start !== event.currentTarget.selectionStart ||\n            interactionStartSelection.end !== event.currentTarget.selectionEnd)\n        ) {\n          // selection was changed by mouse\n          // for mouse selection only, it's possible to start selection in the middle of a word in a mention\n          // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start\n          // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set\n          // to the end of the input to mimic selection from right to left for the left selection index\n          const updatedSelectionStartValue =\n            event.currentTarget.selectionStart === interactionStartSelection.start\n              ? inputTextValue.length\n              : interactionStartSelection.start;\n          // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection\n          // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end\n          // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set\n          // to the beginning of the input to mimic selection from left to right for the right selection index\n          const updatedSelectionEndValue =\n            event.currentTarget.selectionEnd === interactionStartSelection.end ? 0 : interactionStartSelection.end;\n          updateSelectionIndexesWithMentionIfNeeded({\n            event,\n            inputTextValue,\n            selectionStartValue: updatedSelectionStartValue,\n            selectionEndValue: updatedSelectionEndValue,\n            tagsValue: tags\n          });\n          setInteractionStartSelection(undefined);\n          setShouldHandleOnMouseDownDuringSelect(false);\n        } else if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionEnd !== null) {\n          // on select was triggered by mouse down/up with no movement\n          const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);\n          if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {\n            // handle mention click by selecting the whole mention\n            // if the selection is not on the bounds of the mention\n            // disable selection for clicks on mention bounds\n            const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;\n\n            if (\n              event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&\n              event.currentTarget.selectionEnd > mentionEndIndex\n            ) {\n              // handle triple click when the text starts from mention\n              if (event.currentTarget.selectionDirection === null) {\n                event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);\n              } else {\n                event.currentTarget.setSelectionRange(\n                  mentionTag.plainTextBeginIndex,\n                  event.currentTarget.selectionEnd,\n                  event.currentTarget.selectionDirection\n                );\n              }\n              setSelectionStartValue(mentionTag.plainTextBeginIndex);\n              setSelectionEndValue(event.currentTarget.selectionEnd);\n            } else if (\n              event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||\n              (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&\n                event.currentTarget.selectionStart !== mentionEndIndex)\n            ) {\n              if (event.currentTarget.selectionDirection === null) {\n                event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);\n              } else {\n                event.currentTarget.setSelectionRange(\n                  mentionTag.plainTextBeginIndex,\n                  mentionEndIndex,\n                  event.currentTarget.selectionDirection\n                );\n              }\n              setSelectionStartValue(mentionTag.plainTextBeginIndex);\n              setSelectionEndValue(mentionEndIndex);\n            } else {\n              // bounds of the mention were selected\n              setSelectionStartValue(event.currentTarget.selectionStart);\n              setSelectionEndValue(event.currentTarget.selectionEnd);\n            }\n          } else {\n            // not a mention tag\n            setSelectionStartValue(event.currentTarget.selectionStart);\n            setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));\n          }\n          setInteractionStartSelection(undefined);\n        }\n      } else {\n        // selection was changed by keyboard\n        updateSelectionIndexesWithMentionIfNeeded({\n          event,\n          inputTextValue,\n          selectionStartValue,\n          selectionEndValue,\n          tagsValue: tags\n        });\n      }\n    },\n    [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]\n  );\n\n  type HandleOnChangeProps = {\n    currentSelectionEnd?: number;\n    currentSelectionStart?: number;\n    currentTriggerStartIndex: number;\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n    htmlTextValue: string;\n    inputTextValue: string;\n    previousSelectionEnd?: number;\n    previousSelectionStart?: number;\n    tagsValue: TagData[];\n    updatedValue?: string;\n  };\n\n  const handleOnChange = useCallback(\n    async ({\n      currentSelectionEnd,\n      currentSelectionStart,\n      currentTriggerStartIndex,\n      event,\n      htmlTextValue,\n      inputTextValue,\n      previousSelectionEnd,\n      previousSelectionStart,\n      tagsValue,\n      updatedValue\n    }: HandleOnChangeProps): Promise<void> => {\n      debouncedQueryUpdate.cancel();\n      if (event.currentTarget === null) {\n        return;\n      }\n      // handle backspace change\n      // onSelect is not called for backspace as selection is not changed and local caret index is outdated\n      setCaretIndex(undefined);\n      const newValue = updatedValue ?? '';\n      const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n\n      const newTextLength = newValue.length;\n      // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly\n      const currentSelectionEndValue = getValidatedIndexInRange({\n        min: 0,\n        max: newTextLength,\n        currentValue: currentSelectionEnd\n      });\n      const currentSelectionStartValue = getValidatedIndexInRange({\n        min: 0,\n        max: newTextLength,\n        currentValue: currentSelectionStart\n      });\n      const previousSelectionStartValue = getValidatedIndexInRange({\n        min: 0,\n        max: inputTextValue.length,\n        currentValue: previousSelectionStart\n      });\n      const previousSelectionEndValue = getValidatedIndexInRange({\n        min: 0,\n        max: inputTextValue.length,\n        currentValue: previousSelectionEnd\n      });\n\n      // If we are enabled for lookups,\n      if (mentionLookupOptions !== undefined) {\n        // Look at the range of the change for a trigger character\n        const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);\n        // Update the caret position, used for positioning the suggestions popover\n        const textField = event.currentTarget;\n        const relativePosition = Caret.getRelativePosition(textField);\n        if (textField.scrollHeight > textField.clientHeight) {\n          relativePosition.top -= textField.scrollTop;\n        }\n        setCaretPosition(relativePosition);\n        if (triggerPriorIndex !== undefined) {\n          // trigger is found\n          const symbolBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex);\n          const isSpaceBeforeTrigger = symbolBeforeTrigger === ' ';\n          // check if \\r (Carriage Return), \\n (Line Feed) or \\r\\n (End Of Line) is before the trigger\n          const isNewLineBeforeTrigger = /\\r|\\n/.exec(symbolBeforeTrigger);\n          const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);\n          let tagIndex = currentTriggerStartIndex;\n          if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0 && isNewLineBeforeTrigger === null) {\n            // no space before the trigger, it's not a beginning of the line and no new line before  <- continuation of the previous word\n            tagIndex = -1;\n            setCurrentTriggerStartIndex(tagIndex);\n          } else if (wordAtSelection === triggerText) {\n            // start of the mention\n            tagIndex = currentSelectionEndValue - triggerText.length;\n            if (tagIndex < 0) {\n              tagIndex = 0;\n            }\n            setCurrentTriggerStartIndex(tagIndex);\n          }\n          if (tagIndex === -1) {\n            updateMentionSuggestions([]);\n          } else {\n            // In the middle of a @mention lookup\n            if (tagIndex > -1) {\n              const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);\n              if (query !== undefined) {\n                await debouncedQueryUpdate(query);\n              }\n            }\n          }\n        }\n      }\n\n      const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({\n        oldText: inputTextValue,\n        newText: newValue,\n        previousSelectionStart: previousSelectionStartValue,\n        previousSelectionEnd: previousSelectionEndValue,\n        currentSelectionStart: currentSelectionStartValue,\n        currentSelectionEnd: currentSelectionEndValue\n      });\n\n      const change = newValue.substring(changeStart, newChangeEnd);\n      const updatedContent = updateHTML({\n        htmlText: htmlTextValue,\n        oldPlainText: inputTextValue,\n        tags: tagsValue,\n        startIndex: changeStart,\n        oldPlainTextEndIndex: oldChangeEnd,\n        change,\n        mentionTrigger: triggerText\n      });\n      setInternalTextValue(updatedContent.updatedHTML);\n\n      // update caret index if needed\n      if (updatedContent.updatedSelectionIndex !== undefined) {\n        setCaretIndex(updatedContent.updatedSelectionIndex);\n        setSelectionEndValue(updatedContent.updatedSelectionIndex);\n        setSelectionStartValue(updatedContent.updatedSelectionIndex);\n      }\n\n      onChange && onChange(event, updatedContent.updatedHTML);\n    },\n    [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]\n  );\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnMove = useCallback(\n    ({\n      event,\n      selectionStartValue,\n      selectionEndValue,\n      interactionStartSelection,\n      shouldHandleMoveEvent\n    }: {\n      event: React.UIEvent<HTMLInputElement | HTMLTextAreaElement>;\n      selectionStartValue: number | undefined;\n      selectionEndValue: number | undefined;\n      interactionStartSelection: { start: number | undefined; end: number | undefined } | undefined;\n      shouldHandleMoveEvent: boolean;\n    }) => {\n      if (\n        shouldHandleMoveEvent &&\n        interactionStartSelection === undefined &&\n        (event.currentTarget.selectionStart !== selectionStartValue ||\n          event.currentTarget.selectionEnd !== selectionEndValue)\n      ) {\n        setInteractionStartSelection({\n          start: nullToUndefined(event.currentTarget.selectionStart),\n          end: nullToUndefined(event.currentTarget.selectionEnd)\n        });\n      }\n    },\n    []\n  );\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnInteractionStarted = useCallback(() => {\n    // reset caret index as a new selection is started or cursor position will be changed\n    setCaretIndex(undefined);\n    setInteractionStartSelection(undefined);\n    setShouldHandleMoveEvent(true);\n    setShouldHandleOnMouseDownDuringSelect(true);\n  }, []);\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnInteractionCompleted = useCallback(() => {\n    setShouldHandleMoveEvent(false);\n  }, []);\n\n  const announcerText = useMemo(() => {\n    if (activeSuggestionIndex === undefined) {\n      return undefined;\n    }\n    const currentMention = mentionSuggestions[activeSuggestionIndex ?? 0];\n    return currentMention?.displayText.length > 0\n      ? currentMention?.displayText\n      : localeStrings.participantItem.displayNamePlaceholder;\n  }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);\n\n  return (\n    <>\n      {mentionSuggestions.length > 0 && (\n        <_MentionPopover\n          suggestions={mentionSuggestions}\n          activeSuggestionIndex={activeSuggestionIndex}\n          target={inputBoxRef}\n          targetPositionOffset={caretPosition}\n          onRenderSuggestionItem={mentionLookupOptions?.onRenderSuggestionItem}\n          onSuggestionSelected={onSuggestionSelected}\n          onDismiss={() => {\n            updateMentionSuggestions([]);\n          }}\n        />\n      )}\n      {announcerText !== undefined && <Announcer announcementString={announcerText} ariaLive={'polite'} />}\n      <TextField\n        {...textFieldProps}\n        data-ui-id={dataUiId}\n        value={inputTextValue}\n        onChange={(e, newValue) => {\n          // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html\n          // Prevents React from resetting event's properties\n          e.persist();\n          setInputTextValue(newValue ?? '');\n          handleOnChange({\n            event: e,\n            tagsValue,\n            htmlTextValue: internalTextValue,\n            inputTextValue,\n            currentTriggerStartIndex,\n            previousSelectionStart: nullToUndefined(selectionStartValue),\n            previousSelectionEnd: nullToUndefined(selectionEndValue),\n            currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),\n            currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),\n            updatedValue: newValue\n          });\n        }}\n        onSelect={(e) => {\n          // update selection if needed\n          if (caretIndex !== undefined) {\n            // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and\n            // onSelect still returns outdated value for cursor position\n            // e.g. when user select some text and a first name in a mention then delete or type something else\n            if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {\n              e.currentTarget.setSelectionRange(caretIndex, caretIndex);\n            }\n            // caret index should not be set to undefined here\n            // as it will cause issues when suggestion is selected by mouse\n            // caret index will be set to undefined during keyboard/mouse or touch interactions\n            return;\n          }\n          handleOnSelect({\n            event: e,\n            inputTextValue,\n            shouldHandleOnMouseDownDuringSelect,\n            selectionEndValue,\n            selectionStartValue,\n            tags: tagsValue,\n            interactionStartSelection\n          });\n        }}\n        onMouseDown={() => {\n          // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick\n          // onClick and onMouseDown can't handle clicking on mention event because\n          // onMouseDown doesn't have correct selectionRange yet and\n          // onClick already has wrong range as it's called after onSelect that updates the selection range\n          // so we need to handle onMouseDown to prevent onSelect default behavior\n          handleOnInteractionStarted();\n        }}\n        onMouseMove={(event) => {\n          handleOnMove({\n            event,\n            selectionStartValue,\n            selectionEndValue,\n            interactionStartSelection,\n            shouldHandleMoveEvent\n          });\n        }}\n        onMouseUp={() => {\n          handleOnInteractionCompleted();\n        }}\n        onTouchStart={() => {\n          handleOnInteractionStarted();\n        }}\n        onTouchMove={(event) => {\n          handleOnMove({\n            event,\n            selectionStartValue,\n            selectionEndValue,\n            interactionStartSelection,\n            shouldHandleMoveEvent\n          });\n        }}\n        onTouchEnd={() => {\n          handleOnInteractionCompleted;\n        }}\n        onBlur={() => {\n          // setup shouldHandleOnMouseDownDuringSelect to false when text field loses focus\n          // as the click should be handled by text field anymore\n          setShouldHandleOnMouseDownDuringSelect(false);\n        }}\n        onKeyDown={onTextFieldKeyDown}\n        elementRef={inputBoxRef}\n      />\n    </>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"TextFieldWithMention.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/TextFieldWithMention/TextFieldWithMention.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,KAAK,EACL,SAAS,EACT,WAAW,EAEX,UAAU,EACV,WAAW,EAGZ,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qCAAqC,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAClF,OAAO,EAEL,0BAA0B,EAC1B,+BAA+B,EAC/B,sBAAsB,EACtB,kCAAkC,EAClC,wBAAwB,EACxB,8BAA8B,EAC9B,eAAe,EACf,UAAU,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAEhH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAwB,eAAe,EAAW,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAmBpC;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EACJ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,cAAc,EACd,cAAc,EACd,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,oDAAoD;IACpD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAE5E,oDAAoD;IACpD,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElG,2DAA2D;IAC3D,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEjE,qCAAqC;IACrC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEvE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAE1D,0DAA0D;IAC1D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAErF,wDAAwD;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEjF,iGAAiG;IACjG,gGAAgG;IAChG,uCAAuC;IACvC,MAAM,CAAC,mCAAmC,EAAE,sCAAsC,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAE9G,oEAAoE;IACpE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEnF,4CAA4C;IAC5C,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,EAEvE,CAAC;IAEJ,mCAAmC;IACnC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA6B,SAAS,CAAC,CAAC;IAE1F,gDAAgD;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAE5E,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IAE1C,0BAA0B;IAC1B,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,WAAsB,EAAE,EAAE;QACzB,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAChC,0DAA0D;QAC1D,wBAAwB,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAE1C,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,KAAI,uBAAuB,CAAC;QACzE,MAAM,cAAc,GAAG,eAAe,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;QACnE,iBAAiB,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAC5C,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAClC,wBAAwB,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,iBAAiB,EAAE,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;;QACb,gCAAgC;QAChC,IAAI,UAAU,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,MAAK,SAAS,EAAE,CAAC;YAClG,OAAO;QACT,CAAC;QACD,+GAA+G;QAC/G,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;YACjD,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,cAAc,CAAC,MAAM;YAC1B,YAAY,EAAE,UAAU;SACzB,CAAC,CAAC;QACH,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,iBAAiB,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;QAC/E,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;QAC1C,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,sBAAsB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE7F,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,UAAmB,EAAE,EAAE;;QACtB,IAAI,YAAY,GAAG,CAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,YAAY,KAAI,CAAC,CAAC,CAAC;QAC7D,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;YACrB,YAAY,GAAG,CAAC,CAAC;QACnB,CAAC;aAAM,IAAI,YAAY,GAAG,cAAc,CAAC,MAAM,EAAE,CAAC;YAChD,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC;QACvC,CAAC;QACD,MAAM,YAAY,GAAG,cAAc,CAAC;QACpC,MAAM,OAAO,GAAG,8BAA8B,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QAE1E,+CAA+C;QAC/C,MAAM,WAAW,GAAG,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,mCAAI,uBAAuB,CAAC;QAC7E,2CAA2C;QAC3C,MAAM,cAAc,GAAG,UAAU,CAAC;YAChC,QAAQ,EAAE,iBAAiB;YAC3B,YAAY;YACZ,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,wBAAwB;YACpC,oBAAoB,EAAE,YAAY;YAClC,MAAM,EAAE,OAAO;YACf,cAAc,EAAE,WAAW;SAC5B,CAAC,CAAC;QAEH,oBAAoB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACjD,MAAM,WAAW,GAAG,kCAAkC,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QAClF,MAAM,aAAa,GAAG,wBAAwB,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;QACzF,wEAAwE;QACxE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC7B,oBAAoB,CAAC,aAAa,CAAC,CAAC;QACpC,sBAAsB,CAAC,aAAa,CAAC,CAAC;QACtC,2BAA2B,CAAC,CAAC,CAAC,CAAC,CAAC;QAChC,wBAAwB,CAAC,EAAE,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC/B,wBAAwB,CAAC,SAAS,CAAC,CAAC;QACpC,QAAQ,IAAI,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9D,CAAC,EACD;QACE,YAAY;QACZ,cAAc;QACd,wBAAwB;QACxB,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO;QAC7B,QAAQ;QACR,iBAAiB;QACjB,SAAS;QACT,wBAAwB;QACxB,aAAa;KACd,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,EAA+D,EAAE,EAAE;QAClE,gEAAgE;QAChE,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,8FAA8F;QAC9F,uCAAuC;QACvC,+DAA+D;QAC/D,2DAA2D;QAC3D,sCAAsC,CAAC,KAAK,CAAC,CAAC;QAE9C,IAAI,qCAAqC,CAAC,EAAE,CAAC,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,IAAI,8BAA8B,GAAG,KAAK,CAAC;QAC3C,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClC,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACzB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,MAAM,cAAc,GAClB,qBAAqB,KAAK,SAAS;oBACjC,CAAC,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC;oBAC/B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC7C,wBAAwB,CAAC,cAAc,CAAC,CAAC;gBACzC,8BAA8B,GAAG,IAAI,CAAC;YACxC,CAAC;iBAAM,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAClC,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,MAAM,cAAc,GAClB,qBAAqB,KAAK,SAAS;oBACjC,CAAC,CAAC,CAAC;oBACH,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAqB,GAAG,CAAC,EAAE,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACzE,wBAAwB,CAAC,cAAc,CAAC,CAAC;gBACzC,8BAA8B,GAAG,IAAI,CAAC;YACxC,CAAC;iBAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC/B,wBAAwB,CAAC,EAAE,CAAC,CAAC;gBAC7B,4DAA4D;gBAC5D,wBAAwB,CAAC,SAAS,CAAC,CAAC;gBACpC,8BAA8B,GAAG,IAAI,CAAC;YACxC,CAAC;QACH,CAAC;QACD,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACrE,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,gEAAgE;YAChE,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,qBAAqB,KAAK,SAAS,EAAE,CAAC;gBACzE,MAAM,eAAe,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;gBAClE,IAAI,eAAe,EAAE,CAAC;oBACpB,oBAAoB,CAAC,eAAe,CAAC,CAAC;oBACtC,OAAO;gBACT,CAAC;YACH,CAAC;YAED,cAAc,IAAI,cAAc,EAAE,CAAC;QACrC,CAAC;aAAM,IAAI,CAAC,8BAA8B,EAAE,CAAC;YAC3C,4DAA4D;YAC5D,mCAAmC;YACnC,wBAAwB,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;QACD,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,EACD;QACE,cAAc;QACd,SAAS;QACT,cAAc;QACd,kBAAkB;QAClB,qBAAqB;QACrB,oBAAoB;QACpB,wBAAwB;KACzB,CACF,CAAC;IAEF,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAO,KAAa,EAAE,EAAE;;QACxE,IAAI,WAAW,GAAG,MAAA,CAAC,MAAM,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,cAAc,CAAC,KAAK,CAAC,CAAA,CAAC,mCAAI,EAAE,CAAC;QAC5E,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QACvF,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,wBAAwB,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,qBAAqB,KAAK,SAAS,EAAE,CAAC;YAC/C,uDAAuD;YACvD,wBAAwB,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC;QACD,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC,CAAA,EAAE,GAAG,CAAC,CAAC;IAER,0DAA0D;IAC1D,MAAM,yCAAyC,GAAG,WAAW,CAC3D,CAAC,EACC,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EAOV,EAAQ,EAAE;;QACT,IAAI,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;QAC3D,IAAI,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;QACvD,IACE,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,KAAK,CAAC,aAAa,CAAC,YAAY;YACvE,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,IAAI;YAC3C,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,CAAC,CAAC,EACzC,CAAC;YACD,iDAAiD;YACjD,MAAM,UAAU,GAAG,0BAA0B,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAC7F,iHAAiH;YACjH,IACE,UAAU,KAAK,SAAS;gBACxB,UAAU,CAAC,mBAAmB,KAAK,SAAS;gBAC5C,KAAK,CAAC,aAAa,CAAC,cAAc,GAAG,UAAU,CAAC,mBAAmB;gBACnE,KAAK,CAAC,aAAa,CAAC,cAAc,GAAG,CAAC,MAAA,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,mBAAmB,CAAC,EACrG,CAAC;gBACD,8BAA8B;gBAC9B,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;oBACxD,GAAG,EAAE,UAAU;oBACf,SAAS,EAAE,cAAc;oBACzB,qBAAqB,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc;oBACzD,sBAAsB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,cAAc,CAAC,MAAM;iBACrE,CAAC,CAAC;gBACH,iBAAiB,GAAG,iBAAiB,CAAC;gBACtC,eAAe,GAAG,iBAAiB,CAAC;YACtC,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;YACnF,4KAA4K;YAC5K,IAAI,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,IAAI,IAAI,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,mBAAmB,EAAE,CAAC;gBAC9G,iCAAiC;gBACjC,MAAM,UAAU,GAAG,0BAA0B,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;gBAC7F,iHAAiH;gBACjH,IACE,UAAU,KAAK,SAAS;oBACxB,UAAU,CAAC,mBAAmB,KAAK,SAAS;oBAC5C,KAAK,CAAC,aAAa,CAAC,cAAc,GAAG,UAAU,CAAC,mBAAmB;oBACnE,KAAK,CAAC,aAAa,CAAC,cAAc,GAAG,CAAC,MAAA,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,mBAAmB,CAAC,EACrG,CAAC;oBACD,iBAAiB,GAAG,+BAA+B,CAAC;wBAClD,GAAG,EAAE,UAAU;wBACf,SAAS,EAAE,cAAc;wBACzB,qBAAqB,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc;wBACzD,sBAAsB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,cAAc,CAAC,MAAM;qBACrE,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YACD,IAAI,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,IAAI,IAAI,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,iBAAiB,EAAE,CAAC;gBACxG,+BAA+B;gBAC/B,MAAM,UAAU,GAAG,0BAA0B,CAAC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC3F,iHAAiH;gBACjH,IACE,UAAU,KAAK,SAAS;oBACxB,UAAU,CAAC,mBAAmB,KAAK,SAAS;oBAC5C,KAAK,CAAC,aAAa,CAAC,YAAY,GAAG,UAAU,CAAC,mBAAmB;oBACjE,KAAK,CAAC,aAAa,CAAC,YAAY,GAAG,CAAC,MAAA,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,mBAAmB,CAAC,EACnG,CAAC;oBACD,eAAe,GAAG,+BAA+B,CAAC;wBAChD,GAAG,EAAE,UAAU;wBACf,SAAS,EAAE,cAAc;wBACzB,qBAAqB,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY;wBACvD,sBAAsB,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,cAAc,CAAC,MAAM;qBACnE,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;QACH,CAAC;QACD,gFAAgF;QAChF,IAAI,KAAK,CAAC,aAAa,CAAC,kBAAkB,KAAK,IAAI,EAAE,CAAC;YACpD,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,aAAa,CAAC,iBAAiB,CACnC,iBAAiB,EACjB,eAAe,EACf,KAAK,CAAC,aAAa,CAAC,kBAAkB,CACvC,CAAC;QACJ,CAAC;QACD,sBAAsB,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC3D,oBAAoB,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC,CAAC;IACzD,CAAC,EACD,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAC/C,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EACC,KAAK,EACL,cAAc,EACd,IAAI,EACJ,mCAAmC,EACnC,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,EAS1B,EAAQ,EAAE;;QACT,IAAI,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,cAAc,CAAC,MAAM,EAAE,CAAC;YAC3G,sDAAsD;YACtD,sBAAsB,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAC3D,oBAAoB,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YACvD,4BAA4B,CAAC,SAAS,CAAC,CAAC;YACxC,sCAAsC,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;aAAM,IAAI,mCAAmC,EAAE,CAAC;YAC/C,IACE,yBAAyB,KAAK,SAAS;gBACvC,CAAC,yBAAyB,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,CAAC,cAAc;oBACrE,yBAAyB,CAAC,GAAG,KAAK,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,EACrE,CAAC;gBACD,iCAAiC;gBACjC,kGAAkG;gBAClG,wFAAwF;gBACxF,kFAAkF;gBAClF,6FAA6F;gBAC7F,MAAM,0BAA0B,GAC9B,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,yBAAyB,CAAC,KAAK;oBACpE,CAAC,CAAC,cAAc,CAAC,MAAM;oBACvB,CAAC,CAAC,yBAAyB,CAAC,KAAK,CAAC;gBACtC,6GAA6G;gBAC7G,uEAAuE;gBACvE,gFAAgF;gBAChF,oGAAoG;gBACpG,MAAM,wBAAwB,GAC5B,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,GAAG,CAAC;gBACzG,yCAAyC,CAAC;oBACxC,KAAK;oBACL,cAAc;oBACd,mBAAmB,EAAE,0BAA0B;oBAC/C,iBAAiB,EAAE,wBAAwB;oBAC3C,SAAS,EAAE,IAAI;iBAChB,CAAC,CAAC;gBACH,4BAA4B,CAAC,SAAS,CAAC,CAAC;gBACxC,sCAAsC,CAAC,KAAK,CAAC,CAAC;YAChD,CAAC;iBAAM,IAAI,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,IAAI,IAAI,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;gBACpG,4DAA4D;gBAC5D,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;gBACxF,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,CAAC,mBAAmB,KAAK,SAAS,EAAE,CAAC;oBAC7E,sDAAsD;oBACtD,uDAAuD;oBACvD,iDAAiD;oBACjD,MAAM,eAAe,GAAG,MAAA,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,mBAAmB,CAAC;oBAEvF,IACE,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,KAAK,CAAC,aAAa,CAAC,YAAY;wBACvE,KAAK,CAAC,aAAa,CAAC,YAAY,GAAG,eAAe,EAClD,CAAC;wBACD,wDAAwD;wBACxD,IAAI,KAAK,CAAC,aAAa,CAAC,kBAAkB,KAAK,IAAI,EAAE,CAAC;4BACpD,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,UAAU,CAAC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;wBAC1G,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,aAAa,CAAC,iBAAiB,CACnC,UAAU,CAAC,mBAAmB,EAC9B,KAAK,CAAC,aAAa,CAAC,YAAY,EAChC,KAAK,CAAC,aAAa,CAAC,kBAAkB,CACvC,CAAC;wBACJ,CAAC;wBACD,sBAAsB,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;wBACvD,oBAAoB,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;oBACzD,CAAC;yBAAM,IACL,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,KAAK,CAAC,aAAa,CAAC,YAAY;wBACvE,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,UAAU,CAAC,mBAAmB;4BACpE,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,eAAe,CAAC,EACzD,CAAC;wBACD,IAAI,KAAK,CAAC,aAAa,CAAC,kBAAkB,KAAK,IAAI,EAAE,CAAC;4BACpD,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,UAAU,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;wBACzF,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,aAAa,CAAC,iBAAiB,CACnC,UAAU,CAAC,mBAAmB,EAC9B,eAAe,EACf,KAAK,CAAC,aAAa,CAAC,kBAAkB,CACvC,CAAC;wBACJ,CAAC;wBACD,sBAAsB,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;wBACvD,oBAAoB,CAAC,eAAe,CAAC,CAAC;oBACxC,CAAC;yBAAM,CAAC;wBACN,sCAAsC;wBACtC,sBAAsB,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;wBAC3D,oBAAoB,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;oBACzD,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,oBAAoB;oBACpB,sBAAsB,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;oBAC3D,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;gBAC1E,CAAC;gBACD,4BAA4B,CAAC,SAAS,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC;aAAM,CAAC;YACN,oCAAoC;YACpC,yCAAyC,CAAC;gBACxC,KAAK;gBACL,cAAc;gBACd,mBAAmB;gBACnB,iBAAiB;gBACjB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,yCAAyC,EAAE,sBAAsB,EAAE,oBAAoB,CAAC,CAC1F,CAAC;IAeF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,KAAK,EACL,aAAa,EACb,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,YAAY,EACQ,EAAiB,EAAE;;QACvC,oBAAoB,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,KAAK,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,0BAA0B;QAC1B,qGAAqG;QACrG,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,MAAM,QAAQ,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC;QACpC,MAAM,WAAW,GAAG,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,OAAO,mCAAI,uBAAuB,CAAC;QAE7E,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;QACtC,qGAAqG;QACrG,MAAM,wBAAwB,GAAG,wBAAwB,CAAC;YACxD,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,aAAa;YAClB,YAAY,EAAE,mBAAmB;SAClC,CAAC,CAAC;QACH,MAAM,0BAA0B,GAAG,wBAAwB,CAAC;YAC1D,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,aAAa;YAClB,YAAY,EAAE,qBAAqB;SACpC,CAAC,CAAC;QACH,MAAM,2BAA2B,GAAG,wBAAwB,CAAC;YAC3D,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,cAAc,CAAC,MAAM;YAC1B,YAAY,EAAE,sBAAsB;SACrC,CAAC,CAAC;QACH,MAAM,yBAAyB,GAAG,wBAAwB,CAAC;YACzD,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,cAAc,CAAC,MAAM;YAC1B,YAAY,EAAE,oBAAoB;SACnC,CAAC,CAAC;QAEH,iCAAiC;QACjC,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;YACvC,0DAA0D;YAC1D,MAAM,iBAAiB,GAAG,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,wBAAwB,GAAG,CAAC,CAAC,CAAC;YAC1F,0EAA0E;YAC1E,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;YACtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;YAC9D,IAAI,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,EAAE,CAAC;gBACpD,gBAAgB,CAAC,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC;YAC9C,CAAC;YACD,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;YACnC,IAAI,iBAAiB,KAAK,SAAS,EAAE,CAAC;gBACpC,mBAAmB;gBACnB,MAAM,mBAAmB,GAAG,QAAQ,CAAC,SAAS,CAAC,iBAAiB,GAAG,CAAC,EAAE,iBAAiB,CAAC,CAAC;gBACzF,MAAM,oBAAoB,GAAG,mBAAmB,KAAK,GAAG,CAAC;gBACzD,4FAA4F;gBAC5F,MAAM,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBACjE,MAAM,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,CAAC;gBACxF,IAAI,QAAQ,GAAG,wBAAwB,CAAC;gBACxC,IAAI,CAAC,oBAAoB,IAAI,iBAAiB,KAAK,CAAC,IAAI,sBAAsB,KAAK,IAAI,EAAE,CAAC;oBACxF,6HAA6H;oBAC7H,QAAQ,GAAG,CAAC,CAAC,CAAC;oBACd,2BAA2B,CAAC,QAAQ,CAAC,CAAC;gBACxC,CAAC;qBAAM,IAAI,eAAe,KAAK,WAAW,EAAE,CAAC;oBAC3C,uBAAuB;oBACvB,QAAQ,GAAG,wBAAwB,GAAG,WAAW,CAAC,MAAM,CAAC;oBACzD,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;wBACjB,QAAQ,GAAG,CAAC,CAAC;oBACf,CAAC;oBACD,2BAA2B,CAAC,QAAQ,CAAC,CAAC;gBACxC,CAAC;gBACD,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC;oBACpB,wBAAwB,CAAC,EAAE,CAAC,CAAC;gBAC/B,CAAC;qBAAM,CAAC;oBACN,qCAAqC;oBACrC,IAAI,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC;wBAClB,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;wBACpF,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;4BACxB,MAAM,oBAAoB,CAAC,KAAK,CAAC,CAAC;wBACpC,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,sBAAsB,CAAC;YACzE,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,QAAQ;YACjB,sBAAsB,EAAE,2BAA2B;YACnD,oBAAoB,EAAE,yBAAyB;YAC/C,qBAAqB,EAAE,0BAA0B;YACjD,mBAAmB,EAAE,wBAAwB;SAC9C,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAC7D,MAAM,cAAc,GAAG,UAAU,CAAC;YAChC,QAAQ,EAAE,aAAa;YACvB,YAAY,EAAE,cAAc;YAC5B,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,WAAW;YACvB,oBAAoB,EAAE,YAAY;YAClC,MAAM;YACN,cAAc,EAAE,WAAW;SAC5B,CAAC,CAAC;QACH,oBAAoB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAEjD,+BAA+B;QAC/B,IAAI,cAAc,CAAC,qBAAqB,KAAK,SAAS,EAAE,CAAC;YACvD,aAAa,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;YACpD,oBAAoB,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;YAC3D,sBAAsB,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;QAC/D,CAAC;QAED,QAAQ,IAAI,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,CAAA,EACD,CAAC,oBAAoB,EAAE,oBAAoB,EAAE,QAAQ,EAAE,wBAAwB,CAAC,CACjF,CAAC;IAEF,kEAAkE;IAClE,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,EACC,KAAK,EACL,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,EAOtB,EAAE,EAAE;QACH,IACE,qBAAqB;YACrB,yBAAyB,KAAK,SAAS;YACvC,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,KAAK,mBAAmB;gBACzD,KAAK,CAAC,aAAa,CAAC,YAAY,KAAK,iBAAiB,CAAC,EACzD,CAAC;YACD,4BAA4B,CAAC;gBAC3B,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;gBAC1D,GAAG,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;aACvD,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,kEAAkE;IAClE,MAAM,0BAA0B,GAAG,WAAW,CAAC,GAAG,EAAE;QAClD,qFAAqF;QACrF,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,4BAA4B,CAAC,SAAS,CAAC,CAAC;QACxC,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,sCAAsC,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kEAAkE;IAClE,MAAM,4BAA4B,GAAG,WAAW,CAAC,GAAG,EAAE;QACpD,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,qBAAqB,KAAK,SAAS,EAAE,CAAC;YACxC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,cAAc,GAAG,kBAAkB,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,CAAC,CAAC,CAAC;QACtE,OAAO,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,CAAC,MAAM,IAAG,CAAC;YAC3C,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW;YAC7B,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,sBAAsB,CAAC;IAC3D,CAAC,EAAE,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,aAAa,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAEtG,OAAO,CACL;QACG,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,oBAAC,eAAe,IACd,WAAW,EAAE,kBAAkB,EAC/B,qBAAqB,EAAE,qBAAqB,EAC5C,MAAM,EAAE,WAAW,EACnB,oBAAoB,EAAE,aAAa,EACnC,sBAAsB,EAAE,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,sBAAsB,EACpE,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,GAAG,EAAE;gBACd,wBAAwB,CAAC,EAAE,CAAC,CAAC;YAC/B,CAAC,GACD,CACH;QACA,aAAa,KAAK,SAAS,IAAI,oBAAC,SAAS,IAAC,kBAAkB,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACpG,oBAAC,SAAS,oBACJ,cAAc,kBACN,QAAQ,EACpB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;gBACxB,4HAA4H;gBAC5H,mDAAmD;gBACnD,CAAC,CAAC,OAAO,EAAE,CAAC;gBACZ,iBAAiB,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;gBAClC,cAAc,CAAC;oBACb,KAAK,EAAE,CAAC;oBACR,SAAS;oBACT,aAAa,EAAE,iBAAiB;oBAChC,cAAc;oBACd,wBAAwB;oBACxB,sBAAsB,EAAE,eAAe,CAAC,mBAAmB,CAAC;oBAC5D,oBAAoB,EAAE,eAAe,CAAC,iBAAiB,CAAC;oBACxD,qBAAqB,EAAE,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC;oBACtE,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;oBAClE,YAAY,EAAE,QAAQ;iBACvB,CAAC,CAAC;YACL,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,6BAA6B;gBAC7B,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;oBAC7B,iGAAiG;oBACjG,4DAA4D;oBAC5D,mGAAmG;oBACnG,IAAI,UAAU,KAAK,CAAC,CAAC,aAAa,CAAC,cAAc,IAAI,UAAU,KAAK,CAAC,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;wBACjG,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;oBAC5D,CAAC;oBACD,kDAAkD;oBAClD,+DAA+D;oBAC/D,mFAAmF;oBACnF,OAAO;gBACT,CAAC;gBACD,cAAc,CAAC;oBACb,KAAK,EAAE,CAAC;oBACR,cAAc;oBACd,mCAAmC;oBACnC,iBAAiB;oBACjB,mBAAmB;oBACnB,IAAI,EAAE,SAAS;oBACf,yBAAyB;iBAC1B,CAAC,CAAC;YACL,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,oFAAoF;gBACpF,yEAAyE;gBACzE,0DAA0D;gBAC1D,iGAAiG;gBACjG,wEAAwE;gBACxE,0BAA0B,EAAE,CAAC;YAC/B,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACrB,YAAY,CAAC;oBACX,KAAK;oBACL,mBAAmB;oBACnB,iBAAiB;oBACjB,yBAAyB;oBACzB,qBAAqB;iBACtB,CAAC,CAAC;YACL,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,4BAA4B,EAAE,CAAC;YACjC,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,0BAA0B,EAAE,CAAC;YAC/B,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;gBACrB,YAAY,CAAC;oBACX,KAAK;oBACL,mBAAmB;oBACnB,iBAAiB;oBACjB,yBAAyB;oBACzB,qBAAqB;iBACtB,CAAC,CAAC;YACL,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;gBACf,4BAA4B,CAAC;YAC/B,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;gBACX,iFAAiF;gBACjF,uDAAuD;gBACvD,sCAAsC,CAAC,KAAK,CAAC,CAAC;YAChD,CAAC,EACD,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,WAAW,IACvB,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAgBF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;IACxE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAEnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,uDAAuD;IACvD,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,IAAC,aAAa,EAAE,uBAAuB,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,oBAAO,YAAY;QAC3G,oBAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,yJAAyJ;YACzJ,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,KAAK,IAAC,SAAS,EAAE,gBAAgB,IAAG,YAAY,CAAC,OAAO,CAAC,CAAS,GACvF,CACU,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, FormEvent, useCallback, useRef } from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { useLocale } from '../../localization';\nimport { Announcer } from '../Announcer';\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  ITextField,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\n\nimport { isEnterKeyEventFromCompositionSession, nullToUndefined } from '../utils';\nimport {\n  TagData,\n  findMentionTagForSelection,\n  findNewSelectionIndexForMention,\n  findStringsDiffIndexes,\n  getDisplayNameForMentionSuggestion,\n  getValidatedIndexInRange,\n  htmlStringForMentionSuggestion,\n  textToTagParser,\n  updateHTML\n} from './mentionTagUtils';\nimport { inputButtonStyle, inputButtonTooltipStyle, iconWrapperStyle } from '../styles/InputBoxComponent.style';\n\nimport { Caret } from 'textarea-caret-ts';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { useTheme } from '../../theming';\n\nimport { MentionLookupOptions, _MentionPopover, Mention } from '../MentionPopover';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nconst DEFAULT_MENTION_TRIGGER = '@';\n\n/**\n * Props for the TextFieldWithMention component.\n *\n * @private\n */\nexport interface TextFieldWithMentionProps {\n  textFieldProps: ITextFieldProps;\n  dataUiId?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  supportNewline?: boolean;\n  mentionLookupOptions?: MentionLookupOptions;\n}\n\n/**\n * @private\n */\nexport const TextFieldWithMention = (props: TextFieldWithMentionProps): JSX.Element => {\n  const {\n    textFieldProps,\n    dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    mentionLookupOptions\n  } = props;\n  const inputBoxRef = useRef<HTMLDivElement>(null);\n\n  // Current suggestion list, provided by the callback\n  const [mentionSuggestions, setMentionSuggestions] = useState<Mention[]>([]);\n\n  // Current suggestion list, provided by the callback\n  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState<number | undefined>(undefined);\n\n  // Index of the current trigger character in the text field\n  const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = useState<number>(-1);\n\n  const [inputTextValue, setInputTextValue] = useState<string>('');\n\n  // Internal value for text value prop\n  const [internalTextValue, setInternalTextValue] = useState<string>('');\n\n  const [tagsValue, setTagsValue] = useState<TagData[]>([]);\n\n  // Index of the previous selection start in the text field\n  const [selectionStartValue, setSelectionStartValue] = useState<number | undefined>();\n\n  // Index of the previous selection end in the text field\n  const [selectionEndValue, setSelectionEndValue] = useState<number | undefined>();\n\n  // Boolean value to check if onMouseDown event should be handled during select as selection range\n  // for onMouseDown event is not updated yet and the selection range for mouse click/taps will be\n  // updated in onSelect event if needed.\n  const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = useState<boolean>(true);\n\n  // Boolean flag to check if mouse/touch move event should be handled\n  const [shouldHandleMoveEvent, setShouldHandleMoveEvent] = useState<boolean>(false);\n\n  // Indexes of start of touch/mouse selection\n  const [interactionStartSelection, setInteractionStartSelection] = useState<\n    { start: number | undefined; end: number | undefined } | undefined\n  >();\n\n  // Caret position in the text field\n  const [caretPosition, setCaretPosition] = useState<Caret.Position | undefined>(undefined);\n\n  // Index of where the caret is in the text field\n  const [caretIndex, setCaretIndex] = useState<number | undefined>(undefined);\n\n  const localeStrings = useLocale().strings;\n\n  // Set mention suggestions\n  const updateMentionSuggestions = useCallback(\n    (suggestions: Mention[]) => {\n      setMentionSuggestions(suggestions);\n    },\n    [setMentionSuggestions]\n  );\n\n  useEffect(() => {\n    setInternalTextValue(textValue);\n    // update mention suggestions before the next render cycle\n    updateMentionSuggestions([]);\n  }, [textValue, updateMentionSuggestions]);\n\n  // Parse the text and get the plain text version to display in the input box\n  useEffect(() => {\n    const trigger = mentionLookupOptions?.trigger || DEFAULT_MENTION_TRIGGER;\n    const parsedHTMLData = textToTagParser(internalTextValue, trigger);\n    setInputTextValue(parsedHTMLData.plainText);\n    setTagsValue(parsedHTMLData.tags);\n    updateMentionSuggestions([]);\n  }, [internalTextValue, mentionLookupOptions?.trigger, updateMentionSuggestions]);\n\n  useEffect(() => {\n    // effect for caret index update\n    if (caretIndex === undefined || textFieldRef === undefined || textFieldRef?.current === undefined) {\n      return;\n    }\n    // get validated caret index between 0 and inputTextValue.length otherwise caret will be set to incorrect index\n    const updatedCaretIndex = getValidatedIndexInRange({\n      min: 0,\n      max: inputTextValue.length,\n      currentValue: caretIndex\n    });\n    textFieldRef?.current?.setSelectionRange(updatedCaretIndex, updatedCaretIndex);\n    setSelectionStartValue(updatedCaretIndex);\n    setSelectionEndValue(updatedCaretIndex);\n  }, [caretIndex, inputTextValue, textFieldRef, setSelectionStartValue, setSelectionEndValue]);\n\n  const onSuggestionSelected = useCallback(\n    (suggestion: Mention) => {\n      let selectionEnd = textFieldRef?.current?.selectionEnd || -1;\n      if (selectionEnd < 0) {\n        selectionEnd = 0;\n      } else if (selectionEnd > inputTextValue.length) {\n        selectionEnd = inputTextValue.length;\n      }\n      const oldPlainText = inputTextValue;\n      const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);\n\n      // update plain text with the mention html text\n      const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n      // update html text with updated plain text\n      const updatedContent = updateHTML({\n        htmlText: internalTextValue,\n        oldPlainText,\n        tags: tagsValue,\n        startIndex: currentTriggerStartIndex,\n        oldPlainTextEndIndex: selectionEnd,\n        change: mention,\n        mentionTrigger: triggerText\n      });\n\n      setInternalTextValue(updatedContent.updatedHTML);\n      const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);\n      const newCaretIndex = currentTriggerStartIndex + displayName.length + triggerText.length;\n      // move the caret in the text field to the end of the mention plain text\n      setCaretIndex(newCaretIndex);\n      setSelectionEndValue(newCaretIndex);\n      setSelectionStartValue(newCaretIndex);\n      setCurrentTriggerStartIndex(-1);\n      updateMentionSuggestions([]);\n      // set focus back to text field\n      textFieldRef?.current?.focus();\n      setActiveSuggestionIndex(undefined);\n      onChange && onChange(undefined, updatedContent.updatedHTML);\n    },\n    [\n      textFieldRef,\n      inputTextValue,\n      currentTriggerStartIndex,\n      mentionLookupOptions?.trigger,\n      onChange,\n      internalTextValue,\n      tagsValue,\n      updateMentionSuggestions,\n      localeStrings\n    ]\n  );\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      // caretIndex should be set to undefined when the user is typing\n      setCaretIndex(undefined);\n      // shouldHandleOnMouseDownDuringSelect should be set to false after the last mouse down event.\n      // it shouldn't be updated in onMouseUp\n      // as onMouseUp can be triggered before or after onSelect event\n      // because its order depends on mouse events not selection.\n      setShouldHandleOnMouseDownDuringSelect(false);\n\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      let isActiveSuggestionIndexUpdated = false;\n      if (mentionSuggestions.length > 0) {\n        if (ev.key === 'ArrowUp') {\n          ev.preventDefault();\n          const newActiveIndex =\n            activeSuggestionIndex === undefined\n              ? mentionSuggestions.length - 1\n              : Math.max(activeSuggestionIndex - 1, 0);\n          setActiveSuggestionIndex(newActiveIndex);\n          isActiveSuggestionIndexUpdated = true;\n        } else if (ev.key === 'ArrowDown') {\n          ev.preventDefault();\n          const newActiveIndex =\n            activeSuggestionIndex === undefined\n              ? 0\n              : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);\n          setActiveSuggestionIndex(newActiveIndex);\n          isActiveSuggestionIndexUpdated = true;\n        } else if (ev.key === 'Escape') {\n          updateMentionSuggestions([]);\n          // reset active suggestion index when suggestions are closed\n          setActiveSuggestionIndex(undefined);\n          isActiveSuggestionIndexUpdated = true;\n        }\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n\n        // If we are looking up a mention, select the focused suggestion\n        if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {\n          const selectedMention = mentionSuggestions[activeSuggestionIndex];\n          if (selectedMention) {\n            onSuggestionSelected(selectedMention);\n            return;\n          }\n        }\n\n        onEnterKeyDown && onEnterKeyDown();\n      } else if (!isActiveSuggestionIndexUpdated) {\n        // Update the active suggestion index if the user is typing,\n        // otherwise the focus will be lost\n        setActiveSuggestionIndex(undefined);\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [\n      onEnterKeyDown,\n      onKeyDown,\n      supportNewline,\n      mentionSuggestions,\n      activeSuggestionIndex,\n      onSuggestionSelected,\n      updateMentionSuggestions\n    ]\n  );\n\n  const debouncedQueryUpdate = useDebouncedCallback(async (query: string) => {\n    let suggestions = (await mentionLookupOptions?.onQueryUpdated(query)) ?? [];\n    suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');\n    if (suggestions.length === 0) {\n      setActiveSuggestionIndex(undefined);\n    } else if (activeSuggestionIndex === undefined) {\n      // Set the active to the first, if it's not already set\n      setActiveSuggestionIndex(0);\n    }\n    updateMentionSuggestions(suggestions);\n  }, 500);\n\n  // Update selections index in mention to navigate by words\n  const updateSelectionIndexesWithMentionIfNeeded = useCallback(\n    ({\n      event,\n      inputTextValue,\n      selectionEndValue,\n      selectionStartValue,\n      tagsValue\n    }: {\n      event: FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n      inputTextValue: string;\n      selectionEndValue?: number;\n      selectionStartValue?: number;\n      tagsValue: TagData[];\n    }): void => {\n      let updatedStartIndex = event.currentTarget.selectionStart;\n      let updatedEndIndex = event.currentTarget.selectionEnd;\n      if (\n        event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&\n        event.currentTarget.selectionStart !== null &&\n        event.currentTarget.selectionStart !== -1\n      ) {\n        // just a caret movement/usual typing or deleting\n        const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n        // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n        if (\n          mentionTag !== undefined &&\n          mentionTag.plainTextBeginIndex !== undefined &&\n          event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n          event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n        ) {\n          // get updated selection index\n          const newSelectionIndex = findNewSelectionIndexForMention({\n            tag: mentionTag,\n            textValue: inputTextValue,\n            currentSelectionIndex: event.currentTarget.selectionStart,\n            previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n          });\n          updatedStartIndex = newSelectionIndex;\n          updatedEndIndex = newSelectionIndex;\n        }\n      } else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {\n        // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click\n        if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {\n          // the selection start is changed\n          const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);\n          // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n          if (\n            mentionTag !== undefined &&\n            mentionTag.plainTextBeginIndex !== undefined &&\n            event.currentTarget.selectionStart > mentionTag.plainTextBeginIndex &&\n            event.currentTarget.selectionStart < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n          ) {\n            updatedStartIndex = findNewSelectionIndexForMention({\n              tag: mentionTag,\n              textValue: inputTextValue,\n              currentSelectionIndex: event.currentTarget.selectionStart,\n              previousSelectionIndex: selectionStartValue ?? inputTextValue.length\n            });\n          }\n        }\n        if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {\n          // the selection end is changed\n          const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);\n          // don't include boundary cases to show correct selection, otherwise it will show selection at mention boundaries\n          if (\n            mentionTag !== undefined &&\n            mentionTag.plainTextBeginIndex !== undefined &&\n            event.currentTarget.selectionEnd > mentionTag.plainTextBeginIndex &&\n            event.currentTarget.selectionEnd < (mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex)\n          ) {\n            updatedEndIndex = findNewSelectionIndexForMention({\n              tag: mentionTag,\n              textValue: inputTextValue,\n              currentSelectionIndex: event.currentTarget.selectionEnd,\n              previousSelectionIndex: selectionEndValue ?? inputTextValue.length\n            });\n          }\n        }\n      }\n      // e.currentTarget.selectionDirection should be set to handle shift + arrow keys\n      if (event.currentTarget.selectionDirection === null) {\n        event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);\n      } else {\n        event.currentTarget.setSelectionRange(\n          updatedStartIndex,\n          updatedEndIndex,\n          event.currentTarget.selectionDirection\n        );\n      }\n      setSelectionStartValue(nullToUndefined(updatedStartIndex));\n      setSelectionEndValue(nullToUndefined(updatedEndIndex));\n    },\n    [setSelectionStartValue, setSelectionEndValue]\n  );\n\n  const handleOnSelect = useCallback(\n    ({\n      event,\n      inputTextValue,\n      tags,\n      shouldHandleOnMouseDownDuringSelect,\n      selectionStartValue,\n      selectionEndValue,\n      interactionStartSelection\n    }: {\n      event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n      inputTextValue: string;\n      tags: TagData[];\n      shouldHandleOnMouseDownDuringSelect: boolean;\n      selectionStartValue?: number;\n      selectionEndValue?: number;\n      interactionStartSelection?: { start: number | undefined; end: number | undefined };\n    }): void => {\n      if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputTextValue.length) {\n        // entire text is selected, no need to change anything\n        setSelectionStartValue(event.currentTarget.selectionStart);\n        setSelectionEndValue(event.currentTarget.selectionEnd);\n        setInteractionStartSelection(undefined);\n        setShouldHandleOnMouseDownDuringSelect(false);\n      } else if (shouldHandleOnMouseDownDuringSelect) {\n        if (\n          interactionStartSelection !== undefined &&\n          (interactionStartSelection.start !== event.currentTarget.selectionStart ||\n            interactionStartSelection.end !== event.currentTarget.selectionEnd)\n        ) {\n          // selection was changed by mouse\n          // for mouse selection only, it's possible to start selection in the middle of a word in a mention\n          // because of this when event.currentTarget.selectionStart === mouseMoveStartPoint.start\n          // selectionStartValue for updateSelectionIndexesWithMentionIfNeeded should be set\n          // to the end of the input to mimic selection from right to left for the left selection index\n          const updatedSelectionStartValue =\n            event.currentTarget.selectionStart === interactionStartSelection.start\n              ? inputTextValue.length\n              : interactionStartSelection.start;\n          // selectionStart is always less than selectionEnd so sometimes selectionEnd is user's start of the selection\n          // so when event.currentTarget.selectionEnd === mouseMoveStartPoint.end\n          // selectionEndValue for updateSelectionIndexesWithMentionIfNeeded should be set\n          // to the beginning of the input to mimic selection from left to right for the right selection index\n          const updatedSelectionEndValue =\n            event.currentTarget.selectionEnd === interactionStartSelection.end ? 0 : interactionStartSelection.end;\n          updateSelectionIndexesWithMentionIfNeeded({\n            event,\n            inputTextValue,\n            selectionStartValue: updatedSelectionStartValue,\n            selectionEndValue: updatedSelectionEndValue,\n            tagsValue: tags\n          });\n          setInteractionStartSelection(undefined);\n          setShouldHandleOnMouseDownDuringSelect(false);\n        } else if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionEnd !== null) {\n          // on select was triggered by mouse down/up with no movement\n          const mentionTag = findMentionTagForSelection(tags, event.currentTarget.selectionStart);\n          if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {\n            // handle mention click by selecting the whole mention\n            // if the selection is not on the bounds of the mention\n            // disable selection for clicks on mention bounds\n            const mentionEndIndex = mentionTag.plainTextEndIndex ?? mentionTag.plainTextBeginIndex;\n\n            if (\n              event.currentTarget.selectionStart !== event.currentTarget.selectionEnd &&\n              event.currentTarget.selectionEnd > mentionEndIndex\n            ) {\n              // handle triple click when the text starts from mention\n              if (event.currentTarget.selectionDirection === null) {\n                event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, event.currentTarget.selectionEnd);\n              } else {\n                event.currentTarget.setSelectionRange(\n                  mentionTag.plainTextBeginIndex,\n                  event.currentTarget.selectionEnd,\n                  event.currentTarget.selectionDirection\n                );\n              }\n              setSelectionStartValue(mentionTag.plainTextBeginIndex);\n              setSelectionEndValue(event.currentTarget.selectionEnd);\n            } else if (\n              event.currentTarget.selectionStart !== event.currentTarget.selectionEnd ||\n              (event.currentTarget.selectionStart !== mentionTag.plainTextBeginIndex &&\n                event.currentTarget.selectionStart !== mentionEndIndex)\n            ) {\n              if (event.currentTarget.selectionDirection === null) {\n                event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex);\n              } else {\n                event.currentTarget.setSelectionRange(\n                  mentionTag.plainTextBeginIndex,\n                  mentionEndIndex,\n                  event.currentTarget.selectionDirection\n                );\n              }\n              setSelectionStartValue(mentionTag.plainTextBeginIndex);\n              setSelectionEndValue(mentionEndIndex);\n            } else {\n              // bounds of the mention were selected\n              setSelectionStartValue(event.currentTarget.selectionStart);\n              setSelectionEndValue(event.currentTarget.selectionEnd);\n            }\n          } else {\n            // not a mention tag\n            setSelectionStartValue(event.currentTarget.selectionStart);\n            setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));\n          }\n          setInteractionStartSelection(undefined);\n        }\n      } else {\n        // selection was changed by keyboard\n        updateSelectionIndexesWithMentionIfNeeded({\n          event,\n          inputTextValue,\n          selectionStartValue,\n          selectionEndValue,\n          tagsValue: tags\n        });\n      }\n    },\n    [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]\n  );\n\n  type HandleOnChangeProps = {\n    currentSelectionEnd?: number;\n    currentSelectionStart?: number;\n    currentTriggerStartIndex: number;\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>;\n    htmlTextValue: string;\n    inputTextValue: string;\n    previousSelectionEnd?: number;\n    previousSelectionStart?: number;\n    tagsValue: TagData[];\n    updatedValue?: string;\n  };\n\n  const handleOnChange = useCallback(\n    async ({\n      currentSelectionEnd,\n      currentSelectionStart,\n      currentTriggerStartIndex,\n      event,\n      htmlTextValue,\n      inputTextValue,\n      previousSelectionEnd,\n      previousSelectionStart,\n      tagsValue,\n      updatedValue\n    }: HandleOnChangeProps): Promise<void> => {\n      debouncedQueryUpdate.cancel();\n      if (event.currentTarget === null) {\n        return;\n      }\n      // handle backspace change\n      // onSelect is not called for backspace as selection is not changed and local caret index is outdated\n      setCaretIndex(undefined);\n      const newValue = updatedValue ?? '';\n      const triggerText = mentionLookupOptions?.trigger ?? DEFAULT_MENTION_TRIGGER;\n\n      const newTextLength = newValue.length;\n      // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly\n      const currentSelectionEndValue = getValidatedIndexInRange({\n        min: 0,\n        max: newTextLength,\n        currentValue: currentSelectionEnd\n      });\n      const currentSelectionStartValue = getValidatedIndexInRange({\n        min: 0,\n        max: newTextLength,\n        currentValue: currentSelectionStart\n      });\n      const previousSelectionStartValue = getValidatedIndexInRange({\n        min: 0,\n        max: inputTextValue.length,\n        currentValue: previousSelectionStart\n      });\n      const previousSelectionEndValue = getValidatedIndexInRange({\n        min: 0,\n        max: inputTextValue.length,\n        currentValue: previousSelectionEnd\n      });\n\n      // If we are enabled for lookups,\n      if (mentionLookupOptions !== undefined) {\n        // Look at the range of the change for a trigger character\n        const triggerPriorIndex = newValue.lastIndexOf(triggerText, currentSelectionEndValue - 1);\n        // Update the caret position, used for positioning the suggestions popover\n        const textField = event.currentTarget;\n        const relativePosition = Caret.getRelativePosition(textField);\n        if (textField.scrollHeight > textField.clientHeight) {\n          relativePosition.top -= textField.scrollTop;\n        }\n        setCaretPosition(relativePosition);\n        if (triggerPriorIndex !== undefined) {\n          // trigger is found\n          const symbolBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex);\n          const isSpaceBeforeTrigger = symbolBeforeTrigger === ' ';\n          // check if \\r (Carriage Return), \\n (Line Feed) or \\r\\n (End Of Line) is before the trigger\n          const isNewLineBeforeTrigger = /\\r|\\n/.exec(symbolBeforeTrigger);\n          const wordAtSelection = newValue.substring(triggerPriorIndex, currentSelectionEndValue);\n          let tagIndex = currentTriggerStartIndex;\n          if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0 && isNewLineBeforeTrigger === null) {\n            // no space before the trigger, it's not a beginning of the line and no new line before  <- continuation of the previous word\n            tagIndex = -1;\n            setCurrentTriggerStartIndex(tagIndex);\n          } else if (wordAtSelection === triggerText) {\n            // start of the mention\n            tagIndex = currentSelectionEndValue - triggerText.length;\n            if (tagIndex < 0) {\n              tagIndex = 0;\n            }\n            setCurrentTriggerStartIndex(tagIndex);\n          }\n          if (tagIndex === -1) {\n            updateMentionSuggestions([]);\n          } else {\n            // In the middle of a @mention lookup\n            if (tagIndex > -1) {\n              const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);\n              if (query !== undefined) {\n                await debouncedQueryUpdate(query);\n              }\n            }\n          }\n        }\n      }\n\n      const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({\n        oldText: inputTextValue,\n        newText: newValue,\n        previousSelectionStart: previousSelectionStartValue,\n        previousSelectionEnd: previousSelectionEndValue,\n        currentSelectionStart: currentSelectionStartValue,\n        currentSelectionEnd: currentSelectionEndValue\n      });\n\n      const change = newValue.substring(changeStart, newChangeEnd);\n      const updatedContent = updateHTML({\n        htmlText: htmlTextValue,\n        oldPlainText: inputTextValue,\n        tags: tagsValue,\n        startIndex: changeStart,\n        oldPlainTextEndIndex: oldChangeEnd,\n        change,\n        mentionTrigger: triggerText\n      });\n      setInternalTextValue(updatedContent.updatedHTML);\n\n      // update caret index if needed\n      if (updatedContent.updatedSelectionIndex !== undefined) {\n        setCaretIndex(updatedContent.updatedSelectionIndex);\n        setSelectionEndValue(updatedContent.updatedSelectionIndex);\n        setSelectionStartValue(updatedContent.updatedSelectionIndex);\n      }\n\n      onChange && onChange(event, updatedContent.updatedHTML);\n    },\n    [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]\n  );\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnMove = useCallback(\n    ({\n      event,\n      selectionStartValue,\n      selectionEndValue,\n      interactionStartSelection,\n      shouldHandleMoveEvent\n    }: {\n      event: React.UIEvent<HTMLInputElement | HTMLTextAreaElement>;\n      selectionStartValue: number | undefined;\n      selectionEndValue: number | undefined;\n      interactionStartSelection: { start: number | undefined; end: number | undefined } | undefined;\n      shouldHandleMoveEvent: boolean;\n    }) => {\n      if (\n        shouldHandleMoveEvent &&\n        interactionStartSelection === undefined &&\n        (event.currentTarget.selectionStart !== selectionStartValue ||\n          event.currentTarget.selectionEnd !== selectionEndValue)\n      ) {\n        setInteractionStartSelection({\n          start: nullToUndefined(event.currentTarget.selectionStart),\n          end: nullToUndefined(event.currentTarget.selectionEnd)\n        });\n      }\n    },\n    []\n  );\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnInteractionStarted = useCallback(() => {\n    // reset caret index as a new selection is started or cursor position will be changed\n    setCaretIndex(undefined);\n    setInteractionStartSelection(undefined);\n    setShouldHandleMoveEvent(true);\n    setShouldHandleOnMouseDownDuringSelect(true);\n  }, []);\n\n  // Adjust the selection range based on a mouse / touch interaction\n  const handleOnInteractionCompleted = useCallback(() => {\n    setShouldHandleMoveEvent(false);\n  }, []);\n\n  const announcerText = useMemo(() => {\n    if (activeSuggestionIndex === undefined) {\n      return undefined;\n    }\n    const currentMention = mentionSuggestions[activeSuggestionIndex ?? 0];\n    return currentMention?.displayText.length > 0\n      ? currentMention?.displayText\n      : localeStrings.participantItem.displayNamePlaceholder;\n  }, [activeSuggestionIndex, mentionSuggestions, localeStrings.participantItem.displayNamePlaceholder]);\n\n  return (\n    <>\n      {mentionSuggestions.length > 0 && (\n        <_MentionPopover\n          suggestions={mentionSuggestions}\n          activeSuggestionIndex={activeSuggestionIndex}\n          target={inputBoxRef}\n          targetPositionOffset={caretPosition}\n          onRenderSuggestionItem={mentionLookupOptions?.onRenderSuggestionItem}\n          onSuggestionSelected={onSuggestionSelected}\n          onDismiss={() => {\n            updateMentionSuggestions([]);\n          }}\n        />\n      )}\n      {announcerText !== undefined && <Announcer announcementString={announcerText} ariaLive={'polite'} />}\n      <TextField\n        {...textFieldProps}\n        data-ui-id={dataUiId}\n        value={inputTextValue}\n        onChange={(e, newValue) => {\n          // Remove when switching to react 17+, currently needed because of https://legacy.reactjs.org/docs/legacy-event-pooling.html\n          // Prevents React from resetting event's properties\n          e.persist();\n          setInputTextValue(newValue ?? '');\n          handleOnChange({\n            event: e,\n            tagsValue,\n            htmlTextValue: internalTextValue,\n            inputTextValue,\n            currentTriggerStartIndex,\n            previousSelectionStart: nullToUndefined(selectionStartValue),\n            previousSelectionEnd: nullToUndefined(selectionEndValue),\n            currentSelectionStart: nullToUndefined(e.currentTarget.selectionStart),\n            currentSelectionEnd: nullToUndefined(e.currentTarget.selectionEnd),\n            updatedValue: newValue\n          });\n        }}\n        onSelect={(e) => {\n          // update selection if needed\n          if (caretIndex !== undefined) {\n            // sometimes setting selectionRage in effect for updating caretIndex doesn't work as expected and\n            // onSelect still returns outdated value for cursor position\n            // e.g. when user select some text and a first name in a mention then delete or type something else\n            if (caretIndex !== e.currentTarget.selectionStart || caretIndex !== e.currentTarget.selectionEnd) {\n              e.currentTarget.setSelectionRange(caretIndex, caretIndex);\n            }\n            // caret index should not be set to undefined here\n            // as it will cause issues when suggestion is selected by mouse\n            // caret index will be set to undefined during keyboard/mouse or touch interactions\n            return;\n          }\n          handleOnSelect({\n            event: e,\n            inputTextValue,\n            shouldHandleOnMouseDownDuringSelect,\n            selectionEndValue,\n            selectionStartValue,\n            tags: tagsValue,\n            interactionStartSelection\n          });\n        }}\n        onMouseDown={() => {\n          // as events order is onMouseDown -> onMouseMove -> onMouseUp -> onSelect -> onClick\n          // onClick and onMouseDown can't handle clicking on mention event because\n          // onMouseDown doesn't have correct selectionRange yet and\n          // onClick already has wrong range as it's called after onSelect that updates the selection range\n          // so we need to handle onMouseDown to prevent onSelect default behavior\n          handleOnInteractionStarted();\n        }}\n        onMouseMove={(event) => {\n          handleOnMove({\n            event,\n            selectionStartValue,\n            selectionEndValue,\n            interactionStartSelection,\n            shouldHandleMoveEvent\n          });\n        }}\n        onMouseUp={() => {\n          handleOnInteractionCompleted();\n        }}\n        onTouchStart={() => {\n          handleOnInteractionStarted();\n        }}\n        onTouchMove={(event) => {\n          handleOnMove({\n            event,\n            selectionStartValue,\n            selectionEndValue,\n            interactionStartSelection,\n            shouldHandleMoveEvent\n          });\n        }}\n        onTouchEnd={() => {\n          handleOnInteractionCompleted;\n        }}\n        onBlur={() => {\n          // setup shouldHandleOnMouseDownDuringSelect to false when text field loses focus\n          // as the click should be handled by text field anymore\n          setShouldHandleOnMouseDownDuringSelect(false);\n        }}\n        onKeyDown={onTextFieldKeyDown}\n        elementRef={inputBoxRef}\n      />\n    </>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/index.d.ts

@@ -9,6 +9,8 @@ export { _MentionPopover } from './MentionPopover';
 export { ImageGallery } from './ImageGallery';
 export type { ImageGalleryStrings } from './ImageGallery';
 export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';
+export { RTESendBox } from './RTE/RTESendBox';
+export type { RTESendBoxProps } from './RTE/RTESendBox';
 export type { _MentionPopoverProps, MentionLookupOptions, MentionDisplayOptions, MentionOptions, Mention, MentionPopoverStrings } from './MentionPopover';
 export type { ImageGalleryProps, ImageGalleryImageProps } from './ImageGallery';
 export type { ActiveFileUpload } from './SendBox';

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

@@ -7,6 +7,8 @@ export { SendBox } from './SendBox';
 /* @conditional-compile-remove(mention) */
 export { _MentionPopover } from './MentionPopover';
 export { ImageGallery } from './ImageGallery';
+/* @conditional-compile-remove(rich-text-editor) */
+export { RTESendBox } from './RTE/RTESendBox';
 export { MessageStatusIndicator } from './MessageStatusIndicator';
 export { MessageThread } from './MessageThread';
 export { StreamMedia } from './StreamMedia';