@conform-to/react 0.4.0-pre.3 → 0.4.1

package/hooks.js

@@ -11,7 +11,7 @@ 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.4.0-pre.3/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -19,7 +19,6 @@ function useForm() {
   var ref = react.useRef(null);
   var [error, setError] = react.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 === '';
@@ -28,7 +27,6 @@ function useForm() {
   });
   var [fieldsetConfig, setFieldsetConfig] = react.useState(() => {
     var _config$state$error2, _config$state2, _config$state$value, _config$state3;
-
     var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
     return {
       defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
@@ -47,17 +45,13 @@ function useForm() {
   }, []);
   react.useEffect(() => {
     var form = ref.current;
-
     if (!form || !config.state) {
       return;
     }
-
     dom.setFormError(form, config.state);
-
     if (!form.reportValidity()) {
       dom.focusFirstInvalidField(form);
     }
-
     dom.requestSubmit(form);
   }, [config.state]);
   react.useEffect(() => {
@@ -66,80 +60,66 @@ function useForm() {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onChange') {
         field.dataset.conformTouched = 'true';
       }
-
       if (field.dataset.conformTouched) {
         dom.requestValidate(form, field.name);
       }
     };
-
     var handleBlur = event => {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
         field.dataset.conformTouched = 'true';
         dom.requestValidate(form, field.name);
       }
     };
-
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-
       if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
         return;
       }
-
       event.preventDefault();
-
       if (field.dataset.conformTouched) {
         setError(field.validationMessage);
       }
     };
-
     var handleReset = event => {
       var form = ref.current;
       var formConfig = configRef.current;
-
       if (!form || event.target !== form) {
         return;
-      } // Reset all field state
-
+      }
 
+      // Reset all field state
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
           field.setCustomValidity('');
         }
       }
-
       setError('');
       setFieldsetConfig({
         defaultValue: formConfig.defaultValue,
         initialError: []
       });
     };
+
     /**
      * 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);
@@ -157,35 +137,30 @@ function useForm() {
     props: {
       ref,
       noValidate,
-
       onSubmit(event) {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-
         for (var element of form.elements) {
-          if (dom.isFieldElement(element) && element.name === '') {
+          if (dom.isFieldElement(element) && element.name === '' && element.willValidate) {
             setError(element.validationMessage);
             break;
           }
         }
+
         /**
          * 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 (!submitter || event.defaultPrevented) {
           event.preventDefault();
           return;
         }
-
         try {
           var submission;
           var formData = dom.getFormData(form, submitter);
-
           if (typeof config.onValidate === 'function') {
             submission = config.onValidate({
               form,
@@ -193,7 +168,6 @@ function useForm() {
             });
           } else {
             submission = dom.parse(formData);
-
             if (config.mode !== 'server-validation') {
               /**
                * As there is no custom logic defined,
@@ -207,16 +181,15 @@ function useForm() {
                 value: {},
                 error: []
               });
-
               for (var _element of form.elements) {
                 if (dom.isFieldElement(_element) && _element.willValidate) {
                   submission.error.push([_element.name, _element.validationMessage]);
                 }
               }
             }
-          } // Touch all fields only if the submitter is not a command button
-
+          }
 
+          // Touch all fields only if the submitter is not a command button
           if (submission.type === 'submit') {
             for (var field of form.elements) {
               if (dom.isFieldElement(field)) {
@@ -225,21 +198,17 @@ function useForm() {
               }
             }
           }
-
           if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
-
             (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
               formData,
               submission
             });
           }
-
           if (event.defaultPrevented) {
             dom.setFormError(form, submission);
-
             if (!form.reportValidity()) {
               dom.focusFirstInvalidField(form);
             }
@@ -248,34 +217,29 @@ function useForm() {
           console.warn(e);
         }
       }
-
     },
     config: fieldsetConfig
   };
 }
+
 /**
  * All the information of the field, including state and config.
  */
 
 function useFieldset(ref, config) {
   var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState( // @ts-expect-error
+  var [uncontrolledState, setUncontrolledState] = react.useState(
+  // @ts-expect-error
   () => {
     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 : []) {
       var _config$initialError;
-
       var [key, ...paths] = dom.getPaths(name);
-
       if (typeof key === 'string') {
         var _initialError$key;
-
         var scopedName = dom.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 {
@@ -283,7 +247,6 @@ function useFieldset(ref, config) {
         }
       }
     }
-
     return {
       defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
       initialError
@@ -291,17 +254,13 @@ function useFieldset(ref, config) {
   });
   var [error, setError] = react.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 : '';
       }
     }
-
     return result;
   });
   react.useEffect(() => {
@@ -310,66 +269,53 @@ function useFieldset(ref, config) {
   react.useEffect(() => {
     var invalidHandler = event => {
       var _configRef$current$na;
-
       var form = dom.getFormElement(ref.current);
       var field = event.target;
       var fieldsetName = (_configRef$current$na = configRef.current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
-
       if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
       }
+      var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
 
-      var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name); // Update the error only if the field belongs to the fieldset
-
+      // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
           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 : '';
-
             if (prevMessage === field.validationMessage) {
               return prev;
             }
-
             return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
               [key]: field.validationMessage
             });
           });
         }
