@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -24,7 +24,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var MentionInput_exports = {};
 __export(MentionInput_exports, {
-  MentionInput: () => MentionInput
+  MentionInput: () => MentionInput,
+  parseMentionValue: () => parseMentionValue
 });
 module.exports = __toCommonJS(MentionInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -41,7 +42,6 @@ var import_FloatingPanel = require("../../FloatingPanel");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_t = require("../../shared/t.native.js");
-var import_InputParts = require("../../InputParts");
 var import_TextArea = require("../TextArea");
 function _instanceof(left, right) {
   "@swc/helpers - instanceof";
@@ -52,6 +52,47 @@ function _instanceof(left, right) {
     return left instanceof right;
   }
 }
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function parseMentionValue(raw) {
+  if (typeof raw === "string") return {
+    text: raw,
+    mentions: []
+  };
+  if (raw && (typeof raw === "undefined" ? "undefined" : _type_of(raw)) === "object" && !Array.isArray(raw)) {
+    var o = raw;
+    return {
+      text: typeof o.text === "string" ? o.text : "",
+      mentions: Array.isArray(o.mentions) ? o.mentions : []
+    };
+  }
+  return {
+    text: "",
+    mentions: []
+  };
+}
+function mentionValuesEqual(a, b) {
+  return a.text === b.text && JSON.stringify(a.mentions) === JSON.stringify(b.mentions);
+}
+function MentionFieldSync(param) {
+  var {
+    fieldValue,
+    current,
+    disabled,
+    onAdopt,
+    children
+  } = param;
+  (0, import_react.useEffect)(function () {
+    if (disabled || fieldValue === void 0) return;
+    var next = parseMentionValue(fieldValue);
+    if (mentionValuesEqual(next, current)) return;
+    onAdopt(next);
+  }, [fieldValue, disabled]);
+  return children;
+}
 var blurCloseDelayMs = 150;
 var zeroWidthSpace = "\u200B";
 var helperFontSizeMap = {
@@ -85,7 +126,7 @@ var MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack,
     }
   }
 });
-var MEDIA_SLOT = 28;
+var MEDIA_SLOT_FALLBACK = 32;
 var SLUG_ID = /^[A-Za-z][\w.-]*$/;
 function MentionMatchText(param) {
   var {
@@ -134,7 +175,7 @@ function mentionForDelete(mentions, cursor, key) {
   });
 }
 function MentionInput(props) {
-  var _ref, _ref1, _panel_y, _panel_x, _helperFontSizeMap_knobProps_sizeToken;
+  var _knobProps_nestedControl_px, _ref, _ref1, _panel_y, _panel_x, _helperFontSizeMap_knobProps_sizeToken;
   var {
     defaultValue,
     form,
@@ -162,7 +203,8 @@ function MentionInput(props) {
     onBlur,
     skeleton,
     compact,
-    id: idProp
+    id: idProp,
+    value: valueProp
   } = (0, import_tamagui.useProps)(props);
   var {
     resolvedForm,
@@ -179,8 +221,9 @@ function MentionInput(props) {
   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 initialValue = parseMentionValue(valueProp !== void 0 ? valueProp : defaultValue);
+  var [text, setText] = (0, import_react.useState)(initialValue.text);
+  var [mentionList, setMentionList] = (0, import_react.useState)(initialValue.mentions);
   var [showSuggestions, setShowSuggestions] = (0, import_react.useState)(false);
   var [currentTrigger, setCurrentTrigger] = (0, import_react.useState)(null);
   var [searchQuery, setSearchQuery] = (0, import_react.useState)("");
@@ -192,6 +235,28 @@ function MentionInput(props) {
   var prevQueryRef = (0, import_react.useRef)("");
   var blurTimeoutRef = (0, import_react.useRef)(null);
   var fieldRef = (0, import_react.useRef)(null);
+  var isControlled = valueProp !== void 0;
+  var displayed = isControlled ? parseMentionValue(valueProp) : {
+    text,
+    mentions: mentionList
+  };
+  var mediaSlot = (_knobProps_nestedControl_px = knobProps.nestedControl.px) !== null && _knobProps_nestedControl_px !== void 0 ? _knobProps_nestedControl_px : MEDIA_SLOT_FALLBACK;
+  var adoptValue = (0, import_react.useCallback)(function (next) {
+    setText(next.text);
+    setMentionList(next.mentions);
+  }, []);
+  var emit = (0, import_react.useCallback)(function (next) {
+    var _fieldRef_current;
+    if (!isControlled) adoptValue(next);
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(next.text);
+    (_fieldRef_current = fieldRef.current) === null || _fieldRef_current === void 0 ? void 0 : _fieldRef_current.handleChange(next);
+  }, [adoptValue, isControlled, onChange, onTextChange]);
+  (0, import_react.useEffect)(function () {
+    if (valueProp === void 0) return;
+    var next = parseMentionValue(valueProp);
+    adoptValue(next);
+  }, [valueProp, adoptValue]);
   var triggerMap = (0, import_react.useMemo)(function () {
     var map = /* @__PURE__ */new Map();
     var _iteratorNormalCompletion = true,
@@ -296,13 +361,6 @@ function MentionInput(props) {
   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);
@@ -343,47 +401,47 @@ function MentionInput(props) {
     return null;
   }, []);
   var handleTextChange = (0, import_react.useCallback)(function (newText) {
-    var oldText = text;
+    var oldText = displayed.text;
     var lengthDiff = newText.length - oldText.length;
     var webElement = getWebTextAreaElement();
     var domCaret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : null;
     var editPosition = domCaret !== null ? Math.max(0, domCaret - Math.max(0, lengthDiff)) : prevCursorRef.current;
+    var nextMentions = displayed.mentions;
     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;
-        });
+      nextMentions = displayed.mentions.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);
+    emit({
+      text: newText,
+      mentions: nextMentions
+    });
     var estimatedCursor = domCaret !== null ? domCaret : Math.max(0, Math.min(editPosition + Math.max(0, lengthDiff), newText.length));
     prevCursorRef.current = estimatedCursor;
     setCursorPosition(estimatedCursor);
     updateTriggerState(newText, estimatedCursor);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newText);
-    onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newText);
-  }, [text, updateTriggerState, onChange, onTextChange, getWebTextAreaElement]);
+  }, [displayed, emit, updateTriggerState, getWebTextAreaElement]);
   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);
+      updateTriggerState(displayed.text, selection.start);
     }
-  }, [text, updateTriggerState]);
+  }, [displayed.text, updateTriggerState]);
   var handleWebSelect = (0, import_react.useCallback)(function () {
     var el = getWebTextAreaElement();
     if (!el || typeof el.selectionStart !== "number") return;
@@ -394,13 +452,13 @@ function MentionInput(props) {
   }, [getWebTextAreaElement, updateTriggerState]);
   var insertMention = (0, import_react.useCallback)(function (item) {
     if (!currentTrigger) return;
-    var triggerInfo = checkForTrigger(text, cursorPosition);
+    var triggerInfo = checkForTrigger(displayed.text, cursorPosition);
     if (!triggerInfo) return;
     var {
       wordStart
     } = triggerInfo;
-    var beforeMention = text.slice(0, wordStart);
-    var afterMention = text.slice(cursorPosition);
+    var beforeMention = displayed.text.slice(0, wordStart);
+    var afterMention = displayed.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;
@@ -408,7 +466,7 @@ function MentionInput(props) {
     var insertedLength = mentionText.length + (insertSpace ? 1 : 0);
     var oldLength = cursorPosition - wordStart;
     var positionDiff = insertedLength - oldLength;
-    var adjustedMentions = mentionList.map(function (m) {
+    var adjustedMentions = displayed.mentions.map(function (m) {
       return m.position > wordStart ? {
         ...m,
         position: m.position + positionDiff
@@ -422,16 +480,16 @@ function MentionInput(props) {
       length: mentionText.length
     };
     var newCursorPos = wordStart + mentionText.length + (insertSpace ? 1 : 0);
-    setText(newText);
-    setMentionList([...adjustedMentions, newMention]);
+    emit({
+      text: newText,
+      mentions: [...adjustedMentions, newMention]
+    });
     setCursorPosition(newCursorPos);
     prevCursorRef.current = newCursorPos;
     setShowSuggestions(false);
     setCurrentTrigger(null);
     prevQueryRef.current = "";
     onMentionSelect === null || onMentionSelect === void 0 ? void 0 : onMentionSelect(item, currentTrigger);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newText);
-    onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newText);
     setTimeout(function () {
       var el = getWebTextAreaElement();
       if (el) {
@@ -442,28 +500,27 @@ function MentionInput(props) {
         (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.focus();
       }
     }, 0);
-  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect, onChange, onTextChange, getWebTextAreaElement]);
+  }, [displayed, cursorPosition, currentTrigger, checkForTrigger, triggerMap, onMentionSelect, emit, getWebTextAreaElement]);
   var removeMention = (0, import_react.useCallback)(function (mention) {
-    var before = text.slice(0, mention.position);
-    var after = text.slice(mention.position + mention.length);
+    var before = displayed.text.slice(0, mention.position);
+    var after = displayed.text.slice(mention.position + mention.length);
     var newText = before + after;
     var removedLen = mention.length;
-    setText(newText);
-    setMentionList(function (prev) {
-      return prev.filter(function (m) {
-        return !(m.position === mention.position && m.id === mention.id);
-      }).map(function (m) {
-        return m.position > mention.position ? {
-          ...m,
-          position: m.position - removedLen
-        } : m;
-      });
+    var nextMentions = displayed.mentions.filter(function (m) {
+      return !(m.position === mention.position && m.id === mention.id);
+    }).map(function (m) {
+      return m.position > mention.position ? {
+        ...m,
+        position: m.position - removedLen
+      } : m;
+    });
+    emit({
+      text: newText,
+      mentions: nextMentions
     });
     var newCursor = mention.position;
     setCursorPosition(newCursor);
     prevCursorRef.current = newCursor;
-    onChange === null || onChange === void 0 ? void 0 : onChange(newText);
-    onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newText);
     updateTriggerState(newText, newCursor);
     setTimeout(function () {
       var el = getWebTextAreaElement();
@@ -472,14 +529,14 @@ function MentionInput(props) {
         el.setSelectionRange(newCursor, newCursor);
       }
     }, 0);
-  }, [text, onChange, onTextChange, updateTriggerState, getWebTextAreaElement]);
+  }, [displayed, emit, updateTriggerState, getWebTextAreaElement]);
   var handleKeyDown = (0, import_react.useCallback)(function (event) {
     var _event_nativeEvent;
     var key = event.key || ((_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.key);
     var webElement = getWebTextAreaElement();
     var caret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : cursorPosition;
     if (key === "Backspace" || key === "Delete") {
-      var mention = mentionForDelete(mentionList, caret, key);
+      var mention = mentionForDelete(displayed.mentions, caret, key);
       if (mention) {
         var _event_preventDefault;
         (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
@@ -527,7 +584,7 @@ function MentionInput(props) {
         setShowSuggestions(false);
         break;
     }
-  }, [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention, mentionList, cursorPosition, removeMention, getWebTextAreaElement]);
+  }, [showSuggestions, currentTrigger, suggestions, selectedIndex, insertMention, displayed, cursorPosition, removeMention, getWebTextAreaElement]);
   var itemRefs = (0, import_react.useRef)([]);
   (0, import_react.useEffect)(function () {
     if (!hasSuggestions) return;
@@ -594,9 +651,9 @@ function MentionInput(props) {
     mirror.style.padding = style.padding;
     mirror.style.border = style.border;
     mirror.style.boxSizing = style.boxSizing;
-    mirror.textContent = text.slice(0, cursorPosition);
+    mirror.textContent = displayed.text.slice(0, cursorPosition);
     var marker = document.createElement("span");
-    marker.textContent = text[cursorPosition] || zeroWidthSpace;
+    marker.textContent = displayed.text[cursorPosition] || zeroWidthSpace;
     mirror.appendChild(marker);
     document.body.appendChild(mirror);
     try {
@@ -618,7 +675,7 @@ function MentionInput(props) {
     } finally {
       document.body.removeChild(mirror);
     }
-  }, [getWebTextAreaElement, text, cursorPosition]);
+  }, [getWebTextAreaElement, displayed.text, cursorPosition]);
   (0, import_react.useEffect)(function () {
     var el = getWebTextAreaElement();
     if (el) panel.triggerRef.current = el;
@@ -632,13 +689,18 @@ function MentionInput(props) {
       }
     });
     panel.update();
-  }, [triggerActive, cursorPosition, text]);
+  }, [triggerActive, cursorPosition, displayed.text]);
   var suggestionListId = `${id}-suggestions`;
   var selectedOptionId = hasSuggestions && suggestions[selectedIndex] ? `${id}-option-${suggestions[selectedIndex].id}` : void 0;
+  var {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = panel.knobProps.elevatedSurface;
   var floatingDropdown = panel.mounted ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
     ...getFloatingProps({
       ref: panel.refs.setFloating,
       style: {
+        ...elevatedSurfaceStyle,
         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,
@@ -656,7 +718,7 @@ function MentionInput(props) {
     }),
     outlineWidth: 0,
     pointerEvents: panel.visible ? "auto" : "none",
-    ...panel.knobProps.elevatedSurface,
+    ...elevatedSurfaceProps,
     borderRadius: panel.dropdownRadius,
     padding: 0,
     maxHeight: suggestionsMaxHeight,
@@ -700,13 +762,14 @@ function MentionInput(props) {
         row reserves the same fixed slot (initials fallback, centered)
         so the text columns share one left edge. */
         suggestionsHaveMedia && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
-          width: MEDIA_SLOT,
-          height: MEDIA_SLOT,
+          width: mediaSlot,
+          height: mediaSlot,
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0,
+          "data-media-slot": mediaSlot,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Avatar, {
-            size: "$2",
+            size: mediaSlot,
             circular: true,
             children: [item.avatar ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Avatar.Image, {
               src: item.avatar
@@ -764,6 +827,7 @@ function MentionInput(props) {
       helperText,
       required,
       size,
+      compact,
       onBlur: function onBlur1() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
@@ -775,7 +839,7 @@ function MentionInput(props) {
           onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
         }
       },
-      value: text,
+      value: displayed.text,
       onChangeText: handleTextChange,
       placeholder,
       autoResize,
@@ -798,17 +862,21 @@ function MentionInput(props) {
     });
   };
   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, {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "rounded",
         width: "100%",
         height: minHeight
-      })]
+      })
     });
   }
   if (!resolvedForm || !name) {
@@ -829,7 +897,16 @@ function MentionInput(props) {
           handleChange: field.handleChange
         };
         var resolvedError = (0, import_utils.getFieldError)(field, errorProp);
-        return mentionTextArea(resolvedError, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur));
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MentionFieldSync, {
+          fieldValue: field.state.value,
+          current: {
+            text,
+            mentions: mentionList
+          },
+          disabled: isControlled,
+          onAdopt: adoptValue,
+          children: mentionTextArea(resolvedError, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur))
+        });
       }
     }), floatingDropdown]
   });