react-store-input 0.1.4 → 0.1.6

package/dist/use_store_component.mjs

@@ -1,7 +1,5 @@
 // src/use_store_component.tsx
-import {
-  useCallback
-} from "react";
+import { useCallback } from "react";
 import React from "react";
 
 // src/use_store_input.tsx
@@ -9,7 +7,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -25,18 +23,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = useRef(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -44,7 +32,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -58,26 +46,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return format(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return format(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -102,16 +88,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -144,7 +129,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -176,15 +161,24 @@ function useStoreInputWithName(store, props) {
 
 // src/use_store_component.tsx
 function useStoreComponent(store) {
-  const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Input, { store, ...props });
-  }, []);
-  const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Select, { store, ...props });
-  }, []);
-  const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
-  }, []);
+  const input = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
+    },
+    []
+  );
   return {
     input,
     select,
@@ -195,27 +189,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 export {

package/dist/use_store_controller.d.mts

@@ -9,7 +9,7 @@ type StoreControllerProps<TController, TState> = {
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
     ref: React.RefObject<TController | null>;
-    onChange: () => void;
+    dispatch: () => void;
 };
 
 export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.d.ts

@@ -9,7 +9,7 @@ type StoreControllerProps<TController, TState> = {
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
     ref: React.RefObject<TController | null>;
-    onChange: () => void;
+    dispatch: () => void;
 };
 
 export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.js

@@ -39,18 +39,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -58,7 +48,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -72,7 +62,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/use_store_controller.mjs

@@ -1,5 +1,5 @@
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -15,18 +15,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = useRef(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -34,7 +24,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -48,7 +38,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 export {

package/dist/use_store_input.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { Ref, HTMLInputTypeAttribute } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreInputProps<TInputElement, TState> = {
+type StoreInputProps<TInputElement, TState, TValue> = {
     ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -10,10 +10,12 @@ type StoreInputProps<TInputElement, TState> = {
     defaultChecked?: boolean | undefined;
     onChange?: (event: React.ChangeEvent<TInputElement>) => void;
 } & {
-    getter: (state: TState) => unknown;
-    setter: (state: TState, value: unknown) => void;
+    getter: (state: TState) => TValue;
+    setter: (state: TState, value: TValue) => void;
+    toInputValue?: (value: TValue) => string;
+    toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     ref: React$1.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;

package/dist/use_store_input.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { Ref, HTMLInputTypeAttribute } from 'react';
 import { Store } from './use_store.js';
 
-type StoreInputProps<TInputElement, TState> = {
+type StoreInputProps<TInputElement, TState, TValue> = {
     ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -10,10 +10,12 @@ type StoreInputProps<TInputElement, TState> = {
     defaultChecked?: boolean | undefined;
     onChange?: (event: React.ChangeEvent<TInputElement>) => void;
 } & {
-    getter: (state: TState) => unknown;
-    setter: (state: TState, value: unknown) => void;
+    getter: (state: TState) => TValue;
+    setter: (state: TState, value: TValue) => void;
+    toInputValue?: (value: TValue) => string;
+    toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     ref: React$1.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;

package/dist/use_store_input.js

@@ -43,18 +43,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -62,7 +52,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -76,26 +66,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return (0, import_date_fns.format)(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -120,16 +108,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -162,7 +149,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/dist/use_store_input.mjs

@@ -3,7 +3,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -19,18 +19,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = useRef(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -38,7 +28,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -52,26 +42,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return format(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return format(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -96,16 +84,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -138,7 +125,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/dist/use_store_input_with_name.d.mts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Store } from './use_store.mjs';
 import { StoreInputProps } from './use_store_input.mjs';
 
-type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState>, "getter" | "setter">> & {
-    name?: keyof TState;
+type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;
+type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
+    name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
@@ -13,4 +14,4 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     onChange: (event: React.ChangeEvent<TInputElement>) => void;
 };
 
-export { useStoreInputWithName };
+export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Store } from './use_store.js';
 import { StoreInputProps } from './use_store_input.js';
 
-type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState>, "getter" | "setter">> & {
-    name?: keyof TState;
+type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;
+type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
+    name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
@@ -13,4 +14,4 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     onChange: (event: React.ChangeEvent<TInputElement>) => void;
 };
 
-export { useStoreInputWithName };
+export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.js

@@ -45,18 +45,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -64,7 +54,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -78,26 +68,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
     }
     if (props.type === "datetime-local") {
-      if (value instanceof Date) {
-        return (0, import_date_fns.format)(value, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-      if (typeof value === "string") {
-        return toInputValue(new Date(value));
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
       }
     }
     return String(value);
-  };
+  });
   const getDefaultValue = () => {
     if (props.defaultValue !== void 0) {
       return props.defaultValue;
@@ -122,16 +110,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -164,7 +151,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };