@conform-to/react 0.7.0 → 0.7.2

package/helpers.d.ts

@@ -51,7 +51,7 @@ type InputOptions = BaseOptions & ({
     value?: never;
 });
 export declare const hiddenProps: {
-    hiddenStyle: CSSProperties;
+    style: CSSProperties;
     tabIndex: number;
     'aria-hidden': boolean;
 };

package/helpers.js

@@ -10,11 +10,9 @@ function getFormControlProps(config, options) {
     id: config.id,
     name: config.name,
     form: config.form,
-    required: config.required
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
   };
-  if (config.id) {
-    props.id = config.id;
-  }
   if (options !== null && options !== void 0 && options.ariaAttributes) {
     var _config$error;
     if (config.descriptionId && options !== null && options !== void 0 && options.description) {
@@ -25,17 +23,22 @@ function getFormControlProps(config, options) {
       props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
     }
   }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    props.autoFocus = true;
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
+}
+function cleanup(props) {
+  for (var key in props) {
+    if (props[key] === undefined) {
+      delete props[key];
+    }
   }
-  return options !== null && options !== void 0 && options.hidden ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), hiddenProps) : props;
+  return props;
 }
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
    * Based on the `sr-only` class from tailwindcss
    */
-  hiddenStyle: {
+  style: {
     position: 'absolute',
     width: '1px',
     height: '1px',
@@ -68,14 +71,14 @@ function input(config) {
   } else if (options.type !== 'file') {
     props.defaultValue = config.defaultValue;
   }
-  return props;
+  return cleanup(props);
 }
 function select(config, options) {
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
   });
-  return props;
+  return cleanup(props);
 }
 function textarea(config, options) {
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
@@ -83,7 +86,7 @@ function textarea(config, options) {
     minLength: config.minLength,
     maxLength: config.maxLength
   });
