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

package/module/hooks.js

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.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';
+import { getScope, parseListCommand, reportSubmission, getFormData, parse, VALIDATION_UNDEFINED, getFormAttributes, getPaths, getName, isFieldElement, requestIntent, validate, FORM_ERROR_ELEMENT_NAME, getErrors, getFormElement, getValidationMessage, updateList } from '@conform-to/dom';
+import { useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 
 /**
  * Returns properties required to hook into form events.
@@ -9,43 +9,40 @@ import { useRef, useState, useEffect, useMemo, useLayoutEffect } from 'react';
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$state;
+  var _config$lastSubmissio, _config$ref, _ref2, _config$lastSubmissio2;
   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(() => {
-    if (!config.state) {
-      return '';
+  var formRef = useRef(null);
+  var [lastSubmission, setLastSubmission] = useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
+  var [errors, setErrors] = useState(() => {
+    if (!config.lastSubmission) {
+      return [];
     }
-    var message = config.state.error[''];
-    return getValidationMessage(message);
+    return [].concat(config.lastSubmission.error['']);
   });
-  var [uncontrolledState, setUncontrolledState] = useState(() => {
-    var submission = config.state;
+  var initialError = useMemo(() => {
+    var submission = config.lastSubmission;
     if (!submission) {
-      return {
-        defaultValue: config.defaultValue
-      };
+      return {};
     }
-    return {
-      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), {}, {
+    var scope = getScope(submission.intent);
+    return Object.entries(submission.error).reduce((result, _ref) => {
+      var [name, message] = _ref;
+      if (name !== '' && (scope === null || scope === name)) {
+        result[name] = message;
+      }
+      return result;
+    }, {});
+  }, [config.lastSubmission]);
+  var ref = (_config$ref = config.ref) !== null && _config$ref !== void 0 ? _config$ref : formRef;
+  var fieldset = useFieldset(ref, {
+    defaultValue: (_ref2 = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload) !== null && _ref2 !== void 0 ? _ref2 : config.defaultValue,
+    initialError,
     constraint: config.constraint,
     form: config.id
   });
-  var fieldset = useFieldset(ref, fieldsetConfig);
   var [noValidate, setNoValidate] = useState(config.noValidate || !config.fallbackNative);
-  useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   useEffect(() => {
@@ -53,7 +50,7 @@ function useForm() {
   }, []);
   useEffect(() => {
     var form = ref.current;
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!form || !submission) {
       return;
     }
@@ -64,24 +61,29 @@ function useForm() {
       }));
     }
     setLastSubmission(submission);
-  }, [config.state]);
+  }, [ref, config.lastSubmission]);
   useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
       return;
     }
-    reportSubmission(ref.current, lastSubmission);
-  }, [lastSubmission]);
+    reportSubmission(form, lastSubmission);
+  }, [ref, lastSubmission]);
   useEffect(() => {
     // Revalidate the form when input value is changed
     var handleInput = event => {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
+      var {
+        initialReport = 'onSubmit',
+        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
+        shouldRevalidate = 'onInput'
+      } = formConfig;
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
+      if (field.dataset.conformTouched ? shouldRevalidate === 'onInput' : shouldValidate === 'onInput') {
         requestIntent(form, validate(field.name));
       }
     };
@@ -89,27 +91,31 @@ function useForm() {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
+      var {
+        initialReport = 'onSubmit',
+        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
+        shouldRevalidate = 'onInput'
+      } = formConfig;
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
+      if (field.dataset.conformTouched ? shouldRevalidate === 'onBlur' : shouldValidate === 'onBlur') {
         requestIntent(form, validate(field.name));
       }
     };
     var handleInvalid = event => {
-      var form = getFormElement(ref.current);
+      var form = ref.current;
       var field = event.target;
-      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '__form__') {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setError(field.validationMessage);
+        setErrors(getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
       var form = ref.current;
-      var formConfig = configRef.current;
       if (!form || event.target !== form) {
         return;
       }
@@ -118,22 +124,11 @@ function useForm() {
       for (var field of form.elements) {
         if (isFieldElement(field)) {
           delete field.dataset.conformTouched;
-          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
-      setError('');
-      setUncontrolledState({
-        defaultValue: formConfig.defaultValue
-      });
+      setErrors([]);
     };
-
-    /**
-     * 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', handleInput, true);
     document.addEventListener('blur', handleBlur, true);
     document.addEventListener('invalid', handleInvalid, true);
@@ -144,14 +139,13 @@ function useForm() {
       document.removeEventListener('invalid', handleInvalid, true);
       document.removeEventListener('reset', handleReset);
     };
-  }, []);
+  }, [ref]);
   var form = {
-    id: config.id,
     ref,
-    error,
+    error: errors[0],
+    errors,
     props: {
       ref,
-      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -168,11 +162,11 @@ function useForm() {
             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 => {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref3 => {
             var [, message] = _ref3;
+            return message !== '' && ![].concat(message).includes(VALIDATION_UNDEFINED);
+          }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref4 => {
+            var [, message] = _ref4;
             return ![].concat(message).includes(VALIDATION_UNDEFINED);
           })) {
             var listCommand = parseListCommand(submission.intent);
@@ -194,46 +188,41 @@ function useForm() {
           console.warn(e);
         }
       }
-    },
-    config: fieldsetConfig
+    }
   };
+  if (config.id) {
+    form.id = config.id;
+    form.errorId = "".concat(config.id, "-error");
+    form.props.id = form.id;
+  }
+  if (form.errorId && form.errors.length > 0) {
+    form.props['aria-invalid'] = 'true';
+    form.props['aria-describedby'] = form.errorId;
+  }
   return [form, fieldset];
 }
 
 /**
- * All the information of the field, including state and config.
+ * A set of field configuration
  */
 
 function useFieldset(ref, config) {
   var configRef = useRef(config);
-  var [uncontrolledState, setUncontrolledState] = useState(
-  // @ts-expect-error
-  () => {
-    var _config$defaultValue;
-    var 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 scopedName = getName(paths);
-        initialError[key] = _objectSpread2(_objectSpread2({}, initialError[key]), {}, {
-          [scopedName]: message
-        });
-      }
-    }
-    return {
-      defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
-      initialError
-    };
-  });
   var [error, setError] = useState(() => {
+    var initialError = config === null || config === void 0 ? void 0 : config.initialError;
+    if (!initialError) {
+      return {};
+    }
     var result = {};
-    for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
-      result[key] = getErrors(getValidationMessage(_error === null || _error === void 0 ? void 0 : _error['']));
+    for (var [name, message] of Object.entries(initialError)) {
+      var [key, ...paths] = getPaths(name);
+      if (typeof key === 'string' && paths.length === 0) {
+        result[key] = [].concat(message !== null && message !== void 0 ? message : []);
+      }
     }
     return result;
   });
