@conform-to/react 0.5.0 → 0.6.0-pre.0

package/module/hooks.js

@@ -1,7 +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 { input } from './helpers.js';
+import { getValidationMessage, shouldValidate, parseListCommand, reportSubmission, getFormData, parse, VALIDATION_UNDEFINED, getFormAttributes, getPaths, getName, getErrors, isFieldElement, requestIntent, validate, getFormElement, updateList } from '@conform-to/dom';
+import { useRef, useState, useEffect, useMemo, useLayoutEffect } from 'react';
 
 /**
  * Returns properties required to hook into form events.
@@ -10,16 +9,17 @@ import { input } from './helpers.js';
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
+  var _config$state;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = useRef(config);
   var ref = useRef(null);
+  var [lastSubmission, setLastSubmission] = useState((_config$state = config.state) !== null && _config$state !== void 0 ? _config$state : null);
   var [error, setError] = useState(() => {
-    var _config$state$error$f, _config$state, _config$state$error;
-    var [, message] = (_config$state$error$f = (_config$state = config.state) === null || _config$state === void 0 ? void 0 : (_config$state$error = _config$state.error) === null || _config$state$error === void 0 ? void 0 : _config$state$error.find(_ref => {
-      var [key] = _ref;
-      return key === '';
-    })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
-    return message !== null && message !== void 0 ? message : '';
+    if (!config.state) {
+      return '';
+    }
+    var message = config.state.error[''];
+    return getValidationMessage(message);
   });
   var [uncontrolledState, setUncontrolledState] = useState(() => {
     var submission = config.state;
@@ -29,11 +29,14 @@ function useForm() {
       };
     }
     return {
-      defaultValue: submission.value,
-      initialError: submission.error.filter(_ref2 => {
-        var [name] = _ref2;
-        return name !== '' && shouldValidate(submission, name);
-      })
+      defaultValue: submission.payload,
+      initialError: Object.entries(submission.error).reduce((result, _ref) => {
+        var [name, message] = _ref;
+        if (name !== '' && shouldValidate(submission.intent, name)) {
+          result[name] = message;
+        }
+        return result;
+      }, {})
     };
   });
   var fieldsetConfig = _objectSpread2(_objectSpread2({}, uncontrolledState), {}, {
@@ -50,11 +53,25 @@ function useForm() {
   }, []);
   useEffect(() => {
     var form = ref.current;
-    if (!form || !config.state) {
+    var submission = config.state;
+    if (!form || !submission) {
       return;
     }
-    reportSubmission(form, config.state);
+    var listCommand = parseListCommand(submission.intent);
+    if (listCommand) {
+      form.dispatchEvent(new CustomEvent('conform/list', {
+        detail: submission.intent
+      }));
+    }
+    setLastSubmission(submission);
   }, [config.state]);
+  useEffect(() => {
+    var form = ref.current;
+    if (!form || !lastSubmission) {
+      return;
+    }
+    reportSubmission(ref.current, lastSubmission);
+  }, [lastSubmission]);
   useEffect(() => {
     // Revalidate the form when input value is changed
     var handleInput = event => {
@@ -65,7 +82,7 @@ function useForm() {
         return;
       }
       if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
-        requestCommand(form, validate(field.name));
+        requestIntent(form, validate(field.name));
       }
     };
     var handleBlur = event => {
@@ -76,7 +93,7 @@ function useForm() {
         return;
       }
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
-        requestCommand(form, validate(field.name));
+        requestIntent(form, validate(field.name));
       }
     };
     var handleInvalid = event => {
@@ -107,8 +124,7 @@ function useForm() {
       }
       setError('');
       setUncontrolledState({
-        defaultValue: formConfig.defaultValue,
-        initialError: []
+        defaultValue: formConfig.defaultValue
       });
     };
 
@@ -141,53 +157,38 @@ function useForm() {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-
-        /**
-         * It checks defaultPrevented to confirm if the submission is intentional
-         * This is utilized by `useFieldList` to modify the list state when the submit
-         * event is captured and revalidate the form with new fields without triggering
-         * a form submission at the same time.
-         */
         if (event.defaultPrevented) {
           return;
         }
         try {
-          var submission;
+          var _config$onValidate;
           var formData = getFormData(form, submitter);
-          if (typeof config.onValidate === 'function') {
-            submission = config.onValidate({
-              form,
-              formData
-            });
-          } else {
-            submission = parse(formData);
-            if (config.mode !== 'server-validation') {
-              /**
-               * As there is no custom logic defined,
-               * removing the custom validity state will allow us
-               * finding the latest validation message.
-               *
-               * This is mainly used to showcase the constraint validation API.
-               */
-              for (var element of form.elements) {
-                if (isFieldElement(element) && element.willValidate) {
-                  element.setCustomValidity('');
-                  submission.error.push([element.name, element.validationMessage]);
-                }
-              }
+          var getSubmission = (_config$onValidate = config.onValidate) !== null && _config$onValidate !== void 0 ? _config$onValidate : context => parse(context.formData);
+          var submission = getSubmission({
+            form,
+            formData
+          });
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref2 => {
+            var [, message] = _ref2;
+            return message !== '' && ![].concat(message).includes(VALIDATION_UNDEFINED);
+          }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref3 => {
+            var [, message] = _ref3;
+            return ![].concat(message).includes(VALIDATION_UNDEFINED);
+          })) {
+            var listCommand = parseListCommand(submission.intent);
+            if (listCommand) {
+              form.dispatchEvent(new CustomEvent('conform/list', {
+                detail: submission.intent
+              }));
             }
-          }
-          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+            setLastSubmission(submission);
             event.preventDefault();
           } else {
             var _config$onSubmit;
-            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _objectSpread2({
               formData,
               submission
-            });
-          }
-          if (event.defaultPrevented) {
-            reportSubmission(form, submission);
+            }, getFormAttributes(form, submitter)));
           }
         } catch (e) {
           console.warn(e);
@@ -210,18 +211,14 @@ function useFieldset(ref, config) {
   () => {
     var _config$defaultValue;
     var initialError = {};
-    for (var [name, message] of (_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : []) {
+    for (var [name, message] of Object.entries((_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {})) {
       var _config$initialError;
       var [key, ...paths] = getPaths(name);
       if (typeof key === 'string') {
-        var _initialError$key;
         var scopedName = getName(paths);
-        var entries = (_initialError$key = initialError[key]) !== null && _initialError$key !== void 0 ? _initialError$key : [];
-        if (scopedName === '' && entries.length > 0 && entries[0][0] !== '') {
-          initialError[key] = [[scopedName, message], ...entries];
-        } else {
-          initialError[key] = [...entries, [scopedName, message]];
-        }
+        initialError[key] = _objectSpread2(_objectSpread2({}, initialError[key]), {}, {
+          [scopedName]: message
+        });
       }
     }
     return {
@@ -231,12 +228,8 @@ function useFieldset(ref, config) {
   });
   var [error, setError] = useState(() => {
     var result = {};
-    for (var [key, entries] of Object.entries(uncontrolledState.initialError)) {
-      var _entries$;
-      var [name, message] = (_entries$ = entries === null || entries === void 0 ? void 0 : entries[0]) !== null && _entries$ !== void 0 ? _entries$ : [];
-      if (name === '') {
-        result[key] = message !== null && message !== void 0 ? message : '';
-      }
+    for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
+      result[key] = getErrors(getValidationMessage(_error === null || _error === void 0 ? void 0 : _error['']));
     }
     return result;
   });
@@ -262,13 +255,12 @@ function useFieldset(ref, config) {
             field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
           }
           setError(prev => {
-            var _prev$key;
-            var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
+            var prevMessage = getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
             if (prevMessage === field.validationMessage) {
               return prev;
             }
             return _objectSpread2(_objectSpread2({}, prev), {}, {
-              [key]: field.validationMessage
+              [key]: getErrors(field.validationMessage)
             });
           });
         }
@@ -306,19 +298,21 @@ function useFieldset(ref, config) {
    */
   return new Proxy({}, {
     get(_target, key) {
-      var _fieldsetConfig$const, _error$key;
+      var _fieldsetConfig$const;
       if (typeof key !== 'string') {
         return;
       }
       var fieldsetConfig = config !== null && config !== void 0 ? config : {};
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
+      var errors = error === null || error === void 0 ? void 0 : error[key];
       var field = {
         config: _objectSpread2({
           name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
           defaultValue: uncontrolledState.defaultValue[key],
           initialError: uncontrolledState.initialError[key]
         }, constraint),
-        error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
+        error: errors === null || errors === void 0 ? void 0 : errors[0],
+        errors
       };
       if (fieldsetConfig.form) {
         field.config.form = fieldsetConfig.form;
@@ -341,18 +335,14 @@ function useFieldList(ref, config) {
   var [uncontrolledState, setUncontrolledState] = useState(() => {
     var _config$defaultValue2;
     var initialError = [];
-    for (var [name, message] of (_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : []) {
+    for (var [name, message] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
       var _config$initialError2;
       var [index, ...paths] = getPaths(name);
       if (typeof index === 'number') {
-        var _initialError$index;
         var scopedName = getName(paths);
-        var _entries = (_initialError$index = initialError[index]) !== null && _initialError$index !== void 0 ? _initialError$index : [];
-        if (scopedName === '' && _entries.length > 0 && _entries[0][0] !== '') {
-          initialError[index] = [[scopedName, message], ..._entries];
-        } else {
-          initialError[index] = [..._entries, [scopedName, message]];
-        }
+        initialError[index] = _objectSpread2(_objectSpread2({}, initialError[index]), {}, {
+          [scopedName]: message
+        });
       }
     }
     return {
@@ -360,7 +350,7 @@ function useFieldList(ref, config) {
       initialError
     };
   });
-  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
+  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => getErrors(getValidationMessage(error === null || error === void 0 ? void 0 : error['']))));
   var [entries, setEntries] = useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -383,24 +373,23 @@ function useFieldList(ref, config) {
       if (typeof index === 'number' && paths.length === 0) {
         if (field.dataset.conformTouched) {
           setError(prev => {
-            var _prev$index;
-            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            var prevMessage = getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[index]);
             if (prevMessage === field.validationMessage) {
               return prev;
             }
-            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+            return [...prev.slice(0, index), getErrors(field.validationMessage), ...prev.slice(index + 1)];
           });
         }
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
+    var listHandler = event => {
       var form = getFormElement(ref.current);
-      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
+      if (!form || event.target !== form) {
         return;
       }
-      var command = parseListCommand(event.submitter.value);
-      if (command.scope !== configRef.current.name) {
+      var command = parseListCommand(event.detail);
+      if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
       }
@@ -411,7 +400,9 @@ function useFieldList(ref, config) {
           case 'replace':
             return updateList([...(entries !== null && entries !== void 0 ? entries : [])], _objectSpread2(_objectSpread2({}, command), {}, {
               payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
-                defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
+                defaultValue: ["".concat(Date.now()),
+                // @ts-expect-error unknown type as it is sent through network
+                command.payload.defaultValue]
               })
             }));
           default:
@@ -436,7 +427,6 @@ function useFieldList(ref, config) {
             }
         }
       });
-      event.preventDefault();
     };
     var resetHandler = event => {
       var _fieldConfig$defaultV, _fieldConfig$defaultV2;
@@ -452,17 +442,21 @@ function useFieldList(ref, config) {
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
       setError([]);
     };
-    document.addEventListener('submit', submitHandler, true);
+
+    // @ts-expect-error Custom event: conform/list
+    document.addEventListener('conform/list', listHandler, true);
     document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
-      document.removeEventListener('submit', submitHandler, true);
+      // @ts-expect-error Custom event: conform/list
+      document.removeEventListener('conform/list', listHandler, true);
       document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return entries.map((_ref3, index) => {
-    var [key, defaultValue] = _ref3;
+  return entries.map((_ref4, index) => {
+    var [key, defaultValue] = _ref4;
+    var errors = error[index];
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
@@ -475,95 +469,186 @@ function useFieldList(ref, config) {
     }
     return {
       key,
-      error: error[index],
+      error: errors === null || errors === void 0 ? void 0 : errors[0],
+      errors,
       config: fieldConfig
     };
   });
 }
+
 /**
- * Returns the properties required to configure a shadow input for validation.
- * This is particular useful when integrating dropdown and datepicker whichs
- * introduces custom input mode.
- *
- * @see https://conform.guide/api/react#usecontrolledinput
+ * 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 useControlledInput(config) {
-  var _config$defaultValue4;
-  var ref = useRef(null);
-  var inputRef = useRef(null);
-  var configRef = useRef(config);
-  var [uncontrolledState, setUncontrolledState] = useState({
-    defaultValue: config.defaultValue,
-    initialError: config.initialError
-  });
-  var [value, setValue] = useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
-  var handleChange = eventOrValue => {
-    if (!ref.current) {
-      return;
+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');
     }
-    var newValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
-    ref.current.value = newValue;
-    ref.current.dispatchEvent(new InputEvent('input', {
-      bubbles: true
-    }));
-    setValue(newValue);
-  };
-  var handleBlur = () => {
-    var _ref$current;
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('blur', {
-      bubbles: true
-    }));
-  };
-  var handleInvalid = event => {
-    event.preventDefault();
-  };
-  useEffect(() => {
-    configRef.current = config;
+  }
+}
+
+/**
+ * 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;
   });
-  useEffect(() => {
+  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 _configRef$current$de;
-      var form = getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
+      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);
       }
-      setUncontrolledState({
-        defaultValue: configRef.current.defaultValue,
-        initialError: configRef.current.initialError
-      });
-      setValue("".concat((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : ''));
     };
+    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);
     };
   }, []);
-  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))), {
-    ref: inputRef,
-    value,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onInvalid: handleInvalid
-  }];
+  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 };
+export { 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 { getFormElements, list, parse, requestIntent, requestSubmit, validate, validateConstraint } from '@conform-to/dom';
+export { 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.6.0-pre.0",
 	"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.6.0-pre.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"