@multiplatform.one/forms 7.4.1 → 7.5.0

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

@@ -22,7 +22,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_react = require("react");
@@ -38,9 +39,43 @@ var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_t = require("../../shared/t.cjs");
-var import_InputParts = require("../../InputParts/index.cjs");
 var import_TextArea = require("../TextArea/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function parseMentionValue(raw) {
+  if (typeof raw === "string") return {
+    text: raw,
+    mentions: []
+  };
+  if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+    const 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({
+  fieldValue,
+  current,
+  disabled,
+  onAdopt,
+  children
+}) {
+  (0, import_react.useEffect)(() => {
+    if (disabled || fieldValue === void 0) return;
+    const next = parseMentionValue(fieldValue);
+    if (mentionValuesEqual(next, current)) return;
+    onAdopt(next);
+  }, [fieldValue, disabled]);
+  return children;
+}
 const blurCloseDelayMs = 150;
 const zeroWidthSpace = "\u200B";
 const helperFontSizeMap = {
@@ -74,7 +109,7 @@ const MentionSuggestionItem = (0, import_tamagui2.styled)(import_tamagui2.XStack
     }
   }
 });
-const MEDIA_SLOT = 28;
+const MEDIA_SLOT_FALLBACK = 32;
 const SLUG_ID = /^[A-Za-z][\w.-]*$/;
 function MentionMatchText({
   text,
@@ -145,7 +180,8 @@ function MentionInput(props) {
     onBlur,
     skeleton,
     compact,
-    id: idProp
+    id: idProp,
+    value: valueProp
   } = (0, import_tamagui.useProps)(props);
   const {
     resolvedForm,
@@ -162,8 +198,9 @@ function MentionInput(props) {
   const maxHeight = maxHeightProp ?? (0, import_utils.getFieldHeight)(resolvedSizeToken, 8);
   const minRows = Math.max(1, Math.round(minHeight / 20));
   const maxRows = Math.max(minRows, Math.round(maxHeight / 20));
-  const [text, setText] = (0, import_react.useState)("");
-  const [mentionList, setMentionList] = (0, import_react.useState)([]);
+  const initialValue = parseMentionValue(valueProp !== void 0 ? valueProp : defaultValue);
+  const [text, setText] = (0, import_react.useState)(initialValue.text);
+  const [mentionList, setMentionList] = (0, import_react.useState)(initialValue.mentions);
   const [showSuggestions, setShowSuggestions] = (0, import_react.useState)(false);
   const [currentTrigger, setCurrentTrigger] = (0, import_react.useState)(null);
   const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
@@ -175,6 +212,27 @@ function MentionInput(props) {
   const prevQueryRef = (0, import_react.useRef)("");
   const blurTimeoutRef = (0, import_react.useRef)(null);
   const fieldRef = (0, import_react.useRef)(null);
+  const isControlled = valueProp !== void 0;
+  const displayed = isControlled ? parseMentionValue(valueProp) : {
+    text,
+    mentions: mentionList
+  };
+  const mediaSlot = knobProps.nestedControl.px ?? MEDIA_SLOT_FALLBACK;
+  const adoptValue = (0, import_react.useCallback)(next => {
+    setText(next.text);
+    setMentionList(next.mentions);
+  }, []);
+  const emit = (0, import_react.useCallback)(next => {
+    if (!isControlled) adoptValue(next);
+    onChange?.(next);
+    onTextChange?.(next.text);
+    fieldRef.current?.handleChange(next);
+  }, [adoptValue, isControlled, onChange, onTextChange]);
+  (0, import_react.useEffect)(() => {
+    if (valueProp === void 0) return;
+    const next = parseMentionValue(valueProp);
+    adoptValue(next);
+  }, [valueProp, adoptValue]);
   const triggerMap = (0, import_react.useMemo)(() => {
     const map = /* @__PURE__ */new Map();
     for (const config of mentions) {
@@ -232,12 +290,6 @@ function MentionInput(props) {
   const {
     getFloatingProps
   } = (0, import_react2.useInteractions)([dismiss]);
-  (0, import_react.useEffect)(() => {
-    fieldRef.current?.handleChange({
-      text,
-      mentions: mentionList
-    });
-  }, [text, mentionList]);
   (0, import_react.useEffect)(() => {
     return () => {
       if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
@@ -278,13 +330,14 @@ function MentionInput(props) {
     return null;
   }, []);
   const handleTextChange = (0, import_react.useCallback)(newText => {
-    const oldText = text;
+    const oldText = displayed.text;
     const lengthDiff = newText.length - oldText.length;
     const webElement = getWebTextAreaElement();
     const domCaret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : null;
     const editPosition = domCaret !== null ? Math.max(0, domCaret - Math.max(0, lengthDiff)) : prevCursorRef.current;
+    let nextMentions = displayed.mentions;
     if (lengthDiff !== 0) {
-      setMentionList(prev => prev.map(m => ({
+      nextMentions = displayed.mentions.map(m => ({
         ...m
       })).filter(mention => {
         const mentionEnd = mention.position + mention.length;
@@ -296,24 +349,25 @@ function MentionInput(props) {
           return actualText === expectedText;
         }
         return false;
-      }));
+      });
     }
-    setText(newText);
+    emit({
+      text: newText,
+      mentions: nextMentions
+    });
     const 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?.(newText);
-    onTextChange?.(newText);
-  }, [text, updateTriggerState, onChange, onTextChange, getWebTextAreaElement]);
+  }, [displayed, emit, updateTriggerState, getWebTextAreaElement]);
   const handleSelectionChange = (0, import_react.useCallback)(event => {
     const selection = 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]);
   const handleWebSelect = (0, import_react.useCallback)(() => {
     const el = getWebTextAreaElement();
     if (!el || typeof el.selectionStart !== "number") return;
@@ -324,13 +378,13 @@ function MentionInput(props) {
   }, [getWebTextAreaElement, updateTriggerState]);
   const insertMention = (0, import_react.useCallback)(item => {
     if (!currentTrigger) return;
-    const triggerInfo = checkForTrigger(text, cursorPosition);
+    const triggerInfo = checkForTrigger(displayed.text, cursorPosition);
     if (!triggerInfo) return;
     const {
       wordStart
     } = triggerInfo;
-    const beforeMention = text.slice(0, wordStart);
-    const afterMention = text.slice(cursorPosition);
+    const beforeMention = displayed.text.slice(0, wordStart);
+    const afterMention = displayed.text.slice(cursorPosition);
     const mentionText = `${currentTrigger}${item.display}`;
     const config = triggerMap.get(currentTrigger);
     const insertSpace = config?.insertSpace !== false;
@@ -338,7 +392,7 @@ function MentionInput(props) {
     const insertedLength = mentionText.length + (insertSpace ? 1 : 0);
     const oldLength = cursorPosition - wordStart;
     const positionDiff = insertedLength - oldLength;
-    const adjustedMentions = mentionList.map(m => m.position > wordStart ? {
+    const adjustedMentions = displayed.mentions.map(m => m.position > wordStart ? {
       ...m,
       position: m.position + positionDiff
     } : m);
@@ -350,16 +404,16 @@ function MentionInput(props) {
       length: mentionText.length
     };
     const 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?.(item, currentTrigger);
-    onChange?.(newText);
-    onTextChange?.(newText);
     setTimeout(() => {
       const el = getWebTextAreaElement();
       if (el) {
@@ -369,22 +423,23 @@ function MentionInput(props) {
         textAreaRef.current?.focus();
       }
     }, 0);
-  }, [text, cursorPosition, currentTrigger, checkForTrigger, triggerMap, mentionList, onMentionSelect, onChange, onTextChange, getWebTextAreaElement]);
+  }, [displayed, cursorPosition, currentTrigger, checkForTrigger, triggerMap, onMentionSelect, emit, getWebTextAreaElement]);
   const removeMention = (0, import_react.useCallback)(mention => {
-    const before = text.slice(0, mention.position);
-    const after = text.slice(mention.position + mention.length);
+    const before = displayed.text.slice(0, mention.position);
+    const after = displayed.text.slice(mention.position + mention.length);
     const newText = before + after;
     const removedLen = mention.length;
-    setText(newText);
-    setMentionList(prev => prev.filter(m => !(m.position === mention.position && m.id === mention.id)).map(m => m.position > mention.position ? {
+    const nextMentions = displayed.mentions.filter(m => !(m.position === mention.position && m.id === mention.id)).map(m => m.position > mention.position ? {
       ...m,
       position: m.position - removedLen
-    } : m));
+    } : m);
+    emit({
+      text: newText,
+      mentions: nextMentions
+    });
     const newCursor = mention.position;
     setCursorPosition(newCursor);
     prevCursorRef.current = newCursor;
-    onChange?.(newText);
-    onTextChange?.(newText);
     updateTriggerState(newText, newCursor);
     setTimeout(() => {
       const el = getWebTextAreaElement();
@@ -393,13 +448,13 @@ function MentionInput(props) {
         el.setSelectionRange(newCursor, newCursor);
       }
     }, 0);
-  }, [text, onChange, onTextChange, updateTriggerState, getWebTextAreaElement]);
+  }, [displayed, emit, updateTriggerState, getWebTextAreaElement]);
   const handleKeyDown = (0, import_react.useCallback)(event => {
     const key = event.key || event.nativeEvent?.key;
     const webElement = getWebTextAreaElement();
     const caret = webElement && typeof webElement.selectionStart === "number" ? webElement.selectionStart : cursorPosition;
     if (key === "Backspace" || key === "Delete") {
-      const mention = mentionForDelete(mentionList, caret, key);
+      const mention = mentionForDelete(displayed.mentions, caret, key);
       if (mention) {
         event.preventDefault?.();
         removeMention(mention);
@@ -437,7 +492,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]);
   const itemRefs = (0, import_react.useRef)([]);
   (0, import_react.useEffect)(() => {
     if (!hasSuggestions) return;
@@ -501,9 +556,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);
     const marker = document.createElement("span");
-    marker.textContent = text[cursorPosition] || zeroWidthSpace;
+    marker.textContent = displayed.text[cursorPosition] || zeroWidthSpace;
     mirror.appendChild(marker);
     document.body.appendChild(mirror);
     try {
@@ -525,7 +580,7 @@ function MentionInput(props) {
     } finally {
       document.body.removeChild(mirror);
     }
-  }, [getWebTextAreaElement, text, cursorPosition]);
+  }, [getWebTextAreaElement, displayed.text, cursorPosition]);
   (0, import_react.useEffect)(() => {
     const el = getWebTextAreaElement();
     if (el) panel.triggerRef.current = el;
@@ -537,7 +592,7 @@ function MentionInput(props) {
       getBoundingClientRect: () => rect
     });
     panel.update();
-  }, [triggerActive, cursorPosition, text]);
+  }, [triggerActive, cursorPosition, displayed.text]);
   const suggestionListId = `${id}-suggestions`;
   const selectedOptionId = hasSuggestions && suggestions[selectedIndex] ? `${id}-option-${suggestions[selectedIndex].id}` : void 0;
   const floatingDropdown = panel.mounted ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
@@ -593,13 +648,14 @@ function MentionInput(props) {
         "data-keyboard-ring": keyboardRing ? "true" : void 0,
         ...(keyboardRing ? import_theme.keyboardFocusRingProps : void 0),
         children: [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
@@ -656,6 +712,7 @@ function MentionInput(props) {
     helperText,
     required,
     size,
+    compact,
     onBlur: (...args) => {
       handleBlurInternal(...args);
       if (fieldBlurHandler) {
@@ -664,7 +721,7 @@ function MentionInput(props) {
         onBlur?.(...args);
       }
     },
-    value: text,
+    value: displayed.text,
     onChangeText: handleTextChange,
     placeholder,
     autoResize,
@@ -686,17 +743,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) {
@@ -717,7 +778,16 @@ function MentionInput(props) {
           handleChange: field.handleChange
         };
         const 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]
   });