-
         event.preventDefault();
       }
     };
-
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
+
       /**
        * 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`.
        */
-
-
       setError(prev => {
         var _configRef$current$na2;
-
         var next = prev;
         var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
-
         for (var field of form.elements) {
           if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
             var _next$key, _next;
-
             var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
             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;
-
             if (prevMessage !== '' && nextMessage === '') {
               next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
                 [key]: ''
@@ -377,20 +323,15 @@ function useFieldset(ref, config) {
             }
           }
         }
-
         return next;
       });
     };
-
     var resetHandler = event => {
       var _fieldsetConfig$defau;
-
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       var fieldsetConfig = configRef.current;
       setUncontrolledState({
         // @ts-expect-error
@@ -398,9 +339,9 @@ function useFieldset(ref, config) {
         initialError: {}
       });
       setError({});
-    }; // The invalid event does not bubble and so listening on the capturing pharse is needed
-
+    };
 
+    // 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);
@@ -410,20 +351,18 @@ function useFieldset(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
+
   /**
    * 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 _fieldsetConfig$const, _error$key;
-
       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 field = {
@@ -437,35 +376,26 @@ function useFieldset(ref, config) {
       };
       return field;
     }
-
   });
 }
-
 /**
  * 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.4.0-pre.3/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
   var [uncontrolledState, setUncontrolledState] = react.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 : []) {
       var _config$initialError2;
-
       var [index, ...paths] = dom.getPaths(name);
-
       if (typeof index === 'number') {
         var _initialError$index;
-
         var scopedName = dom.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 {
@@ -473,7 +403,6 @@ function useFieldList(ref, config) {
         }
       }
     }
-
     return {
       defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
       initialError
@@ -481,7 +410,6 @@ function useFieldList(ref, config) {
   });
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
-
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
   });
   var list = entries.map((_ref3, index) => {
@@ -496,11 +424,11 @@ function useFieldList(ref, config) {
       }
     };
   });
+
   /***
    * This use proxy to capture all information about the command and
    * have it encoded in the value.
    */
-
   var command = new Proxy({}, {
     get(_target, type) {
       return function () {
@@ -517,7 +445,6 @@ function useFieldList(ref, config) {
         };
       };
     }
-
   });
   react.useEffect(() => {
     configRef.current = config;
@@ -525,18 +452,14 @@ function useFieldList(ref, config) {
   react.useEffect(() => {
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
         return;
       }
-
       var command = dom.parseListCommand(event.submitter.value);
-
       if (command.scope !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
       }
-
       setEntries(entries => {
         switch (command.type) {
           case 'append':
@@ -547,7 +470,6 @@ function useFieldList(ref, config) {
                 defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
               })
             }));
-
           default:
             {
               return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
@@ -556,16 +478,12 @@ function useFieldList(ref, config) {
       });
       event.preventDefault();
     };
-
     var resetHandler = event => {
       var _fieldConfig$defaultV, _fieldConfig$defaultV2;
-
       var form = dom.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 : [],
@@ -573,7 +491,6 @@ function useFieldList(ref, config) {
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
     };
-
     document.addEventListener('submit', submitHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
@@ -581,20 +498,19 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, // @ts-expect-error proxy type
+  return [list,
+  // @ts-expect-error proxy type
   command];
 }
-
 /**
  * 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.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;
-
   var ref = react.useRef(null);
   var inputRef = react.useRef(null);
   var configRef = react.useRef(config);
@@ -603,12 +519,10 @@ function useControlledInput(config) {
     initialError: config.initialError
   });
   var [value, setValue] = react.useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
-
   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', {
@@ -616,39 +530,31 @@ function useControlledInput(config) {
     }));
     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();
   };
-
   react.useEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
     var resetHandler = event => {
       var _configRef$current$de;
-
       var form = dom.getFormElement(ref.current);
-
       if (!form || event.target !== form) {
         return;
       }
-
       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('reset', resetHandler);
     return () => {
       document.removeEventListener('reset', resetHandler);
@@ -667,16 +573,13 @@ function useControlledInput(config) {
       whiteSpace: 'nowrap',
       borderWidth: 0
     },
-
+    tabIndex: -1,
+    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
-
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-
-  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
-    type: 'text'
-  })), {
+  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState))), {
     ref: inputRef,
     value,
     onChange: handleChange,

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
+export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
 export * from './hooks';
 export * as conform from './helpers';

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -1,16 +1,13 @@
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -20,10 +17,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -35,7 +30,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }