@multiplatform.one/forms 7.7.4 → 7.8.0

package/src/fields/Stepper/index.tsx

@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { Pressable } from "react-native";
 import { isWeb, useProps, View } from "tamagui";
 import { Input as TamaguiInput } from "tamagui";
 import { isTouchSurface, sizeRecipeForToken, useGlyphColor } from "@multiplatform.one/theme";
@@ -28,12 +29,13 @@ import {
 import { useWheelIncrement } from "../../shared/useWheelIncrement";
 import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
-import { formInputColors } from "../../shared/colorRamps";
+import { formButtonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
 
 const repeatDelay = 400;
 const repeatInterval = 80;
+const boundCaptionDuration = 2000;
 const LARGE_STEP_FACTOR = 10;
 
 /** CSS timings for discrete value motion (mirrors theme animationConfig). */
@@ -90,7 +92,7 @@ function useRepeatAction(action: () => void, repeatingRef: MutableRefObject<bool
 
   useEffect(() => stop, [stop]);
 
-  return { onPressIn: start, onPressOut: stop };
+  return { onPressIn: start, onPressOut: stop, stop };
 }
 
 export type StepperProps<
@@ -139,56 +141,125 @@ export type StepperProps<
 function StepperSpinButton({
   kind,
   disabled,
+  atBound,
+  seamWidth,
   stacked,
   seam,
   onPressIn,
   onPressOut,
   onActivate,
+  onBoundPress,
   children,
 }: {
   kind: "increment" | "decrement";
   disabled: boolean;
+  atBound: boolean;
+  seamWidth: number;
   stacked?: boolean;
   seam?: "bottom" | "end" | "start";
   onPressIn: () => void;
   onPressOut: () => void;
   onActivate: () => void;
+  onBoundPress: () => void;
   children: ReactNode;
 }) {
   const label = kind === "increment" ? t("Increase") : t("Decrease");
-  return (
+  const [pressed, setPressed] = useState(false);
+  const button = (
     <InputParts.Button
       tabIndex={-1}
       disabled={disabled}
-      aria-disabled={disabled || undefined}
-      aria-label={label}
-      data-stepper-button={kind}
-      cursor={disabled ? "not-allowed" : "pointer"}
-      opacity={disabled ? 0.4 : 1}
-      height={stacked ? "50%" : "100%"}
-      flex={stacked ? 1 : undefined}
+      aria-hidden
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      cursor={disabled || atBound ? "not-allowed" : "pointer"}
+      opacity={disabled || atBound ? 0.4 : 1}
+      backgroundColor={
+        pressed && !disabled && !atBound ? formButtonColors.background.active : "transparent"
+      }
+      height="100%"
       alignSelf="stretch"
-      borderBottomWidth={seam === "bottom" ? 1 : 0}
-      borderInlineEndWidth={seam === "end" ? 1 : 0}
-      borderInlineStartWidth={seam === "start" ? 1 : 0}
+      borderBottomWidth={seam === "bottom" ? seamWidth : 0}
+      {...(isWeb
+        ? {
+            style: {
+              borderInlineEndWidth: seam === "end" ? seamWidth : 0,
+              borderInlineStartWidth: seam === "start" ? seamWidth : 0,
+              borderInlineEndStyle: "solid",
+              borderInlineStartStyle: "solid",
+            },
+          }
+        : {
+            borderEndWidth: seam === "end" ? seamWidth : 0,
+            borderStartWidth: seam === "start" ? seamWidth : 0,
+          })}
       borderColor={formInputColors.border.base}
       focusStyle={noButtonRing}
       focusVisibleStyle={noButtonRing}
       hoverStyle={disabled ? { backgroundColor: "transparent" } : undefined}
-      onMouseDown={(e: any) => {
-        preventFocusSteal(e);
-        onActivate();
-      }}
-      onPointerDown={(e: any) => {
-        preventFocusSteal(e);
-        onActivate();
-      }}
-      onPressIn={disabled ? undefined : onPressIn}
-      onPressOut={onPressOut}
     >
       {children}
     </InputParts.Button>
   );
+  const start = () => {
+    if (disabled) return;
+    setPressed(true);
+    onActivate();
+    if (atBound) onBoundPress();
+    else onPressIn();
+  };
+  const stop = () => {
+    setPressed(false);
+    onPressOut();
+  };
+  const hitStyle = {
+    display: "flex" as const,
+    height: stacked ? ("50%" as const) : ("100%" as const),
+    flex: stacked ? 1 : undefined,
+  };
+  // Keep the press target mounted when a step reaches its bound. Tamagui
+  // suppresses aria-disabled presses; the wrapper owns attempted-step feedback.
+  return isWeb ? (
+    <div
+      role="button"
+      aria-label={label}
+      aria-disabled={disabled || atBound || undefined}
+      tabIndex={-1}
+      data-stepper-button={kind}
+      style={hitStyle}
+      onPointerDown={(event) => {
+        // This raw wrapper owns the pointer lifecycle. Cancel compatibility
+        // mouse events so touch and pen cannot commit the same step twice.
+        preventFocusSteal(event);
+        start();
+      }}
+      onMouseDown={preventFocusSteal}
+      onPointerUp={stop}
+      onPointerCancel={stop}
+      onPointerLeave={stop}
+      onClick={(event) => {
+        if (event.detail !== 0) return;
+        start();
+        stop();
+      }}
+    >
+      {button}
+    </div>
+  ) : (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled: disabled || atBound }}
+      // An explicit false overrides accessibilityState in React Native.
+      disabled={disabled || undefined}
+      onPressIn={start}
+      onPressOut={stop}
+      hitSlop={{ top: seamWidth, bottom: seamWidth }}
+      style={hitStyle}
+    >
+      {button}
+    </Pressable>
+  );
 }
 
 export function Stepper<
@@ -253,6 +324,27 @@ export function Stepper<
   // LC-25: discrete +/- taps tween the value chrome; hold-repeat / typing stay live.
   // Opacity (not transform) — Tamagui Input owns transform internally on web.
   const [valueFlash, setValueFlash] = useState(false);
+  const [boundCaption, setBoundCaption] = useState<string | null>(null);
+  const boundTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clearBoundCaption = useCallback(() => {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    boundTimerRef.current = null;
+    setBoundCaption(null);
+  }, []);
+  const showBoundCaption = useCallback((kind: "min" | "max") => {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    setBoundCaption(kind === "min" ? t("Minimum reached") : t("Maximum reached"));
+    boundTimerRef.current = setTimeout(() => {
+      boundTimerRef.current = null;
+      setBoundCaption(null);
+    }, boundCaptionDuration);
+  }, []);
+  useEffect(
+    () => () => {
+      if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    },
+    [],
+  );
   const repeatingRef = useRef(false);
   const typingRef = useRef(false);
   const incrementRef = useRef<() => void>(() => {});
@@ -316,11 +408,12 @@ export function Stepper<
       const clamped = clampValue(next);
       const formatted = formatValue(clamped);
       if (formatted === inputValue) return;
+      clearBoundCaption();
       if (pulse) pulseDiscreteStep();
       setInputValue(formatted);
       if (!name) onChange?.(clamped);
     },
