@multiplatform.one/forms 7.7.4 → 7.8.0

package/src/fields/Input/index.tsx

@@ -1,7 +1,8 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useCallback, useRef } from "react";
-import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { writeToClipboard } from "@multiplatform.one/platform";
 import { MIN_PRESS_TARGET, pressTargetHitSlop } from "@multiplatform.one/theme";
+import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import type {
   InputKeyboardType,
   InputTextContentType,
@@ -119,16 +120,6 @@ export interface InputProps {
 
 const COPY_LABEL = "Copy to clipboard";
 
-async function writeClipboard(text: string): Promise<boolean> {
-  try {
-    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 export function Input({
   name,
   form: formProp,
@@ -247,7 +238,7 @@ export function Input({
 
   const handleCopy = useCallback(
     async (text: string) => {
-      const ok = await writeClipboard(text);
+      const ok = await writeToClipboard(text);
       onCopyResult?.(ok);
     },
     [onCopyResult],
@@ -361,7 +352,9 @@ export function Input({
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
             id={id}
-            {...(handleChange ? { value: inputValue ?? "" } : { defaultValue: inputValue })}
+            {...(handleChange || value !== undefined
+              ? { value: inputValue ?? "" }
+              : { defaultValue: inputValue })}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
             {...areaName}
@@ -381,6 +374,7 @@ export function Input({
             disabled={disabled}
             tabIndex={disabled ? -1 : 0}
             aria-label={COPY_LABEL}
+            accessibilityLabel={COPY_LABEL}
             hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
             onPress={disabled ? undefined : activateCopy}
             onKeyDown={

package/src/fields/PhoneInput/index.tsx

@@ -43,8 +43,6 @@ const phoneInputCss = `/* LC-71: flag+dial are adornments of one control. Ring l
 .mp-phone-input [data-testid="combobox-trigger"] {
   outline: none !important;
   box-shadow: none !important;
-  width: auto !important;
-  flex: 0 0 auto;
 }
 .mp-phone-input [data-testid="combobox-trigger"]:focus,
 .mp-phone-input [data-testid="combobox-trigger"]:focus-visible {
@@ -329,9 +327,11 @@ export function PhoneInput<
           alignItems="stretch"
           flexGrow={0}
           flexShrink={0}
+          gap="$1.5"
           {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
         >
           <Combobox
+            triggerSizing="content"
             options={countryOptions}
             value={regionCode}
             onChange={(val) => handleRegionChange(typeof val === "string" ? val : (val[0] ?? ""))}

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -5,6 +5,7 @@ import { fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useTheme } from "tamagui";
 import { Form } from "../../Form";
 import { SearchInput } from "./index";
 
@@ -31,6 +32,19 @@ describe("SearchInput", () => {
     expect(result.container.querySelector("svg")).toBeTruthy();
   });
 
+  it("uses readable glyph ink for search and clear rather than the boundary ramp", () => {
+    let expectedInk = "";
+    function Sample() {
+      const theme = useTheme();
+      expectedInk = String(theme.color11?.val);
+      return <SearchInput placeholder="Search things" defaultValue="corp" />;
+    }
+    const { container } = renderWithProviders(<Sample />);
+    const glyphs = container.querySelectorAll("svg");
+    expect(glyphs).toHaveLength(2);
+    for (const glyph of glyphs) expect(glyph.getAttribute("fill")).toBe(expectedInk);
+  });
+
   it("bidi-isolates the default placeholder (LC-58) and passes explicit ones through", () => {
     // Default: FSI…PDI framing so the trailing "..." cannot reorder to
     // "…Search" under RTL; the visible run stays byte-identical inside.

package/src/fields/SearchInput/index.tsx

@@ -28,7 +28,7 @@ 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 { formCommonColors } from "../../shared/colorRamps";
 import { bidiIsolate, t } from "../../shared/t";
 import type { AnyFormApi } from "../../types";
 import {
@@ -339,7 +339,7 @@ export function SearchInput({
       >
         <InputParts.Icon
           adornment="leading"
-          color={formControlColors.boundary}
+          color={formCommonColors.muted}
           className={isWeb ? "mp-search-leading" : undefined}
           {...leadingWebProps}
         >
@@ -363,11 +363,8 @@ export function SearchInput({
             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)}
@@ -385,8 +382,10 @@ export function SearchInput({
               className={isWeb ? "mp-chip-dismiss-ring" : undefined}
               alignItems="center"
               justifyContent="center"
+              hoverStyle={{ backgroundColor: "$color4" }}
+              pressStyle={{ backgroundColor: "$color5" }}
             >
-              <InputParts.Icon aria-hidden color={formControlColors.boundary}>
+              <InputParts.Icon aria-hidden color={formCommonColors.muted}>
                 <XIcon size={resolvedIconSize} />
               </InputParts.Icon>
             </View>

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

@@ -334,3 +334,57 @@ describe("Select Components", () => {
     });
   });
 });
+
+describe("Select pointer intent", () => {
+  it("commits a deliberate cross-row release immediately after keyboard open", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    const trigger = result.getByTestId("select-trigger");
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    const options = await result.findAllByRole("option");
+    fireEvent.pointerDown(options[0], { button: 0, pointerId: 1 });
+    fireEvent.mouseDown(options[0]);
+    fireEvent.mouseUp(options[1]);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("option2");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("consumes the opening gesture release over the covered row", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    const trigger = result.getByTestId("select-trigger");
+    fireEvent.mouseDown(trigger);
+    const options = await result.findAllByRole("option");
+    fireEvent.mouseUp(options[0]);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("does not select when a background drag releases over an option", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Select options={mockOptions} onChange={onChange} />);
+    fireEvent.mouseDown(result.getByTestId("select-trigger"));
+    const options = await result.findAllByRole("option");
+    fireEvent.mouseUp(options[0]);
+    const panel = result.getByTestId("select-dropdown");
+    fireEvent.pointerDown(panel, { button: 0, clientY: 10 });
+    fireEvent.pointerMove(document, { clientY: 50 });
+    fireEvent.pointerUp(document);
+    fireEvent.mouseUp(options[1]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("toggles a multiple option exactly once on an immediate click", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Select options={mockOptions} multiple onChange={onChange} />,
+    );
+    fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+    const options = await result.findAllByRole("option");
+    fireEvent.pointerDown(options[0], { button: 0, pointerId: 1 });
+    fireEvent.mouseDown(options[0]);
+    fireEvent.mouseUp(options[0]);
+    fireEvent.click(options[0]);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(["option1"]);
+  });
+});

package/src/fields/Select/index.tsx

@@ -12,7 +12,6 @@ import {
 } from "@floating-ui/react";
 import type { AnyFormApi } from "../../types";
 import {
-  MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   menuRowFrame,
@@ -31,6 +30,7 @@ import * as ReactNative from "react-native";
 import { Platform, Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts, FocusContext } from "../../InputParts";
@@ -125,10 +125,13 @@ export interface SelectProps {
 // LC-71: Tamagui maps `focusVisibleStyle` onto mouse/:focus, so the ring is
 // painted from `wasKeyboardFocus()` (inset — overlay overflow clips it).
 // LC-72 CONTAINER-CLIP: rows stay square; the panel radius cuts the corners.
-const selectRowOutlineRest = {
+const selectOutlineRest = {
   outlineWidth: 0,
   outlineStyle: "solid" as const,
   outlineColor: "transparent",
+};
+const selectRowOutlineRest = {
+  ...selectOutlineRest,
   borderRadius: 0,
 };
 
@@ -266,7 +269,8 @@ function selectTriggerRingProps(kbTrigger: boolean, open: boolean) {
   if (kbTrigger && !open) {
     return { ...keyboardFocusRingProps, "data-kb-ring": "true" as const };
   }
-  return { ...selectRowOutlineRest, "data-kb-ring": undefined };
+  // Focus modality owns the outline; the control recipe owns trigger shape.
+  return { ...selectOutlineRest, "data-kb-ring": undefined };
 }
 
 function selectItemRingProps(isActive: boolean, kbNav: boolean) {
@@ -398,6 +402,10 @@ const SelectItem = memo(function SelectItem({
         },
         onPointerDown() {
           ctx.setKbNav(false);
+          // A press on a mounted row is a new gesture, not the release that
+          // opened this covering panel. Arm immediately, regardless of time.
+          ctx.allowMouseUpRef.current = true;
+          ctx.allowSelectRef.current = true;
         },
         onMouseUp() {
           if (!ctx.allowMouseUpRef.current) {
@@ -421,7 +429,7 @@ const SelectItem = memo(function SelectItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      size={ctx.knobProps.sizeToken}
+      height={ctx.knobProps.control.height}
       // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
       // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
       // precedent) over menuRowFrame's static $3; in-row gap rides the gap
@@ -598,6 +606,16 @@ function FloatingSelectCore({
 
   const { scrollRef: dragScrollRef, dragProps } = useDragScroll({
     direction: "vertical",
+    onDragEnd: () => {
+      // The following mouseup finishes scrolling; it must not pick a row.
+      allowSelectRef.current = false;
+      allowMouseUpRef.current = false;
+      if (selectTimeoutRef.current) clearTimeout(selectTimeoutRef.current);
+      selectTimeoutRef.current = setTimeout(() => {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = true;
+      });
+    },
   });
 
   // Sync drag scroll ref with floating ref
@@ -1005,13 +1023,10 @@ function FloatingSelectCore({
         // must not paint — it would ghost around the panel's corners.
         suppressFocusRing={open}
         size={knobProps.sizeToken}
-        // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
-        // = 36px) but the trigger's press target never drops below 44 —
-        // same minHeight floor the house Button holds. Without it a compact
-        // Select sat 36px beside 44px Inputs/Buttons in one control row.
-        minHeight={MIN_PRESS_TARGET}
+        {...pickerTriggerContract(knobProps.control.height)}
+        paddingHorizontal={knobProps.panelPadding.padding}
         {...(inTableCell
-          ? // Chromeless in cells (the floor above still applies).
+          ? // Chromeless in cells.
             {}
           : {
               borderRadius: knobProps.borderRadius.borderRadius,
@@ -1021,9 +1036,8 @@ function FloatingSelectCore({
         <SyncKeyboardFocusToBox active={kbTrigger && !open} />
         <View
           flex={1}
-          // LC-18 (UX-021): trigger inset rides the space knob so trigger text
-          // stays column-aligned with the menu rows at every density.
-          paddingHorizontal={knobProps.panelPadding.padding}
+          // The Box owns the same horizontal inset as the option rows.
+          minWidth={0}
           paddingVertical="$2"
           justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
           alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
@@ -1054,6 +1068,7 @@ function FloatingSelectCore({
             </View>
           ) : (
             <Text
+              {...knobProps.controlType}
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
               color={selectedOption ? textColor : formCommonColors.muted}
@@ -1064,7 +1079,7 @@ function FloatingSelectCore({
             </Text>
           )}
         </View>
-        <View paddingInlineEnd="$2" alignSelf="center">
+        <View flexShrink={0} alignSelf="center">
           <CaretDownIcon size={16} color={glyphColor} />
         </View>
       </InputParts.Box>
@@ -1224,6 +1239,8 @@ function NativeSelectCore({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(0);
   const listRef = useRef<HTMLElement | null>(null);
+  const listboxId = `${id}-listbox`;
+  const optionId = (index: number) => `${listboxId}-option-${index}`;
   const { kbTrigger, kbNav, setKbNav, onTriggerFocus, onTriggerBlur, onTriggerPointerDown } =
     useSelectKeyboardRing();
 
@@ -1335,12 +1352,22 @@ function NativeSelectCore({
     // VoiceOver blob.
     <View
       ref={listRef as any}
+      // React Native's Role type omits listbox; these are DOM-only attributes.
       {...(isWeb
-        ? {
-            tabIndex: 0,
+        ? ({
+            id: listboxId,
+            role: "listbox" as const,
+            "aria-label": ariaLabel ?? fieldA11y?.label ?? placeholder,
+            "aria-multiselectable": multiple || undefined,
+            "aria-hidden": !open,
+            "aria-activedescendant":
+              activeIndex != null && displayOptions[activeIndex]
+                ? optionId(activeIndex)
+                : undefined,
+            tabIndex: open ? 0 : -1,
             onKeyDown: handleListKeyDown,
             onFocus: () => setKbNav(wasKeyboardFocus()),
-          }
+          } as Record<string, unknown>)
         : undefined)}
       outlineStyle="none"
     >
@@ -1363,6 +1390,9 @@ function NativeSelectCore({
         const row = (
           <View
             key={isWeb ? option.value : undefined}
+            {...(isWeb
+              ? { id: optionId(i), role: "option" as const, "aria-selected": selected }
+              : undefined)}
             flexDirection="row"
             alignItems="center"
             borderRadius={0}
@@ -1370,7 +1400,7 @@ function NativeSelectCore({
             // menu rows — panelPadding inset + gap fragment.
             {...knobProps.gap}
             paddingHorizontal={knobProps.panelPadding.padding}
-            height={knobProps.sizeToken}
+            height={knobProps.control.height}
             onPress={isWeb ? () => handleSelect(option.value) : undefined}
             onMouseEnter={() => setActiveIndex(i)}
             onPointerDown={isWeb ? () => setKbNav(false) : undefined}
@@ -1467,7 +1497,8 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
-          minHeight={MIN_PRESS_TARGET}
+          {...pickerTriggerContract(knobProps.control.height)}
+          paddingHorizontal={knobProps.panelPadding.padding}
           pointerEvents="none"
           {...(inTableCell
             ? {}
@@ -1480,12 +1511,13 @@ function NativeSelectCore({
         >
           <View
             flex={1}
-            paddingHorizontal={knobProps.panelPadding.padding}
+            minWidth={0}
             paddingVertical="$2"
             justifyContent="flex-start"
             alignItems="flex-start"
           >
             <Text
+              {...knobProps.controlType}
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
               color={selectedOption ? formCommonColors.text : formCommonColors.muted}
@@ -1494,7 +1526,7 @@ function NativeSelectCore({
               {triggerValueText}
             </Text>
           </View>
-          <View paddingInlineEnd="$2" alignSelf="center">
+          <View flexShrink={0} alignSelf="center">
             <CaretDownIcon size={16} />
           </View>
         </InputParts.Box>
@@ -1519,9 +1551,8 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
-          // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
-          // the web trigger branch above).
-          minHeight={MIN_PRESS_TARGET}
+          {...pickerTriggerContract(knobProps.control.height)}
+          paddingHorizontal={knobProps.panelPadding.padding}
           {...(inTableCell
             ? {}
             : {
@@ -1541,6 +1572,7 @@ function NativeSelectCore({
                 role: "combobox" as const,
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
+                "aria-controls": open ? listboxId : undefined,
                 "aria-autocomplete": "none",
                 // Standalone (no label): fall back to placeholder so the
                 // trigger still has a name (axe button-name). Labelled: the
@@ -1551,11 +1583,9 @@ function NativeSelectCore({
                 tabIndex: disabled ? -1 : 0,
               }
             : { importantForAccessibility: "no" as const })}
-          // Web: trigger owns toggle. Native: FloatingPanel.native owns the
-          // open gesture (pointerEvents="none" on the trigger) — a second
-          // setOpen(prev => !prev) here double-toggles and the sheet never
-          // appears (batched true then !prev → false).
-          onPress={isWeb && !disabled ? () => setOpen((prev) => !prev) : undefined}
+          // The web sheet shares this gesture with FloatingPanel's capture
+          // opener. Both must open idempotently. Native owns its own press.
+          onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
           onFocus={isWeb ? onTriggerFocus : undefined}
           onBlur={isWeb ? onTriggerBlur : undefined}
           onPointerDown={isWeb ? onTriggerPointerDown : undefined}
@@ -1573,9 +1603,8 @@ function NativeSelectCore({
           <SyncKeyboardFocusToBox active={kbTrigger && !open} />
           <View
             flex={1}
-            // LC-18 (UX-021): trigger inset rides the space knob (matches the
-            // floating trigger and sheet rows).
-            paddingHorizontal={knobProps.panelPadding.padding}
+            // The Box owns the same horizontal inset as the option rows.
+            minWidth={0}
             paddingVertical="$2"
             justifyContent={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
             alignItems={multiple && selectedValues.length > 0 ? "center" : "flex-start"}
@@ -1606,6 +1635,7 @@ function NativeSelectCore({
               </View>
             ) : (
               <Text
+                {...knobProps.controlType}
                 fontFamily={knobProps.body.fontFamily}
                 fontWeight={knobProps.body.fontWeight}
                 color={selectedOption ? textColor : formCommonColors.muted}
@@ -1615,7 +1645,7 @@ function NativeSelectCore({
               </Text>
             )}
           </View>
-          <View paddingInlineEnd="$2" alignSelf="center">
+          <View flexShrink={0} alignSelf="center">
             <CaretDownIcon size={16} color={glyphColor} />
           </View>
         </InputParts.Box>

package/src/fields/Stepper/Stepper.spec.tsx

@@ -122,10 +122,13 @@ describe("Stepper", () => {
       });
       const increase = result.container.querySelector('[aria-label="Increase"]') as HTMLElement;
       await act(async () => {
-        fireEvent.pointerDown(increase);
+        expect(fireEvent.pointerDown(increase)).toBe(false);
+        fireEvent.pointerUp(increase);
       });
       expect(increase).not.toBe(document.activeElement);
       expect(document.activeElement).toBe(input);
+      expect(input.value).toBe("5");
+      expect(increase.getAttribute("tabindex")).toBe("-1");
     });
   });
 
@@ -245,6 +248,36 @@ describe("Stepper", () => {
   });
 
   describe("bound feedback (LC-71)", () => {
+    it("steps from empty into a bounded negative range", async () => {
+      const result = renderWithProviders(<Stepper min={-10} max={-5} allowEmpty />);
+      const increase = result.container.querySelector('[data-stepper-button="increment"]')!;
+      await act(async () => {
+        fireEvent.pointerDown(increase);
+        fireEvent.pointerUp(increase);
+      });
+      expect((result.getInput() as HTMLInputElement).value).toBe("-5");
+      expect(result.container.textContent).not.toContain("Maximum reached");
+      const inner = increase.querySelector("button")!;
+      expect(inner.getAttribute("tabindex")).toBe("-1");
+    });
+
+    it("clears failed-step feedback after a successful step and blur", async () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" defaultValue={1} min={1} max={10} helperText="Choose quantity" />,
+      );
+      const input = result.getInput() as HTMLInputElement;
+      await act(async () => fireEvent.keyDown(input, { key: "ArrowDown" }));
+      expect(result.container.textContent).toContain("Minimum reached");
+      await act(async () => fireEvent.keyDown(input, { key: "ArrowUp" }));
+      expect(result.container.textContent).not.toContain("Minimum reached");
+      await act(async () => fireEvent.keyDown(input, { key: "Home" }));
+      await act(async () => fireEvent.keyDown(input, { key: "ArrowDown" }));
+      expect(result.container.textContent).toContain("Minimum reached");
+      await act(async () => fireEvent.blur(input));
+      expect(result.container.textContent).not.toContain("Minimum reached");
+      expect(result.container.textContent).toContain("Choose quantity");
+    });
+
     it("does not show Minimum reached at rest when the value is already at min", () => {
       const result = renderWithProviders(
         <Stepper label="Quantity" defaultValue={1} min={1} max={10} />,