react-store-input 0.1.6 → 0.1.8

package/dist/index.d.mts

@@ -4,7 +4,7 @@ export { useSubscribe } from './use_subscribe.mjs';
 export { StoreControllerProps, useStoreController } from './use_store_controller.mjs';
 export { InferNameFromProps, StoreInputWithNameProps, useStoreInputWithName } from './use_store_input_with_name.mjs';
 export { StoreInputProps, useStoreInput } from './use_store_input.mjs';
-export { Input, Select, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.mjs';
+export { Input, Select, StoreComponentPropsWithStore, StoreInputWithNameComponentProps, Textarea, useStoreComponent } from './use_store_component.mjs';
 export { FormStore, useFormStore } from './use_form_store.mjs';
 import 'react';
 import './create_render.mjs';

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { useSubscribe } from './use_subscribe.js';
 export { StoreControllerProps, useStoreController } from './use_store_controller.js';
 export { InferNameFromProps, StoreInputWithNameProps, useStoreInputWithName } from './use_store_input_with_name.js';
 export { StoreInputProps, useStoreInput } from './use_store_input.js';
-export { Input, Select, StoreComponentPropsWithStore, Textarea, useStoreComponent } from './use_store_component.js';
+export { Input, Select, StoreComponentPropsWithStore, StoreInputWithNameComponentProps, Textarea, useStoreComponent } from './use_store_component.js';
 export { FormStore, useFormStore } from './use_form_store.js';
 import 'react';
 import './create_render.js';

package/dist/index.js

@@ -118,22 +118,17 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 // src/use_store_controller.tsx
 var import_react4 = require("react");
 function useStoreController(store, props) {
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react4.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -141,7 +136,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
@@ -149,7 +143,7 @@ function useStoreController(store, props) {
 // src/use_store_input.tsx
 var import_react5 = require("react");
 var import_date_fns = require("date-fns");
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -196,8 +190,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -214,7 +211,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -223,7 +224,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -234,8 +234,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -293,7 +293,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -310,7 +311,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -327,7 +329,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/index.mjs

@@ -70,24 +70,19 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 }
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef as useRef2 } from "react";
+import { useId } from "react";
 function useStoreController(store, props) {
-  const ref = useRef2(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -95,7 +90,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
@@ -103,7 +97,7 @@ function useStoreController(store, props) {
 // src/use_store_input.tsx
 import "react";
 import { format } from "date-fns";
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -150,8 +144,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -168,7 +165,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -177,7 +178,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -188,8 +188,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -212,7 +212,7 @@ function useStoreInputWithName(store, props) {
 }
 
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 import React from "react";
 function useStoreComponent(store) {
   const input = useCallback(
@@ -247,7 +247,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -264,7 +265,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -281,7 +283,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_form_store.js

@@ -129,22 +129,17 @@ var import_date_fns = require("date-fns");
 // src/use_store_controller.tsx
 var import_react5 = require("react");
 function useStoreController(store, props) {
-  const ref = (0, import_react5.useRef)(null);
-  (0, import_react5.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react5.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -152,13 +147,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -205,8 +199,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -223,7 +220,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -232,7 +233,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -243,8 +243,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -300,7 +300,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -317,7 +318,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -334,7 +336,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_form_store.mjs

@@ -83,7 +83,7 @@ function useStore(initialState) {
 }
 
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 import React2 from "react";
 
 // src/use_store_input.tsx
@@ -91,24 +91,19 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef as useRef2 } from "react";
+import { useId } from "react";
 function useStoreController(store, props) {
-  const ref = useRef2(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -116,13 +111,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -169,8 +163,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -187,7 +184,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -196,7 +197,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -207,8 +207,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -264,7 +264,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -281,7 +282,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -298,7 +300,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_store_component.d.mts

@@ -1,18 +1,19 @@
+import React__default, { DetailedHTMLProps } from 'react';
 import { Store } from './use_store.mjs';
-import React__default from 'react';
 import { StoreInputWithNameProps } from './use_store_input_with_name.mjs';
 import './use_store_input.mjs';
 
+type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React__default.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
 declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
-    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
-    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
+    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
+    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
+    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
 };
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & {
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;
 };
 declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): React__default.JSX.Element;
 declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): React__default.JSX.Element;
 declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): React__default.JSX.Element;
 
-export { Input, Select, type StoreComponentPropsWithStore, Textarea, useStoreComponent };
+export { Input, Select, type StoreComponentPropsWithStore, type StoreInputWithNameComponentProps, Textarea, useStoreComponent };

package/dist/use_store_component.d.ts

@@ -1,18 +1,19 @@
+import React__default, { DetailedHTMLProps } from 'react';
 import { Store } from './use_store.js';
-import React__default from 'react';
 import { StoreInputWithNameProps } from './use_store_input_with_name.js';
 import './use_store_input.js';
 
+type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React__default.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
 declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
-    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
-    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
+    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
+    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
+    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
 };
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & {
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;
 };
 declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): React__default.JSX.Element;
 declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): React__default.JSX.Element;
 declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): React__default.JSX.Element;
 
-export { Input, Select, type StoreComponentPropsWithStore, Textarea, useStoreComponent };
+export { Input, Select, type StoreComponentPropsWithStore, type StoreInputWithNameComponentProps, Textarea, useStoreComponent };

package/dist/use_store_component.js

@@ -59,22 +59,17 @@ 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)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -82,13 +77,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -135,8 +129,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -153,7 +150,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -162,7 +163,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -173,8 +173,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -230,7 +230,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -247,7 +248,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -264,7 +266,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,