-    [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep],
+    [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep, clearBoundCaption],
   );
 
   const applyDelta = useCallback(
@@ -328,11 +421,55 @@ export function Stepper<
       if (disabled || readOnly) return;
       const current = parseValue(inputValue);
       const from = current ?? 0;
+      if (current !== null && delta < 0 && boundsLo !== undefined && from <= boundsLo) {
+        showBoundCaption("min");
+        return;
+      }
+      if (current !== null && delta > 0 && boundsHi !== undefined && from >= boundsHi) {
+        showBoundCaption("max");
+        return;
+      }
       commitNumber(from + delta, true);
     },
-    [disabled, readOnly, parseValue, inputValue, commitNumber],
+    [
+      disabled,
+      readOnly,
+      parseValue,
+      inputValue,
+      commitNumber,
+      boundsLo,
+      boundsHi,
+      showBoundCaption,
+    ],
   );
 
+  useEffect(() => {
+    const current = parseValue(inputValue);
+    if (
+      disabled ||
+      readOnly ||
+      (current !== null && boundsHi !== undefined && current >= boundsHi)
+    ) {
+      repeatIncrement.stop();
+    }
+    if (
+      disabled ||
+      readOnly ||
+      (current !== null && boundsLo !== undefined && current <= boundsLo)
+    ) {
+      repeatDecrement.stop();
+    }
+  }, [
+    inputValue,
+    parseValue,
+    boundsLo,
+    boundsHi,
+    disabled,
+    readOnly,
+    repeatIncrement.stop,
+    repeatDecrement.stop,
+  ]);
+
   const increment = useCallback(() => applyDelta(step), [applyDelta, step]);
   const decrement = useCallback(() => applyDelta(-step), [applyDelta, step]);
 
