@multiplatform.one/forms 6.6.0 → 7.0.0

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

@@ -66,6 +66,67 @@ describe("Stepper", () => {
       expect(input?.getAttribute("placeholder")).toBe("Enter number");
       expect(input?.getAttribute("maxLength")).toBe("5");
     });
+
+    it("exposes a spinbutton and disables the decrement at min", async () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" defaultValue={0} min={0} max={10} />,
+      );
+      const input = result.container.querySelector('[role="spinbutton"]') as HTMLInputElement;
+      expect(input).toBeTruthy();
+      expect(input.value).toBe("0");
+      expect(input.getAttribute("aria-valuenow")).toBe("0");
+      expect(input.getAttribute("aria-valuemin")).toBe("0");
+      expect(input.getAttribute("aria-valuemax")).toBe("10");
+
+      const decrease = result.container.querySelector('[aria-label="Decrease"]') as HTMLElement;
+      const increase = result.container.querySelector('[aria-label="Increase"]') as HTMLElement;
+      expect(decrease.getAttribute("aria-disabled")).toBe("true");
+      expect(increase.getAttribute("aria-disabled")).toBeFalsy();
+
+      await act(async () => {
+        fireEvent.click(decrease);
+      });
+      expect(input.value).toBe("0");
+    });
+
+    it("steps with arrow keys and clamps Home/End (Spectrum NumberField)", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Stepper label="Quantity" defaultValue={5} min={0} max={10} step={1} onChange={onChange} />,
+      );
+      const input = result.container.querySelector('[role="spinbutton"]') as HTMLInputElement;
+      await act(async () => {
+        fireEvent.keyDown(input, { key: "ArrowUp" });
+      });
+      expect(input.value).toBe("6");
+      expect(onChange).toHaveBeenLastCalledWith(6);
+
+      await act(async () => {
+        fireEvent.keyDown(input, { key: "Home" });
+      });
+      expect(input.value).toBe("0");
+
+      await act(async () => {
+        fireEvent.keyDown(input, { key: "End" });
+      });
+      expect(input.value).toBe("10");
+      const increase = result.container.querySelector('[aria-label="Increase"]') as HTMLElement;
+      expect(increase.getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("keeps focus on the field when a spin button is pressed (LC-71)", async () => {
+      const result = renderWithProviders(<Stepper label="Quantity" defaultValue={4} min={0} />);
+      const input = result.container.querySelector('[role="spinbutton"]') as HTMLInputElement;
+      await act(async () => {
+        input.focus();
+      });
+      const increase = result.container.querySelector('[aria-label="Increase"]') as HTMLElement;
+      await act(async () => {
+        fireEvent.pointerDown(increase);
+      });
+      expect(increase).not.toBe(document.activeElement);
+      expect(document.activeElement).toBe(input);
+    });
   });
 
   describe("with form context", () => {
@@ -182,4 +243,39 @@ describe("Stepper", () => {
       });
     });
   });
+
+  describe("bound feedback (LC-71)", () => {
+    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} />,
+      );
+      expect(result.container.textContent).not.toContain("Minimum reached");
+      expect(result.container.querySelector("[data-mp-disabled-reason]")).toBeNull();
+    });
+
+    it("shows Minimum reached in the field helper slot only after a decrement at min", async () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" defaultValue={1} min={1} max={10} />,
+      );
+      const decrease = result.container.querySelector('[aria-label="Decrease"]');
+      expect(decrease).toBeTruthy();
+      await act(async () => {
+        fireEvent.click(decrease as Element);
+      });
+      expect(result.container.textContent).toContain("Minimum reached");
+      const input = result.getInput() as HTMLInputElement;
+      expect(input?.value).toBe("1");
+    });
+
+    it("keeps plus and minus as segments of one control, not independent buttons", () => {
+      const result = renderWithProviders(
+        <Stepper label="Quantity" defaultValue={1} min={1} max={10} />,
+      );
+      expect(result.container.querySelector("[data-stepper-control]")).toBeTruthy();
+      expect(result.container.querySelector("[data-mp-disabled-reason-wrapper]")).toBeNull();
+      const decrease = result.container.querySelector('[aria-label="Decrease"]');
+      expect(decrease?.closest("[aria-disabled='true']")).toBeTruthy();
+      expect(decrease?.hasAttribute("disabled")).toBeFalsy();
+    });
+  });
 });

package/src/fields/Stepper/Stepper.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta<typeof Stepper> = {
     min: { control: "number" },
     max: { control: "number" },
     step: { control: "number" },
-    // @ts-expect-error controlled mode not supported
     value: { control: "number" },
     defaultValue: { control: "number" },
     precision: { control: "number" },
@@ -56,8 +55,8 @@ export const Main: Story = {
       return (
         <Form form={form}>
           <YStack gap="$4">
-            <Stepper label="Quantity" name="quantity" min={1} max={100} />
-            <Stepper label="Price" name="price" step={0.01} min={0} />
+            <Stepper label="Quantity" name="quantity" min={1} max={100} buttonPosition="both" />
+            <Stepper label="Price" name="price" step={0.01} precision={2} min={0} />
             <Stepper label="Discount (%)" name="discount" min={0} max={50} step={5} />
             <Button action="submit">Submit</Button>
           </YStack>
@@ -134,14 +133,13 @@ export const Sizes: Story = {
 export const Interactive: Story = {
   render: () => {
     const InteractiveExample = () => {
-      const [value, setValue] = useState<number | undefined>(0);
+      const [value, setValue] = useState<number | null>(0);
       return (
         <YStack gap="$4" maxWidth={400}>
           <Stepper
             label="Quantity"
             value={value}
-            // @ts-expect-error controlled mode not supported
-            onChange={(val: number | undefined) => {
+            onChange={(val: number | null) => {
               setValue(val);
               action("onChange")(val);
             }}