@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/MentionInput/index.native.js

@@ -0,0 +1,648 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var MentionInput_exports = {};
+__export(MentionInput_exports, {
+  MentionInput: () => MentionInput
+});
+module.exports = __toCommonJS(MentionInput_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_tamagui2 = require("tamagui");
+var import_react2 = require("@floating-ui/react");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_floatingList = require("../../shared/floatingList.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_zIndex = require("../../shared/zIndex.native.js");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_utils = require("../../shared/utils.native.js");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_TextArea = require("../TextArea/index.native.js");
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
+var estimatedItemHeight = 48;
+var blurCloseDelayMs = 150;
+var zeroWidthSpace = "\u200B";
+var MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack, {
+  padding: "$3",
+  alignItems: "center",
+  cursor: "pointer",
+  hoverStyle: {
+    backgroundColor: import_colorRamps.formInputColors.background.focus
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: import_colorRamps.formInputColors.background.base
+      },
+      false: {
+        backgroundColor: "transparent"
+      }
+    }
+  }
+});
+function MentionInput(props) {
+  var _ref, _ref1, _panel_y, _panel_x;
+  var {
+    defaultValue,
+    form,
+    mentions = [],
+    placeholder = "Type @ to mention someone",
+    minHeight: minHeightProp,
+    maxHeight: maxHeightProp,
+    autoResize = false,
+    onMentionSelect,
+    onTextChange,
+    textAreaProps,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    skeleton,
+    compact,
+    id: idProp
+  } = (0, import_tamagui.useProps)(props);
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var resolvedSizeToken = size || knobProps.sizeToken;
+  var minHeight = minHeightProp !== null && minHeightProp !== void 0 ? minHeightProp : (0, import_utils.getFieldHeight)(resolvedSizeToken, 3);
+  var maxHeight = maxHeightProp !== null && maxHeightProp !== void 0 ? maxHeightProp : (0, import_utils.getFieldHeight)(resolvedSizeToken, 8);
+  var minRows = Math.max(1, Math.round(minHeight / 20));
+  var maxRows = Math.max(minRows, Math.round(maxHeight / 20));
+  var [text, setText] = (0, import_react.useState)("");
+  var [mentionList, setMentionList] = (0, import_react.useState)([]);
+  var [showSuggestions, setShowSuggestions] = (0, import_react.useState)(false);
+  var [currentTrigger, setCurrentTrigger] = (0, import_react.useState)(null);
+  var [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  var [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  var [cursorPosition, setCursorPosition] = (0, import_react.useState)(0);
+  var textAreaRef = (0, import_react.useRef)(null);
+  var prevCursorRef = (0, import_react.useRef)(0);
+  var prevQueryRef = (0, import_react.useRef)("");
+  var blurTimeoutRef = (0, import_react.useRef)(null);
+  var fieldRef = (0, import_react.useRef)(null);
+  var triggerMap = (0, import_react.useMemo)(function () {
+    var map = /* @__PURE__ */new Map();
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = mentions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var config = _step.value;
+        map.set(config.trigger, config);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return map;
+  }, [mentions]);
+  var checkForTrigger = (0, import_react.useCallback)(function (currentText, position) {
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = triggerMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var [trigger, config] = _step.value;
+        var _config_allowSpace;
+        var allowSpace = (_config_allowSpace = config.allowSpace) !== null && _config_allowSpace !== void 0 ? _config_allowSpace : false;
+        var wordStart = position;
+        while (wordStart > 0) {
+          var char = currentText[wordStart - 1];
+          if (char === "\n") break;
+          if (char === " " && !allowSpace) break;
+          wordStart--;
+        }
+        var currentWord = currentText.slice(wordStart, position);
+        if (currentWord.startsWith(trigger)) {
+          var query = currentWord.slice(trigger.length);
+          return {
+            trigger,
+            query,
+            wordStart
+          };
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return null;
+  }, [triggerMap]);
+  var getFilteredSuggestions = (0, import_react.useCallback)(function (trigger, query) {
+    var config = triggerMap.get(trigger);
+    if (!config) return [];
+    return config.data.filter(function (item) {
+      return item.display.toLowerCase().includes(query.toLowerCase()) || item.id.toLowerCase().includes(query.toLowerCase());
+    });
+  }, [triggerMap]);
+  var suggestions = (0, import_react.useMemo)(function () {
+    return showSuggestions && currentTrigger ? getFilteredSuggestions(currentTrigger, searchQuery) : [];
+  }, [showSuggestions, currentTrigger, searchQuery, getFilteredSuggestions]);
+  var hasSuggestions = suggestions.length > 0;
+  var panel = (0, import_FloatingPanel.useFloatingPanel)({
+    open: hasSuggestions,
+    onOpenChange: function onOpenChange(nextOpen) {
+      if (!nextOpen) {
+        setShowSuggestions(false);
+        setCurrentTrigger(null);
+        prevQueryRef.current = "";
+      }
+    },
+    fitContent: true
+  });
+  var dismiss = (0, import_react2.useDismiss)(panel.context, {
+    outsidePressEvent: "click",
+    ancestorScroll: false
+  });
+  var {
+    getFloatingProps
+  } = (0, import_react2.useInteractions)([dismiss]);
+  (0, import_react.useEffect)(function () {
+    var _fieldRef_current;
+    (_fieldRef_current = fieldRef.current) === null || _fieldRef_current === void 0 ? void 0 : _fieldRef_current.handleChange({
+      text,
+      mentions: mentionList
+    });
+  }, [text, mentionList]);
+  (0, import_react.useEffect)(function () {
+    return function () {
+      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    };
+  }, []);
+  var updateTriggerState = (0, import_react.useCallback)(function (currentText, position) {
+    var triggerInfo = checkForTrigger(currentText, position);
+    if (triggerInfo) {
+      setCurrentTrigger(triggerInfo.trigger);
+      setSearchQuery(triggerInfo.query);
+      setShowSuggestions(true);
+      if (triggerInfo.query !== prevQueryRef.current) {
+        setSelectedIndex(0);
+      }
+      prevQueryRef.current = triggerInfo.query;
+    } else {
+      setShowSuggestions(false);
+      setCurrentTrigger(null);
+      prevQueryRef.current = "";
+    }
+  }, [checkForTrigger]);
+  var handleTextChange = (0, import_react.useCallback)(function (newText) {
+    var oldText = text;
+    var editPosition = prevCursorRef.current;
+    var lengthDiff = newText.length - oldText.length;
+    if (lengthDiff !== 0) {
+      setMentionList(function (prev) {
+        return prev.map(function (m) {
+          return {
+            ...m
+          };
+        }).filter(function (mention) {
+          var mentionEnd = mention.position + mention.length;
+          if (editPosition >= mentionEnd) return true;
+          if (editPosition <= mention.position) {
+            mention.position += lengthDiff;
+            var expectedText = `${mention.type}${mention.display}`;
+            var actualText = newText.slice(mention.position, mention.position + mention.length);
+            return actualText === expectedText;
+          }
+          return false;
+        });
+      });
+    }
+    setText(newText);
+    var estimatedCursor = Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
+    setCursorPosition(estimatedCursor);
+    updateTriggerState(newText, estimatedCursor);
+    onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newText);
+  }, [text, updateTriggerState, onTextChange]);
+  var handleSelectionChange = (0, import_react.useCallback)(function (event) {
+    var _event_nativeEvent;
+    var selection = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.selection;
+    if (selection) {
+      prevCursorRef.current = selection.start;
+      setCursorPosition(selection.start);
+      updateTriggerState(text, selection.start);
+    }
+  }, [text, updateTriggerState]);
+  var insertMention = (0, import_react.useCallback)(function (item) {
+    if (!currentTrigger) return;
+    var triggerInfo = checkForTrigger(text, cursorPosition);
+    if (!triggerInfo) return;
+    var {
+      wordStart
+    } = triggerInfo;
+    var beforeMention = text.slice(0, wordStart);
+    var afterMention = text.slice(cursorPosition);
+    var mentionText = `${currentTrigger}${item.display}`;
+    var config = triggerMap.get(currentTrigger);
+    var insertSpace = (config === null || config === void 0 ? void 0 : config.insertSpace) !== false;
+    var newText = beforeMention + mentionText + (insertSpace ? " " : "") + afterMention;
+    var insertedLength = mentionText.length + (insertSpace ? 1 : 0);
+    var oldLength = cursorPosition - wordStart;
+    var positionDiff = insertedLength - oldLength;
+    var adjustedMentions = mentionList.map(function (m) {
+      return m.position > wordStart ? {
+        ...m,
+        position: m.position + positionDiff
+      } : m;
+    });
+    var newMention = {
+      type: currentTrigger,
+      id: item.id,
+      display: item.display,
+      position: wordStart,
+      length: mentionText.length
+    };
+    var newCursorPos = wordStart + mentionText.length + (insertSpace ? 1 : 0);
+    setText(newText);
+    setMentionList([...adjustedMentions, newMention]);
+    setCursorPosition(newCursorPos);
+    prevCursorRef.current = newCursorPos;
+    setShowSuggestions(false);
+    setCurrentTrigger(null);
+    prevQueryRef.current = "";
+    onMentionSelect === null || onMentionSelect === void 0 ? void 0 : onMentionSelect(item, currentTrigger);
+    setTimeout(function () {
+      var _textAreaRef_current;
+      return (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.focus();
+    }, 0);
+  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect]);
+  var handleKeyDown = (0, import_react.useCallback)(function (event) {
+    var _event_nativeEvent;
+    if (!showSuggestions || !currentTrigger || suggestions.length === 0) return;
+    var key = event.key || ((_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.key);
+    switch (key) {
+      case "ArrowDown":
+        var _event_preventDefault;
+        (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
+        setSelectedIndex(function (prev) {
+          return prev < suggestions.length - 1 ? prev + 1 : 0;
+        });
+        break;
+      case "ArrowUp":
+        var _event_preventDefault1;
+        (_event_preventDefault1 = event.preventDefault) === null || _event_preventDefault1 === void 0 ? void 0 : _event_preventDefault1.call(event);
+        setSelectedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : suggestions.length - 1;
+        });
+        break;
+      case "Enter":
+        var _event_preventDefault2;
+        (_event_preventDefault2 = event.preventDefault) === null || _event_preventDefault2 === void 0 ? void 0 : _event_preventDefault2.call(event);
+        if (suggestions[selectedIndex]) {
+          insertMention(suggestions[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        var _event_preventDefault3;
+        (_event_preventDefault3 = event.preventDefault) === null || _event_preventDefault3 === void 0 ? void 0 : _event_preventDefault3.call(event);
+        setShowSuggestions(false);
+        break;
+    }
+  }, [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention]);
+  (0, import_react.useEffect)(function () {
+    if (hasSuggestions && panel.refs.floating.current) {
+      var _panel_refs_floating_current_scrollTo, _panel_refs_floating_current;
+      (_panel_refs_floating_current_scrollTo = (_panel_refs_floating_current = panel.refs.floating.current).scrollTo) === null || _panel_refs_floating_current_scrollTo === void 0 ? void 0 : _panel_refs_floating_current_scrollTo.call(_panel_refs_floating_current, {
+        top: Math.max(0, (selectedIndex - 2) * estimatedItemHeight),
+        behavior: "smooth"
+      });
+    }
+  }, [selectedIndex, hasSuggestions, panel.refs.floating]);
+  var handleBlurInternal = (0, import_react.useCallback)(function () {
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
+    }
+    blurTimeoutRef.current = setTimeout(function () {
+      setShowSuggestions(false);
+    }, blurCloseDelayMs);
+  }, []);
+  var handleSuggestionPress = (0, import_react.useCallback)(function (item) {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    insertMention(item);
+  }, [insertMention]);
+  var activeConfig = currentTrigger ? triggerMap.get(currentTrigger) : null;
+  var suggestionsMaxHeight = (_ref = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.menuHeight) !== null && _ref !== void 0 ? _ref : knobProps.sizeToken === "$3" ? 160 : knobProps.sizeToken === "$5" ? 240 : 200;
+  var suggestionsMinWidth = (_ref1 = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.menuWidth) !== null && _ref1 !== void 0 ? _ref1 : knobProps.sizeToken === "$3" ? 180 : knobProps.sizeToken === "$5" ? 240 : 200;
+  var getWebTextAreaElement = (0, import_react.useCallback)(function () {
+    if (typeof document === "undefined") return null;
+    var current = textAreaRef.current;
+    if (!current) return null;
+    if (_instanceof(current, HTMLTextAreaElement)) return current;
+    if ("textarea" in current && _instanceof(current.textarea, HTMLTextAreaElement)) {
+      return current.textarea;
+    }
+    if ("_textarea" in current && _instanceof(current._textarea, HTMLTextAreaElement)) {
+      return current._textarea;
+    }
+    if (_instanceof(current, HTMLElement)) {
+      var nested = current.querySelector("textarea");
+      return _instanceof(nested, HTMLTextAreaElement) ? nested : null;
+    }
+    return null;
+  }, []);
+  var getCaretClientRect = (0, import_react.useCallback)(function () {
+    var fallback = DOMRect.fromRect({
+      x: 0,
+      y: 0,
+      width: 1,
+      height: 16
+    });
+    if (typeof window === "undefined" || typeof document === "undefined") return fallback;
+    var textAreaElement = getWebTextAreaElement();
+    if (!textAreaElement) return fallback;
+    var style = window.getComputedStyle(textAreaElement);
+    var textAreaRect = textAreaElement.getBoundingClientRect();
+    var mirror = document.createElement("div");
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.pointerEvents = "none";
+    mirror.style.whiteSpace = "pre-wrap";
+    mirror.style.wordWrap = "break-word";
+    mirror.style.overflowWrap = "anywhere";
+    mirror.style.left = "-9999px";
+    mirror.style.top = "0";
+    mirror.style.width = `${textAreaElement.clientWidth}px`;
+    mirror.style.fontFamily = style.fontFamily;
+    mirror.style.fontSize = style.fontSize;
+    mirror.style.fontWeight = style.fontWeight;
+    mirror.style.fontStyle = style.fontStyle;
+    mirror.style.letterSpacing = style.letterSpacing;
+    mirror.style.lineHeight = style.lineHeight;
+    mirror.style.textTransform = style.textTransform;
+    mirror.style.textIndent = style.textIndent;
+    mirror.style.tabSize = style.tabSize;
+    mirror.style.padding = style.padding;
+    mirror.style.border = style.border;
+    mirror.style.boxSizing = style.boxSizing;
+    mirror.textContent = text.slice(0, cursorPosition);
+    var marker = document.createElement("span");
+    marker.textContent = text[cursorPosition] || zeroWidthSpace;
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    try {
+      var markerRect = marker.getBoundingClientRect();
+      var mirrorRect = mirror.getBoundingClientRect();
+      var parsedLineHeight = Number.parseFloat(style.lineHeight);
+      var parsedFontSize = Number.parseFloat(style.fontSize);
+      var lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : Number.isFinite(parsedFontSize) ? parsedFontSize * 1.2 : 18;
+      var relLeft = markerRect.left - mirrorRect.left - textAreaElement.scrollLeft;
+      var relTop = markerRect.top - mirrorRect.top - textAreaElement.scrollTop;
+      var left = textAreaRect.left + relLeft;
+      var top = textAreaRect.top + relTop;
+      return DOMRect.fromRect({
+        x: left,
+        y: top,
+        width: 1,
+        height: lineHeight
+      });
+    } finally {
+      document.body.removeChild(mirror);
+    }
+  }, [getWebTextAreaElement, text, cursorPosition]);
+  (0, import_react.useEffect)(function () {
+    var el = getWebTextAreaElement();
+    if (el) panel.triggerRef.current = el;
+  });
+  (0, import_react.useLayoutEffect)(function () {
+    if (!hasSuggestions) return;
+    var rect = getCaretClientRect();
+    panel.refs.setReference({
+      getBoundingClientRect: function getBoundingClientRect() {
+        return rect;
+      }
+    });
+    panel.update();
+  }, [hasSuggestions, cursorPosition, text]);
+  var suggestionListId = `${id}-suggestions`;
+  var selectedOptionId = hasSuggestions && suggestions[selectedIndex] ? `${id}-option-${suggestions[selectedIndex].id}` : void 0;
+  var floatingDropdown = panel.mounted ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+    ...getFloatingProps({
+      ref: panel.refs.setFloating,
+      style: {
+        position: panel.strategy,
+        top: (_panel_y = panel.y) !== null && _panel_y !== void 0 ? _panel_y : 0,
+        left: (_panel_x = panel.x) !== null && _panel_x !== void 0 ? _panel_x : 0,
+        scrollbarWidth: "none",
+        zIndex: import_zIndex.zIndex.dropdown,
+        overflow: "auto",
+        boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+        opacity: panel.visible ? 1 : 0,
+        transform: panel.visible ? "scale(1)" : "scale(0.96)",
+        transition: import_FloatingPanel.panelTransition,
+        transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left"
+      },
+      onScroll: function onScroll(e) {
+        return panel.updateArrows(e.target);
+      }
+    }),
+    outlineWidth: 0,
+    pointerEvents: panel.visible ? "auto" : "none",
+    backgroundColor: "$background",
+    borderRadius: panel.dropdownRadius,
+    borderWidth: panel.hasBorder ? panel.knobProps.borderRadius.borderWidth : 0,
+    borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
+    paddingVertical: 0,
+    maxHeight: suggestionsMaxHeight,
+    minWidth: suggestionsMinWidth,
+    role: "listbox",
+    id: suggestionListId,
+    "aria-label": "Suggestions",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+      direction: "up",
+      scrollRef: panel.refs.floating,
+      visible: panel.arrowUp,
+      arrowScrollDirRef: panel.arrowScrollDirRef
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.View, {
+      ...panel.knobProps.panelPadding,
+      children: suggestions.map(function (item, index) {
+        var optionId = `${id}-option-${item.id}`;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(MentionSuggestionItem, {
+          ...knobProps.gap,
+          selected: index === selectedIndex,
+          onPress: function onPress() {
+            return handleSuggestionPress(item);
+          },
+          role: "option",
+          id: optionId,
+          "aria-selected": index === selectedIndex,
+          children: [item.avatar && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
+            size: "$2",
+            circular: true,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
+              src: item.avatar
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Fallback, {
+              backgroundColor: import_colorRamps.formInputColors.background.focus,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+                children: item.display[0]
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+            flex: 1,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+              fontSize: knobProps.sizeToken,
+              ...knobProps.body,
+              children: item.display
+            }), item.description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+              fontSize: knobProps.sizeToken,
+              color: "$colorHover",
+              ...knobProps.body,
+              children: item.description
+            })]
+          })]
+        }, item.id);
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+      direction: "down",
+      scrollRef: panel.refs.floating,
+      visible: panel.arrowDown,
+      arrowScrollDirRef: panel.arrowScrollDirRef
+    })]
+  }) : null;
+  var mentionTextArea = function mentionTextArea2(resolvedError, fieldBlurHandler) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TextArea.TextArea, {
+      disabled,
+      readOnly,
+      label,
+      labelProps,
+      error: resolvedError !== null && resolvedError !== void 0 ? resolvedError : errorProp,
+      helperText,
+      required,
+      size,
+      onBlur: function onBlur1() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        handleBlurInternal(...args);
+        if (fieldBlurHandler) {
+          fieldBlurHandler(...args);
+        } else {
+          onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+        }
+      },
+      value: text,
+      onChangeText: handleTextChange,
+      placeholder,
+      autoResize,
+      minRows,
+      maxRows,
+      textAreaRef,
+      textAreaProps: {
+        onSelectionChange: handleSelectionChange,
+        onKeyDown: handleKeyDown,
+        "aria-haspopup": "listbox",
+        "aria-expanded": hasSuggestions,
+        "aria-controls": hasSuggestions ? suggestionListId : void 0,
+        "aria-activedescendant": selectedOptionId,
+        ...textAreaProps
+      }
+    });
+  };
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: size || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: minHeight
+      })]
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [mentionTextArea(), floatingDropdown]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+      defaultValue,
+      form: resolvedForm,
+      mode,
+      name,
+      preserveValue,
+      validators: resolvedValidators,
+      children: function children(field) {
+        fieldRef.current = {
+          handleChange: field.handleChange
+        };
+        var resolvedError = (0, import_utils.getFieldError)(field, errorProp);
+        return mentionTextArea(resolvedError, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur));
+      }
+    }), floatingDropdown]
+  });
+}
+//# sourceMappingURL=index.native.js.map