@conform-to/react 0.1.1 → 0.3.0

package/hooks.js

@@ -5,374 +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/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;
+    var handleInput = event => {
+      var field = event.target;
+      var form = ref.current;
 
-      if (!dom.isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.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
 
-      if (ref.current) {
-        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 (!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 (ref.current) {
-        dom.reportValidity(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.
+       */
+
+
+      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.body.addEventListener('input', handleChange);
-    document.body.addEventListener('focusout', handleBlur);
+    document.addEventListener('input', handleInput, true);
+    document.addEventListener('blur', handleBlur, true);
+    document.addEventListener('reset', handleReset);
     return () => {
-      document.body.removeEventListener('input', handleChange);
-      document.body.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 : '';
 
-    (_schema$validate = schema.validate) === null || _schema$validate === void 0 ? void 0 : _schema$validate.call(schema, fieldset);
-    dispatch({
-      type: 'cleanup',
-      payload: {
-        fieldset
-      }
-    });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [schema.validate]);
-  react.useEffect(() => {
-    dispatch({
-      type: 'migrate',
-      payload: {
-        keys: Object.keys(schema.fields),
-        error: config.error
+          if (prevMessage === field.validationMessage) {
+            return prev;
+          }
+
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+            [key]: field.validationMessage
+          });
+        });
+        event.preventDefault();
       }
-    });
-  }, [config.error, schema.fields]);
-  return [{
-    ref,
-    name: config.name,
-    form: config.form,
-
-    onInput(e) {
-      var _schema$validate2;
-
-      var fieldset = e.currentTarget;
-      (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
-      dispatch({
-        type: 'cleanup',
-        payload: {
-          fieldset
-        }
-      });
-    },
+    };
+
+    var submitHandler = event => {
+      var form = dom.getFormElement(ref.current);
+
+      if (!form || event.target !== form) {
+        return;
+      } // This helps resetting error that fullfilled by the submitter
 
-    onReset(e) {
-      dom.setFieldState(e.currentTarget, {
-        touched: false
-      });
-      dispatch({
-        type: 'reset'
-      });
-    },
 
-    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]));
+      resetError(form);
+    };
 
-      if (!element || !key) {
+    var resetHandler = event => {
+      var form = dom.getFormElement(ref.current);
+
+      if (!form || event.target !== form) {
         return;
-      } // Disable browser report
+      }
 
+      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);
+    };
+  }, [ref, config === null || config === void 0 ? void 0 : config.name]);
+  react.useEffect(() => {
+    setError(prev => {
+      var next = prev;
+
+      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.createFieldConfig(schema, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
-    error: Object.assign({}, config.error, errorMessage)
-  }))];
+  });
 }
-function useFieldList(config) {
-  var _config$initialValue$, _config$initialValue;
-
-  var size = (_config$initialValue$ = (_config$initialValue = config.initialValue) === null || _config$initialValue === void 0 ? void 0 : _config$initialValue.length) !== null && _config$initialValue$ !== void 0 ? _config$initialValue$ : 1;
-  var [keys, setKeys] = react.useState(() => [...Array(size).keys()]);
-  var list = react.useMemo(() => keys.map((key, index) => {
-    var _config$initialValue2, _config$error2;
 
+/**
+ * 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/packages/conform-react/README.md#usefieldlist
+ */
+function useFieldList(ref, config) {
+  var [entries, setEntries] = react.useState(() => {
+    var _config$defaultValue2;
+
+    return Object.entries((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [undefined]);
+  });
+  var list = entries.map((_ref, index) => {
+    var _config$defaultValue3, _config$initialError5, _config$initialError6;
+
+    var [key, defaultValue] = _ref;
     return {
-      key: "".concat(key),
+      key,
       config: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
         name: "".concat(config.name, "[").concat(index, "]"),
-        initialValue: (_config$initialValue2 = config.initialValue) === null || _config$initialValue2 === void 0 ? void 0 : _config$initialValue2[index],
-        error: (_config$error2 = config.error) === null || _config$error2 === void 0 ? void 0 : _config$error2[index],
-        constraint: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config.constraint), {}, {
-          multiple: false
-        })
+        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
       })
     };
-  }), [keys, config]);
-  var controls = {
-    prepend() {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'prepend', {})), {}, {
-        onClick(e) {
-          setKeys(keys => [Date.now(), ...keys]);
-          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
+        };
+      };
+    }
 
-      });
-    },
+  });
+  react.useEffect(() => {
+    setEntries(prevEntries => {
+      var _config$defaultValue4;
 
-    append() {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'append', {})), {}, {
-        onClick(e) {
-          setKeys(keys => [...keys, Date.now()]);
-          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.createControlButton(config.name, 'remove', {
-        index
-      })), {}, {
-        onClick(e) {
-          setKeys(keys => [...keys.slice(0, index), ...keys.slice(index + 1)]);
-          e.preventDefault();
+      if (prevEntries.length !== nextEntries.length) {
+        return nextEntries;
+      }
+
+      for (var i = 0; i < prevEntries.length; i++) {
+        var [prevKey, prevValue] = prevEntries[i];
+        var [nextKey, nextValue] = nextEntries[i];
+
+        if (prevKey !== nextKey || prevValue !== nextValue) {
+          return nextEntries;
         }
+      } // No need to rerender in this case
 
-      });
-    }
 
-  };
-  react.useEffect(() => {
-    setKeys(keys => {
-      if (keys.length === size) {
-        return keys;
+      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;
       }
 
-      return [...Array(size).keys()];
-    });
-  }, [size]);
-  return [list, controls];
+      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((_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/packages/conform-react/README.md#usecontrolledinput
+ */
 function useControlledInput(field) {
-  var _field$initialValue;
+  var _field$defaultValue;
 
-  var [value, setValue] = react.useState("".concat((_field$initialValue = field.initialValue) !== null && _field$initialValue !== void 0 ? _field$initialValue : ''));
-  var [shouldBlur, setShouldBlur] = react.useState(false);
   var ref = react.useRef(null);
-  var input = react.useMemo(() => /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, field.constraint), {}, {
-    ref,
-    name: field.name,
-    defaultValue: field.initialValue,
-    style: {
-      display: 'none'
-    },
-    'aria-hidden': true
-  })), [field.constraint, field.name, field.initialValue]);
-  react.useEffect(() => {
+  var [value, setValue] = react.useState("".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''));
+
+  var handleChange = eventOrValue => {
     if (!ref.current) {
       return;
     }
 
-    ref.current.value = value;
+    var newValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+    ref.current.value = newValue;
     ref.current.dispatchEvent(new InputEvent('input', {
       bubbles: true
     }));
-  }, [value]);
-  react.useEffect(() => {
-    var _ref$current;
+    setValue(newValue);
+  };
 
-    if (!shouldBlur) {
-      return;
-    }
+  var handleBlur = () => {
+    var _ref$current;
 
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('focusout', {
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('blur', {
       bubbles: true
     }));
-    setShouldBlur(false);
-  }, [shouldBlur]);
-  return [input, {
+  };
+
+  var handleInvalid = event => {
+    event.preventDefault();
+  };
+
+  return [_rollupPluginBabelHelpers.objectSpread2({
+    ref,
+    hidden: true
+  }, helpers.input(field, {
+    type: 'text'
+  })), {
     value,
-    onChange: value => {
-      setValue(value);
-    },
-    onBlur: () => {
-      setShouldBlur(true);
-    }
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onInvalid: handleInvalid
   }];
 }