@conform-to/react 0.2.0 → 0.3.0-pre.0

package/hooks.js

@@ -5,416 +5,492 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
 var react = require('react');
-
+var helpers = require('./helpers.js');
+
+/**
+ * Returns properties required to hook into form events.
+ * Applied custom validation and define when error should be reported.
+ *
+ * @see https://github.com/edmundhung/conform/tree/v0.3.0-pre.0/packages/conform-react/README.md#useform
+ */
 function useForm() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var {
-    onReset,
-    onSubmit,
-    noValidate = false,
-    fallbackNative = false,
-    initialReport = 'onSubmit'
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    validate
+  } = config;
   var ref = react.useRef(null);
-  var [formNoValidate, setFormNoValidate] = react.useState(noValidate || !fallbackNative);
-
-  var handleSubmit = event => {
-    if (!noValidate) {
-      dom.setFieldState(event.currentTarget, {
-        touched: true
-      });
-
-      if (!dom.shouldSkipValidate(event.nativeEvent) && !event.currentTarget.reportValidity()) {
-        return event.preventDefault();
-      }
-    }
-
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
-  };
-
-  var handleReset = event => {
-    dom.setFieldState(event.currentTarget, {
-      touched: false
-    });
-    onReset === null || onReset === void 0 ? void 0 : onReset(event);
-  };
-
+  var [noValidate, setNoValidate] = react.useState(config.noValidate || !config.fallbackNative);
   react.useEffect(() => {
-    setFormNoValidate(true);
+    setNoValidate(true);
   }, []);
   react.useEffect(() => {
-    if (noValidate) {
-      return;
-    }
+    // Initialize form validation messages
+    if (ref.current) {
+      validate === null || validate === void 0 ? void 0 : validate(ref.current);
+    } // Revalidate the form when input value is changed
 
-    var handleChange = event => {
-      var _event$target;
 
-      if (!ref.current || !dom.isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
+    var handleInput = event => {
+      var field = event.target;
+      var form = ref.current;
+
+      if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
 
-      if (initialReport === 'onChange') {
-        dom.setFieldState(event.target, {
-          touched: true
-        });
-      }
+      validate === null || validate === void 0 ? void 0 : validate(form);
+
+      if (!config.noValidate) {
+        if (config.initialReport === 'onChange') {
+          field.dataset.conformTouched = 'true';
+        } // Field validity might be changed due to cross reference
+
 
-      dom.reportValidity(ref.current);
+        for (var _field of form.elements) {
+          if (dom.isFieldElement(_field) && _field.dataset.conformTouched) {
+            // Report latest error for all touched fields
+            _field.checkValidity();
+          }
+        }
+      }
     };
 
     var handleBlur = event => {
-      var _event$target2;
+      var field = event.target;
+      var form = ref.current;
 
-      if (!ref.current || !dom.isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || config.noValidate || config.initialReport !== 'onBlur') {
         return;
       }
 
-      if (initialReport === 'onBlur') {
-        dom.setFieldState(event.target, {
-          touched: true
-        });
+      field.dataset.conformTouched = 'true';
+      field.reportValidity();
+    };
+
+    var handleReset = event => {
+      var form = ref.current;
+
+      if (!form || event.target !== form) {
+        return;
+      } // Reset all field state
+
+
+      for (var field of form.elements) {
+        if (dom.isFieldElement(field)) {
+          delete field.dataset.conformTouched;
+        }
       }
+      /**
+       * The reset event is triggered before form reset happens.
+       * This make sure the form to be revalidated with initial values.
+       */
+
 
-      dom.reportValidity(ref.current);
+      setTimeout(() => {
+        validate === null || validate === void 0 ? void 0 : validate(form);
+      }, 0);
     };
+    /**
+     * The input event handler will be triggered in capturing phase in order to
+     * allow follow-up action in the bubble phase based on the latest validity
+    	 * E.g. `useFieldset` reset the error of valid field after checking the
+     * validity in the bubble phase.
+     */
+
 
-    document.addEventListener('input', handleChange);
-    document.addEventListener('focusout', handleBlur);
+    document.addEventListener('input', handleInput, true);
+    document.addEventListener('blur', handleBlur, true);
+    document.addEventListener('reset', handleReset);
     return () => {
-      document.removeEventListener('input', handleChange);
-      document.removeEventListener('focusout', handleBlur);
+      document.removeEventListener('input', handleInput, true);
+      document.removeEventListener('blur', handleBlur, true);
+      document.removeEventListener('reset', handleReset);
     };
-  }, [noValidate, initialReport]);
+  }, [validate, config.initialReport, config.noValidate]);
   return {
     ref,
-    onSubmit: handleSubmit,
-    onReset: handleReset,
-    noValidate: formNoValidate
-  };
-}
-function useFieldset(schema) {
-  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var ref = react.useRef(null);
-  var [errorMessage, dispatch] = react.useReducer((state, action) => {
-    switch (action.type) {
-      case 'report':
-        {
-          var {
-            key,
-            message
-          } = action.payload;
-
-          if (state[key] === message) {
-            return state;
+    noValidate,
+
+    onSubmit(event) {
+      var form = event.currentTarget;
+      var nativeEvent = event.nativeEvent;
+      var submitter = nativeEvent.submitter instanceof HTMLButtonElement || nativeEvent.submitter instanceof HTMLInputElement ? nativeEvent.submitter : null; // Validating the form with the submitter value
+
+      validate === null || validate === void 0 ? void 0 : validate(form, 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 (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && !event.defaultPrevented) {
+        // Mark all fields as touched
+        for (var field of form.elements) {
+          if (dom.isFieldElement(field)) {
+            field.dataset.conformTouched = 'true';
           }
+        } // Check the validity of the form
 
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-            [key]: message
-          });
+
+        if (!event.currentTarget.reportValidity()) {
+          event.preventDefault();
         }
+      }
 
-      case 'migrate':
-        {
-          var {
-            keys,
-            error
-          } = action.payload;
-          var nextState = state;
-
-          for (var _key of Object.keys(keys)) {
-            var prevError = state[_key];
-            var nextError = error === null || error === void 0 ? void 0 : error[_key];
-
-            if (typeof nextError === 'string' && prevError !== nextError) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, nextState), {}, {
-                [_key]: nextError
-              });
-            }
-          }
+      if (!event.defaultPrevented) {
+        var _config$onSubmit;
 
-          return nextState;
-        }
+        (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event);
+      }
+    }
+
+  };
+}
+/**
+ * All the information of the field, including state and config.
+ */
 
