@multiplatform.one/forms 7.4.0 → 7.5.0

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

@@ -9,10 +9,9 @@ import { ScrollArrow } from "../../shared/floatingList.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
 import { zIndex } from "../../shared/zIndex.native.js";
 import { useFloatingPanel, panelTransition } from "../../FloatingPanel/index.native.js";
-import { Field } from "../../fieldLayout.native.js";
+import { Field, FieldLayout } from "../../fieldLayout.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { t } from "../../shared/t.native.js";
-import { Input as InputParts } from "../../InputParts/index.native.js";
 import { TextArea } from "../TextArea/index.native.js";
 function _instanceof(left, right) {
   "@swc/helpers - instanceof";
@@ -23,6 +22,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;
+  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 = {
@@ -56,7 +96,7 @@ var MentionSuggestionItem = styled(XStack, {
     }
   }
 });
-var MEDIA_SLOT = 28;
+var MEDIA_SLOT_FALLBACK = 32;
 var SLUG_ID = /^[A-Za-z][\w.-]*$/;
 function MentionMatchText(param) {
   var {
@@ -105,7 +145,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,
@@ -133,7 +173,8 @@ function MentionInput(props) {
     onBlur,
     skeleton,
     compact,
-    id: idProp
+    id: idProp,
+    value: valueProp
   } = useProps(props);
   var {
     resolvedForm,
@@ -150,8 +191,9 @@ function MentionInput(props) {
   var maxHeight = maxHeightProp !== null && maxHeightProp !== void 0 ? maxHeightProp : getFieldHeight(resolvedSizeToken, 8);
   var minRows = Math.max(1, Math.round(minHeight / 20));
   var maxRows = Math.max(minRows, Math.round(maxHeight / 20));
-  var [text, setText] = useState("");
-  var [mentionList, setMentionList] = useState([]);
+  var initialValue = parseMentionValue(valueProp !== void 0 ? valueProp : defaultValue);
+  var [text, setText] = useState(initialValue.text);
+  var [mentionList, setMentionList] = useState(initialValue.mentions);
   var [showSuggestions, setShowSuggestions] = useState(false);
   var [currentTrigger, setCurrentTrigger] = useState(null);
   var [searchQuery, setSearchQuery] = useState("");
@@ -163,6 +205,28 @@ function MentionInput(props) {
   var prevQueryRef = useRef("");
   var blurTimeoutRef = useRef(null);
   var fieldRef = 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 = useCallback(function (next) {
+    setText(next.text);
+    setMentionList(next.mentions);
+  }, []);
+  var emit = 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]);
+  useEffect(function () {
+    if (valueProp === void 0) return;
+    var next = parseMentionValue(valueProp);
+    adoptValue(next);
+  }, [valueProp, adoptValue]);
   var triggerMap = useMemo(function () {
     var map = /* @__PURE__ */new Map();
     var _iteratorNormalCompletion = true,
@@ -267,13 +331,6 @@ function MentionInput(props) {
   var {
     getFloatingProps
   } = useInteractions([dismiss]);
-  useEffect(function () {
-    var _fieldRef_current;
-    (_fieldRef_current = fieldRef.current) === null || _fieldRef_current === void 0 ? void 0 : _fieldRef_current.handleChange({
-      text,
-      mentions: mentionList
-    });
-  }, [text, mentionList]);
   useEffect(function () {
     return function () {
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
@@ -314,47 +371,47 @@ function MentionInput(props) {
     return null;
   }, []);
   var handleTextChange = 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 = 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 = useCallback(function () {
     var el = getWebTextAreaElement();
     if (!el || typeof el.selectionStart !== "number") return;
@@ -365,13 +422,13 @@ function MentionInput(props) {
   }, [getWebTextAreaElement, updateTriggerState]);
   var insertMention = 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;
@@ -379,7 +436,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
@@ -393,16 +450,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) {
@@ -413,28 +470,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 = 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();
@@ -443,14 +499,14 @@ function MentionInput(props) {
         el.setSelectionRange(newCursor, newCursor);
       }
     }, 0);
-  }, [text, onChange, onTextChange, updateTriggerState, getWebTextAreaElement]);
+  }, [displayed, emit, updateTriggerState, getWebTextAreaElement]);
   var handleKeyDown = 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);
@@ -498,7 +554,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 = useRef([]);
   useEffect(function () {
     if (!hasSuggestions) return;
@@ -565,9 +621,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 {
@@ -589,7 +645,7 @@ function MentionInput(props) {
     } finally {
       document.body.removeChild(mirror);
     }
-  }, [getWebTextAreaElement, text, cursorPosition]);
+  }, [getWebTextAreaElement, displayed.text, cursorPosition]);
   useEffect(function () {
     var el = getWebTextAreaElement();
     if (el) panel.triggerRef.current = el;
@@ -603,7 +659,7 @@ 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 floatingDropdown = panel.mounted ? /* @__PURE__ */_jsxs(YStack, {
@@ -671,13 +727,14 @@ function MentionInput(props) {
         row reserves the same fixed slot (initials fallback, centered)
         so the text columns share one left edge. */
         suggestionsHaveMedia && /* @__PURE__ */_jsx(YStack, {
-          width: MEDIA_SLOT,
-          height: MEDIA_SLOT,
+          width: mediaSlot,
+          height: mediaSlot,
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0,
+          "data-media-slot": mediaSlot,
           children: /* @__PURE__ */_jsxs(Avatar, {
-            size: "$2",
+            size: mediaSlot,
             circular: true,
             children: [item.avatar ? /* @__PURE__ */_jsx(Avatar.Image, {
               src: item.avatar
@@ -735,6 +792,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];
@@ -746,7 +804,7 @@ function MentionInput(props) {
           onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
         }
       },
-      value: text,
+      value: displayed.text,
       onChangeText: handleTextChange,
       placeholder,
       autoResize,
@@ -769,17 +827,21 @@ function MentionInput(props) {
     });
   };
   if (skeleton) {
-    return /* @__PURE__ */_jsxs(InputParts, {
-      size: size || knobProps.sizeToken,
-      children: [label && /* @__PURE__ */_jsx(Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */_jsx(Skeleton, {
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      disabled,
+      children: /* @__PURE__ */_jsx(Skeleton, {
         variant: "rounded",
         width: "100%",
         height: minHeight
-      })]
+      })
     });
   }
   if (!resolvedForm || !name) {
@@ -800,10 +862,19 @@ function MentionInput(props) {
           handleChange: field.handleChange
         };
         var resolvedError = getFieldError(field, errorProp);
-        return mentionTextArea(resolvedError, mergeFieldHandler(field, "handleBlur", onBlur));
+        return /* @__PURE__ */_jsx(MentionFieldSync, {
+          fieldValue: field.state.value,
+          current: {
+            text,
+            mentions: mentionList
+          },
+          disabled: isControlled,
+          onAdopt: adoptValue,
+          children: mentionTextArea(resolvedError, mergeFieldHandler(field, "handleBlur", onBlur))
+        });
       }
     }), floatingDropdown]
   });
 }
-export { MentionInput };
+export { MentionInput, parseMentionValue };
 //# sourceMappingURL=index.native.js.map