@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/SearchInput/index.tsx

@@ -1,20 +1,29 @@
 /**
  * SearchInput — the ONE search box (census item 6).
  *
- * Same control anatomy the table toolbar, DataTableSearch, and
- * FrappeListView each hand-rolled: Input + leading magnifier + clear
- * button inside a single input box, with a debounced onSearch. Those
- * sites should consume this instead of re-composing it.
+ * 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).
  */
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import type { ReactNode } from "react";
+import {
+  FOCUS_VISIBLE_RING,
+  ensureCompositeFocusRing,
+  pressTargetHitSlop,
+  sizeRecipeForToken,
+} from "@multiplatform.one/theme";
+import type { ComponentProps, ReactNode, RefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { SizeTokens } from "tamagui";
-import { View } from "tamagui";
+import type { SizeTokens, TamaguiElement } from "tamagui";
+import { View, getVariable, isWeb, styled, useTheme } from "tamagui";
+import { FieldLayout } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { formControlColors } from "../../shared/colorRamps";
 import { bidiIsolate, t } from "../../shared/t";
-import { Input } from "../Input";
-import type { InputProps } from "../Input";
+import { useFormField } from "../../shared/utils";
+
+type AreaProps = ComponentProps<typeof InputParts.Area>;
 
 export interface SearchInputProps {
   /** Controlled value. Omit for uncontrolled use with defaultValue. */
@@ -41,17 +50,77 @@ export interface SearchInputProps {
   "aria-label"?: string;
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
-  inputProps?: InputProps["inputProps"];
+  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. */
+const searchInputCss = `input.mp-search-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input.mp-search-input::-webkit-search-cancel-button,
+input.mp-search-input::-webkit-search-decoration,
+input.mp-search-input::-webkit-search-results-button,
+input.mp-search-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
 }
+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;
+  ensureCompositeFocusRing();
+  if (document.getElementById(SEARCH_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = SEARCH_STYLE_ID;
+  tag.textContent = searchInputCss;
+  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 iconSizeForToken: Record<string, number> = {
-  $1: 12,
-  $2: 14,
-  $3: 16,
-  $4: 16,
-  $5: 18,
-  $6: 20,
-};
+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({
   value,
@@ -75,15 +144,20 @@ export function SearchInput({
   iconSize,
   inputProps,
 }: SearchInputProps) {
-  const { knobProps } = useResolvedKnobs({ size, compact });
+  const { knobProps, id } = useFormField({ compact });
+  const theme = useTheme();
+  const clearInk = getVariable(theme.color1);
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(defaultValue ?? "");
   const text = isControlled ? value : internalText;
+  const inputRef = useRef<TamaguiElement>(null);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const onSearchRef = useRef(onSearch);
   onSearchRef.current = onSearch;
 
+  if (isWeb) ensureSearchInputChrome();
+
   useEffect(
     () => () => {
       if (timerRef.current !== undefined) clearTimeout(timerRef.current);
@@ -126,48 +200,75 @@ export function SearchInput({
     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[size ?? knobProps.sizeToken] ?? 16;
-
-  const clearButton =
-    clearable && !disabled && text ? (
-      <View
-        role="button"
-        tabIndex={0}
-        padding="$1"
-        borderRadius={knobProps.borderRadius.borderRadius}
-        cursor="pointer"
-        hoverStyle={{ backgroundColor: "$color4" }}
-        pressStyle={{ backgroundColor: "$color5" }}
-        focusVisibleStyle={{ outlineWidth: 2, outlineStyle: "solid", outlineColor: "$color8" }}
-        onPress={handleClear}
-        onKeyDown={
-          ((e: KeyboardEvent) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              e.stopPropagation();
-              handleClear();
-            }
-          }) as unknown as () => void
-        }
-        aria-label={t("Clear search")}
-      >
-        <XIcon size={resolvedIconSize - 2} />
-      </View>
-    ) : undefined;
-
-  // `value` is Omit-ed from InputProps["inputProps"] (Input's Area is
-  // uncontrolled via defaultValue), but nothing Input sets after the
-  // spread overrides `value`, so passing it here makes the Area
-  // controlled — required for clear/Escape to visually empty the box.
+  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 chromelessProps = chromeless
+    ? {
+        borderWidth: 0,
+        backgroundColor: "transparent" as const,
+        hoverStyle: { borderColor: "transparent" as const },
+        focusStyle: { borderColor: "transparent" as const },
+      }
+    : undefined;
+
+  const leadingWebProps = isWeb
+    ? {
+        tabIndex: -1 as const,
+        "aria-hidden": true,
+        onMouseDown: (e: { preventDefault?: () => void }) => {
+          e.preventDefault?.();
+          if (!disabled) focusArea(inputRef);
+        },
+      }
+    : {
+        focusable: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants" as const,
+        onPress: () => {
+          if (!disabled) focusArea(inputRef);
+        },
+      };
+
   const areaProps = {
+    id,
     role: "searchbox",
-    "aria-label": ariaLabel ?? "Search",
+    "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: {
+      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") {
@@ -176,21 +277,59 @@ export function SearchInput({
     },
     onSubmitEditing: () => fireSearch(text),
     ...inputProps,
-  } as unknown as InputProps["inputProps"];
+  } as unknown as AreaProps;
 
   return (
-    <Input
-      label={label}
-      size={size}
-      compact={compact}
-      chromeless={chromeless}
-      disabled={disabled}
-      onChangeText={handleChangeText}
-      placeholder={placeholder}
-      leftIcon={<MagnifyingGlassIcon size={resolvedIconSize} />}
-      rightIcon={clearButton}
-      rightIconInteractive
-      inputProps={areaProps}
-    />
+    <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}
+          >
+            <MagnifyingGlassIcon size={resolvedIconSize} />
+          </InputParts.Icon>
+          <InputParts.Area ref={inputRef} {...areaProps} onChangeText={handleChangeText} />
+          {showClear ? (
+            <View
+              justifyContent="center"
+              alignItems="center"
+              paddingInlineEnd="$2.5"
+              paddingInlineStart={0}
+              flexShrink={0}
+            >
+              <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>
+            </View>
+          ) : null}
+        </InputParts.Box>
+      </InputParts>
+    </FieldLayout>
   );
 }

package/src/fields/Select/Select.spec.tsx

@@ -119,7 +119,8 @@ describe("Select Components", () => {
             onValueChange={onValueChange}
           />,
         );
-        const dismiss = result.container.querySelector('[aria-label="Remove"]');
+        // Labels are differentiated per chip now — "Remove {label}".
+        const dismiss = result.container.querySelector('[aria-label^="Remove"]');
         expect(dismiss).toBeTruthy();
         await act(async () => {
           if (dismiss) fireEvent.click(dismiss);
@@ -279,4 +280,57 @@ describe("Select Components", () => {
       expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("select-too-few-options"));
     });
   });
+
+  describe("LC-71 RING-ANATOMY", () => {
+    const many: SelectOption[] = Array.from({ length: 6 }, (_, i) => ({
+      value: `v${i}`,
+      label: `Label ${i}`,
+    }));
+
+    beforeEach(() => {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1200,
+      });
+    });
+
+    it("does not ring the trigger or a row on mouse open", async () => {
+      const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
+      const trigger = result.container.querySelector(
+        '[data-testid="select-trigger"]',
+      ) as HTMLElement;
+      expect(trigger).toBeTruthy();
+      fireEvent.pointerDown(trigger);
+      fireEvent.mouseDown(trigger);
+      fireEvent.click(trigger);
+      await waitFor(() => {
+        expect(result.container.querySelector('[role="option"]')).toBeTruthy();
+      });
+      expect(trigger.getAttribute("data-kb-ring")).not.toBe("true");
+      for (const opt of result.container.querySelectorAll('[role="option"]')) {
+        expect(opt.getAttribute("data-kb-ring")).not.toBe("true");
+      }
+    });
+
+    it("paints an inset ring on the keyboard-active row; rows stay square", async () => {
+      const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
+      const trigger = result.container.querySelector(
+        '[data-testid="select-trigger"]',
+      ) as HTMLElement;
+      fireEvent.keyDown(document, { key: "ArrowDown" });
+      fireEvent.keyDown(trigger, { key: "ArrowDown" });
+      await waitFor(() => {
+        expect(result.container.querySelector('[role="option"]')).toBeTruthy();
+      });
+      expect(trigger.getAttribute("data-kb-ring")).not.toBe("true");
+      const options = [...result.container.querySelectorAll('[role="option"]')];
+      const ringed = options.filter((el) => el.getAttribute("data-kb-ring") === "true");
+      expect(ringed.length).toBe(1);
+      for (const opt of options) {
+        const radius = getComputedStyle(opt).borderRadius;
+        expect(radius === "0px" || radius === "0" || radius === "").toBe(true);
+      }
+    });
+  });
 });