-      case 'cleanup':
-        {
-          var {
-            fieldset
-          } = action.payload;
-          var updates = [];
+function useFieldset(ref, config) {
+  var [error, setError] = react.useState(() => {
+    var result = {};
 
-          for (var [_key2, _message] of Object.entries(state)) {
-            if (!_message) {
-              continue;
-            }
+    for (var [key, _error] 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 fields = dom.getFieldElements(fieldset, _key2);
+      if (_error !== null && _error !== void 0 && _error.message) {
+        result[key] = _error.message;
+      }
+    }
 
-            if (fields.every(field => field.validity.valid)) {
-              updates.push([_key2, '']);
+    return result;
+  });
+  react.useEffect(() => {
+    /**
+     * Reset the error state of each field if its validity is changed.
+     *
+     * This is a workaround as no official way is provided to notify
+     * when the validity of the field is changed from `invalid` to `valid`.
+     */
+    var resetError = form => {
+      setError(prev => {
+        var next = prev;
+
+        for (var field of form.elements) {
+          if (dom.isFieldElement(field)) {
+            var key = dom.getKey(field.name, config === null || config === void 0 ? void 0 : config.name);
+
+            if (key) {
+              var _next$key, _next;
+
+              var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
+              var nextMessage = field.validationMessage;
+              /**
+               * Techincally, checking prevMessage not being empty while nextMessage being empty
+               * is sufficient for our usecase. It checks if the message is changed instead to allow
+               * the hook to be useful independently.
+               */
+
+              if (prevMessage !== '' && prevMessage !== nextMessage) {
+                next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
+                  [key]: nextMessage
+                });
+              }
             }
           }
+        }
 
-          if (updates.length === 0) {
-            return state;
-          }
+        return next;
+      });
+    };
 
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), Object.fromEntries(updates));
-        }
+    var handleInput = event => {
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
 
-      case 'reset':
-        {
-          return {};
-        }
-    }
-  }, {}, () => Object.fromEntries(Object.keys(schema.fields).reduce((result, name) => {
-    var _config$error;
+      if (!form || !dom.isFieldElement(field) || field.form !== form) {
+        return;
+      }
 
-    var error = (_config$error = config.error) === null || _config$error === void 0 ? void 0 : _config$error[name];
+      resetError(form);
+    };
 
-    if (typeof error === 'string') {
-      result.push([name, error]);
-    }
+    var invalidHandler = event => {
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
 
-    return result;
-  }, [])));
-  react.useEffect(() => {
-    var _schema$validate;
+      if (!form || !dom.isFieldElement(field) || field.form !== form) {
+        return;
+      }
 
-    var fieldset = ref.current;
+      var key = dom.getKey(field.name, config === null || config === void 0 ? void 0 : config.name); // Update the error only if the field belongs to the fieldset
 
-    if (!fieldset) {
-      console.warn('No fieldset ref found; You must pass the fieldsetProps to the fieldset element');
-      return;
-    }
+      if (key) {
+        setError(prev => {
+          var _prev$key;
 
-    if (!(fieldset !== null && fieldset !== void 0 && fieldset.form)) {
-      console.warn('No form element is linked to the fieldset; Do you forgot setting the form attribute?');
-    }
+          var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
+
+          if (prevMessage === field.validationMessage) {
+            return prev;
+          }
 
-    (_schema$validate = schema.validate) === null || _schema$validate === void 0 ? void 0 : _schema$validate.call(schema, fieldset);
-    dispatch({
-      type: 'cleanup',
-      payload: {
-        fieldset
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+            [key]: field.validationMessage
+          });
+        });
+        event.preventDefault();
       }
-    });
+    };
+
+    var submitHandler = event => {
+      var form = dom.getFormElement(ref.current);
 
-    var resetHandler = e => {
-      if (e.target !== fieldset.form) {
+      if (!form || event.target !== form) {
         return;
-      }
+      } // This helps resetting error that fullfilled by the submitter
 
-      dispatch({
-        type: 'reset'
-      });
-      setTimeout(() => {
-        var _schema$validate2;
 
-        // Delay revalidation until reset is completed
-        (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
-      }, 0);
+      resetError(form);
     };
 
+    var resetHandler = event => {
+      var form = dom.getFormElement(ref.current);
+
+      if (!form || event.target !== form) {
+        return;
+      }
+
+      setError({});
+    };
+
+    document.addEventListener('input', handleInput); // The invalid event does not bubble and so listening on the capturing pharse is needed
+
+    document.addEventListener('invalid', invalidHandler, true);
+    document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
+      document.removeEventListener('input', handleInput);
+      document.removeEventListener('invalid', invalidHandler, true);
+      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [schema.validate]);
+  }, [ref, config === null || config === void 0 ? void 0 : config.name]);
   react.useEffect(() => {
-    dispatch({
-      type: 'migrate',
-      payload: {
-        keys: Object.keys(schema.fields),
-        error: config.error
-      }
-    });
-  }, [config.error, schema.fields]);
-  return [{
-    ref,
-    name: config.name,
-    form: config.form,
-
-    onInput(e) {
-      var _schema$validate3;
-
-      var fieldset = e.currentTarget;
-      (_schema$validate3 = schema.validate) === null || _schema$validate3 === void 0 ? void 0 : _schema$validate3.call(schema, fieldset);
-      dispatch({
-        type: 'cleanup',
-        payload: {
-          fieldset
-        }
-      });
-    },
+    setError(prev => {
+      var next = prev;
 
-    onInvalid(e) {
-      var element = dom.isFieldElement(e.target) ? e.target : null;
-      var key = Object.keys(schema.fields).find(key => (element === null || element === void 0 ? void 0 : element.name) === dom.getName([e.currentTarget.name, key]));
-
-      if (!element || !key) {
-        return;
-      } // Disable browser report
+      for (var [key, _error2] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
+        var _config$initialError2;
 
+        if (next[key] !== (_error2 === null || _error2 === void 0 ? void 0 : _error2.message)) {
+          var _error2$message;
 
-      e.preventDefault();
-      dispatch({
-        type: 'report',
-        payload: {
-          key,
-          message: element.validationMessage
+          next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
+            [key]: (_error2$message = _error2 === null || _error2 === void 0 ? void 0 : _error2.message) !== null && _error2$message !== void 0 ? _error2$message : ''
+          });
         }
-      });
+      }
+
+      return next;
+    });
+  }, [config === null || config === void 0 ? void 0 : config.name, config === null || config === void 0 ? void 0 : config.initialError]);
+  /**
+   * This allows us constructing the field at runtime as we have no information
+   * about which fields would be available. The proxy will also help tracking
+   * the usage of each field for optimization in the future.
+   */
+
+  return new Proxy({}, {
+    get(_target, key) {
+      var _constraint, _config$defaultValue, _config$initialError3, _config$initialError4, _error$key;
+
+      if (typeof key !== 'string') {
+        return;
+      }
+
+      var constraint = config === null || config === void 0 ? void 0 : (_constraint = config.constraint) === null || _constraint === void 0 ? void 0 : _constraint[key];
+      var field = {
+        config: _rollupPluginBabelHelpers.objectSpread2({
+          name: config !== null && config !== void 0 && config.name ? "".concat(config.name, ".").concat(key) : key,
+          form: config === null || config === void 0 ? void 0 : config.form,
+          defaultValue: config === null || config === void 0 ? void 0 : (_config$defaultValue = config.defaultValue) === null || _config$defaultValue === void 0 ? void 0 : _config$defaultValue[key],
+          initialError: config === null || config === void 0 ? void 0 : (_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : (_config$initialError4 = _config$initialError3[key]) === null || _config$initialError4 === void 0 ? void 0 : _config$initialError4.details
+        }, constraint),
+        error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
+      };
+      return field;
     }
 
-  }, dom.getFieldProps(schema, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
-    error: Object.assign({}, config.error, errorMessage)
-  }))];
+  });
 }