-  return props;
+  return cleanup(props);
 }
 
 Object.defineProperty(exports, 'INTENT', {

package/helpers.mjs

@@ -6,11 +6,9 @@ function getFormControlProps(config, options) {
     id: config.id,
     name: config.name,
     form: config.form,
-    required: config.required
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
   };
-  if (config.id) {
-    props.id = config.id;
-  }
   if (options !== null && options !== void 0 && options.ariaAttributes) {
     var _config$error;
     if (config.descriptionId && options !== null && options !== void 0 && options.description) {
@@ -21,17 +19,22 @@ function getFormControlProps(config, options) {
       props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
     }
   }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    props.autoFocus = true;
+  return _objectSpread2(_objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
+}
+function cleanup(props) {
+  for (var key in props) {
+    if (props[key] === undefined) {
+      delete props[key];
+    }
   }
-  return options !== null && options !== void 0 && options.hidden ? _objectSpread2(_objectSpread2({}, props), hiddenProps) : props;
+  return props;
 }
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
    * Based on the `sr-only` class from tailwindcss
    */
-  hiddenStyle: {
+  style: {
     position: 'absolute',
     width: '1px',
     height: '1px',
@@ -64,14 +67,14 @@ function input(config) {
   } else if (options.type !== 'file') {
     props.defaultValue = config.defaultValue;
   }
-  return props;
+  return cleanup(props);
 }
 function select(config, options) {
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
   });
-  return props;
+  return cleanup(props);
 }
 function textarea(config, options) {
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
@@ -79,7 +82,7 @@ function textarea(config, options) {
     minLength: config.minLength,
     maxLength: config.maxLength
   });
-  return props;
+  return cleanup(props);
 }
 
 export { hiddenProps, input, select, textarea };

package/hooks.d.ts

@@ -21,6 +21,11 @@ export interface FieldConfig<Schema> extends FieldConstraint<Schema> {
 export type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : unknown extends Schema ? any : Record<string, any> extends Schema ? {
     [Key in KeysOf<Schema>]?: FieldValue<ResolveType<Schema, Key>>;
 } : any;
+type SubmissionResult = {
+    intent: Submission['intent'];
+    payload: Submission['payload'] | null;
+    error: Submission['error'];
+};
 export interface FormConfig<Output extends Record<string, any>, Input extends Record<string, any> = Output> {
     /**
      * If the form id is provided, Id for label,
@@ -52,7 +57,7 @@ export interface FormConfig<Output extends Record<string, any>, Input extends Re
     /**
      * An object describing the result of the last submission
      */
-    lastSubmission?: Submission | null;
+    lastSubmission?: SubmissionResult;
     /**
      * An object describing the constraint of each field
      */
@@ -203,6 +208,6 @@ export declare function validateConstraint(options: {
         defaultErrors: string[];
     }) => string[];
 }): Submission;
-export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
+export declare function reportSubmission(form: HTMLFormElement, submission: SubmissionResult): void;
 export declare function getScope(intent: ReturnType<typeof parseIntent>): string | null;
 export {};

package/hooks.js

@@ -48,6 +48,14 @@ function useFormReporter(ref, lastSubmission) {
     if (!form || !lastSubmission) {
       return;
     }
+    if (!lastSubmission.payload) {
+      // If the default value is empty, we can safely reset the form.
+      // This ensure the behavior is consistent with and without JS.
+      form.reset();
+
+      // There is no need to report the submission anymore.
+      return;
+    }
     report(form, lastSubmission);
   }, [ref, lastSubmission, report]);
   react.useEffect(() => {
@@ -129,7 +137,7 @@ function useFormError(ref, config) {
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$lastSubmissio2;
+  var _config$lastSubmissio2, _config$lastSubmissio3;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = useConfigRef(config);
   var ref = useFormRef(config.ref);
@@ -152,21 +160,14 @@ function useForm() {
   }, [config.lastSubmission]);
   // This payload from lastSubmission is only useful before hydration
   // After hydration, any new payload on lastSubmission will be ignored
-  var [lastSubmissionPayload, setLastSubmissionPayload] = react.useState((_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload);
+  var [defaultValueFromLastSubmission, setDefaultValueFromLastSubmission] = react.useState( // @ts-expect-error defaultValue is not in Submission type
+  (_config$lastSubmissio2 = (_config$lastSubmissio3 = config.lastSubmission) === null || _config$lastSubmissio3 === void 0 ? void 0 : _config$lastSubmissio3.payload) !== null && _config$lastSubmissio2 !== void 0 ? _config$lastSubmissio2 : null);
   var fieldset = useFieldset(ref, {
-    defaultValue: lastSubmissionPayload !== null && lastSubmissionPayload !== void 0 ? lastSubmissionPayload : config.defaultValue,
+    defaultValue: defaultValueFromLastSubmission !== null && defaultValueFromLastSubmission !== void 0 ? defaultValueFromLastSubmission : config.defaultValue,
     initialError,
     constraint: config.constraint,
     form: config.id
   });
-  var lastSubmissionRef = react.useRef(config.lastSubmission);
-  useSafeLayoutEffect(() => {
-    if (lastSubmissionRef.current !== config.lastSubmission && config.lastSubmission === null) {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.reset();
-    }
-    lastSubmissionRef.current = config.lastSubmission;
-  }, [ref, config.lastSubmission]);
   react.useEffect(() => {
     // custom validate handler
     var createValidateHandler = type => event => {
@@ -206,7 +207,7 @@ function useForm() {
         _element.setCustomValidity('');
       }
       setErrors([]);
-      setLastSubmissionPayload(undefined);
+      setDefaultValueFromLastSubmission(null);
     };
     var handleInput = createValidateHandler('onInput');
     var handleBlur = createValidateHandler('onBlur');
@@ -278,8 +279,9 @@ function useForm() {
               method: dom.getFormMethod(nativeEvent)
             });
           }
-        } catch (e) {
-          console.warn(e);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Client validation failed', error);
         }
       }
     }
