@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/SearchInput/index.tsx

@@ -4,28 +4,47 @@
  * Anatomy (Polaris / Primer / Linear / Spotlight, LC-71):
  * one painted box around muted magnifier + field + clear. The inner
  * native field never rings. Magnifier is not a tab stop. Clear ✕ is the
- * second focusable and rings its own glyph (Spotlight circle-x).
+ * second focusable and rings its own glyph (chip-dismiss, LC-16).
+ *
+ * Clear is a View sized from the size-recipe square (same geometry as
+ * Input.Button). It was hand-rolled because TButton swallows className, so
+ * the chip-dismiss ring classes could not ride Input.Button. `glyphRing`
+ * now exists (InputParts/index.tsx, MPO-52) and renders this exact pair, so
+ * this block can collapse onto `<Input.Button glyphRing>` — in SearchInput's
+ * own lane, not this one.
  */
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
-  FOCUS_VISIBLE_RING,
+  MIN_PRESS_TARGET,
   ensureCompositeFocusRing,
+  isTouchSurface,
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactNode, RefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { SizeTokens, TamaguiElement } from "tamagui";
-import { View, getVariable, isWeb, styled, useTheme } from "tamagui";
-import { FieldLayout } from "../../fieldLayout";
+import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
+import { View, isWeb } from "tamagui";
+import { Skeleton } from "../../Skeleton";
+import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { formControlColors } from "../../shared/colorRamps";
 import { bidiIsolate, t } from "../../shared/t";