-function useFieldList(props) {
+
+/**
+ * Returns a list of key and config, with a group of helpers
+ * configuring buttons for list manipulation
+ *
+ * @see https://github.com/edmundhung/conform/tree/v0.3.0-pre.0/packages/conform-react/README.md#usefieldlist
+ */
+function useFieldList(ref, config) {
   var [entries, setEntries] = react.useState(() => {
-    var _props$defaultValue;
+    var _config$defaultValue2;
 
-    return Object.entries((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : [undefined]);
+    return Object.entries((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [undefined]);
   });
   var list = entries.map((_ref, index) => {
-    var _props$defaultValue2, _props$error;
+    var _config$defaultValue3, _config$initialError5, _config$initialError6;
 
     var [key, defaultValue] = _ref;
     return {
-      key: "".concat(key),
-      props: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-        name: "".concat(props.name, "[").concat(index, "]"),
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_props$defaultValue2 = props.defaultValue) === null || _props$defaultValue2 === void 0 ? void 0 : _props$defaultValue2[index],
-        error: (_props$error = props.error) === null || _props$error === void 0 ? void 0 : _props$error[index],
-        multiple: false
+      key,
+      config: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
+        name: "".concat(config.name, "[").concat(index, "]"),
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue3 = config.defaultValue) === null || _config$defaultValue3 === void 0 ? void 0 : _config$defaultValue3[index],
+        initialError: (_config$initialError5 = config.initialError) === null || _config$initialError5 === void 0 ? void 0 : (_config$initialError6 = _config$initialError5[index]) === null || _config$initialError6 === void 0 ? void 0 : _config$initialError6.details
       })
     };
   });
-  var controls = {
-    prepend(defaultValue) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'prepend', {
-        defaultValue
-      })), {}, {
-        onClick(e) {
-          setEntries(entries => dom.applyControlCommand([...entries], 'prepend', {
-            defaultValue: ["".concat(Date.now()), defaultValue]
-          }));
-          e.preventDefault();
-        }
+  /***
+   * This use proxy to capture all information about the command and
+   * have it encoded in the value.
+   */
+
+  var control = new Proxy({}, {
+    get(_target, type) {
+      return function () {
+        var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        return {
+          name: dom.listCommandKey,
+          value: dom.serializeListCommand(config.name, {
+            type,
+            payload
+          }),
+          form: config.form,
+          formNoValidate: true
+        };
+      };
+    }
 
-      });
-    },
-
-    append(defaultValue) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'append', {
-        defaultValue
-      })), {}, {
-        onClick(e) {
-          setEntries(entries => dom.applyControlCommand([...entries], 'append', {
-            defaultValue: ["".concat(Date.now()), defaultValue]
-          }));
-          e.preventDefault();
-        }
+  });
+  react.useEffect(() => {
+    setEntries(prevEntries => {
+      var _config$defaultValue4;
 
-      });
-    },
-
-    replace(index, defaultValue) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'replace', {
-        index,
-        defaultValue
-      })), {}, {
-        onClick(e) {
-          setEntries(entries => dom.applyControlCommand([...entries], 'replace', {
-            defaultValue: ["".concat(Date.now()), defaultValue],
-            index
-          }));
-          e.preventDefault();
-        }
+      var nextEntries = Object.entries((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : [undefined]);
 
-      });
-    },
-
-    remove(index) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'remove', {
-        index
-      })), {}, {
-        onClick(e) {
-          setEntries(entries => dom.applyControlCommand([...entries], 'remove', {
-            index
-          }));
-          e.preventDefault();
-        }
+      if (prevEntries.length !== nextEntries.length) {
+        return nextEntries;
+      }
 
-      });
-    },
-
-    reorder(fromIndex, toIndex) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'reorder', {
-        from: fromIndex,
-        to: toIndex
-      })), {}, {
-        onClick(e) {
-          if (fromIndex !== toIndex) {
-            setEntries(entries => dom.applyControlCommand([...entries], 'reorder', {
-              from: fromIndex,
-              to: toIndex
-            }));
-          }
+      for (var i = 0; i < prevEntries.length; i++) {
+        var [prevKey, prevValue] = prevEntries[i];
+        var [nextKey, nextValue] = nextEntries[i];
 
-          e.preventDefault();
+        if (prevKey !== nextKey || prevValue !== nextValue) {
+          return nextEntries;
         }
+      } // No need to rerender in this case
 
-      });
-    }
 
-  };
-  react.useEffect(() => {
-    var _props$defaultValue3;
+      return prevEntries;
+    });
+
+    var submitHandler = event => {
+      var form = dom.getFormElement(ref.current);
+
+      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== dom.listCommandKey) {
+        return;
+      }
+
+      var [name, command] = dom.parseListCommand(event.submitter.value);
+
+      if (name !== config.name) {
+        // Ensure the scope of the listener are limited to specific field name
+        return;
+      }
+
+      switch (command.type) {
+        case 'append':
+        case 'prepend':
+        case 'replace':
+          command.payload.defaultValue = ["".concat(Date.now()), command.payload.defaultValue];
+          break;
+      }
+
+      setEntries(entries => dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command));
+      event.preventDefault();
+    };
+
+    var resetHandler = event => {
+      var _config$defaultValue5;
+
+      var form = dom.getFormElement(ref.current);
+
+      if (!form || event.target !== form) {
+        return;
+      }
 
-    setEntries(Object.entries((_props$defaultValue3 = props.defaultValue) !== null && _props$defaultValue3 !== void 0 ? _props$defaultValue3 : [undefined]));
-  }, [props.defaultValue]);
-  return [list, controls];
+      setEntries(Object.entries((_config$defaultValue5 = config.defaultValue) !== null && _config$defaultValue5 !== void 0 ? _config$defaultValue5 : []));
+    };
+
+    document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, [ref, config.name, config.defaultValue]);
+  return [list, control];
 }
+
+/**
+ * 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://github.com/edmundhung/conform/tree/v0.3.0-pre.0/packages/conform-react/README.md#usecontrolledinput
+ */
 function useControlledInput(field) {
-  var _ref$current$value, _ref$current, _field$defaultValue;
+  var _field$defaultValue;
 
   var ref = react.useRef(null);
-  var input = react.useMemo(() => /*#__PURE__*/react.createElement('input', {
-    ref,
-    name: field.name,
-    form: field.form,
-    defaultValue: field.defaultValue,
-    required: field.required,
-    minLength: field.minLength,
-    maxLength: field.maxLength,
-    min: field.min,
-    max: field.max,
-    step: field.step,
-    pattern: field.pattern,
-    hidden: true,
-    'aria-hidden': true
-  }), [field.name, field.form, field.defaultValue, field.required, field.minLength, field.maxLength, field.min, field.max, field.step, field.pattern]);
-  return [input, {
-    value: (_ref$current$value = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.value) !== null && _ref$current$value !== void 0 ? _ref$current$value : "".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''),
-    onChange: value => {
-      if (!ref.current) {
-        return;
-      }
+  var [value, setValue] = react.useState("".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''));
 
-      ref.current.value = value;
-      ref.current.dispatchEvent(new InputEvent('input', {
-        bubbles: true
-      }));
-    },
-    onBlur: () => {
-      var _ref$current2;
-
-      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.dispatchEvent(new FocusEvent('focusout', {
-        bubbles: true
-      }));
+  var handleChange = eventOrValue => {
+    if (!ref.current) {
+      return;
     }
+
+    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();
+  };
+
+  return [_rollupPluginBabelHelpers.objectSpread2({
+    ref,
+    hidden: true
+  }, helpers.input(field, {
+    type: 'text'
+  })), {
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onInvalid: handleInvalid
   }];
 }