@@ -439,18 +576,20 @@ export function Stepper<
 
     const stacked = placement === "left" || placement === "right";
     const showSpin = showButtons && !readOnly;
-    const decDisabled = !!(disabled || atMin);
-    const incDisabled = !!(disabled || atMax);
+    const seamWidth = knobProps.borderRadius.borderWidth;
 
     const decrementButton = (
       <StepperSpinButton
         kind="decrement"
-        disabled={decDisabled}
+        disabled={!!disabled}
+        atBound={atMin}
+        seamWidth={seamWidth}
         stacked={stacked}
         seam={placement === "both" ? "end" : undefined}
         onPressIn={repeatDecrement.onPressIn}
         onPressOut={repeatDecrement.onPressOut}
         onActivate={focusArea}
+        onBoundPress={() => showBoundCaption("min")}
       >
         {stacked ? (
           <CaretDownIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
@@ -462,12 +601,15 @@ export function Stepper<
     const incrementButton = (
       <StepperSpinButton
         kind="increment"
-        disabled={incDisabled}
+        disabled={!!disabled}
+        atBound={atMax}
+        seamWidth={seamWidth}
         stacked={stacked}
         seam={stacked ? "bottom" : placement === "both" ? "start" : undefined}
         onPressIn={repeatIncrement.onPressIn}
         onPressOut={repeatIncrement.onPressOut}
         onActivate={focusArea}
+        onBoundPress={() => showBoundCaption("max")}
       >
         {stacked ? (
           <CaretUpIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
@@ -483,8 +625,17 @@ export function Stepper<
         alignSelf="stretch"
         flexShrink={0}
         width={controlSize}
-        borderInlineStartWidth={edge === "end" ? 1 : 0}
-        borderInlineEndWidth={edge === "start" ? 1 : 0}
+        {...(isWeb
+          ? {
+              borderInlineStartWidth: edge === "end" ? seamWidth : 0,
+              borderInlineEndWidth: edge === "start" ? seamWidth : 0,
+              borderInlineStartStyle: "solid",
+              borderInlineEndStyle: "solid",
+            }
+          : {
+              borderStartWidth: edge === "end" ? seamWidth : 0,
+              borderEndWidth: edge === "start" ? seamWidth : 0,
+            })}
         borderColor={formInputColors.border.base}
       >
         {incrementButton}
@@ -541,12 +692,14 @@ export function Stepper<
           ? {
               onBlur: () => {
                 typingRef.current = false;
+                clearBoundCaption();
                 onBlurHandler();
               },
             }
           : {
               onBlur: () => {
                 typingRef.current = false;
+                clearBoundCaption();
               },
             })}
         {...(onFocusHandler ? { onFocus: onFocusHandler } : undefined)}
@@ -559,7 +712,14 @@ export function Stepper<
         size={controlSize}
         disabled={disabled}
         data-stepper="true"
+        data-stepper-control="true"
         data-stepper-placement={placement}
+        {...(showSpin
+          ? {
+              paddingHorizontal: 0,
+              sizeRecipeEscape: "LC-81 stepper segments reach the compound frame edges",
+            }
+          : undefined)}
       >
         {showSpin && placement === "both" ? decrementButton : null}
         {showSpin && placement === "left" ? spinColumn("start") : null}
@@ -602,7 +762,7 @@ export function Stepper<
         label={label}
         labelProps={labelProps}
         error={errorProp}
-        helperText={helperText}
+        helperText={boundCaption ?? helperText}
         required={required}
         size={size}
         knobProps={knobProps}
@@ -635,7 +795,7 @@ export function Stepper<
             label,
             labelProps,
             error: errorProp,
-            helperText,
+            helperText: boundCaption ?? helperText,
             required,
             size,
             readOnly,

package/src/fields/pickerActivation.spec.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Select } from "./Select";
+import { Combobox } from "./Combobox";
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useResolvedKnobs: (...args: Parameters<typeof actual.useResolvedKnobs>) => {
+      const resolved = actual.useResolvedKnobs(...args);
+      return {
+        ...resolved,
+        knobProps: {
+          ...resolved.knobProps,
+          control: { ...resolved.knobProps.control, height: 37 },
+        },
+      };
+    },
+  };
+});
+
+const options = [
+  { value: "alpha", label: "Alpha" },
+  { value: "beta", label: "Beta" },
+];
+const originalWidth = window.innerWidth;
+beforeEach(() => Object.defineProperty(window, "innerWidth", { configurable: true, value: 390 }));
+afterEach(() =>
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: originalWidth }),
+);
+
+function ClearHarness() {
+  const [value, setValue] = useState("alpha");
+  return (
+    <>
+      <Combobox
+        aria-label="Choice"
+        options={options}
+        value={value}
+        onValueChange={(next) => {
+          if (typeof next === "string") setValue(next);
+        }}
+        clearable
+      />
+      <span>Selected:{value || "none"}</span>
+    </>
+  );
+}
+
+describe("sheet picker pointer activation", () => {
+  for (const [name, Picker] of [
+    ["Select", Select],
+    ["Combobox", Combobox],
+  ] as const) {
+    it(`${name} opens once when the real trigger is clicked`, async () => {
+      const result = renderWithProviders(<Picker aria-label="Choice" options={options} />);
+      const trigger = result.getByRole("combobox", { name: "Choice" });
+      fireEvent.click(trigger, { detail: 1 });
+      await waitFor(() => expect(trigger.getAttribute("aria-expanded")).toBe("true"));
+    });
+    it(`${name} keeps keyboard opening and ignores disabled clicks`, () => {
+      const result = renderWithProviders(<Picker aria-label="Choice" options={options} />);
+      fireEvent.keyDown(result.getByRole("combobox"), { key: " " });
+      expect(result.getByRole("combobox").getAttribute("aria-expanded")).toBe("true");
+      result.unmount();
+      const disabled = renderWithProviders(
+        <Picker aria-label="Choice" options={options} disabled />,
+      );
+      fireEvent.click(disabled.getByRole("combobox"), { detail: 1 });
+      expect(disabled.getByRole("combobox").getAttribute("aria-expanded")).toBe("false");
+    });
+  }
+  it("clear changes the value without opening the sheet", async () => {
+    const result = renderWithProviders(<ClearHarness />);
+    const clear = result.getByRole("button", { name: "Clear" });
+    expect(clear.className).toContain("_miw-44px");
+    expect(clear.className).toContain("_mih-44px");
+    fireEvent.click(clear, { detail: 1 });
+    await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
+    expect(result.getByRole("combobox", { name: "Choice" }).getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+  });
+});
+
+it("desktop clear retains compact geometry and never opens on pointer down or click", async () => {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: 1200 });
+  const result = renderWithProviders(<ClearHarness />);
+  const trigger = result.getByRole("combobox", { name: "Choice" });
+  const clear = result.getByRole("button", { name: "Clear" });
+  expect(trigger.className).toContain("_h-37px");
+  expect(clear.className).toContain("_h-37px");
+  expect(clear.className).toContain("_miw-44px");
+  expect(clear.getAttribute("data-mp-press-slop")).toBe("4");
+  expect(clear.getAttribute("data-mp-press-axis")).toBe("vertical");
+  fireEvent.mouseDown(clear, { detail: 1 });
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  fireEvent.mouseUp(clear, { detail: 1 });
+  fireEvent.click(clear, { detail: 1 });
+  await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+});

