@multiplatform.one/forms 7.90.6 → 8.1.0

package/src/fields/Select/Select.stories.tsx

@@ -177,9 +177,9 @@ export const Basic: Story = {
       <Select
         {...args}
         value={value || undefined}
-        onValueChange={(val) => {
+        onChange={(val) => {
           setValue(Array.isArray(val) ? (val[0] ?? "") : val);
-          action("onValueChange")(val);
+          action("onChange")(val);
         }}
       />
     );
@@ -327,7 +327,7 @@ export const DynamicOptions: StoryObj<typeof Select> = {
             options={categoryOptions}
             value={category}
             placeholder="Select a category"
-            onValueChange={(val) => setCategory(Array.isArray(val) ? (val[0] ?? "") : val)}
+            onChange={(val) => setCategory(Array.isArray(val) ? (val[0] ?? "") : val)}
           />
 
           <Select
@@ -395,9 +395,9 @@ export const Comparison: StoryObj<typeof Select> = {
               placeholder="Select an option"
               groupLabel="Options"
               value={customValue}
-              onValueChange={(val) => {
+              onChange={(val) => {
                 setCustomValue(Array.isArray(val) ? val[0] : val);
-                action("custom.onValueChange")(val);
+                action("custom.onChange")(val);
               }}
             />
           </YStack>

package/src/fields/Select/index.tsx

@@ -114,11 +114,8 @@ export interface SelectProps {
   defaultValue?: string | string[];
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: string | string[]) => void;
-  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui/Radix name. */
-  onValueChange?: (value: string | string[]) => void;
   onBlur?: (...args: any[]) => void;
   options: SelectOption[];
   placeholder?: string;
@@ -1714,7 +1711,6 @@ export function Select({
   value,
   defaultValue,
   onChange,
-  onValueChange,
   onBlur,
   options,
   placeholder = t("Select an option"),
@@ -1728,11 +1724,10 @@ export function Select({
   "aria-label": ariaLabel,
   ...rest
 }: SelectProps) {
-  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // Canonical `onChange` fires from the
   // single emit site in renderSelectContent (same reconciliation as Switch).
   const emitValueChange = (val: string | string[]) => {
     onChange?.(val);
-    onValueChange?.(val);
   };
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,

package/src/fields/Slider/Slider.spec.tsx

@@ -48,10 +48,10 @@ describe("Slider", () => {
   });
 
   describe("value changes", () => {
-    it("should call onValueChange callback", async () => {
-      const onValueChange = vi.fn();
+    it("should call onChange callback", async () => {
+      const onChange = vi.fn();
       const result = renderWithProviders(
-        <Slider label="Change Slider" name="change" value={[30]} onValueChange={onValueChange} />,
+        <Slider label="Change Slider" name="change" value={[30]} onChange={onChange} />,
       );
       const slider = result.container.querySelector('[role="slider"]');
       if (slider) {
@@ -59,20 +59,13 @@ describe("Slider", () => {
           fireEvent.keyDown(slider, { key: "ArrowRight" });
         });
       }
-      expect(onValueChange).toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalled();
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias with the same payload", async () => {
+    it("fires canonical onChange", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <Slider
-          label="Canonical Slider"
-          name="canonical"
-          value={[30]}
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
+        <Slider label="Canonical Slider" name="canonical" value={[30]} onChange={onChange} />,
       );
       const slider = result.container.querySelector('[role="slider"]');
       expect(slider).toBeTruthy();
@@ -82,9 +75,6 @@ describe("Slider", () => {
         });
       }
       expect(onChange).toHaveBeenCalled();
-      expect(onValueChange).toHaveBeenCalled();
-      expect(onChange.mock.calls.length).toBe(onValueChange.mock.calls.length);
-      expect(onChange.mock.lastCall).toEqual(onValueChange.mock.lastCall);
     });
   });
 
@@ -218,21 +208,17 @@ describe("Slider", () => {
 
     it("standalone controlled: a value arriving after mount renders, without onChange", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <Slider label="Progress" value={[25]} onChange={onChange} onValueChange={onValueChange} />,
+        <Slider label="Progress" value={[25]} onChange={onChange} />,
       );
       expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("25");
 
       // Late seed: the upstream doc value arrives after first paint.
-      result.rerender(
-        <Slider label="Progress" value={[75]} onChange={onChange} onValueChange={onValueChange} />,
-      );
+      result.rerender(<Slider label="Progress" value={[75]} onChange={onChange} />);
       await waitFor(() => {
         expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("75");
       });
       expect(onChange).not.toHaveBeenCalled();
-      expect(onValueChange).not.toHaveBeenCalled();
     });
 
     it("form-integrated: a field value set after mount renders, without onChange", async () => {

package/src/fields/Slider/Slider.stories.tsx

@@ -139,7 +139,7 @@ export const Basic: Story = {
     value: [50],
     min: 0,
     max: 100,
-    onValueChange: action("onValueChange"),
+    onChange: action("onChange"),
   },
 };
 
@@ -151,7 +151,7 @@ export const RangeSlider: Story = {
     value: [25, 75],
     min: 0,
     max: 100,
-    onValueChange: action("onValueChange"),
+    onChange: action("onChange"),
   },
 };
 
@@ -192,7 +192,7 @@ export const Interactive: Story = {
       const [value, setValue] = useState([50]);
       return (
         <YStack gap="$4" maxWidth={400}>
-          <Slider label="Adjust Value" value={value} min={0} max={100} onValueChange={setValue} />
+          <Slider label="Adjust Value" value={value} min={0} max={100} onChange={setValue} />
           <Text>Current value: {value[0]}</Text>
         </YStack>
       );
@@ -235,9 +235,9 @@ export const Comparison: Story = {
               value={customVal}
               min={0}
               max={100}
-              onValueChange={(val) => {
+              onChange={(val) => {
                 setCustomVal(val);
-                action("custom.onValueChange")(val);
+                action("custom.onChange")(val);
               }}
             />
           </YStack>

package/src/fields/Slider/index.tsx

@@ -173,11 +173,8 @@ export interface SliderProps {
   defaultValue?: number[];
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: number[]) => void;
-  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui name. */
-  onValueChange?: (value: number[]) => void;
   onBlur?: (...args: any[]) => void;
   min?: number;
   max?: number;
@@ -815,7 +812,6 @@ export function Slider({
   value,
   defaultValue,
   onChange,
-  onValueChange,
   onBlur,
   min = 0,
   max = 100,
@@ -825,11 +821,10 @@ export function Slider({
   "aria-label": ariaLabel,
   native = true,
 }: SliderProps) {
-  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // Canonical `onChange` fires from the
   // single emit site below (same reconciliation as Switch).
   const handleValueChange = (values: number[]) => {
     onChange?.(values);
-    onValueChange?.(values);
   };
   const { resolvedForm, knobProps, elevation, id } = useFormField({
     form: formProp,

package/src/fields/TextArea/TextArea.spec.tsx

@@ -35,20 +35,15 @@ describe("TextArea", () => {
     });
 
     it("should handle text changes", async () => {
-      const onChangeText = vi.fn();
+      const onChange = vi.fn();
       const result = renderWithProviders(
-        <TextArea
-          label="Description"
-          name="description"
-          onChangeText={onChangeText}
-          defaultValue=""
-        />,
+        <TextArea label="Description" name="description" onChange={onChange} defaultValue="" />,
       );
       const textarea = result.getTextArea();
       await act(async () => {
         if (textarea) fireEvent.change(textarea, { target: { value: "New description" } });
       });
-      expect(onChangeText).toHaveBeenCalledWith("New description");
+      expect(onChange).toHaveBeenCalledWith("New description");
     });
 
     it("should handle maxLength constraint", () => {
@@ -116,19 +111,19 @@ describe("TextArea", () => {
     });
 
     it("should handle state transitions", async () => {
-      const onChangeText = vi.fn();
+      const onChange = vi.fn();
       const result = renderWithProviders(
-        <TextArea name="description" defaultValue="Initial text" onChangeText={onChangeText} />,
+        <TextArea name="description" defaultValue="Initial text" onChange={onChange} />,
       );
       const textarea = result.getTextArea();
 
       await act(async () => {
         if (textarea) fireEvent.change(textarea, { target: { value: "Updated text" } });
       });
-      expect(onChangeText).toHaveBeenCalledWith("Updated text");
+      expect(onChange).toHaveBeenCalledWith("Updated text");
 
       if (textarea) fireEvent.change(textarea, { target: { value: "" } });
-      expect(onChangeText).toHaveBeenCalledWith("");
+      expect(onChange).toHaveBeenCalledWith("");
     });
   });
 
@@ -185,17 +180,17 @@ describe("TextArea", () => {
     });
 
     it("should handle disabled state in form context", async () => {
-      const onChangeText = vi.fn();
+      const onChange = vi.fn();
       const result = renderWithProviders(
         <Form formOptions={{ defaultValues: { description: "Initial text" } }}>
-          <TextArea label="Description" name="description" disabled onChangeText={onChangeText} />
+          <TextArea label="Description" name="description" disabled onChange={onChange} />
         </Form>,
       );
       const textarea = result.getTextArea();
       await act(async () => {
         if (textarea) fireEvent.change(textarea, { target: { value: "New text" } });
       });
-      expect(onChangeText).not.toHaveBeenCalled();
+      expect(onChange).not.toHaveBeenCalled();
       const isDisabled =
         textarea?.hasAttribute("disabled") || textarea?.getAttribute("aria-disabled") === "true";
       expect(isDisabled).toBeTruthy();
@@ -210,20 +205,13 @@ describe("TextArea", () => {
     // programmatic value must not emit onChange (LC-14).
     it("form-integrated: a field value set after mount displays with a live count, without onChange", async () => {
       const onChange = vi.fn();
-      const onChangeText = vi.fn();
       let formApi: { setFieldValue: (name: "notes", value: string) => void } | undefined;
       const TestComponent = () => {
         const form = useForm({ defaultValues: { notes: "" } });
         formApi = form as unknown as typeof formApi;
         return (
           <Form form={form}>
-            <TextArea
-              label="Notes"
-              name="notes"
-              showCount
-              onChange={onChange}
-              onChangeText={onChangeText}
-            />
+            <TextArea label="Notes" name="notes" showCount onChange={onChange} />
           </Form>
         );
       };
@@ -238,24 +226,21 @@ describe("TextArea", () => {
         expect(result.findTextElement("11 characters")).toBeDefined();
       });
       expect(onChange).not.toHaveBeenCalled();
-      expect(onChangeText).not.toHaveBeenCalled();
     });
 
     it("standalone controlled: a value arriving after mount updates the count, without onChange", async () => {
-      const onChangeText = vi.fn();
+      const onChange = vi.fn();
       const result = renderWithProviders(
-        <TextArea label="Notes" value="" showCount onChangeText={onChangeText} />,
+        <TextArea label="Notes" value="" showCount onChange={onChange} />,
       );
       expect(result.findTextElement("0 characters")).toBeDefined();
 
-      result.rerender(
-        <TextArea label="Notes" value="late value" showCount onChangeText={onChangeText} />,
-      );
+      result.rerender(<TextArea label="Notes" value="late value" showCount onChange={onChange} />);
       await waitFor(() => {
         expect((result.getTextArea() as HTMLTextAreaElement)?.value).toBe("late value");
         expect(result.findTextElement("10 characters")).toBeDefined();
       });
-      expect(onChangeText).not.toHaveBeenCalled();
+      expect(onChange).not.toHaveBeenCalled();
     });
   });
 
@@ -345,20 +330,17 @@ describe("TextArea", () => {
   });
 
   describe("LC-14 canonical onChange(value)", () => {
-    it("fires onChange with the string; onChangeText alias fires from the same site", async () => {
+    it("fires onChange with the string", async () => {
       const onChange = vi.fn();
-      const onChangeText = vi.fn();
       const result = renderWithProviders(
-        <TextArea label="Notes" defaultValue="" onChange={onChange} onChangeText={onChangeText} />,
+        <TextArea label="Notes" defaultValue="" onChange={onChange} />,
       );
       const textarea = result.getTextArea();
       await act(async () => {
         if (textarea) fireEvent.change(textarea, { target: { value: "hello" } });
       });
       expect(onChange).toHaveBeenCalledWith("hello");
-      expect(onChangeText).toHaveBeenCalledWith("hello");
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChangeText).toHaveBeenCalledTimes(1);
     });
   });
 

package/src/fields/TextArea/TextArea.stories.tsx

@@ -111,7 +111,7 @@ export const Basic: Story = {
     helperText: "Enter a detailed description",
     name: "description",
     textAreaProps: { placeholder: "Type your description here..." },
-    onChangeText: action("onChangeText"),
+    onChange: action("onChange"),
   },
 };
 
@@ -177,9 +177,9 @@ export const AutoResize: Story = {
             minRows={2}
             maxRows={6}
             value={val}
-            onChangeText={(text) => {
+            onChange={(text) => {
               setVal(text);
-              action("onChangeText")(text);
+              action("onChange")(text);
             }}
             textAreaProps={{ placeholder: "Start typing to see it grow..." }}
             showCount
@@ -187,7 +187,7 @@ export const AutoResize: Story = {
           <TextArea
             label="Default (no auto-resize)"
             value={val}
-            onChangeText={setVal}
+            onChange={setVal}
             textAreaProps={{ placeholder: "Fixed height for comparison" }}
           />
         </YStack>
@@ -230,9 +230,9 @@ export const Comparison: Story = {
             <TextArea
               textAreaProps={{ placeholder: "Type here..." }}
               value={customVal}
-              onChangeText={(text) => {
+              onChange={(text) => {
                 setCustomVal(text);
-                action("custom.onChangeText")(text);
+                action("custom.onChange")(text);
               }}
             />
           </YStack>

package/src/fields/TextArea/index.tsx

@@ -36,8 +36,6 @@ export interface TextAreaProps {
   defaultValue?: string;
   /** Canonical change contract (LC-14): emits the string value. */
   onChange?: (value: string) => void;
-  /** @deprecated Use onChange. Still fires from the same emit site. */
-  onChangeText?: (text: string) => void;
   onBlur?: (...args: any[]) => void;
   placeholder?: string;
   textAreaProps?: Omit<TamaguiTextAreaProps, "value" | "id" | "onChange" | "onChangeText">;
@@ -72,7 +70,6 @@ export function TextArea({
   value,
   defaultValue,
   onChange,
-  onChangeText,
   onBlur,
   placeholder,
   textAreaProps,
@@ -316,7 +313,6 @@ export function TextArea({
               setCharCount(text.length);
               handleChange?.(text);
               onChange?.(text);
-              onChangeText?.(text);
               measureAndResize();
             }}
             {...(autoResize && !isWeb

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

@@ -85,25 +85,16 @@ describe("ToggleGroup", () => {
       expect(result.findTextElement("Left")).toBeDefined();
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias once each", () => {
+    it("fires canonical onChange once", () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <ToggleGroup
-          label="Alignment"
-          name="align"
-          options={options}
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
+        <ToggleGroup label="Alignment" name="align" options={options} onChange={onChange} />,
       );
       const center = result.findTextElement("Center");
       expect(center).toBeDefined();
       if (center) fireEvent.click(center);
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith("center");
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith("center");
     });
   });
 

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -135,7 +135,7 @@ export const Basic: Story = {
       { label: "Center", value: "center" },
       { label: "Right", value: "right" },
     ],
-    onValueChange: action("onValueChange"),
+    onChange: action("onChange"),
   },
 };
 
@@ -170,7 +170,7 @@ export const ItemDisabledReason: Story = {
       },
       { label: "Right", value: "right" },
     ],
-    onValueChange: action("onValueChange"),
+    onChange: action("onChange"),
   },
 };
 
@@ -267,7 +267,7 @@ export const Interactive: Story = {
             label="Text alignment"
             type="single"
             value={value}
-            onValueChange={(val) => setValue(val as string)}
+            onChange={(val) => setValue(val as string)}
             options={[
               { label: "Left", value: "left" },
               { label: "Center", value: "center" },
@@ -322,9 +322,9 @@ export const Comparison: Story = {
               type="single"
               value={customVal}
               options={alignmentOptions}
-              onValueChange={(val) => {
+              onChange={(val) => {
                 setCustomVal(val as string);
-                action("custom.onValueChange")(val);
+                action("custom.onChange")(val);
               }}
             />
           </YStack>

package/src/fields/ToggleGroup/index.tsx

@@ -211,11 +211,8 @@ export interface ToggleGroupProps {
   defaultValue?: string | string[];
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: string | string[]) => void;
-  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui name. */
-  onValueChange?: (value: string | string[]) => void;
   onBlur?: (...args: any[]) => void;
   options?: ToggleGroupOption[];
   orientation?: "horizontal" | "vertical";
@@ -269,7 +266,6 @@ export function ToggleGroup({
   value,
   defaultValue,
   onChange,
-  onValueChange,
   onBlur,
   options,
   orientation = "horizontal",
@@ -281,11 +277,10 @@ export function ToggleGroup({
   "aria-labelledby": ariaLabelledBy,
   native = true,
 }: ToggleGroupProps) {
-  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // Canonical `onChange` fires from the
   // single emit site below (same reconciliation as Switch).
   const handleValueChange = (val: string | string[]) => {
     onChange?.(val);
-    onValueChange?.(val);
   };
   // MPO-283: one name, two channels. tamagui drops `aria-label` on native, so
   // the prop and the attribute are reconciled here and each platform is handed

package/src/fields/pickerActivation.spec.tsx

@@ -40,7 +40,7 @@ function ClearHarness() {
         aria-label="Choice"
         options={options}
         value={value}
-        onValueChange={(next) => {
+        onChange={(next) => {
           if (typeof next === "string") setValue(next);
         }}
         clearable

package/src/fields/pickerRows.spec.tsx

@@ -43,11 +43,11 @@ describe("picker sheet rows consume resolved control height", () => {
     for (const height of [37, 48]) {
       it(`${name} retains labels and selection at resolved height ${height}`, () => {
         recipe.height = height;
-        const onValueChange = vi.fn();
+        const onChange = vi.fn();
         const result = renderWithProviders(
           <Picker
             value="one"
-            onValueChange={onValueChange}
+            onChange={onChange}
             // Eight options: a shorter Select opens as a menu, not its sheet (FZ-7830).
             options={[
               { value: "one", label: "First choice" },
@@ -62,8 +62,8 @@ describe("picker sheet rows consume resolved control height", () => {
             : result.getByRole("option", { name: "Second choice" });
         expect(row.className).toContain(`_h-${height}px`);
         fireEvent.click(row);
-        expect(onValueChange).toHaveBeenCalledWith("two");
-        expect(onValueChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith("two");
+        expect(onChange).toHaveBeenCalledTimes(1);
       });
     }
   }