@multiplatform.one/forms 7.90.6 → 8.0.0

package/src/fields/DatePicker/DatetimePicker.native.tsx

@@ -55,7 +55,6 @@ export type DatetimePickerProps<
     skeleton?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
-    onValueChange?: (value: Date | null) => void;
     native?: boolean;
     /** How wide the catalog picker opens (`native={false}`), LC-112. */
     panelWidth?: PanelWidth;
@@ -88,7 +87,6 @@ export function DatetimePicker<
     defaultValue,
     value: controlledValue,
     onChange,
-    onValueChange,
     form,
     placeholder = t("Select date & time"),
     minDate,
@@ -134,10 +132,9 @@ export function DatetimePicker<
       setSelected(date);
       fieldChange?.(date);
       onChange?.(date);
-      onValueChange?.(date);
       setOpen(false);
     },
-    [onChange, onValueChange],
+    [onChange],
   );
 
   const renderControl = (

package/src/fields/DatePicker/DatetimePicker.spec.tsx

@@ -92,16 +92,10 @@ describe("DatetimePicker", () => {
       expect(trigger.getAttribute("aria-labelledby")).toBe(`${trigger.id}-label`);
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias once when a day is picked", async () => {
+    it("fires canonical onChange once when a day is picked", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <DatetimePicker
-          label="Appointment"
-          name="appt"
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
+        <DatetimePicker label="Appointment" name="appt" onChange={onChange} />,
       );
 
       const trigger = result.container.querySelector("input,button,[role='button']");
@@ -120,9 +114,7 @@ describe("DatetimePicker", () => {
       });
 
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledTimes(1);
       expect(onChange.mock.calls[0][0]).toBeInstanceOf(Date);
-      expect(onChange.mock.calls[0][0]).toEqual(onValueChange.mock.calls[0][0]);
     });
   });
 
@@ -186,19 +178,13 @@ describe("DatetimePicker", () => {
     // onChange (LC-14: a seeded value is not a user edit).
     it("form-integrated: a field value set after mount displays, without onChange", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       let formApi: { setFieldValue: (name: "appt", value: Date | null) => void } | undefined;
       const TestComponent = () => {
         const form = useForm({ defaultValues: { appt: null as Date | null } });
         formApi = form as unknown as typeof formApi;
         return (
           <Form form={form}>
-            <DatetimePicker
-              name="appt"
-              label="Appointment"
-              onChange={onChange}
-              onValueChange={onValueChange}
-            />
+            <DatetimePicker name="appt" label="Appointment" onChange={onChange} />
           </Form>
         );
       };
@@ -213,7 +199,6 @@ describe("DatetimePicker", () => {
         expect(getInput()?.value ?? "").toContain("Mar 5, 2026");
       });
       expect(onChange).not.toHaveBeenCalled();
-      expect(onValueChange).not.toHaveBeenCalled();
     });
   });
 });

package/src/fields/DatePicker/DatetimePicker.stories.tsx