-import { useFormField } from "../../shared/utils";
+import type { AnyFormApi } from "../../types";
+import {
+  getFieldError,
+  getFieldHeight,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
 
 type AreaProps = ComponentProps<typeof InputParts.Area>;
 
 export interface SearchInputProps {
+  name?: string;
+  form?: AnyFormApi;
+  validators?: Record<string, unknown>;
   /** Controlled value. Omit for uncontrolled use with defaultValue. */
   value?: string;
   defaultValue?: string;
@@ -35,31 +54,35 @@ export interface SearchInputProps {
   onSearch?: (text: string) => void;
   /** Fires when the clear affordance or Escape empties the box. */
   onClear?: () => void;
+  onBlur?: (...args: unknown[]) => void;
   /** Debounce for onSearch in ms. 0 fires synchronously. */
   debounceMs?: number;
   placeholder?: string;
   /** Show the clear (X) button when there is text. Escape always clears. */
   clearable?: boolean;
   disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string | boolean;
   size?: SizeTokens;
-  /** Compact sizing (toolbar embedding). */
+  /** Compact density (toolbar embedding). Orthogonal to `size`. */
   compact?: boolean;
   /** Borderless/background-less (flush toolbar bands). */
   chromeless?: boolean;
+  skeleton?: boolean;
   label?: ReactNode;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  id?: string;
   "aria-label"?: string;
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
   inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText">;
 }
 
-// Leading glyph is a control-internal icon (LC-75/LC-79): it rides the
-// generated recipe's icon channel — no handwritten per-token px map.
-const iconSizeForToken = (token: string): number => sizeRecipeForToken(token).iconSize;
-
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
 
-/** UA search chrome + LC-71: Box owns the field ring; ✕ rings its glyph. */
+/** UA search chrome only. Glyph ring is the shared chip-dismiss recipe. */
 const searchInputCss = `input.mp-search-input {
   -webkit-appearance: none;
   appearance: none;
@@ -76,14 +99,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() {
@@ -96,38 +111,20 @@ function ensureSearchInputChrome() {
   document.head.appendChild(tag);
 }
 
-const ClearButton = styled(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, ...FOCUS_VISIBLE_RING },
-});
-
-const ClearWell = styled(View, {
-  name: "SearchClearWell",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "$color8",
-  hoverStyle: { backgroundColor: "$color9" },
-  pressStyle: { backgroundColor: "$color10" },
-});
-
 function focusArea(ref: RefObject<TamaguiElement | null>) {
   (ref.current as { focus?: () => void } | null)?.focus?.();
 }
 
 export 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
@@ -136,25 +133,41 @@ export function SearchInput({
   placeholder = bidiIsolate(t("Search...")),
   clearable = true,
   disabled,
+  readOnly,
+  required,
+  helperText,
+  error,
   size,
   compact,
   chromeless,
+  skeleton,
   label,
+  labelProps,
+  id: idProp,
   "aria-label": ariaLabel,
   iconSize,
   inputProps,
 }: SearchInputProps) {
-  const { knobProps, id } = useFormField({ compact });
-  const theme = useTheme();
-  const clearInk = getVariable(theme.color1);
+  const { resolvedForm, knobProps, control, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const recipe = sizeRecipeForToken(String(resolvedSize), { touch: isTouchSurface() });
+  const visualHeight = getFieldHeight(resolvedSize);
+  const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(defaultValue ?? "");
-  const text = isControlled ? value : internalText;
+  const standaloneText = isControlled ? value : internalText;
   const inputRef = useRef<TamaguiElement>(null);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const onSearchRef = useRef(onSearch);
   onSearchRef.current = onSearch;
+  const onClearRef = useRef(onClear);
+  onClearRef.current = onClear;
 
   if (isWeb) ensureSearchInputChrome();
 
@@ -183,50 +196,76 @@ export function SearchInput({
     [debounceMs, fireSearch],
   );
 
-  const handleChangeText = useCallback(
-    (next: string) => {
-      if (!isControlled) setInternalText(next);
+  const writeText = useCallback(
+    (next: string, fieldChange?: (text: string) => void) => {
+      if (!isControlled && !fieldChange) setInternalText(next);
+      fieldChange?.(next);
       onChange?.(next);
       scheduleSearch(next);
     },
     [isControlled, onChange, scheduleSearch],
   );
 
-  const onClearRef = useRef(onClear);
-  onClearRef.current = onClear;
-
-  const handleClear = useCallback(() => {
-    if (!isControlled) setInternalText("");
-    onChange?.("");
-    fireSearch("");
-    onClearRef.current?.();
-    // Polaris / Spotlight: emptying via ✕ keeps the caret in the field.
-    // Do this before the button unmounts so focus does not drop to body.
-    focusArea(inputRef);
-  }, [isControlled, onChange, fireSearch]);
+  const clearText = useCallback(
+    (fieldChange?: (text: string) => void) => {
+      if (!isControlled && !fieldChange) setInternalText("");
+      fieldChange?.("");
+      onChange?.("");
+      fireSearch("");
+      onClearRef.current?.();
+      // Polaris / Spotlight: emptying via ✕ keeps the caret in the field.
+      // Do this before the button unmounts so focus does not drop to body.
+      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 : 1000;
-  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: pressTargetHitSlop(visualHeight) } : undefined),
+  } as const;
 
   const chromelessProps = chromeless
     ? {
         borderWidth: 0,
         backgroundColor: "transparent" as const,
-        hoverStyle: { borderColor: "transparent" as const },
-        focusStyle: { borderColor: "transparent" as const },
+        hoverStyle: {
+          borderColor: "transparent" as const,
+          ...control.hoverKnobProps,
+        },
+        focusStyle: {
+          borderColor: "transparent" as const,
+          ...control.focusKnobProps,
+        },
       }
     : undefined;
 
+  const layoutBind = {
+    id,
+    label,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    placeholder,
+    "aria-label": ariaLabel,
+  };
+
   const leadingWebProps = isWeb
     ? {
         tabIndex: -1 as const,
         "aria-hidden": true,
         onMouseDown: (e: { preventDefault?: () => void }) => {
           e.preventDefault?.();
-          if (!disabled) focusArea(inputRef);
+          if (!disabled && !readOnly) focusArea(inputRef);
         },
       }
     : {
@@ -234,102 +273,166 @@ export function SearchInput({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants" as const,
         onPress: () => {
-          if (!disabled) focusArea(inputRef);
+          if (!disabled && !readOnly) focusArea(inputRef);
         },
       };
 
-  const areaProps = {
-    id,
-    role: "searchbox",
-    "aria-label": label ? undefined : (ariaLabel ?? t("Search")),
-    type: "search",
-    autoComplete: "off",
-    spellCheck: false,
-    inputMode: "search",
-    enterKeyHint: "search",
-    value: text,
-    disabled,
-    placeholder,
-    paddingInlineStart: 0,
-    paddingInlineEnd: showClear ? 0 : undefined,
-    className: isWeb ? "mp-input-area mp-search-input" : undefined,
-    outlineWidth: 0,
-    outlineStyle: "none" as const,
-    outlineColor: "transparent",
-    focusStyle: {
+  const renderBox = (current: string, fieldChange?: (text: string) => void, hasError?: boolean) => {
+    const showClear = Boolean(clearable && !disabled && !readOnly && current);
+    const areaProps = {
+      id,
+      role: "searchbox",
+      "aria-label": label ? undefined : (ariaLabel ?? t("Search")),
+      "aria-invalid": hasError || undefined,
+      "aria-required": required || undefined,
+      "aria-readonly": readOnly || undefined,
+      type: "search",
+      autoComplete: "off",
+      spellCheck: false,
+      inputMode: "search",
+      enterKeyHint: "search",
+      value: current,
+      disabled,
+      readOnly,
+      placeholder,
+      paddingInlineStart: 0,
+      paddingInlineEnd: showClear ? 0 : undefined,
+      className: isWeb ? "mp-input-area mp-search-input" : undefined,
       outlineWidth: 0,
       outlineStyle: "none" as const,
       outlineColor: "transparent",
-    },
-    focusVisibleStyle: {
-      outlineWidth: 0,
-      outlineStyle: "none" as const,
-      outlineColor: "transparent",
-    },
-    onKeyDown: (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        if (!text) return;
-        e.preventDefault();
-        handleClear();
-      } else if (e.key === "Enter") {
-        fireSearch(text);
-      }
-    },
-    onSubmitEditing: () => fireSearch(text),
-    ...inputProps,
-  } as unknown as AreaProps;
+      focusStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none" as const,
+        outlineColor: "transparent",
+      },
+      focusVisibleStyle: {
+        outlineWidth: 0,
+        outlineStyle: "none" as const,
+        outlineColor: "transparent",
+      },
+      onKeyDown: (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          if (!current) return;
+          e.preventDefault();
+          clearText(fieldChange);
+        } else if (e.key === "Enter") {
+          fireSearch(current);
+        }
+      },
+      onSubmitEditing: () => fireSearch(current),
+      ...inputProps,
+    } as unknown as AreaProps;
 
-  return (
-    <FieldLayout id={id} label={label} disabled={disabled} size={size} knobProps={knobProps}>
-      <InputParts size={size || knobProps.sizeToken}>
-        <InputParts.Box disabled={disabled} {...chromelessProps}>
-          <InputParts.Icon
-            adornment="leading"
-            color={formControlColors.boundary}
-            className={isWeb ? "mp-search-leading" : undefined}
-            {...leadingWebProps}
+    return (
+      <InputParts.Box
+        {...boxContract}
+        disabled={disabled}
+        {...chromelessProps}
+        {...(hasError ? { theme: "red" } : undefined)}
+      >
+        <InputParts.Icon
+          adornment="leading"
+          color={formControlColors.boundary}
+          className={isWeb ? "mp-search-leading" : undefined}
+          {...leadingWebProps}
+        >
+          <MagnifyingGlassIcon size={resolvedIconSize} />
+        </InputParts.Icon>
+        <InputParts.Area
+          ref={inputRef}
+          {...areaProps}
+          onChangeText={(next: string) => writeText(next, fieldChange)}
+        />
+        {showClear ? (
+          <View
+            role="button"
+            tabIndex={0}
+            aria-label={t("Clear search")}
+            className={isWeb ? "mp-chip-dismiss" : undefined}
+            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 ? pressTargetHitSlop(visualHeight) : undefined}
+            onPress={() => clearText(fieldChange)}
+            onKeyDown={
+              ((e: KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  clearText(fieldChange);
+                }
+              }) as unknown as () => void
+            }
           >
-            <MagnifyingGlassIcon size={resolvedIconSize} />
-          </InputParts.Icon>
-          <InputParts.Area ref={inputRef} {...areaProps} onChangeText={handleChangeText} />
-          {showClear ? (
             <View
-              justifyContent="center"
+              className={isWeb ? "mp-chip-dismiss-ring" : undefined}
               alignItems="center"
-              paddingInlineEnd="$2.5"
-              paddingInlineStart={0}
-              flexShrink={0}
+              justifyContent="center"
             >
-              <ClearButton
-                role="button"
-                tabIndex={0}
-                aria-label={t("Clear search")}
-                className={isWeb ? "mp-search-clear" : undefined}
-                hitSlop={pressTargetHitSlop(clearWell)}
-                onPress={handleClear}
-                onKeyDown={
-                  ((e: KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleClear();
-                    }
-                  }) as unknown as () => void
-                }
-              >
-                <ClearWell
-                  className={isWeb ? "mp-search-clear-ring" : undefined}
-                  width={clearWell}
-                  height={clearWell}
-                  borderRadius={wellRadius}
-                >
-                  <XIcon size={clearGlyph} color={clearInk as string} />
-                </ClearWell>
-              </ClearButton>
+              <InputParts.Icon aria-hidden color={formControlColors.boundary}>
+                <XIcon size={resolvedIconSize} />
+              </InputParts.Icon>
             </View>
-          ) : null}
-        </InputParts.Box>
-      </InputParts>
-    </FieldLayout>
+          </View>
+        ) : null}
+      </InputParts.Box>
+    );
+  };
+
+  if (skeleton) {
+    return (
+      <FieldLayout {...layoutBind} error={error}>
+        <InputParts size={resolvedSize}>
+          <Skeleton variant="rounded" width="100%" height={visualHeight} />
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
+        <InputParts size={resolvedSize}>{renderBox(standaloneText, undefined, !!error)}</InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      form={resolvedForm}
+      name={name}
+      defaultValue={defaultValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, error);
+        return (
+          <FieldLayout
+            {...layoutBind}
+            error={resolvedError}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "red" } : undefined)}>
+              {renderBox(
+                String(field.state.value ?? ""),
+                (next) => field.handleChange(next as never),
+                !!resolvedError,
+              )}
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
   );
 }