@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/fields/SearchInput/index.cjs

@@ -29,13 +29,13 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const iconSizeForToken = token => (0, import_theme.sizeRecipeForToken)(token).iconSize;
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
 const searchInputCss = `input.mp-search-input {
   -webkit-appearance: none;
@@ -53,14 +53,6 @@ input.mp-search-input:focus,
 input.mp-search-input:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-}
-.mp-search-clear:focus,
-.mp-search-clear:focus-visible {
-  outline: none !important;
-}
-.mp-search-clear:focus-visible .mp-search-clear-ring {
-  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
-  outline-offset: -2px;
 }`;
 function ensureSearchInputChrome() {
   if (typeof document === "undefined") return;
@@ -71,48 +63,19 @@ function ensureSearchInputChrome() {
   tag.textContent = searchInputCss;
   document.head.appendChild(tag);
 }
-const ClearButton = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "SearchClear",
-  cursor: "pointer",
-  alignItems: "center",
-  justifyContent: "center",
-  opacity: 0.85,
-  outlineWidth: 0,
-  hoverStyle: {
-    opacity: 1
-  },
-  pressStyle: {
-    opacity: 0.9
-  },
-  focusStyle: {
-    outlineWidth: 0
-  },
-  focusVisibleStyle: {
-    opacity: 1,
-    ...import_theme.FOCUS_VISIBLE_RING
-  }
-});
-const ClearWell = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "SearchClearWell",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "$color8",
-  hoverStyle: {
-    backgroundColor: "$color9"
-  },
-  pressStyle: {
-    backgroundColor: "$color10"
-  }
-});
 function focusArea(ref) {
   ref.current?.focus?.();
 }
 function SearchInput({
+  name,
+  form: formProp,
+  validators,
   value,
   defaultValue,
   onChange,
   onSearch,
   onClear,
+  onBlur,
   debounceMs = 300,
   // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
   // weak "..." otherwise reorders to the start ("…Search"). First-strong
@@ -121,29 +84,47 @@ function SearchInput({
   placeholder = (0, import_t.bidiIsolate)((0, import_t.t)("Search...")),
   clearable = true,
   disabled,
+  readOnly,
+  required,
+  helperText,
+  error,
   size,
   compact,
   chromeless,
+  skeleton,
   label,
+  labelProps,
+  id: idProp,
   "aria-label": ariaLabel,
   iconSize,
   inputProps
 }) {
   const {
+    resolvedForm,
     knobProps,
+    control,
     id
   } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
     compact
   });
-  const theme = (0, import_tamagui.useTheme)();
-  const clearInk = (0, import_tamagui.getVariable)(theme.color1);
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const resolvedSize = size ?? knobProps.sizeToken;
+  const recipe = (0, import_theme.sizeRecipeForToken)(String(resolvedSize), {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  const visualHeight = (0, import_utils.getFieldHeight)(resolvedSize);
+  const belowFloor = visualHeight < import_theme.MIN_PRESS_TARGET;
   const isControlled = value !== void 0;
   const [internalText, setInternalText] = (0, import_react2.useState)(defaultValue ?? "");
-  const text = isControlled ? value : internalText;
+  const standaloneText = isControlled ? value : internalText;
   const inputRef = (0, import_react2.useRef)(null);
   const timerRef = (0, import_react2.useRef)(void 0);
   const onSearchRef = (0, import_react2.useRef)(onSearch);
   onSearchRef.current = onSearch;
+  const onClearRef = (0, import_react2.useRef)(onClear);
+  onClearRef.current = onClear;
   if (import_tamagui.isWeb) ensureSearchInputChrome();
   (0, import_react2.useEffect)(() => () => {
     if (timerRef.current !== void 0) clearTimeout(timerRef.current);
@@ -161,146 +142,230 @@ function SearchInput({
     if (timerRef.current !== void 0) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => fireSearch(next), debounceMs);
   }, [debounceMs, fireSearch]);
-  const handleChangeText = (0, import_react2.useCallback)(next => {
-    if (!isControlled) setInternalText(next);
+  const writeText = (0, import_react2.useCallback)((next, fieldChange) => {
+    if (!isControlled && !fieldChange) setInternalText(next);
+    fieldChange?.(next);
     onChange?.(next);
     scheduleSearch(next);
   }, [isControlled, onChange, scheduleSearch]);
-  const onClearRef = (0, import_react2.useRef)(onClear);
-  onClearRef.current = onClear;
-  const handleClear = (0, import_react2.useCallback)(() => {
-    if (!isControlled) setInternalText("");
+  const clearText = (0, import_react2.useCallback)(fieldChange => {
+    if (!isControlled && !fieldChange) setInternalText("");
+    fieldChange?.("");
     onChange?.("");
     fireSearch("");
     onClearRef.current?.();
     focusArea(inputRef);
   }, [isControlled, onChange, fireSearch]);
-  const resolvedIconSize = iconSize ?? iconSizeForToken(String(size ?? knobProps.sizeToken));
-  const clearWell = resolvedIconSize;
-  const clearGlyph = Math.max(8, resolvedIconSize - 6);
-  const wellRadius = knobProps.pointy ? 0 : 1e3;
-  const showClear = Boolean(clearable && !disabled && text);
+  const resolvedIconSize = iconSize ?? recipe.iconSize;
+  const boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? {
+      hitSlop: (0, import_theme.pressTargetHitSlop)(visualHeight)
+    } : void 0)
+  };
   const chromelessProps = chromeless ? {
     borderWidth: 0,
     backgroundColor: "transparent",
     hoverStyle: {
-      borderColor: "transparent"
+      borderColor: "transparent",
+      ...control.hoverKnobProps
     },
     focusStyle: {
-      borderColor: "transparent"
+      borderColor: "transparent",
+      ...control.focusKnobProps
     }
   } : void 0;
+  const layoutBind = {
+    id,
+    label,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    placeholder,
+    "aria-label": ariaLabel
+  };
   const leadingWebProps = import_tamagui.isWeb ? {
     tabIndex: -1,
     "aria-hidden": true,
     onMouseDown: e => {
       e.preventDefault?.();
-      if (!disabled) focusArea(inputRef);
+      if (!disabled && !readOnly) focusArea(inputRef);
     }
   } : {
     focusable: false,
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants",
     onPress: () => {
-      if (!disabled) focusArea(inputRef);
+      if (!disabled && !readOnly) focusArea(inputRef);
     }
   };
-  const areaProps = {
-    id,
-    role: "searchbox",
-    "aria-label": label ? void 0 : ariaLabel ?? (0, import_t.t)("Search"),
-    type: "search",
-    autoComplete: "off",
-    spellCheck: false,
-    inputMode: "search",
-    enterKeyHint: "search",
-    value: text,
-    disabled,
-    placeholder,
-    paddingInlineStart: 0,
-    paddingInlineEnd: showClear ? 0 : void 0,
-    className: import_tamagui.isWeb ? "mp-input-area mp-search-input" : void 0,
-    outlineWidth: 0,
-    outlineStyle: "none",
-    outlineColor: "transparent",
-    focusStyle: {
-      outlineWidth: 0,
-      outlineStyle: "none",
-      outlineColor: "transparent"
-    },
-    focusVisibleStyle: {
+  const renderBox = (current, fieldChange, hasError) => {
+    const showClear = Boolean(clearable && !disabled && !readOnly && current);
+    const areaProps = {
+      id,
+      role: "searchbox",
+      "aria-label": label ? void 0 : ariaLabel ?? (0, import_t.t)("Search"),
+      "aria-invalid": hasError || void 0,
+      "aria-required": required || void 0,
+      "aria-readonly": readOnly || void 0,
+      type: "search",
+      autoComplete: "off",
+      spellCheck: false,
+      inputMode: "search",
+      enterKeyHint: "search",
+      value: current,
+      disabled,
+      readOnly,
+      placeholder,
+      paddingInlineStart: 0,
+      paddingInlineEnd: showClear ? 0 : void 0,
+      className: import_tamagui.isWeb ? "mp-input-area mp-search-input" : void 0,
       outlineWidth: 0,
       outlineStyle: "none",
-      outlineColor: "transparent"
-    },
-    onKeyDown: e => {
-      if (e.key === "Escape") {
-        if (!text) return;
-        e.preventDefault();
-        handleClear();
-      } else if (e.key === "Enter") {
-        fireSearch(text);
-      }
-    },
-    onSubmitEditing: () => fireSearch(text),
-    ...inputProps
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-    id,
-    label,
-    disabled,
-    size,
-    knobProps,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
-        disabled,
-        ...chromelessProps,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-          adornment: "leading",
-          color: import_colorRamps.formControlColors.boundary,
-          className: import_tamagui.isWeb ? "mp-search-leading" : void 0,
-          ...leadingWebProps,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
-            size: resolvedIconSize
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          ref: inputRef,
-          ...areaProps,
-          onChangeText: handleChangeText
-        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          justifyContent: "center",
+      outlineColor: "transparent",
+      focusStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none",
+        outlineColor: "transparent"
+      },
+      focusVisibleStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none",
+        outlineColor: "transparent"
+      },
+      onKeyDown: e => {
+        if (e.key === "Escape") {
+          if (!current) return;
+          e.preventDefault();
+          clearText(fieldChange);
+        } else if (e.key === "Enter") {
+          fireSearch(current);
+        }
+      },
+      onSubmitEditing: () => fireSearch(current),
+      ...inputProps
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      ...boxContract,
+      disabled,
+      ...chromelessProps,
+      ...(hasError ? {
+        theme: "red"
+      } : void 0),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+        adornment: "leading",
+        color: import_colorRamps.formControlColors.boundary,
+        className: import_tamagui.isWeb ? "mp-search-leading" : void 0,
+        ...leadingWebProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+          size: resolvedIconSize
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        ref: inputRef,
+        ...areaProps,
+        onChangeText: next => writeText(next, fieldChange)
+      }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": (0, import_t.t)("Clear search"),
+        className: import_tamagui.isWeb ? "mp-chip-dismiss" : void 0,
+        "data-end-cap": visualHeight,
+        width: visualHeight,
+        height: visualHeight,
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        outlineWidth: 0,
+        hoverStyle: {
+          opacity: 1
+        },
+        pressStyle: {
+          opacity: 0.9
+        },
+        focusStyle: {
+          outlineWidth: 0
+        },
+        focusVisibleStyle: {
+          outlineWidth: 0
+        },
+        opacity: 0.85,
+        flexShrink: 0,
+        hitSlop: belowFloor ? (0, import_theme.pressTargetHitSlop)(visualHeight) : void 0,
+        onPress: () => clearText(fieldChange),
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            clearText(fieldChange);
+          }
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          className: import_tamagui.isWeb ? "mp-chip-dismiss-ring" : void 0,
           alignItems: "center",
-          paddingInlineEnd: "$2.5",
-          paddingInlineStart: 0,
-          flexShrink: 0,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearButton, {
-            role: "button",
-            tabIndex: 0,
-            "aria-label": (0, import_t.t)("Clear search"),
-            className: import_tamagui.isWeb ? "mp-search-clear" : void 0,
-            hitSlop: (0, import_theme.pressTargetHitSlop)(clearWell),
-            onPress: handleClear,
-            onKeyDown: e => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                handleClear();
-              }
-            },
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClearWell, {
-              className: import_tamagui.isWeb ? "mp-search-clear-ring" : void 0,
-              width: clearWell,
-              height: clearWell,
-              borderRadius: wellRadius,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-                size: clearGlyph,
-                color: clearInk
-              })
+          justifyContent: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            "aria-hidden": true,
+            color: import_colorRamps.formControlColors.boundary,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+              size: resolvedIconSize
             })
           })
-        }) : null]
+        })
+      }) : null]
+    });
+  };
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      ...layoutBind,
+      error,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: resolvedSize,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: visualHeight
+        })
       })
-    })
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      ...layoutBind,
+      error,
+      onBlur,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: resolvedSize,
+        children: renderBox(standaloneText, void 0, !!error)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        ...layoutBind,
+        error: resolvedError,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: resolvedSize,
+          ...(resolvedError ? {
+            theme: "red"
+          } : void 0),
+          children: renderBox(String(field.state.value ?? ""), next => field.handleChange(next), !!resolvedError)
+        })
+      });
+    }
   });
 }