@conform-to/react 0.7.0-pre.2 → 0.7.0

package/hooks.mjs

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { parseIntent, getFormData, parse, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, updateList, getValidationMessage, focusFirstInvalidControl, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
-import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+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';
 
 /**
  * Normalize error to an array of string.
@@ -125,7 +125,7 @@ function useFormError(ref, config) {
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _ref, _config$lastSubmissio2;
+  var _config$lastSubmissio2;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = useConfigRef(config);
   var ref = useFormRef(config.ref);
@@ -146,26 +146,36 @@ function useForm() {
       [scope]: submission.error[scope]
     };
   }, [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 fieldset = useFieldset(ref, {
-    defaultValue: (_ref = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload) !== null && _ref !== void 0 ? _ref : config.defaultValue,
+    defaultValue: lastSubmissionPayload !== null && lastSubmissionPayload !== void 0 ? lastSubmissionPayload : 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 = name => event => {
+    var createValidateHandler = type => event => {
       var field = event.target;
       var form = ref.current;
       var {
-        initialReport = 'onSubmit',
-        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
-        shouldRevalidate = 'onInput'
+        shouldValidate = 'onSubmit',
+        shouldRevalidate = shouldValidate
       } = configRef.current;
       if (!form || !isFocusableFormControl(field) || field.form !== form || !field.name) {
         return;
       }
-      if (field.dataset.conformTouched ? shouldRevalidate === name : shouldValidate === name) {
+      if (field.dataset.conformTouched ? shouldRevalidate === type : shouldValidate === type) {
         requestIntent(form, validate(field.name));
       }
     };
@@ -187,11 +197,12 @@ function useForm() {
       }
 
       // Reset all field state
-      for (var element of getFormControls(form)) {
-        delete element.dataset.conformTouched;
-        element.setCustomValidity('');
+      for (var _element of getFormControls(form)) {
+        delete _element.dataset.conformTouched;
+        _element.setCustomValidity('');
       }
       setErrors([]);
+      setLastSubmissionPayload(undefined);
     };
     var handleInput = createValidateHandler('onInput');
     var handleBlur = createValidateHandler('onBlur');
@@ -230,8 +241,8 @@ function useForm() {
           var {
             errors: _errors,
             shouldServerValidate
-          } = Object.entries(submission.error).reduce((result, _ref2) => {
-            var [, error] = _ref2;
+          } = Object.entries(submission.error).reduce((result, _ref) => {
+            var [, error] = _ref;
             for (var message of normalizeError(error)) {
               if (message === VALIDATION_UNDEFINED) {
                 result.shouldServerValidate = true;
@@ -305,8 +316,8 @@ function useFieldset(ref, 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 initialError = Object.entries((_fieldsetConfig$initi = fieldsetConfig.initialError) !== null && _fieldsetConfig$initi !== void 0 ? _fieldsetConfig$initi : {}).reduce((result, _ref3) => {
-        var [name, message] = _ref3;
+      var initialError = Object.entries((_fieldsetConfig$initi = fieldsetConfig.initialError) !== null && _fieldsetConfig$initi !== void 0 ? _fieldsetConfig$initi : {}).reduce((result, _ref2) => {
+        var [name, message] = _ref2;
         var [field, ...paths] = getPaths(name);
         if (field === key) {
           result[getName(paths)] = message;
@@ -412,12 +423,12 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref, configRef, setError]);
-  return entries.map((_ref4, index) => {
+  return entries.map((_ref3, index) => {
     var _config$initialError, _config$defaultValue2;
-    var [key, defaultValue] = _ref4;
+    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, _ref5) => {
-      var [name, message] = _ref5;
+    var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref4) => {
+      var [name, message] = _ref4;
       var [field, ...paths] = getPaths(name);
       if (field === index) {
         result[getName(paths)] = message;
@@ -443,179 +454,144 @@ function useFieldList(ref, config) {
   });
 }
 
-/**
- * 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) {
-  if (element.value === value) {
-    // It will not trigger a change event if `element.value` is the same as the set value
-    return;
-  }
-  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');
-    }
-  }
-}
-
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
  */
 var useSafeLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+/**
+ * Returns a ref object and a set of helpers that dispatch corresponding dom event.
+ *
+ * @see https://conform.guide/api/react#useinputevent
+ */
 function useInputEvent(options) {
-  var ref = useRef(null);
   var optionsRef = useConfigRef(options);
-  var changeDispatched = useRef(false);
-  var focusDispatched = useRef(false);
-  var blurDispatched = useRef(false);
+  var eventDispatched = useRef({
+    onInput: false,
+    onFocus: false,
+    onBlur: false
+  });
   useSafeLayoutEffect(() => {
-    var getInputElement = () => {
-      var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
-      return (_optionsRef$current$g = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : (_optionsRef$current$g2 = _optionsRef$current.getElement) === null || _optionsRef$current$g2 === void 0 ? void 0 : _optionsRef$current$g2.call(_optionsRef$current, ref.current)) !== null && _optionsRef$current$g !== void 0 ? _optionsRef$current$g : ref.current;
-    };
-    var inputHandler = event => {
-      var input = getInputElement();
-      if (input && event.target === input) {
-        changeDispatched.current = true;
-      }
-    };
-    var focusHandler = event => {
-      var input = getInputElement();
-      if (input && event.target === input) {
-        focusDispatched.current = true;
-      }
-    };
-    var blurHandler = event => {
-      var input = getInputElement();
-      if (input && event.target === input) {
-        blurDispatched.current = true;
-      }
-    };
-    var submitHandler = event => {
-      var input = getInputElement();
-      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
-        var _optionsRef$current2, _optionsRef$current2$;
-        (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : (_optionsRef$current2$ = _optionsRef$current2.onSubmit) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, event);
-      }
-    };
-    var resetHandler = event => {
-      var input = getInputElement();
-      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
-        var _optionsRef$current3, _optionsRef$current3$;
-        (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : (_optionsRef$current3$ = _optionsRef$current3.onReset) === null || _optionsRef$current3$ === void 0 ? void 0 : _optionsRef$current3$.call(_optionsRef$current3, event);
-      }
+    var createEventListner = 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');
+
+    // focus/blur event does not bubble
     document.addEventListener('input', inputHandler, true);
     document.addEventListener('focus', focusHandler, true);
     document.addEventListener('blur', blurHandler, true);
-    document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('input', inputHandler, true);
       document.removeEventListener('focus', focusHandler, true);
       document.removeEventListener('blur', blurHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, []);
   var control = useMemo(() => {
-    var getInputElement = () => {
-      var _optionsRef$current$g3, _optionsRef$current4, _optionsRef$current4$;
-      return (_optionsRef$current$g3 = (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4.getElement) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, ref.current)) !== null && _optionsRef$current$g3 !== void 0 ? _optionsRef$current$g3 : ref.current;
+    var dispatch = (listener, fn) => {
+      if (!eventDispatched.current[listener]) {
+        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)) {
+          console.warn('Failed to dispatch event; is the input mounted?');
+          return;
+        }
+
+        // To avoid recursion
+        eventDispatched.current[listener] = true;
+        fn(_element2);
+      }
+      eventDispatched.current[listener] = false;
     };
     return {
       change(eventOrValue) {
-        var input = getInputElement();
-        if (!input) {
-          console.warn('Missing input ref; No change-related events will be dispatched');
-          return;
-        }
-        if (changeDispatched.current) {
-          changeDispatched.current = false;
-          return;
-        }
-        var previousValue = input.value;
-        var nextValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+        dispatch('onInput', element => {
+          if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+            if (typeof eventOrValue !== 'boolean') {
+              throw new Error('You should pass a boolean when changing a checkbox or radio input');
+            }
+            element.checked = eventOrValue;
+          } else {
+            if (typeof eventOrValue === 'boolean') {
+              throw new Error('You can pass a boolean only when changing a checkbox or radio input');
+            }
+            var _value = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
 
-        // This make sure no event is dispatched on the first effect run
-        if (nextValue === previousValue) {
-          return;
-        }
+            // No change event will triggered on React if `element.value` is updated
+            // before dispatching the event
+            if (element.value !== _value) {
+              /**
+               * 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
+               */
+              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');
+                }
+              }
+            }
+          }
 
-        // Dispatch beforeinput event before updating the input value
-        input.dispatchEvent(new Event('beforeinput', {
-          bubbles: true
-        }));
-        // Update the input value to trigger a change event
-        setNativeValue(input, nextValue);
-        // Dispatch input event with the updated input value
-        input.dispatchEvent(new InputEvent('input', {
-          bubbles: true
-        }));
-        // Reset the dispatched flag
-        changeDispatched.current = false;
+          // Dispatch input event with the updated input value
+          element.dispatchEvent(new InputEvent('input', {
+            bubbles: true
+          }));
+          // Dispatch change event (necessary for select to update the selected option)
+          element.dispatchEvent(new Event('change', {
+            bubbles: true
+          }));
+        });
       },
       focus() {
-        var input = getInputElement();
-        if (!input) {
-          console.warn('Missing input ref; No focus-related events will be dispatched');
-          return;
-        }
-        if (focusDispatched.current) {
-          focusDispatched.current = false;
-          return;
-        }
-        var focusinEvent = new FocusEvent('focusin', {
-          bubbles: true
+        dispatch('onFocus', element => {
+          element.dispatchEvent(new FocusEvent('focusin', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('focus'));
         });
-        var focusEvent = new FocusEvent('focus');
-        input.dispatchEvent(focusinEvent);
-        input.dispatchEvent(focusEvent);
-
-        // Reset the dispatched flag
-        focusDispatched.current = false;
       },
       blur() {
-        var input = getInputElement();
-        if (!input) {
-          console.warn('Missing input ref; No blur-related events will be dispatched');
-          return;
-        }
-        if (blurDispatched.current) {
-          blurDispatched.current = false;
-          return;
-        }
-        var focusoutEvent = new FocusEvent('focusout', {
-          bubbles: true
+        dispatch('onBlur', element => {
+          element.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('blur'));
         });
-        var blurEvent = new FocusEvent('blur');
-        input.dispatchEvent(focusoutEvent);
-        input.dispatchEvent(blurEvent);
-
-        // Reset the dispatched flag
-        blurDispatched.current = false;
       }
     };
   }, [optionsRef]);
-  return [ref, control];
+  return control;
 }
-var VALIDATION_UNDEFINED = '__undefined__';
-var VALIDATION_SKIPPED = '__skipped__';
 var FORM_ERROR_ELEMENT_NAME = '__form__';
 
 /**
@@ -642,28 +618,28 @@ function validateConstraint(options) {
     }
     return errors;
   };
-  var formatMessages = (_options$formatMessag = options === null || options === void 0 ? void 0 : options.formatMessages) !== null && _options$formatMessag !== void 0 ? _options$formatMessag : _ref6 => {
+  var formatMessages = (_options$formatMessag = options === null || options === void 0 ? void 0 : options.formatMessages) !== null && _options$formatMessag !== void 0 ? _options$formatMessag : _ref5 => {
     var {
       defaultErrors
-    } = _ref6;
+    } = _ref5;
     return defaultErrors;
   };
   return parse(formData, {
     resolve(payload, intent) {
       var error = {};
       var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
-      var _loop = function _loop(element) {
-        if (isFieldElement(element)) {
+      var _loop = function _loop(_element3) {
+        if (isFieldElement(_element3)) {
           var _options$acceptMultip, _options$acceptMultip2;
-          var name = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
-          var constraint = Object.entries(element.dataset).reduce((result, _ref7) => {
-            var [name, attributeValue = ''] = _ref7;
+          var name = _element3.name !== FORM_ERROR_ELEMENT_NAME ? _element3.name : '';
+          var constraint = Object.entries(_element3.dataset).reduce((result, _ref6) => {
+            var [name, attributeValue = ''] = _ref6;
             if (constraintPattern.test(name)) {
               var _options$constraint;
               var constraintName = name.slice(10).toLowerCase();
               var _validate = (_options$constraint = options.constraint) === null || _options$constraint === void 0 ? void 0 : _options$constraint[constraintName];
               if (typeof _validate === 'function') {
-                result[constraintName] = _validate(element.value, {
+                result[constraintName] = _validate(_element3.value, {
                   formData,
                   attributeValue
                 });
@@ -675,9 +651,9 @@ function validateConstraint(options) {
           }, {});
           var errors = formatMessages({
             name,
-            validity: element.validity,
+            validity: _element3.validity,
             constraint,
-            defaultErrors: getDefaultErrors(element.validity, constraint)
+            defaultErrors: getDefaultErrors(_element3.validity, constraint)
           });
           var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
             name,
@@ -689,8 +665,8 @@ function validateConstraint(options) {
           }
         }
       };
-      for (var element of options.form.elements) {
-        _loop(element);
+      for (var _element3 of options.form.elements) {
+        _loop(_element3);
       }
       return {
         error
@@ -728,18 +704,18 @@ function reportSubmission(form, submission) {
   }
   var intent = parseIntent(submission.intent);
   var scope = getScope(intent);
-  for (var element of getFormControls(form)) {
-    var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+  for (var _element4 of getFormControls(form)) {
+    var _elementName = _element4.name !== FORM_ERROR_ELEMENT_NAME ? _element4.name : '';
     var messages = normalizeError(submission.error[_elementName]);
     if (scope === null || scope === _elementName) {
-      element.dataset.conformTouched = 'true';
+      _element4.dataset.conformTouched = 'true';
     }
     if (!messages.includes(VALIDATION_SKIPPED) && !messages.includes(VALIDATION_UNDEFINED)) {
       var invalidEvent = new Event('invalid', {
         cancelable: true
       });
-      element.setCustomValidity(getValidationMessage(messages));
-      element.dispatchEvent(invalidEvent);
+      _element4.setCustomValidity(getValidationMessage(messages));
+      _element4.dispatchEvent(invalidEvent);
     }
   }
   if (!intent) {
@@ -756,4 +732,4 @@ function getScope(intent) {
   return null;
 }
 
-export { FORM_ERROR_ELEMENT_NAME, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, getScope, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };
+export { FORM_ERROR_ELEMENT_NAME, getScope, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };

package/package.json

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