package/src/fields/pickerDensity.spec.tsx

@@ -0,0 +1,86 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { Select } from "./Select";
+import { Combobox } from "./Combobox";
+
+const mode = vi.hoisted(() => ({ height: 37, fontSize: 14, table: false }));
+vi.mock("../shared/tableCellContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../shared/tableCellContext")>()),
+  useIsInTableCell: () => mode.table,
+}));
+
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useResolvedKnobs: (...args: Parameters<typeof actual.useResolvedKnobs>) => {
+      const resolved = actual.useResolvedKnobs(...args);
+      return {
+        ...resolved,
+        knobProps: {
+          ...resolved.knobProps,
+          control: { ...resolved.knobProps.control, height: mode.height },
+          controlType: { ...resolved.knobProps.controlType, fontSize: mode.fontSize },
+        },
+      };
+    },
+  };
+});
+
+describe("picker desktop recipe sizing", () => {
+  for (const [name, Picker] of [
+    ["Select", Select],
+    ["Combobox", Combobox],
+  ] as const) {
+    for (const table of [false, true]) {
+      it(`${name} table=${table} honors the resolved height and label font without a desktop floor`, () => {
+        mode.table = table;
+        mode.height = 37;
+        mode.fontSize = 14;
+        const result = renderWithProviders(
+          <Picker
+            options={[
+              { value: "one", label: "First choice" },
+              { value: "two", label: "Second choice" },
+            ]}
+            value="one"
+          />,
+        );
+        const trigger = result.container.querySelector('[data-testid$="-trigger"]')!;
+        expect(trigger).toBeTruthy();
+        expect(trigger.className).not.toContain("_mih-44px");
+        expect(trigger.className).toContain("_h-37px");
+        expect(trigger.getAttribute("data-visual-height")).toBe("37");
+        expect(trigger.getAttribute("data-mp-press-slop")).toBe("4");
+        expect(trigger.getAttribute("data-mp-press-axis")).toBe("vertical");
+        expect(trigger.className).toContain("_miw-44px");
+        expect(trigger.className).toContain("_oy-visible");
+        const targetCss = document.getElementById("mp-button-press-slop")?.textContent;
+        expect(targetCss).toContain("isolation:isolate");
+        expect(targetCss).toContain("z-index:-1");
+        const label = result.getByText("First choice");
+        expect(label.className).toContain("_fos-14px");
+      });
+      it(`${name} table=${table} retains the shared touch recipe floor`, () => {
+        const recipe = sizeRecipeForToken("$3", { touch: true });
+        mode.height = recipe.height;
+        mode.fontSize = recipe.fontSize;
+        mode.table = table;
+        expect(recipe.height).toBeGreaterThanOrEqual(44);
+        const result = renderWithProviders(
+          <Picker
+            options={[
+              { value: "one", label: "First choice" },
+              { value: "two", label: "Second choice" },
+            ]}
+            value="one"
+          />,
+        );
+        const trigger = result.container.querySelector('[data-testid$="-trigger"]')!;
+        expect(trigger.className).toContain(`_h-${recipe.height}px`);
+        expect(trigger.getAttribute("data-press-floor")).toBe("box");
+      });
+    }
+  }
+});

