@multiplatform.one/forms 7.7.6 → 7.10.0

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} />,

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/ToggleGroup/ToggleGroup.native.spec.tsx

@@ -0,0 +1,73 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { ToggleGroup } from "./index";
+
+// MPO-283. Before this the whole segmented control was absent from the iOS
+// tree. See RadioGroup.native.spec.tsx for why the state object is pinned in
+// shared/nativeA11y.spec.ts rather than here.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const severity = [
+  { label: "error", value: "error" },
+  { label: "warning", value: "warning" },
+  { label: "info", value: "info", disabled: true },
+];
+
+const names = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[accessibilityrole]")).map((el) => [
+    el.getAttribute("accessibilityrole"),
+    el.getAttribute("accessibilitylabel"),
+  ]);
+
+describe("native ToggleGroup accessibility contract", () => {
+  it("puts every segment in the tree as a named control", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup label="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "error"],
+      ["button", "warning"],
+      ["button", "info"],
+    ]);
+  });
+
+  // The platform role is `button` for both kinds, measured: a radio/checkbox
+  // accessibilityRole takes the element out of the iOS tree entirely.
+  it("keeps every segment in the tree when the group takes several values", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup type="multiple" options={severity} value={["error"]} />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "error"],
+      ["button", "warning"],
+      ["button", "info"],
+    ]);
+  });
+
+  it("prefixes a group accessibilityLabel onto each segment, because iOS never reads a container", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup accessibilityLabel="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Severity, warning"]);
+  });
+
+  it("takes aria-label as an alias, since tamagui never maps it onto native", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup aria-label="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Severity, warning"]);
+  });
+
+  it("lets a segment override its own name", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup
+        options={[{ label: "●", value: "on", accessibilityLabel: "Filled" }]}
+        value="on"
+      />,
+    );
+    expect(names(container)).toEqual([["button", "Filled"]]);
+  });
+});

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -294,6 +294,55 @@ describe("ToggleGroup", () => {
     });
   });
 
+  describe("per-segment elevation wrapper (MPO-133)", () => {
+    function elevationWrapperFor(segment: HTMLElement): HTMLElement {
+      const wrapper = segment.parentElement as HTMLElement;
+      expect(wrapper?.getAttribute("style") ?? "").toMatch(/box-shadow/);
+      return wrapper;
+    }
+
+    it("lays the wrapper out as a row so the segment's zero flex-basis sizes width, not height", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      for (const segment of segments) {
+        expect(segment.className).toContain("_fb-0px");
+        const wrapper = elevationWrapperFor(segment);
+        expect(wrapper.className).toContain("_fd-row");
+        expect(wrapper.className).toContain("_fg-1");
+      }
+    });
+
+    it("keeps the row wrapper in the vertical orientation", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup
+          label="Alignment"
+          options={options}
+          defaultValue="left"
+          orientation="vertical"
+        />,
+      );
+      const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      for (const segment of segments) {
+        expect(segment.className).toContain("_fb-0px");
+        expect(elevationWrapperFor(segment).className).toContain("_fd-row");
+      }
+    });
+
+    it("leaves the group frame flat while the segments carry the shadow (E-FLAT)", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      const group = container.querySelector('[role="group"]') as HTMLElement;
+      expect(group).toBeTruthy();
+      expect(group.className).not.toMatch(/_bxsh-/);
+      expect(group.getAttribute("style") ?? "").not.toMatch(/box-shadow/);
+    });
+  });
+
   describe("one tab stop (LC-49 / SB-M-217)", () => {
     it("exposes exactly one tab stop among the segments", () => {
       const { container } = renderWithHouseThemes(