@multiplatform.one/forms 7.90.5 → 8.0.0

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>

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/Signature/index.tsx

@@ -370,7 +370,11 @@ function SignatureCanvasImpl({
 
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
     const { width: w, height: h } = event.nativeEvent.layout;
-    setDimensions({ width: w, height: h });
+    setDimensions((previous) =>
+      Math.abs(previous.width - w) < 1 && Math.abs(previous.height - h) < 1
+        ? previous
+        : { width: w, height: h },
+    );
   }, []);
 
   const getPoint = useCallback(

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>