@@ -131,11 +131,11 @@ export const ControlledRejection: Story = {
           <DatetimePicker
             label="Pinned Value"
             value={pinned}
-            onValueChange={(v) => {
+            onChange={(v) => {
               setAttempts((a) => a + 1);
-              action("onValueChange")(v);
+              action("onChange")(v);
             }}
-            helperText="Parent ignores onValueChange — the value must not drift"
+            helperText="Parent ignores onChange — the value must not drift"
           />
           <Text>{`attempts:${attempts}`}</Text>
         </YStack>

package/src/fields/DatePicker/catalog.tsx

@@ -72,11 +72,8 @@ export type DatePickerProps<
     value?: Date | string | null;
     /**
      * Canonical change handler, consistent with the rest of the field family.
-     * Prefer this over `onValueChange`.
      */
     onChange?: (value: Date | null) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog calendar; omit for the OS picker. */
     native?: boolean;
     /**
@@ -189,7 +186,6 @@ export function DatePicker<
     defaultValue,
     value: controlledValue,
     onChange,
-    onValueChange,
     form,
     inputProps: _inputProps,
     placeholder = t("Select date"),
@@ -253,12 +249,11 @@ export function DatePicker<
       setDisplayDate(date);
       // Form mode: commit into TanStack field state (clears meta errors on change).
       fieldChange?.(date);
-      // Canonical `onChange` and the alias `onValueChange` both fire (single emit).
+      // Canonical `onChange` fires (single emit).
       onChange?.(date);
-      onValueChange?.(date);
       closePopover();
     },
-    [minDate, maxDate, setDisplayDate, closePopover, onChange, onValueChange],
+    [minDate, maxDate, setDisplayDate, closePopover, onChange],
   );
 
   const handleClearDate = useCallback(
@@ -267,9 +262,8 @@ export function DatePicker<
       setDisplayDate(new Date());
       fieldChange?.(null);
       onChange?.(null);
-      onValueChange?.(null);
     },
-    [setDisplayDate, onChange, onValueChange],
+    [setDisplayDate, onChange],
   );
 
   const calendarContent = (fieldChange?: (value: any) => void) => (

package/src/fields/DatePicker/index.native.tsx

@@ -53,7 +53,6 @@ export type DatePickerProps<
     skeleton?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
-    onValueChange?: (value: Date | null) => void;
     /**
      * Opt out of the OS picker and keep the catalog calendar. Default on
      * native is the OS picker (iOS calendar / time wheel).
@@ -89,7 +88,6 @@ export function DatePicker<
     defaultValue,
     value: controlledValue,
     onChange,
-    onValueChange,
     form,
     placeholder = t("Select date"),
     minDate,
@@ -128,10 +126,9 @@ export function DatePicker<
       setSelectedDate(date);
       fieldChange?.(date);
       onChange?.(date);
-      onValueChange?.(date);
       setOpen(false);
     },
-    [onChange, onValueChange],
+    [onChange],
   );
 
   const renderControl = (

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -150,16 +150,10 @@ describe("FileUpload", () => {
     expect(result.findTextElement("Pick file")).toBeDefined();
   });
 
-  it("fires canonical onChange and the deprecated onValueChange alias once when a file is chosen", async () => {
+  it("fires canonical onChange once when a file is chosen", async () => {
     const onChange = vi.fn();
-    const onValueChange = vi.fn();
     const result = renderWithProviders(
-      <FileUpload
-        label="Attachment"
-        name="attachment"
-        onChange={onChange}
-        onValueChange={onValueChange}
-      />,
+      <FileUpload label="Attachment" name="attachment" onChange={onChange} />,
     );
 
     const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
@@ -171,8 +165,6 @@ describe("FileUpload", () => {
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(file);
-    expect(onValueChange).toHaveBeenCalledTimes(1);
-    expect(onValueChange).toHaveBeenCalledWith(file);
   });
 
   it("associates the label with the dropzone (htmlFor resolves, aria-labelledby names it)", () => {

package/src/fields/FileUpload/index.tsx

@@ -90,11 +90,9 @@ export type FileUploadProps<
     onUpload?: FileUploadHandler;
     /**
      * Canonical change handler, consistent with the rest of the field family.
-     * Fires in both standalone and form mode. Prefer this over `onValueChange`.
+     * Fires in both standalone and form mode.
      */
     onChange?: (value: TData) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: TData) => void;
     /**
      * Which native picker the field opens (no effect on web, which always
      * uses `<input type="file">`). `auto` sends an image-only `accept` to the
@@ -220,7 +218,6 @@ export function FileUpload<
     onFileRemove,
     onUpload,
     onChange: onChangeProp,
-    onValueChange: onValueChangeProp,
     pickerMode = "auto",
     mode,
     name,
@@ -242,14 +239,13 @@ export function FileUpload<
   });
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbZoneFocus, setKbZoneFocus] = useState(false);
-  // Canonical `onChange` and the alias `onValueChange` both fire once per
+  // Canonical `onChange` fires once per
   // change through the internal handler chain (same reconciliation as Switch).
   const emitChange = useCallback(
     (nextValue: TData) => {
       onChangeProp?.(nextValue);
-      onValueChangeProp?.(nextValue);
     },
-    [onChangeProp, onValueChangeProp],
+    [onChangeProp],
   );
   const resolvedValidators = useResolvedValidators(
     fieldProps.required,

package/src/fields/Geolocation/index.tsx

@@ -574,7 +574,7 @@ function GeoMapSurface({
         open={coordsOpen}
         onOpenChange={handleCoordsOpenChange}
         disabled={disabled}
-        fitContent={false}
+        widthMode="at-least-trigger"
         sizing="fill"
         contentPadding="none"
         trigger={
@@ -1371,7 +1371,7 @@ export function Geolocation({
           open={cellOpen}
           onOpenChange={setCellOpen}
           disabled={disabled}
-          fitContent={false}
+          widthMode="at-least-trigger"
           contentPadding="none"
           trigger={face}
         >

package/src/fields/Icon/index.tsx

@@ -58,8 +58,6 @@ export type IconProps<
     placeholder?: string;
     value?: string;
     onChange?: (value: string) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: string) => void;
     skeleton?: boolean;
     /** Restrict the picker to a subset of the drawn set (df.options). */
     icons?: readonly string[];
@@ -411,7 +409,6 @@ export function Icon<
     onBlur,
     value: controlledValue,
     onChange,
-    onValueChange,
     skeleton,
     id: idProp,
     icons,
@@ -426,9 +423,8 @@ export function Icon<
   const emitValueChange = useCallback(
     (newValue: string) => {
       onChange?.(newValue);
-      onValueChange?.(newValue);
     },
-    [onChange, onValueChange],
+    [onChange],
   );
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });

package/src/fields/ImageField/ImageField.spec.tsx

@@ -129,16 +129,10 @@ describe("ImageField", () => {
       expect(onChange).toHaveBeenCalledWith(null);
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias once when an image is chosen", async () => {
+    it("fires canonical onChange once when an image is chosen", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <ImageField
-          label="Avatar"
-          name="avatar"
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
+        <ImageField label="Avatar" name="avatar" onChange={onChange} />,
       );
 
       const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
@@ -151,8 +145,6 @@ describe("ImageField", () => {
       // Exactly once each — guards against the standalone double-fire bug.
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(file);
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(file);
     });
   });
 

package/src/fields/ImageField/index.tsx

@@ -58,11 +58,9 @@ export interface ImageFieldProps {
   defaultValue?: string | File | null;
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Fires in both standalone and form mode. Prefer this over `onValueChange`.
+   * Fires in both standalone and form mode.
    */
   onChange?: (value: string | File | null) => void;
-  /** @deprecated Use `onChange` instead. */
-  onValueChange?: (value: string | File | null) => void;
   onBlur?: (...args: any[]) => void;
   /** Accepted image types (default: "image/*") */
   accept?: string;
@@ -112,7 +110,6 @@ type ImageControlProps = {
   disabledSurface?: DisabledSurfaceProps;
   onChange?: (val: string | File | null) => void;
   onChangeProp?: (val: string | File | null) => void;
-  onValueChange?: (val: string | File | null) => void;
   onInvalid?: (message: string | undefined) => void;
   blurHandler?: (...args: any[]) => void;
 };
@@ -149,7 +146,6 @@ function ImageControl({
   disabledSurface,
   onChange,
   onChangeProp,
-  onValueChange,
   onInvalid,
   blurHandler,
 }: ImageControlProps) {
@@ -197,10 +193,9 @@ function ImageControl({
       onInvalid?.(undefined);
       onChange?.(next);
       onChangeProp?.(next);
-      onValueChange?.(next);
       blurHandler?.();
     },
-    [onChange, onChangeProp, onValueChange, onInvalid, blurHandler],
+    [onChange, onChangeProp, onInvalid, blurHandler],
   );
 
   const validateFile = useCallback(
@@ -449,7 +444,6 @@ export function ImageField({
   value,
   defaultValue,
   onChange: onChangeProp,
-  onValueChange,
   onBlur,
   accept = "image/*",
   maxSize,
@@ -491,7 +485,6 @@ export function ImageField({
     knobProps,
     disabledSurface: disabled ? disabledState.surfaceKnobProps : undefined,
     onChangeProp,
-    onValueChange,
     onInvalid: setValidationError,
   };
 

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -75,9 +75,8 @@ describe("MentionInput", () => {
     expect(textArea?.getAttribute("placeholder")).toBe("Type @ to mention");
   });
 
-  it("fires canonical onChange(MentionValue) and the deprecated onTextChange alias once per change", () => {
+  it("fires canonical onChange(MentionValue) once per change", () => {
     const onChange = vi.fn();
-    const onTextChange = vi.fn();
     const result = renderWithProviders(
       <MentionInput
         label="Comment"
@@ -89,7 +88,6 @@ describe("MentionInput", () => {
           },
         ]}
         onChange={onChange}
-        onTextChange={onTextChange}
       />,
     );
 
@@ -99,8 +97,6 @@ describe("MentionInput", () => {
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith({ text: "hello", mentions: [] });
-    expect(onTextChange).toHaveBeenCalledTimes(1);
-    expect(onTextChange).toHaveBeenCalledWith("hello");
   });
 
   it("renders defaultValue text on first paint", () => {
@@ -133,26 +129,18 @@ describe("MentionInput", () => {
 
   it("standalone controlled: a value arriving after mount displays without onChange", async () => {
     const onChange = vi.fn();
-    const onTextChange = vi.fn();
     const result = renderWithProviders(
       <MentionInput label="Comment" mentions={[userMentions]} value="" onChange={onChange} />,
     );
     expect(result.baseElement.querySelector("textarea")?.value).toBe("");
 
     result.rerender(
-      <MentionInput
-        label="Comment"
-        mentions={[userMentions]}
-        value="seeded"
-        onChange={onChange}
-        onTextChange={onTextChange}
-      />,
+      <MentionInput label="Comment" mentions={[userMentions]} value="seeded" onChange={onChange} />,
     );
     await waitFor(() => {
       expect(result.baseElement.querySelector("textarea")?.value).toBe("seeded");
     });
     expect(onChange).not.toHaveBeenCalled();
-    expect(onTextChange).not.toHaveBeenCalled();
   });
 
   it("form-integrated: a field value set after mount displays without onChange", async () => {

package/src/fields/MentionInput/index.tsx

@@ -138,8 +138,6 @@ export type MentionInputProps<
      * every user edit (LC-14). String seeds still parse via {@link parseMentionValue}.
      */
     onChange?: (value: MentionValue) => void;
-    /** @deprecated Use `onChange` instead. Fires the raw text from the same emit. */
-    onTextChange?: (text: string) => void;
     /**
      * Controlled value. String or {@link MentionValue}. A value arriving after
      * mount must display without emitting onChange (create-mode seeding).
@@ -252,7 +250,6 @@ export function MentionInput<
     autoResize = false,
     onMentionSelect,
     onChange,
-    onTextChange,
     textAreaProps,
     mode,
     name,
@@ -310,10 +307,9 @@ export function MentionInput<
     (next: MentionValue) => {
       if (!isControlled) adoptValue(next);
       onChange?.(next);
-      onTextChange?.(next.text);
       fieldRef.current?.handleChange(next);
     },
-    [adoptValue, isControlled, onChange, onTextChange],
+    [adoptValue, isControlled, onChange],
   );
 
   useEffect(() => {
@@ -391,7 +387,7 @@ export function MentionInput<
       }
     },
     disabled: disabled || readOnly,
-    fitContent: true,
+    widthMode: "fit-content",
   });
 
   const dismiss = useDismiss(panel.context, {
@@ -950,7 +946,7 @@ export function MentionInput<
         }
       }}
       value={displayed.text}
-      onChangeText={handleTextChange}
+      onChange={handleTextChange}
       placeholder={placeholder}
       autoResize={autoResize}
       minRows={minRows}

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -81,16 +81,14 @@ describe("RadioGroup Components", () => {
         expect(label?.textContent).toContain("*");
       });
 
-      it("fires canonical onChange and the deprecated onValueChange alias once each", async () => {
+      it("fires canonical onChange once", async () => {
         const onChange = vi.fn();
-        const onValueChange = vi.fn();
         const result = renderWithProviders(
           <RadioGroup
             label="Choose Option"
             name="option"
             options={mockOptions}
             onChange={onChange}
-            onValueChange={onValueChange}
           />,
         );
         const radio = result.container.querySelector("[role='radio']");
@@ -100,8 +98,6 @@ describe("RadioGroup Components", () => {
         });
         expect(onChange).toHaveBeenCalledTimes(1);
         expect(onChange).toHaveBeenCalledWith("option1");
-        expect(onValueChange).toHaveBeenCalledTimes(1);
-        expect(onValueChange).toHaveBeenCalledWith("option1");
       });
 
       it("clicking the painted glyph still selects", async () => {
@@ -323,15 +319,8 @@ describe("RadioGroup Components", () => {
 
       it("standalone controlled: a value arriving after mount renders checked, without onChange", async () => {
         const onChange = vi.fn();
-        const onValueChange = vi.fn();
         const result = renderWithProviders(
-          <RadioGroup
-            label="Status"
-            value=""
-            options={mockOptions}
-            onChange={onChange}
-            onValueChange={onValueChange}
-          />,
+          <RadioGroup label="Status" value="" options={mockOptions} onChange={onChange} />,
         );
         for (const radio of result.container.querySelectorAll("[role='radio']")) {
           expect(radio.getAttribute("aria-checked")).not.toBe("true");
@@ -339,13 +328,7 @@ describe("RadioGroup Components", () => {
 
         // Late seed: the upstream doc value arrives after first paint.
         result.rerender(
-          <RadioGroup
-            label="Status"
-            value="option2"
-            options={mockOptions}
-            onChange={onChange}
-            onValueChange={onValueChange}
-          />,
+          <RadioGroup label="Status" value="option2" options={mockOptions} onChange={onChange} />,
         );
         await waitFor(() => {
           expect(getRadioByValue(result.container, "option2")?.getAttribute("aria-checked")).toBe(
@@ -353,7 +336,6 @@ describe("RadioGroup Components", () => {
           );
         });
         expect(onChange).not.toHaveBeenCalled();
-        expect(onValueChange).not.toHaveBeenCalled();
       });
 
       it("form-integrated: a field value set after mount renders checked, without onChange", async () => {

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -186,7 +186,7 @@ export const Basic: Story = {
     name: "basic",
     value: "option1",
     options: sampleOptions,
-    onValueChange: action("onValueChange"),
+    onChange: action("onChange"),
   },
 };
 
@@ -285,7 +285,7 @@ export const Interactive: Story = {
             label="Select an option"
             options={sampleOptions}
             value={value}
-            onValueChange={setValue}
+            onChange={setValue}
           />
           <Text>Selected: {value || "None"}</Text>
         </YStack>
@@ -310,9 +310,9 @@ export const Comparison: Story = {
             <RadioGroup
               options={sampleOptions}
               value={customVal}
-              onValueChange={(val) => {
+              onChange={(val) => {
                 setCustomVal(val);
-                action("custom.onValueChange")(val);
+                action("custom.onChange")(val);
               }}
             />
           </YStack>

package/src/fields/RadioGroup/index.tsx

@@ -162,11 +162,8 @@ export interface RadioGroupProps {
   defaultValue?: string;
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: string) => void;
-  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui/Radix name. */
-  onValueChange?: (value: string) => void;
   onBlur?: (...args: any[]) => void;
   options?: RadioGroupOption[];
   orientation?: "horizontal" | "vertical";
@@ -376,7 +373,6 @@ export function RadioGroup({
   value,
   defaultValue,
   onChange,
-  onValueChange,
   onBlur,
   options,
   orientation = "vertical",
@@ -389,11 +385,10 @@ export function RadioGroup({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
 }: RadioGroupProps) {
-  // 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) => {
     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.

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

@@ -115,9 +115,8 @@ describe("Select Components", () => {
         expect(label?.textContent).toContain("*");
       });
 
-      it("fires canonical onChange and the deprecated onValueChange alias once when dismissing a chip", async () => {
+      it("fires canonical onChange once when dismissing a chip", async () => {
         const onChange = vi.fn();
-        const onValueChange = vi.fn();
         const result = renderWithProviders(
           <Select
             label="Multi Select"
@@ -127,7 +126,6 @@ describe("Select Components", () => {
             dismissible
             value={["option1", "option2"]}
             onChange={onChange}
-            onValueChange={onValueChange}
           />,
         );
         // Labels are differentiated per chip now — "Remove {label}".
@@ -138,8 +136,6 @@ describe("Select Components", () => {
         });
         expect(onChange).toHaveBeenCalledTimes(1);
         expect(onChange).toHaveBeenCalledWith(["option2"]);
-        expect(onValueChange).toHaveBeenCalledTimes(1);
-        expect(onValueChange).toHaveBeenCalledWith(["option2"]);
       });
     });
 

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>