package/src/fields/pickerRows.spec.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { Select } from "./Select";
+import { Combobox } from "./Combobox";
+
+const recipe = vi.hoisted(() => ({ height: 37 }));
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useResolvedKnobs: (...args: Parameters<typeof actual.useResolvedKnobs>) => {
+      const result = actual.useResolvedKnobs(...args);
+      return {
+        ...result,
+        knobProps: {
+          ...result.knobProps,
+          control: { ...result.knobProps.control, height: recipe.height },
+        },
+      };
+    },
+  };
+});
+vi.mock("../FloatingPanel", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../FloatingPanel")>()),
+  useViewportGtSm: () => false,
+  FloatingPanel: ({ trigger, children }: { trigger?: ReactNode; children?: ReactNode }) => (
+    <>
+      {trigger}
+      {children}
+    </>
+  ),
+}));
+
+describe("picker sheet rows consume resolved control height", () => {
+  for (const [name, Picker] of [
+    ["Select", Select],
+    ["Combobox", Combobox],
+  ] as const) {
+    for (const height of [37, 48]) {
+      it(`${name} retains labels and selection at resolved height ${height}`, () => {
+        recipe.height = height;
+        const onValueChange = vi.fn();
+        const result = renderWithProviders(
+          <Picker
+            value="one"
+            onValueChange={onValueChange}
+            options={[
+              { value: "one", label: "First choice" },
+              { value: "two", label: "Second choice" },
+            ]}
+          />,
+        );
+        const row =
+          name === "Select"
+            ? result.getByText("Second choice").parentElement!
+            : result.getByRole("option", { name: "Second choice" });
+        expect(row.className).toContain(`_h-${height}px`);
+        fireEvent.click(row);
+        expect(onValueChange).toHaveBeenCalledWith("two");
+        expect(onValueChange).toHaveBeenCalledTimes(1);
+      });
+    }
+  }
+});

package/src/index.ts

@@ -218,6 +218,15 @@ export type { BarcodePreviewProps } from "./fields/Barcode/BarcodePreview";
 
 export { Geolocation } from "./fields/Geolocation";
 export type { GeolocationProps, GeolocationMapProps } from "./fields/Geolocation";
+export type {
+  GeocodeFn,
+  GeocodeQuery,
+  GeocodeResult,
+  Geocoder,
+  ReverseGeocodeFn,
+  ReverseGeocodeQuery,
+} from "./fields/Geolocation/geocoder";
+export { resolveGeocoder } from "./fields/Geolocation/geocoder";
 
 export { ImageField } from "./fields/ImageField";
 export type { ImageFieldProps } from "./fields/ImageField";