@@ -477,24 +479,23 @@ function useInputEvent(options) {
     onBlur: false
   });
   useSafeLayoutEffect(() => {
-    var createEventListner = listener => {
+    var createEventListener = listener => {
       return event => {
         var _optionsRef$current, _optionsRef$current2, _optionsRef$current3;
         var element = typeof ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.ref) === 'function' ? (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.ref() : (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.ref.current;
         if (dom.isFieldElement(element) && (listener === 'onReset' ? event.target === element.form : event.target === element)) {
           var _optionsRef$current4, _optionsRef$current4$;
           if (listener !== 'onReset') {
-            console.log(listener, 'dispatched');
             eventDispatched.current[listener] = true;
           }
           (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
-    var inputHandler = createEventListner('onInput');
-    var focusHandler = createEventListner('onFocus');
-    var blurHandler = createEventListner('onBlur');
-    var resetHandler = createEventListner('onReset');
+    var inputHandler = createEventListener('onInput');
+    var focusHandler = createEventListener('onFocus');
+    var blurHandler = createEventListener('onBlur');
+    var resetHandler = createEventListener('onReset');
 
     // focus/blur event does not bubble
     document.addEventListener('input', inputHandler, true);
@@ -514,6 +515,7 @@ function useInputEvent(options) {
         var _optionsRef$current5, _optionsRef$current6, _optionsRef$current7;
         var _element2 = typeof ((_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.ref) === 'function' ? (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 ? void 0 : _optionsRef$current6.ref() : (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.ref.current;
         if (!dom.isFieldElement(_element2)) {
+          // eslint-disable-next-line no-console
           console.warn('Failed to dispatch event; is the input mounted?');
           return;
         }
@@ -648,6 +650,7 @@ function validateConstraint(options) {
                   attributeValue
                 });
               } else {
+                // eslint-disable-next-line no-console
                 console.warn("Found an \"".concat(constraintName, "\" constraint with undefined definition; Please specify it on the validateConstraint API."));
               }
             }
@@ -692,6 +695,7 @@ function reportSubmission(form, submission) {
     if (item instanceof RadioNodeList) {
       for (var field of item) {
         if (field.type !== 'radio') {
+          // eslint-disable-next-line no-console
           console.warn('Repeated field name is not supported.');
           continue;
         }

package/hooks.mjs

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { parseIntent, getFormData, parse, VALIDATION_UNDEFINED, VALIDATION_SKIPPED, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, updateList, getValidationMessage, focusFirstInvalidControl, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
-import { useState, useMemo, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
 /**
  * Normalize error to an array of string.
@@ -44,6 +44,14 @@ function useFormReporter(ref, lastSubmission) {
     if (!form || !lastSubmission) {
       return;
     }
+    if (!lastSubmission.payload) {
+      // If the default value is empty, we can safely reset the form.
+      // This ensure the behavior is consistent with and without JS.
+      form.reset();
+
+      // There is no need to report the submission anymore.
+      return;
+    }
     report(form, lastSubmission);
   }, [ref, lastSubmission, report]);
   useEffect(() => {
@@ -125,7 +133,7 @@ function useFormError(ref, config) {
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$lastSubmissio2;
+  var _config$lastSubmissio2, _config$lastSubmissio3;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = useConfigRef(config);
   var ref = useFormRef(config.ref);
@@ -148,21 +156,14 @@ function useForm() {
   }, [config.lastSubmission]);
   // This payload from lastSubmission is only useful before hydration
   // After hydration, any new payload on lastSubmission will be ignored
-  var [lastSubmissionPayload, setLastSubmissionPayload] = useState((_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload);
+  var [defaultValueFromLastSubmission, setDefaultValueFromLastSubmission] = useState( // @ts-expect-error defaultValue is not in Submission type
+  (_config$lastSubmissio2 = (_config$lastSubmissio3 = config.lastSubmission) === null || _config$lastSubmissio3 === void 0 ? void 0 : _config$lastSubmissio3.payload) !== null && _config$lastSubmissio2 !== void 0 ? _config$lastSubmissio2 : null);
   var fieldset = useFieldset(ref, {
-    defaultValue: lastSubmissionPayload !== null && lastSubmissionPayload !== void 0 ? lastSubmissionPayload : config.defaultValue,
+    defaultValue: defaultValueFromLastSubmission !== null && defaultValueFromLastSubmission !== void 0 ? defaultValueFromLastSubmission : config.defaultValue,
     initialError,
     constraint: config.constraint,
     form: config.id
   });
-  var lastSubmissionRef = useRef(config.lastSubmission);
-  useSafeLayoutEffect(() => {
-    if (lastSubmissionRef.current !== config.lastSubmission && config.lastSubmission === null) {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.reset();
-    }
-    lastSubmissionRef.current = config.lastSubmission;
-  }, [ref, config.lastSubmission]);
   useEffect(() => {
     // custom validate handler
     var createValidateHandler = type => event => {
@@ -202,7 +203,7 @@ function useForm() {
         _element.setCustomValidity('');
       }
       setErrors([]);
-      setLastSubmissionPayload(undefined);
+      setDefaultValueFromLastSubmission(null);
     };
     var handleInput = createValidateHandler('onInput');
     var handleBlur = createValidateHandler('onBlur');
@@ -274,8 +275,9 @@ function useForm() {
               method: getFormMethod(nativeEvent)
             });
           }
-        } catch (e) {
-          console.warn(e);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Client validation failed', error);
         }
       }
     }
@@ -473,24 +475,23 @@ function useInputEvent(options) {
     onBlur: false
   });
   useSafeLayoutEffect(() => {
-    var createEventListner = listener => {
+    var createEventListener = listener => {
       return event => {
         var _optionsRef$current, _optionsRef$current2, _optionsRef$current3;
         var element = typeof ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.ref) === 'function' ? (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.ref() : (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.ref.current;
         if (isFieldElement(element) && (listener === 'onReset' ? event.target === element.form : event.target === element)) {
           var _optionsRef$current4, _optionsRef$current4$;
           if (listener !== 'onReset') {
-            console.log(listener, 'dispatched');
             eventDispatched.current[listener] = true;
           }
           (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
-    var inputHandler = createEventListner('onInput');
-    var focusHandler = createEventListner('onFocus');
-    var blurHandler = createEventListner('onBlur');
-    var resetHandler = createEventListner('onReset');
+    var inputHandler = createEventListener('onInput');
+    var focusHandler = createEventListener('onFocus');
+    var blurHandler = createEventListener('onBlur');
+    var resetHandler = createEventListener('onReset');
 
     // focus/blur event does not bubble
     document.addEventListener('input', inputHandler, true);
@@ -510,6 +511,7 @@ function useInputEvent(options) {
         var _optionsRef$current5, _optionsRef$current6, _optionsRef$current7;
         var _element2 = typeof ((_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.ref) === 'function' ? (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 ? void 0 : _optionsRef$current6.ref() : (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.ref.current;
         if (!isFieldElement(_element2)) {
+          // eslint-disable-next-line no-console
           console.warn('Failed to dispatch event; is the input mounted?');
           return;
         }
@@ -644,6 +646,7 @@ function validateConstraint(options) {
                   attributeValue
                 });
               } else {
+                // eslint-disable-next-line no-console
                 console.warn("Found an \"".concat(constraintName, "\" constraint with undefined definition; Please specify it on the validateConstraint API."));
               }
             }
@@ -688,6 +691,7 @@ function reportSubmission(form, submission) {
     if (item instanceof RadioNodeList) {
       for (var field of item) {
         if (field.type !== 'radio') {
+          // eslint-disable-next-line no-console
           console.warn('Repeated field name is not supported.');
           continue;
         }

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.7.0",
+	"version": "0.7.2",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.7.0"
+		"@conform-to/dom": "0.7.2"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"