-  useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   useEffect(() => {
@@ -250,10 +239,6 @@ function useFieldset(ref, config) {
       // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
-          // Update the aria attribute only if it is set
-          if (field.getAttribute('aria-invalid')) {
-            field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
-          }
           setError(prev => {
             var prevMessage = getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
             if (prevMessage === field.validationMessage) {
@@ -268,17 +253,10 @@ function useFieldset(ref, config) {
       }
     };
     var resetHandler = event => {
-      var _fieldsetConfig$defau;
       var form = getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var fieldsetConfig = configRef.current;
-      setUncontrolledState({
-        // @ts-expect-error
-        defaultValue: (_fieldsetConfig$defau = fieldsetConfig === null || fieldsetConfig === void 0 ? void 0 : fieldsetConfig.defaultValue) !== null && _fieldsetConfig$defau !== void 0 ? _fieldsetConfig$defau : {},
-        initialError: {}
-      });
       setError({});
     };
 
@@ -298,26 +276,33 @@ function useFieldset(ref, config) {
    */
   return new Proxy({}, {
     get(_target, key) {
-      var _fieldsetConfig$const;
+      var _fieldsetConfig$const, _fieldsetConfig$initi, _fieldsetConfig$defau;
       if (typeof key !== 'string') {
         return;
       }
-      var fieldsetConfig = config !== null && config !== void 0 ? config : {};
+      var fieldsetConfig = 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),
+      var initialError = Object.entries((_fieldsetConfig$initi = fieldsetConfig.initialError) !== null && _fieldsetConfig$initi !== void 0 ? _fieldsetConfig$initi : {}).reduce((result, _ref5) => {
+        var [name, message] = _ref5;
+        var [field, ...paths] = getPaths(name);
+        if (field === key) {
+          result[getName(paths)] = message;
+        }
+        return result;
+      }, {});
+      var field = _objectSpread2(_objectSpread2({}, constraint), {}, {
+        name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
+        defaultValue: (_fieldsetConfig$defau = fieldsetConfig.defaultValue) === null || _fieldsetConfig$defau === void 0 ? void 0 : _fieldsetConfig$defau[key],
+        initialError,
         error: errors === null || errors === void 0 ? void 0 : errors[0],
         errors
-      };
+      });
       if (fieldsetConfig.form) {
-        field.config.form = fieldsetConfig.form;
-        field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
-        field.config.errorId = "".concat(field.config.id, "-error");
+        field.form = fieldsetConfig.form;
+        field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
+        field.errorId = "".concat(field.id, "-error");
+        field.descriptionId = "".concat(field.id, "-description");
       }
       return field;
     }
@@ -332,30 +317,22 @@ function useFieldset(ref, config) {
  */
 function useFieldList(ref, config) {
   var configRef = useRef(config);
-  var [uncontrolledState, setUncontrolledState] = useState(() => {
-    var _config$defaultValue2;
+  var [error, setError] = useState(() => {
     var initialError = [];
-    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;
+    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 [index, ...paths] = getPaths(name);
-      if (typeof index === 'number') {
-        var scopedName = getName(paths);
-        initialError[index] = _objectSpread2(_objectSpread2({}, initialError[index]), {}, {
-          [scopedName]: message
-        });
+      if (typeof index === 'number' && paths.length === 0) {
+        initialError[index] = [].concat(message !== null && message !== void 0 ? message : []);
       }
     }
-    return {
-      defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
-      initialError
-    };
+    return initialError;
   });
-  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]);
+    var _config$defaultValue;
+    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
   });
-  useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   useEffect(() => {
@@ -429,17 +406,12 @@ function useFieldList(ref, config) {
       });
     };
     var resetHandler = event => {
-      var _fieldConfig$defaultV, _fieldConfig$defaultV2;
+      var _configRef$current$de;
       var form = getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var fieldConfig = configRef.current;
-      setUncontrolledState({
-        defaultValue: (_fieldConfig$defaultV = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV !== void 0 ? _fieldConfig$defaultV : [],
-        initialError: []
-      });
-      setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : [undefined]));
       setError([]);
     };
 
@@ -454,25 +426,34 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return entries.map((_ref4, index) => {
-    var [key, defaultValue] = _ref4;
+  return entries.map((_ref6, index) => {
+    var _config$initialError2, _config$defaultValue2;
+    var [key, defaultValue] = _ref6;
     var errors = error[index];
+    var initialError = Object.entries((_config$initialError2 = config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {}).reduce((result, _ref7) => {
+      var [name, message] = _ref7;
+      var [field, ...paths] = getPaths(name);
+      if (field === index) {
+        result[getName(paths)] = message;
+      }
+      return result;
+    }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-      initialError: uncontrolledState.initialError[index]
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      initialError,
+      error: errors === null || errors === void 0 ? void 0 : errors[0],
+      errors
     };
     if (config.form) {
       fieldConfig.form = config.form;
       fieldConfig.id = "".concat(config.form, "-").concat(config.name);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+      fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
-    return {
-      key,
-      error: errors === null || errors === void 0 ? void 0 : errors[0],
-      errors,
-      config: fieldConfig
-    };
+    return _objectSpread2({
+      key
+    }, fieldConfig);
   });
 }
 

package/module/index.js

@@ -1,4 +1,4 @@
-export { getFormElements, list, parse, requestIntent, requestSubmit, validate, validateConstraint } from '@conform-to/dom';
+export { isFieldElement, list, parse, requestIntent, 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

@@ -1,8 +1,9 @@
 {
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
+	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.6.0-pre.0",
+	"version": "0.6.1",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +20,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.6.0-pre.0"
+		"@conform-to/dom": "0.6.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"
@@ -28,8 +29,11 @@
 		"constraint-validation",
 		"form",
 		"form-validation",
+		"html",
+		"progressive-enhancement",
 		"validation",
-		"react"
+		"react",
+		"remix"
 	],
 	"sideEffects": false
 }

package/base.d.ts

@@ -1,17 +0,0 @@
-import { type InputHTMLAttributes, type RefObject } from 'react';
-declare type EventLikeOrString = {
-    target: {
-        value: string;
-    };
-} | string;
-declare type InputControl = {
-    onChange: (eventLikeOrString: EventLikeOrString) => void;
-    onInput: (eventLikeOrString: EventLikeOrString) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-};
-export declare function useInputControl(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): InputControl;
-export declare const BaseInput: import("react").ForwardRefExoticComponent<{
-    name: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/base.js

@@ -1,112 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var react = require('react');
-
-var _excluded = ["hidden", "className", "style"];
-/**
- * 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) {
-  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');
-    }
-  }
-}
-function useInputControl(ref) {
-  function getInputElement() {
-    var $input = ref.current;
-    if (!$input) {
-      console.warn('input ref is not available; Maybe you forget to setup the ref?');
-    }
-    return $input;
-  }
-  return {
-    onChange(eventLikeOrString) {
-      var $input = getInputElement();
-      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
-      if ($input && $input.value !== value) {
-        $input.dispatchEvent(new InputEvent('beforeinput', {
-          bubbles: true,
-          cancelable: true
-        }));
-        setNativeValue($input, value);
-        $input.dispatchEvent(new InputEvent('input', {
-          bubbles: true,
-          cancelable: true
-        }));
-      }
-    },
-    onInput(eventLikeOrString) {
-      this.onChange(eventLikeOrString);
-    },
-    onFocus() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusin', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('focus', {
-          cancelable: true
-        }));
-      }
-    },
-    onBlur() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusout', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('blur', {
-          cancelable: true
-        }));
-      }
-    }
-  };
-}
-function BaseInputImpl(_ref, ref) {
-  var {
-      hidden = true,
-      className,
-      style
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2({
-    ref,
-    className: hidden ? '' : className,
-    style: hidden ? {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    } : style
-  }, props));
-}
-var BaseInput = /*#__PURE__*/react.forwardRef(BaseInputImpl);
-
-exports.BaseInput = BaseInput;
-exports.useInputControl = useInputControl;