@conform-to/react 0.7.1 → 0.7.3

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');
@@ -429,7 +430,7 @@ function useFieldList(ref, config) {
     };
   }, [ref, configRef, setError]);
   return entries.map((_ref3, index) => {
-    var _config$initialError, _config$defaultValue2;
+    var _config$initialError;
     var [key, defaultValue] = _ref3;
     var errors = error[index];
     var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref4) => {
@@ -442,7 +443,7 @@ function useFieldList(ref, config) {
     }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      defaultValue,
       initialError,
       error: errors === null || errors === void 0 ? void 0 : errors[0],
       errors
@@ -478,7 +479,7 @@ 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;
@@ -491,10 +492,10 @@ function useInputEvent(options) {
         }
       };
     };
-    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);

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');
@@ -425,7 +426,7 @@ function useFieldList(ref, config) {
     };
   }, [ref, configRef, setError]);
   return entries.map((_ref3, index) => {
-    var _config$initialError, _config$defaultValue2;
+    var _config$initialError;
     var [key, defaultValue] = _ref3;
     var errors = error[index];
     var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref4) => {
@@ -438,7 +439,7 @@ function useFieldList(ref, config) {
     }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      defaultValue,
       initialError,
       error: errors === null || errors === void 0 ? void 0 : errors[0],
       errors
@@ -474,7 +475,7 @@ 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;
@@ -487,10 +488,10 @@ function useInputEvent(options) {
         }
       };
     };
-    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);

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.7.1",
+	"version": "0.7.3",
 	"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.1"
+		"@conform-to/dom": "0.7.3"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"