@conform-to/react 0.5.0 → 0.5.1

package/README.md

@@ -9,8 +9,12 @@
 - [useForm](#useform)
 - [useFieldset](#usefieldset)
 - [useFieldList](#usefieldlist)
+- [useInputEvent](#useinputevent)
 - [useControlledInput](#usecontrolledinput)
 - [conform](#conform)
+- [list](#list)
+- [validate](#validate)
+- [requestCommand](#requestcommand)
 - [getFormElements](#getformelements)
 - [hasError](#haserror)
 - [parse](#parse)
@@ -278,14 +282,63 @@ function Example() {
 
 ---
 
+### useInputEvent
+
+It returns a ref object and a set of helpers that dispatch corresponding dom event.
+
+```tsx
+import { useForm, useInputEvent } from '@conform-to/react';
+import { Select, MenuItem } from '@mui/material';
+import { useState, useRef } from 'react';
+
+function MuiForm() {
+  const [form, { category }] = useForm();
+  const [value, setValue] = useState(category.config.defaultValue ?? '');
+  const [ref, control] = useInputEvent({
+    onReset: () => setValue(category.config.defaultValue ?? ''),
+  });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <form {...form.props}>
+      {/* Render a shadow input somewhere */}
+      <input
+        ref={ref}
+        {...conform.input(category.config, { hidden: true })}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={() => inputRef.current?.focus()}
+      />
+
+      {/* MUI Select is a controlled component */}
+      <TextField
+        label="Category"
+        inputRef={inputRef}
+        value={value}
+        onChange={control.change}
+        onBlur={control.blur}
+        select
+      >
+        <MenuItem value="">Please select</MenuItem>
+        <MenuItem value="a">Category A</MenuItem>
+        <MenuItem value="b">Category B</MenuItem>
+        <MenuItem value="c">Category C</MenuItem>
+      </TextField>
+    </form>
+  );
+}
+```
+
+---
+
 ### useControlledInput
 
+> This API is deprecated and replaced with the [useInputEvent](#useinputevent) hook.
+
 It returns the properties required to configure a shadow input for validation and helper to integrate it. This is particularly useful when [integrating custom input components](/docs/integrations.md#custom-input-component) like dropdown and datepicker.
 
 ```tsx
 import { useForm, useControlledInput } from '@conform-to/react';
 import { Select, MenuItem } from '@mui/material';
-import { useRef } from 'react';
 
 function MuiForm() {
   const [form, { category }] = useForm();

package/helpers.d.ts

@@ -1,13 +1,16 @@
 import type { FieldConfig } from '@conform-to/dom';
-import type { HTMLInputTypeAttribute } from 'react';
+import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
 interface FieldProps {
     id?: string;
     name: string;
     form?: string;
     required?: boolean;
     autoFocus?: boolean;
+    tabIndex?: number;
+    style?: CSSProperties;
     'aria-invalid': boolean;
     'aria-describedby'?: string;
+    'aria-hidden'?: boolean;
 }
 interface InputProps<Schema> extends FieldProps {
     type?: HTMLInputTypeAttribute;
@@ -33,18 +36,21 @@ interface TextareaProps extends FieldProps {
 }
 declare type InputOptions = {
     type: 'checkbox' | 'radio';
+    hidden?: boolean;
     value?: string;
 } | {
-    type: 'file';
-    value?: never;
-} | {
-    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden' | 'file'>;
+    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden'>;
+    hidden?: boolean;
     value?: never;
 };
 export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: {
     type: 'file';
 }): InputProps<Schema>;
 export declare function input<Schema extends any>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
-export declare function select<Schema>(config: FieldConfig<Schema>): SelectProps;
-export declare function textarea<Schema>(config: FieldConfig<Schema>): TextareaProps;
+export declare function select<Schema>(config: FieldConfig<Schema>, options?: {
+    hidden?: boolean;
+}): SelectProps;
+export declare function textarea<Schema>(config: FieldConfig<Schema>, options?: {
+    hidden?: boolean;
+}): TextareaProps;
 export {};

package/helpers.js

@@ -2,6 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/**
+ * Style to make the input element visually hidden
+ * Based on the `sr-only` class from tailwindcss
+ */
+var hiddenStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  whiteSpace: 'nowrap',
+  border: 0
+};
 function input(config) {
   var _config$initialError;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -21,6 +36,11 @@ function input(config) {
     'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
@@ -33,7 +53,7 @@ function input(config) {
   }
   return attributes;
 }
-function select(config) {
+function select(config, options) {
   var _config$defaultValue, _config$initialError2;
   var attributes = {
     id: config.id,
@@ -45,12 +65,17 @@ function select(config) {
     'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
   return attributes;
 }
-function textarea(config) {
+function textarea(config, options) {
   var _config$defaultValue2, _config$initialError3;
   var attributes = {
     id: config.id,
@@ -64,6 +89,11 @@ function textarea(config) {
     'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }

package/hooks.d.ts

@@ -136,7 +136,7 @@ export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormEleme
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
 }
-interface InputControl<Element extends {
+interface LegacyInputControl<Element extends {
     focus: () => void;
 }> {
     ref: RefObject<Element>;
@@ -154,9 +154,33 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
+ * @deprecated Please use the `useInputEvent` hook instead
  * @see https://conform.guide/api/react#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;
-} = HTMLInputElement, Schema extends Primitive = Primitive>(config: FieldConfig<Schema>): [ShadowInputProps, InputControl<Element>];
+} = HTMLInputElement, Schema extends Primitive = Primitive>(config: FieldConfig<Schema>): [ShadowInputProps, LegacyInputControl<Element>];
+interface InputControl {
+    change: (eventOrValue: {
+        target: {
+            value: string;
+        };
+    } | string) => void;
+    focus: () => void;
+    blur: () => void;
+}
+/**
+ * Returns a ref object and a set of helpers that dispatch corresponding dom event.
+ *
+ * @see https://conform.guide/api/react#useinputevent
+ */
+export declare function useInputEvent<RefShape extends FieldElement = HTMLInputElement>(options?: {
+    onSubmit?: (event: SubmitEvent) => void;
+    onReset?: (event: Event) => void;
+}): [RefObject<RefShape>, InputControl];
+export declare function useInputEvent<RefShape extends Exclude<any, FieldElement>>(options: {
+    getElement: (ref: RefShape | null) => FieldElement | null | undefined;
+    onSubmit?: (event: SubmitEvent) => void;
+    onReset?: (event: Event) => void;
+}): [RefObject<RefShape>, InputControl];
 export {};

package/hooks.js

@@ -489,6 +489,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
+ * @deprecated Please use the `useInputEvent` hook instead
  * @see https://conform.guide/api/react#usecontrolledinput
  */
 function useControlledInput(config) {
@@ -544,24 +545,13 @@ function useControlledInput(config) {
   }, []);
   return [_rollupPluginBabelHelpers.objectSpread2({
     ref,
-    style: {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    },
-    tabIndex: -1,
-    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState))), {
+  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
+    hidden: true
+  })), {
     ref: inputRef,
     value,
     onChange: handleChange,
@@ -570,7 +560,183 @@ function useControlledInput(config) {
   }];
 }
 
+/**
+ * Triggering react custom change event
+ * Solution based on dom-testing-library
+ * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+ * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+ */
+function setNativeValue(element, value) {
+  if (element.value === value) {
+    // It will not trigger a change event if `element.value` is the same as the set value
+    return;
+  }
+  var {
+    set: valueSetter
+  } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+  var prototype = Object.getPrototypeOf(element);
+  var {
+    set: prototypeValueSetter
+  } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    if (valueSetter) {
+      valueSetter.call(element, value);
+    } else {
+      throw new Error('The given element does not have a value setter');
+    }
+  }
+}
+
+/**
+ * useLayoutEffect is client-only.
+ * This basically makes it a no-op on server
+ */
+var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
+function useInputEvent(options) {
+  var ref = react.useRef(null);
+  var optionsRef = react.useRef(options);
+  var changeDispatched = react.useRef(false);
+  var focusDispatched = react.useRef(false);
+  var blurDispatched = react.useRef(false);
+  useSafeLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  useSafeLayoutEffect(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
+      return (_optionsRef$current$g = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : (_optionsRef$current$g2 = _optionsRef$current.getElement) === null || _optionsRef$current$g2 === void 0 ? void 0 : _optionsRef$current$g2.call(_optionsRef$current, ref.current)) !== null && _optionsRef$current$g !== void 0 ? _optionsRef$current$g : ref.current;
+    };
+    var inputHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        changeDispatched.current = true;
+      }
+    };
+    var focusHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        focusDispatched.current = true;
+      }
+    };
+    var blurHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        blurDispatched.current = true;
+      }
+    };
+    var submitHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current2, _optionsRef$current2$;
+        (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : (_optionsRef$current2$ = _optionsRef$current2.onSubmit) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, event);
+      }
+    };
+    var resetHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current3, _optionsRef$current3$;
+        (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : (_optionsRef$current3$ = _optionsRef$current3.onReset) === null || _optionsRef$current3$ === void 0 ? void 0 : _optionsRef$current3$.call(_optionsRef$current3, event);
+      }
+    };
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focus', focusHandler, true);
+    document.addEventListener('blur', blurHandler, true);
+    document.addEventListener('submit', submitHandler);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focus', focusHandler, true);
+      document.removeEventListener('blur', blurHandler, true);
+      document.removeEventListener('submit', submitHandler);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
+  var control = react.useMemo(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g3, _optionsRef$current4, _optionsRef$current4$;
+      return (_optionsRef$current$g3 = (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4.getElement) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, ref.current)) !== null && _optionsRef$current$g3 !== void 0 ? _optionsRef$current$g3 : ref.current;
+    };
+    return {
+      change(eventOrValue) {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No change-related events will be dispatched');
+          return;
+        }
+        if (changeDispatched.current) {
+          changeDispatched.current = false;
+          return;
+        }
+        var previousValue = input.value;
+        var nextValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+
+        // This make sure no event is dispatched on the first effect run
+        if (nextValue === previousValue) {
+          return;
+        }
+
+        // Dispatch beforeinput event before updating the input value
+        input.dispatchEvent(new Event('beforeinput', {
+          bubbles: true
+        }));
+        // Update the input value to trigger a change event
+        setNativeValue(input, nextValue);
+        // Dispatch input event with the updated input value
+        input.dispatchEvent(new InputEvent('input', {
+          bubbles: true
+        }));
+        // Reset the dispatched flag
+        changeDispatched.current = false;
+      },
+      focus() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No focus-related events will be dispatched');
+          return;
+        }
+        if (focusDispatched.current) {
+          focusDispatched.current = false;
+          return;
+        }
+        var focusinEvent = new FocusEvent('focusin', {
+          bubbles: true
+        });
+        var focusEvent = new FocusEvent('focus');
+        input.dispatchEvent(focusinEvent);
+        input.dispatchEvent(focusEvent);
+
+        // Reset the dispatched flag
+        focusDispatched.current = false;
+      },
+      blur() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No blur-related events will be dispatched');
+          return;
+        }
+        if (blurDispatched.current) {
+          blurDispatched.current = false;
+          return;
+        }
+        var focusoutEvent = new FocusEvent('focusout', {
+          bubbles: true
+        });
+        var blurEvent = new FocusEvent('blur');
+        input.dispatchEvent(focusoutEvent);
+        input.dispatchEvent(blurEvent);
+
+        // Reset the dispatched flag
+        blurDispatched.current = false;
+      }
+    };
+  }, []);
+  return [ref, control];
+}
+
 exports.useControlledInput = useControlledInput;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;
 exports.useForm = useForm;
+exports.useInputEvent = useInputEvent;

package/index.js

@@ -44,4 +44,5 @@ exports.useControlledInput = hooks.useControlledInput;
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;
+exports.useInputEvent = hooks.useInputEvent;
 exports.conform = helpers;

package/module/helpers.js

@@ -1,3 +1,18 @@
+/**
+ * Style to make the input element visually hidden
+ * Based on the `sr-only` class from tailwindcss
+ */
+var hiddenStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  whiteSpace: 'nowrap',
+  border: 0
+};
 function input(config) {
   var _config$initialError;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -17,6 +32,11 @@ function input(config) {
     'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
@@ -29,7 +49,7 @@ function input(config) {
   }
   return attributes;
 }
-function select(config) {
+function select(config, options) {
   var _config$defaultValue, _config$initialError2;
   var attributes = {
     id: config.id,
@@ -41,12 +61,17 @@ function select(config) {
     'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
   return attributes;
 }
-function textarea(config) {
+function textarea(config, options) {
   var _config$defaultValue2, _config$initialError3;
   var attributes = {
     id: config.id,
@@ -60,6 +85,11 @@ function textarea(config) {
     'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
     'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }

package/module/hooks.js

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
 import { shouldValidate, reportSubmission, getFormData, parse, isFieldElement, hasError, getPaths, getName, requestCommand, validate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useMemo, useLayoutEffect } from 'react';
 import { input } from './helpers.js';
 
 /**
@@ -485,6 +485,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
+ * @deprecated Please use the `useInputEvent` hook instead
  * @see https://conform.guide/api/react#usecontrolledinput
  */
 function useControlledInput(config) {
@@ -540,24 +541,13 @@ function useControlledInput(config) {
   }, []);
   return [_objectSpread2({
     ref,
-    style: {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    },
-    tabIndex: -1,
-    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-  }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState))), {
+  }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState), {
+    hidden: true
+  })), {
     ref: inputRef,
     value,
     onChange: handleChange,
@@ -566,4 +556,179 @@ function useControlledInput(config) {
   }];
 }
 
-export { useControlledInput, useFieldList, useFieldset, useForm };
+/**
+ * Triggering react custom change event
+ * Solution based on dom-testing-library
+ * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+ * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+ */
+function setNativeValue(element, value) {
+  if (element.value === value) {
+    // It will not trigger a change event if `element.value` is the same as the set value
+    return;
+  }
+  var {
+    set: valueSetter
+  } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+  var prototype = Object.getPrototypeOf(element);
+  var {
+    set: prototypeValueSetter
+  } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    if (valueSetter) {
+      valueSetter.call(element, value);
+    } else {
+      throw new Error('The given element does not have a value setter');
+    }
+  }
+}
+
+/**
+ * useLayoutEffect is client-only.
+ * This basically makes it a no-op on server
+ */
+var useSafeLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+function useInputEvent(options) {
+  var ref = useRef(null);
+  var optionsRef = useRef(options);
+  var changeDispatched = useRef(false);
+  var focusDispatched = useRef(false);
+  var blurDispatched = useRef(false);
+  useSafeLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  useSafeLayoutEffect(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
+      return (_optionsRef$current$g = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : (_optionsRef$current$g2 = _optionsRef$current.getElement) === null || _optionsRef$current$g2 === void 0 ? void 0 : _optionsRef$current$g2.call(_optionsRef$current, ref.current)) !== null && _optionsRef$current$g !== void 0 ? _optionsRef$current$g : ref.current;
+    };
+    var inputHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        changeDispatched.current = true;
+      }
+    };
+    var focusHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        focusDispatched.current = true;
+      }
+    };
+    var blurHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        blurDispatched.current = true;
+      }
+    };
+    var submitHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current2, _optionsRef$current2$;
+        (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : (_optionsRef$current2$ = _optionsRef$current2.onSubmit) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, event);
+      }
+    };
+    var resetHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current3, _optionsRef$current3$;
+        (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : (_optionsRef$current3$ = _optionsRef$current3.onReset) === null || _optionsRef$current3$ === void 0 ? void 0 : _optionsRef$current3$.call(_optionsRef$current3, event);
+      }
+    };
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focus', focusHandler, true);
+    document.addEventListener('blur', blurHandler, true);
+    document.addEventListener('submit', submitHandler);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focus', focusHandler, true);
+      document.removeEventListener('blur', blurHandler, true);
+      document.removeEventListener('submit', submitHandler);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
+  var control = useMemo(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g3, _optionsRef$current4, _optionsRef$current4$;
+      return (_optionsRef$current$g3 = (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4.getElement) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, ref.current)) !== null && _optionsRef$current$g3 !== void 0 ? _optionsRef$current$g3 : ref.current;
+    };
+    return {
+      change(eventOrValue) {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No change-related events will be dispatched');
+          return;
+        }
+        if (changeDispatched.current) {
+          changeDispatched.current = false;
+          return;
+        }
+        var previousValue = input.value;
+        var nextValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+
+        // This make sure no event is dispatched on the first effect run
+        if (nextValue === previousValue) {
+          return;
+        }
+
+        // Dispatch beforeinput event before updating the input value
+        input.dispatchEvent(new Event('beforeinput', {
+          bubbles: true
+        }));
+        // Update the input value to trigger a change event
+        setNativeValue(input, nextValue);
+        // Dispatch input event with the updated input value
+        input.dispatchEvent(new InputEvent('input', {
+          bubbles: true
+        }));
+        // Reset the dispatched flag
+        changeDispatched.current = false;
+      },
+      focus() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No focus-related events will be dispatched');
+          return;
+        }
+        if (focusDispatched.current) {
+          focusDispatched.current = false;
+          return;
+        }
+        var focusinEvent = new FocusEvent('focusin', {
+          bubbles: true
+        });
+        var focusEvent = new FocusEvent('focus');
+        input.dispatchEvent(focusinEvent);
+        input.dispatchEvent(focusEvent);
+
+        // Reset the dispatched flag
+        focusDispatched.current = false;
+      },
+      blur() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No blur-related events will be dispatched');
+          return;
+        }
+        if (blurDispatched.current) {
+          blurDispatched.current = false;
+          return;
+        }
+        var focusoutEvent = new FocusEvent('focusout', {
+          bubbles: true
+        });
+        var blurEvent = new FocusEvent('blur');
+        input.dispatchEvent(focusoutEvent);
+        input.dispatchEvent(blurEvent);
+
+        // Reset the dispatched flag
+        blurDispatched.current = false;
+      }
+    };
+  }, []);
+  return [ref, control];
+}
+
+export { useControlledInput, useFieldList, useFieldset, useForm, useInputEvent };

package/module/index.js

@@ -1,4 +1,4 @@
 export { getFormElements, hasError, list, parse, requestCommand, requestSubmit, shouldValidate, validate } from '@conform-to/dom';
-export { useControlledInput, useFieldList, useFieldset, useForm } from './hooks.js';
+export { useControlledInput, useFieldList, useFieldset, useForm, useInputEvent } from './hooks.js';
 import * as helpers from './helpers.js';
 export { helpers as conform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.5.0"
+		"@conform-to/dom": "0.5.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"