@conform-to/react 0.6.3-pre.0 → 0.7.0-pre.0

package/{module/_virtual/_rollupPluginBabelHelpers.js → _virtual/_rollupPluginBabelHelpers.cjs}

@@ -1,3 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -48,4 +52,7 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
+exports.defineProperty = _defineProperty;
+exports.objectSpread2 = _objectSpread2;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;

package/_virtual/_rollupPluginBabelHelpers.js

@@ -1,7 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -52,7 +48,4 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-exports.defineProperty = _defineProperty;
-exports.objectSpread2 = _objectSpread2;
-exports.toPrimitive = _toPrimitive;
-exports.toPropertyKey = _toPropertyKey;
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/{module/helpers.js → helpers.cjs}

@@ -1,6 +1,10 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-export { INTENT } from '@conform-to/dom';
-export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from './hooks.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.cjs');
+var dom = require('@conform-to/dom');
+var hooks = require('./hooks.cjs');
 
 /**
  * Style to make the input element visually hidden
@@ -47,7 +51,7 @@ function getFormControlProps(config, options) {
 }
 function input(config) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     type: options.type,
     minLength: config.minLength,
     maxLength: config.maxLength,
@@ -67,14 +71,14 @@ function input(config) {
   return props;
 }
 function select(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
   });
   return props;
 }
 function textarea(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
@@ -82,4 +86,12 @@ function textarea(config, options) {
   return props;
 }
 
-export { input, select, textarea };
+Object.defineProperty(exports, 'INTENT', {
+	enumerable: true,
+	get: function () { return dom.INTENT; }
+});
+exports.VALIDATION_SKIPPED = hooks.VALIDATION_SKIPPED;
+exports.VALIDATION_UNDEFINED = hooks.VALIDATION_UNDEFINED;
+exports.input = input;
+exports.select = select;
+exports.textarea = textarea;

package/helpers.js

@@ -1,10 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
-var hooks = require('./hooks.js');
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+export { INTENT } from '@conform-to/dom';
+export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from './hooks.js';
 
 /**
  * Style to make the input element visually hidden
@@ -51,7 +47,7 @@ function getFormControlProps(config, options) {
 }
 function input(config) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     type: options.type,
     minLength: config.minLength,
     maxLength: config.maxLength,
@@ -71,14 +67,14 @@ function input(config) {
   return props;
 }
 function select(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
   });
   return props;
 }
 function textarea(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
@@ -86,12 +82,4 @@ function textarea(config, options) {
   return props;
 }
 
-Object.defineProperty(exports, 'INTENT', {
-	enumerable: true,
-	get: function () { return dom.INTENT; }
-});
-exports.VALIDATION_SKIPPED = hooks.VALIDATION_SKIPPED;
-exports.VALIDATION_UNDEFINED = hooks.VALIDATION_UNDEFINED;
-exports.input = input;
-exports.select = select;
-exports.textarea = textarea;
+export { input, select, textarea };

package/{module/hooks.js → hooks.cjs}

@@ -1,6 +1,10 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getScope, getFormData, parse, isSubmitting, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, parseListCommand, updateList, getValidationMessage, focusFormControl, focusFirstInvalidControl, INTENT, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
-import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.cjs');
+var dom = require('@conform-to/dom');
+var react = require('react');
 
 /**
  * Normalize error to an array of string.
@@ -13,40 +17,40 @@ function normalizeError(error) {
   return [].concat(error);
 }
 function useNoValidate(defaultNoValidate, validateBeforeHydrate) {
-  var [noValidate, setNoValidate] = useState(defaultNoValidate || !validateBeforeHydrate);
-  useEffect(() => {
+  var [noValidate, setNoValidate] = react.useState(defaultNoValidate || !validateBeforeHydrate);
+  react.useEffect(() => {
     setNoValidate(true);
   }, []);
   return noValidate;
 }
 function useFormRef(userProvidedRef) {
-  var formRef = useRef(null);
+  var formRef = react.useRef(null);
   return userProvidedRef !== null && userProvidedRef !== void 0 ? userProvidedRef : formRef;
 }
 function useConfigRef(config) {
-  var ref = useRef(config);
+  var ref = react.useRef(config);
   useSafeLayoutEffect(() => {
     ref.current = config;
   });
   return ref;
 }
 function useFormReporter(ref, lastSubmission) {
-  var [submission, setSubmission] = useState(lastSubmission);
-  var report = useCallback((form, submission) => {
+  var [submission, setSubmission] = react.useState(lastSubmission);
+  var report = react.useCallback((form, submission) => {
     var event = new CustomEvent('conform', {
       detail: submission.intent
     });
     form.dispatchEvent(event);
     setSubmission(submission);
   }, []);
-  useEffect(() => {
+  react.useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
       return;
     }
     report(form, lastSubmission);
   }, [ref, lastSubmission, report]);
-  useEffect(() => {
+  react.useEffect(() => {
     var form = ref.current;
     if (!form || !submission) {
       return;
@@ -56,30 +60,30 @@ function useFormReporter(ref, lastSubmission) {
   return report;
 }
 function useFormError(ref, config) {
-  var [error, setError] = useState(() => {
+  var [error, setError] = react.useState(() => {
     if (!config.initialError) {
       return {};
     }
     var result = {};
     for (var [name, message] of Object.entries(config.initialError)) {
-      var paths = getPaths(name);
+      var paths = dom.getPaths(name);
       if (paths.length === 1) {
         result[paths[0]] = normalizeError(message);
       }
     }
     return result;
   });
-  useEffect(() => {
+  react.useEffect(() => {
     var handleInvalid = event => {
-      var form = getFormElement(ref.current);
+      var form = dom.getFormElement(ref.current);
       var element = event.target;
-      if (!isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
+      if (!dom.isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
         return;
       }
       var key = element.name;
       if (config.name) {
-        var scopePaths = getPaths(config.name);
-        var fieldPaths = getPaths(element.name);
+        var scopePaths = dom.getPaths(config.name);
+        var fieldPaths = dom.getPaths(element.name);
         for (var i = 0; i <= scopePaths.length; i++) {
           var path = fieldPaths[i];
           if (i < scopePaths.length) {
@@ -93,17 +97,17 @@ function useFormError(ref, config) {
         }
       }
       setError(prev => {
-        if (element.validationMessage === getValidationMessage(prev[key])) {
+        if (element.validationMessage === dom.getValidationMessage(prev[key])) {
           return prev;
         }
-        return _objectSpread2(_objectSpread2({}, prev), {}, {
-          [key]: getErrors(element.validationMessage)
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+          [key]: dom.getErrors(element.validationMessage)
         });
       });
       event.preventDefault();
     };
     var handleReset = event => {
-      var form = getFormElement(ref.current);
+      var form = dom.getFormElement(ref.current);
       if (form && event.target === form) {
         setError({});
       }
@@ -131,16 +135,16 @@ function useForm() {
   var ref = useFormRef(config.ref);
   var noValidate = useNoValidate(config.noValidate, config.fallbackNative);
   var report = useFormReporter(ref, config.lastSubmission);
-  var [errors, setErrors] = useState(() => {
+  var [errors, setErrors] = react.useState(() => {
     var _config$lastSubmissio;
     return normalizeError((_config$lastSubmissio = config.lastSubmission) === null || _config$lastSubmissio === void 0 ? void 0 : _config$lastSubmissio.error['']);
   });
-  var initialError = useMemo(() => {
+  var initialError = react.useMemo(() => {
     var submission = config.lastSubmission;
     if (!submission) {
       return {};
     }
-    var scope = getScope(submission.intent);
+    var scope = dom.getScope(submission.intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -151,7 +155,7 @@ function useForm() {
     constraint: config.constraint,
     form: config.id
   });
-  useEffect(() => {
+  react.useEffect(() => {
     // custom validate handler
     var createValidateHandler = name => event => {
       var field = event.target;
@@ -161,22 +165,22 @@ function useForm() {
         shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
         shouldRevalidate = 'onInput'
       } = configRef.current;
-      if (!form || !isFocusableFormControl(field) || field.form !== form || !field.name) {
+      if (!form || !dom.isFocusableFormControl(field) || field.form !== form || !field.name) {
         return;
       }
       if (field.dataset.conformTouched ? shouldRevalidate === name : shouldValidate === name) {
-        requestIntent(form, validate(field.name));
+        dom.requestIntent(form, dom.validate(field.name));
       }
     };
     var handleInvalid = event => {
       var form = ref.current;
       var field = event.target;
-      if (!form || !isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setErrors(getErrors(field.validationMessage));
+        setErrors(dom.getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
@@ -186,7 +190,7 @@ function useForm() {
       }
 
       // Reset all field state
-      for (var element of getFormControls(form)) {
+      for (var element of dom.getFormControls(form)) {
         delete element.dataset.conformTouched;
         element.setCustomValidity('');
       }
@@ -221,11 +225,11 @@ function useForm() {
         }
         try {
           var _config$onValidate, _config$onValidate2;
-          var formData = getFormData(form, submitter);
+          var formData = dom.getFormData(form, submitter);
           var submission = (_config$onValidate = (_config$onValidate2 = config.onValidate) === null || _config$onValidate2 === void 0 ? void 0 : _config$onValidate2.call(config, {
             form,
             formData
-          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : parse(formData);
+          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : dom.parse(formData);
           var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
             var [, message] = _ref2;
             return messages.concat(normalizeError(message));
@@ -234,7 +238,7 @@ function useForm() {
           var shouldFallbackToServer = messages.includes(VALIDATION_UNDEFINED);
           var hasClientValidation = typeof config.onValidate !== 'undefined';
           var isValid = messages.length === 0;
-          if (hasClientValidation && (isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
+          if (hasClientValidation && (dom.isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -242,9 +246,9 @@ function useForm() {
             (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
               formData,
               submission,
-              action: getFormAction(nativeEvent),
-              encType: getFormEncType(nativeEvent),
-              method: getFormMethod(nativeEvent)
+              action: dom.getFormAction(nativeEvent),
+              encType: dom.getFormEncType(nativeEvent),
+              method: dom.getFormMethod(nativeEvent)
             });
           }
         } catch (e) {
@@ -291,13 +295,13 @@ function useFieldset(ref, config) {
       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 [field, ...paths] = getPaths(name);
+        var [field, ...paths] = dom.getPaths(name);
         if (field === key) {
-          result[getName(paths)] = message;
+          result[dom.getName(paths)] = message;
         }
         return result;
       }, {});
-      var field = _objectSpread2(_objectSpread2({}, constraint), {}, {
+      var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
         name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
         // @ts-expect-error The FieldValue type might need a rework
         defaultValue: (_fieldsetConfig$defau = fieldsetConfig.defaultValue) === null || _fieldsetConfig$defau === void 0 ? void 0 : _fieldsetConfig$defau[key],
@@ -327,17 +331,17 @@ function useFieldList(ref, config) {
     initialError: config.initialError,
     name: config.name
   });
-  var [entries, setEntries] = useState(() => {
+  var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue;
     return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
   });
-  useEffect(() => {
+  react.useEffect(() => {
     var conformHandler = event => {
-      var form = getFormElement(ref.current);
+      var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var command = parseListCommand(event.detail);
+      var command = dom.parseListCommand(event.detail);
       if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
@@ -347,8 +351,8 @@ function useFieldList(ref, config) {
           case 'append':
           case 'prepend':
           case 'replace':
-            return updateList([...(entries !== null && entries !== void 0 ? entries : [])], _objectSpread2(_objectSpread2({}, command), {}, {
-              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
+            return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
                 defaultValue: ["".concat(Date.now()),
                 // @ts-expect-error unknown type as it is sent through network
                 command.payload.defaultValue]
@@ -356,7 +360,7 @@ function useFieldList(ref, config) {
             }));
           default:
             {
-              return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
+              return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
             }
         }
       });
@@ -371,15 +375,15 @@ function useFieldList(ref, config) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, command), {}, {
-              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
+            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
                 defaultValue: undefined
               })
             }));
             break;
           default:
             {
-              errorList = updateList(errorList, command);
+              errorList = dom.updateList(errorList, command);
               break;
             }
         }
@@ -388,7 +392,7 @@ function useFieldList(ref, config) {
     };
     var resetHandler = event => {
       var _configRef$current$de;
-      var form = getFormElement(ref.current);
+      var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
@@ -410,9 +414,9 @@ function useFieldList(ref, config) {
     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 [field, ...paths] = getPaths(name);
+      var [field, ...paths] = dom.getPaths(name);
       if (field === index) {
-        result[getName(paths)] = message;
+        result[dom.getName(paths)] = message;
       }
       return result;
     }, {});
@@ -429,7 +433,7 @@ function useFieldList(ref, config) {
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
       fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
-    return _objectSpread2({
+    return _rollupPluginBabelHelpers.objectSpread2({
       key
     }, fieldConfig);
   });
@@ -468,13 +472,13 @@ function setNativeValue(element, value) {
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
  */
-var useSafeLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
 function useInputEvent(options) {
-  var ref = useRef(null);
+  var ref = react.useRef(null);
   var optionsRef = useConfigRef(options);
-  var changeDispatched = useRef(false);
-  var focusDispatched = useRef(false);
-  var blurDispatched = useRef(false);
+  var changeDispatched = react.useRef(false);
+  var focusDispatched = react.useRef(false);
+  var blurDispatched = react.useRef(false);
   useSafeLayoutEffect(() => {
     var getInputElement = () => {
       var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
@@ -525,7 +529,7 @@ function useInputEvent(options) {
       document.removeEventListener('reset', resetHandler);
     };
   }, []);
-  var control = useMemo(() => {
+  var control = react.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;
@@ -640,12 +644,12 @@ function validateConstraint(options) {
     } = _ref6;
     return defaultErrors;
   };
-  return parse(formData, {
+  return dom.parse(formData, {
     resolve(payload, intent) {
       var error = {};
       var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
       var _loop = function _loop(element) {
-        if (isFieldElement(element)) {
+        if (dom.isFieldElement(element)) {
           var _options$acceptMultip, _options$acceptMultip2;
           var name = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
           var constraint = Object.entries(element.dataset).reduce((result, _ref7) => {
@@ -718,8 +722,8 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = getScope(submission.intent);
-  for (var element of getFormControls(form)) {
+  var scope = dom.getScope(submission.intent);
+  for (var element of dom.getFormControls(form)) {
     var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
     var messages = normalizeError(submission.error[_elementName]);
     if (scope === null || scope === _elementName) {
@@ -729,15 +733,15 @@ function reportSubmission(form, submission) {
       var invalidEvent = new Event('invalid', {
         cancelable: true
       });
-      element.setCustomValidity(getValidationMessage(messages));
+      element.setCustomValidity(dom.getValidationMessage(messages));
       element.dispatchEvent(invalidEvent);
     }
   }
-  if (isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
+  if (dom.isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
     if (scope) {
-      focusFormControl(form, scope);
+      dom.focusFormControl(form, scope);
     } else {
-      focusFirstInvalidControl(form);
+      dom.focusFirstInvalidControl(form);
     }
   }
 }
@@ -747,7 +751,16 @@ function reportSubmission(form, submission) {
  */
 function isFocusedOnIntentButton(form, intent) {
   var element = document.activeElement;
-  return isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === INTENT && element.value === intent;
+  return dom.isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === dom.INTENT && element.value === intent;
 }
 
-export { FORM_ERROR_ELEMENT_NAME, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, isFocusedOnIntentButton, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };
+exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
+exports.VALIDATION_SKIPPED = VALIDATION_SKIPPED;
+exports.VALIDATION_UNDEFINED = VALIDATION_UNDEFINED;
+exports.isFocusedOnIntentButton = isFocusedOnIntentButton;
+exports.reportSubmission = reportSubmission;
+exports.useFieldList = useFieldList;
+exports.useFieldset = useFieldset;
+exports.useForm = useForm;
+exports.useInputEvent = useInputEvent;
+exports.validateConstraint = validateConstraint;

package/hooks.js

@@ -1,10 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
-var react = require('react');
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+import { getScope, getFormData, parse, isSubmitting, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, parseListCommand, updateList, getValidationMessage, focusFormControl, focusFirstInvalidControl, INTENT, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
+import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
 /**
  * Normalize error to an array of string.
@@ -17,40 +13,40 @@ function normalizeError(error) {
   return [].concat(error);
 }
 function useNoValidate(defaultNoValidate, validateBeforeHydrate) {
-  var [noValidate, setNoValidate] = react.useState(defaultNoValidate || !validateBeforeHydrate);
-  react.useEffect(() => {
+  var [noValidate, setNoValidate] = useState(defaultNoValidate || !validateBeforeHydrate);
+  useEffect(() => {
     setNoValidate(true);
   }, []);
   return noValidate;
 }
 function useFormRef(userProvidedRef) {
-  var formRef = react.useRef(null);
+  var formRef = useRef(null);
   return userProvidedRef !== null && userProvidedRef !== void 0 ? userProvidedRef : formRef;
 }
 function useConfigRef(config) {
-  var ref = react.useRef(config);
+  var ref = useRef(config);
   useSafeLayoutEffect(() => {
     ref.current = config;
   });
   return ref;
 }
 function useFormReporter(ref, lastSubmission) {
-  var [submission, setSubmission] = react.useState(lastSubmission);
-  var report = react.useCallback((form, submission) => {
+  var [submission, setSubmission] = useState(lastSubmission);
+  var report = useCallback((form, submission) => {
     var event = new CustomEvent('conform', {
       detail: submission.intent
     });
     form.dispatchEvent(event);
     setSubmission(submission);
   }, []);
-  react.useEffect(() => {
+  useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
       return;
     }
     report(form, lastSubmission);
   }, [ref, lastSubmission, report]);
-  react.useEffect(() => {
+  useEffect(() => {
     var form = ref.current;
     if (!form || !submission) {
       return;
@@ -60,30 +56,30 @@ function useFormReporter(ref, lastSubmission) {
   return report;
 }
 function useFormError(ref, config) {
-  var [error, setError] = react.useState(() => {
+  var [error, setError] = useState(() => {
     if (!config.initialError) {
       return {};
     }
     var result = {};
     for (var [name, message] of Object.entries(config.initialError)) {
-      var paths = dom.getPaths(name);
+      var paths = getPaths(name);
       if (paths.length === 1) {
         result[paths[0]] = normalizeError(message);
       }
     }
     return result;
   });
-  react.useEffect(() => {
+  useEffect(() => {
     var handleInvalid = event => {
-      var form = dom.getFormElement(ref.current);
+      var form = getFormElement(ref.current);
       var element = event.target;
-      if (!dom.isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
+      if (!isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
         return;
       }
       var key = element.name;
       if (config.name) {
-        var scopePaths = dom.getPaths(config.name);
-        var fieldPaths = dom.getPaths(element.name);
+        var scopePaths = getPaths(config.name);
+        var fieldPaths = getPaths(element.name);
         for (var i = 0; i <= scopePaths.length; i++) {
           var path = fieldPaths[i];
           if (i < scopePaths.length) {
@@ -97,17 +93,17 @@ function useFormError(ref, config) {
         }
       }
       setError(prev => {
-        if (element.validationMessage === dom.getValidationMessage(prev[key])) {
+        if (element.validationMessage === getValidationMessage(prev[key])) {
           return prev;
         }
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-          [key]: dom.getErrors(element.validationMessage)
+        return _objectSpread2(_objectSpread2({}, prev), {}, {
+          [key]: getErrors(element.validationMessage)
         });
       });
       event.preventDefault();
     };
     var handleReset = event => {
-      var form = dom.getFormElement(ref.current);
+      var form = getFormElement(ref.current);
       if (form && event.target === form) {
         setError({});
       }
@@ -135,16 +131,16 @@ function useForm() {
   var ref = useFormRef(config.ref);
   var noValidate = useNoValidate(config.noValidate, config.fallbackNative);
   var report = useFormReporter(ref, config.lastSubmission);
-  var [errors, setErrors] = react.useState(() => {
+  var [errors, setErrors] = useState(() => {
     var _config$lastSubmissio;
     return normalizeError((_config$lastSubmissio = config.lastSubmission) === null || _config$lastSubmissio === void 0 ? void 0 : _config$lastSubmissio.error['']);
   });
-  var initialError = react.useMemo(() => {
+  var initialError = useMemo(() => {
     var submission = config.lastSubmission;
     if (!submission) {
       return {};
     }
-    var scope = dom.getScope(submission.intent);
+    var scope = getScope(submission.intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -155,7 +151,7 @@ function useForm() {
     constraint: config.constraint,
     form: config.id
   });
-  react.useEffect(() => {
+  useEffect(() => {
     // custom validate handler
     var createValidateHandler = name => event => {
       var field = event.target;
@@ -165,22 +161,22 @@ function useForm() {
         shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
         shouldRevalidate = 'onInput'
       } = configRef.current;
-      if (!form || !dom.isFocusableFormControl(field) || field.form !== form || !field.name) {
+      if (!form || !isFocusableFormControl(field) || field.form !== form || !field.name) {
         return;
       }
       if (field.dataset.conformTouched ? shouldRevalidate === name : shouldValidate === name) {
-        dom.requestIntent(form, dom.validate(field.name));
+        requestIntent(form, validate(field.name));
       }
     };
     var handleInvalid = event => {
       var form = ref.current;
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setErrors(dom.getErrors(field.validationMessage));
+        setErrors(getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
@@ -190,7 +186,7 @@ function useForm() {
       }
 
       // Reset all field state
-      for (var element of dom.getFormControls(form)) {
+      for (var element of getFormControls(form)) {
         delete element.dataset.conformTouched;
         element.setCustomValidity('');
       }
@@ -225,11 +221,11 @@ function useForm() {
         }
         try {
           var _config$onValidate, _config$onValidate2;
-          var formData = dom.getFormData(form, submitter);
+          var formData = getFormData(form, submitter);
           var submission = (_config$onValidate = (_config$onValidate2 = config.onValidate) === null || _config$onValidate2 === void 0 ? void 0 : _config$onValidate2.call(config, {
             form,
             formData
-          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : dom.parse(formData);
+          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : parse(formData);
           var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
             var [, message] = _ref2;
             return messages.concat(normalizeError(message));
@@ -238,7 +234,7 @@ function useForm() {
           var shouldFallbackToServer = messages.includes(VALIDATION_UNDEFINED);
           var hasClientValidation = typeof config.onValidate !== 'undefined';
           var isValid = messages.length === 0;
-          if (hasClientValidation && (dom.isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
+          if (hasClientValidation && (isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -246,9 +242,9 @@ function useForm() {
             (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
               formData,
               submission,
-              action: dom.getFormAction(nativeEvent),
-              encType: dom.getFormEncType(nativeEvent),
-              method: dom.getFormMethod(nativeEvent)
+              action: getFormAction(nativeEvent),
+              encType: getFormEncType(nativeEvent),
+              method: getFormMethod(nativeEvent)
             });
           }
         } catch (e) {
@@ -295,13 +291,13 @@ function useFieldset(ref, config) {
       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 [field, ...paths] = dom.getPaths(name);
+        var [field, ...paths] = getPaths(name);
         if (field === key) {
-          result[dom.getName(paths)] = message;
+          result[getName(paths)] = message;
         }
         return result;
       }, {});
-      var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
+      var field = _objectSpread2(_objectSpread2({}, constraint), {}, {
         name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
         // @ts-expect-error The FieldValue type might need a rework
         defaultValue: (_fieldsetConfig$defau = fieldsetConfig.defaultValue) === null || _fieldsetConfig$defau === void 0 ? void 0 : _fieldsetConfig$defau[key],
@@ -331,17 +327,17 @@ function useFieldList(ref, config) {
     initialError: config.initialError,
     name: config.name
   });
-  var [entries, setEntries] = react.useState(() => {
+  var [entries, setEntries] = useState(() => {
     var _config$defaultValue;
     return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
   });
-  react.useEffect(() => {
+  useEffect(() => {
     var conformHandler = event => {
-      var form = dom.getFormElement(ref.current);
+      var form = getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var command = dom.parseListCommand(event.detail);
+      var command = parseListCommand(event.detail);
       if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
@@ -351,8 +347,8 @@ function useFieldList(ref, config) {
           case 'append':
           case 'prepend':
           case 'replace':
-            return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
-              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+            return updateList([...(entries !== null && entries !== void 0 ? entries : [])], _objectSpread2(_objectSpread2({}, command), {}, {
+              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
                 defaultValue: ["".concat(Date.now()),
                 // @ts-expect-error unknown type as it is sent through network
                 command.payload.defaultValue]
@@ -360,7 +356,7 @@ function useFieldList(ref, config) {
             }));
           default:
             {
-              return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
+              return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
             }
         }
       });
@@ -375,15 +371,15 @@ function useFieldList(ref, config) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
-              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, command), {}, {
+              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
                 defaultValue: undefined
               })
             }));
             break;
           default:
             {
-              errorList = dom.updateList(errorList, command);
+              errorList = updateList(errorList, command);
               break;
             }
         }
@@ -392,7 +388,7 @@ function useFieldList(ref, config) {
     };
     var resetHandler = event => {
       var _configRef$current$de;
-      var form = dom.getFormElement(ref.current);
+      var form = getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
@@ -414,9 +410,9 @@ function useFieldList(ref, config) {
     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 [field, ...paths] = dom.getPaths(name);
+      var [field, ...paths] = getPaths(name);
       if (field === index) {
-        result[dom.getName(paths)] = message;
+        result[getName(paths)] = message;
       }
       return result;
     }, {});
@@ -433,7 +429,7 @@ function useFieldList(ref, config) {
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
       fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
-    return _rollupPluginBabelHelpers.objectSpread2({
+    return _objectSpread2({
       key
     }, fieldConfig);
   });
@@ -472,13 +468,13 @@ function setNativeValue(element, value) {
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
  */
-var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
+var useSafeLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
 function useInputEvent(options) {
-  var ref = react.useRef(null);
+  var ref = useRef(null);
   var optionsRef = useConfigRef(options);
-  var changeDispatched = react.useRef(false);
-  var focusDispatched = react.useRef(false);
-  var blurDispatched = react.useRef(false);
+  var changeDispatched = useRef(false);
+  var focusDispatched = useRef(false);
+  var blurDispatched = useRef(false);
   useSafeLayoutEffect(() => {
     var getInputElement = () => {
       var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
@@ -529,7 +525,7 @@ function useInputEvent(options) {
       document.removeEventListener('reset', resetHandler);
     };
   }, []);
-  var control = react.useMemo(() => {
+  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;
@@ -644,12 +640,12 @@ function validateConstraint(options) {
     } = _ref6;
     return defaultErrors;
   };
-  return dom.parse(formData, {
+  return parse(formData, {
     resolve(payload, intent) {
       var error = {};
       var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
       var _loop = function _loop(element) {
-        if (dom.isFieldElement(element)) {
+        if (isFieldElement(element)) {
           var _options$acceptMultip, _options$acceptMultip2;
           var name = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
           var constraint = Object.entries(element.dataset).reduce((result, _ref7) => {
@@ -722,8 +718,8 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = dom.getScope(submission.intent);
-  for (var element of dom.getFormControls(form)) {
+  var scope = getScope(submission.intent);
+  for (var element of getFormControls(form)) {
     var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
     var messages = normalizeError(submission.error[_elementName]);
     if (scope === null || scope === _elementName) {
@@ -733,15 +729,15 @@ function reportSubmission(form, submission) {
       var invalidEvent = new Event('invalid', {
         cancelable: true
       });
-      element.setCustomValidity(dom.getValidationMessage(messages));
+      element.setCustomValidity(getValidationMessage(messages));
       element.dispatchEvent(invalidEvent);
     }
   }
-  if (dom.isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
+  if (isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
     if (scope) {
-      dom.focusFormControl(form, scope);
+      focusFormControl(form, scope);
     } else {
-      dom.focusFirstInvalidControl(form);
+      focusFirstInvalidControl(form);
     }
   }
 }
@@ -751,16 +747,7 @@ function reportSubmission(form, submission) {
  */
 function isFocusedOnIntentButton(form, intent) {
   var element = document.activeElement;
-  return dom.isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === dom.INTENT && element.value === intent;
+  return isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === INTENT && element.value === intent;
 }
 
-exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
-exports.VALIDATION_SKIPPED = VALIDATION_SKIPPED;
-exports.VALIDATION_UNDEFINED = VALIDATION_UNDEFINED;
-exports.isFocusedOnIntentButton = isFocusedOnIntentButton;
-exports.reportSubmission = reportSubmission;
-exports.useFieldList = useFieldList;
-exports.useFieldset = useFieldset;
-exports.useForm = useForm;
-exports.useInputEvent = useInputEvent;
-exports.validateConstraint = validateConstraint;
+export { FORM_ERROR_ELEMENT_NAME, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, isFocusedOnIntentButton, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };

package/index.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+var hooks = require('./hooks.cjs');
+var helpers = require('./helpers.cjs');
+
+
+
+Object.defineProperty(exports, 'isFieldElement', {
+	enumerable: true,
+	get: function () { return dom.isFieldElement; }
+});
+Object.defineProperty(exports, 'list', {
+	enumerable: true,
+	get: function () { return dom.list; }
+});
+Object.defineProperty(exports, 'parse', {
+	enumerable: true,
+	get: function () { return dom.parse; }
+});
+Object.defineProperty(exports, 'requestIntent', {
+	enumerable: true,
+	get: function () { return dom.requestIntent; }
+});
+Object.defineProperty(exports, 'validate', {
+	enumerable: true,
+	get: function () { return dom.validate; }
+});
+exports.useFieldList = hooks.useFieldList;
+exports.useFieldset = hooks.useFieldset;
+exports.useForm = hooks.useForm;
+exports.useInputEvent = hooks.useInputEvent;
+exports.validateConstraint = hooks.validateConstraint;
+exports.conform = helpers;

package/index.js

@@ -1,36 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dom = require('@conform-to/dom');
-var hooks = require('./hooks.js');
-var helpers = require('./helpers.js');
-
-
-
-Object.defineProperty(exports, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
-Object.defineProperty(exports, 'list', {
-	enumerable: true,
-	get: function () { return dom.list; }
-});
-Object.defineProperty(exports, 'parse', {
-	enumerable: true,
-	get: function () { return dom.parse; }
-});
-Object.defineProperty(exports, 'requestIntent', {
-	enumerable: true,
-	get: function () { return dom.requestIntent; }
-});
-Object.defineProperty(exports, 'validate', {
-	enumerable: true,
-	get: function () { return dom.validate; }
-});
-exports.useFieldList = hooks.useFieldList;
-exports.useFieldset = hooks.useFieldset;
-exports.useForm = hooks.useForm;
-exports.useInputEvent = hooks.useInputEvent;
-exports.validateConstraint = hooks.validateConstraint;
-exports.conform = helpers;
+export { isFieldElement, list, parse, requestIntent, validate } from '@conform-to/dom';
+export { useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.js';
+import * as helpers from './helpers.js';
+export { helpers as conform };

package/package.json

@@ -3,9 +3,20 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.6.3-pre.0",
-	"main": "index.js",
-	"module": "module/index.js",
+	"version": "0.7.0-pre.0",
+	"type": "module",
+	"main": "index.cjs",
+	"module": "index.js",
+	"types": "index.d.ts",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"module": "./index.js",
+			"import": "./index.js",
+			"require": "./index.cjs",
+			"default": "./index.js"
+		}
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/edmundhung/conform",
@@ -20,7 +31,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.6.3-pre.0"
+		"@conform-to/dom": "0.7.0-pre.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"

package/module/index.js

@@ -1,4 +0,0 @@
-export { isFieldElement, list, parse, requestIntent, validate } from '@conform-to/dom';
-export { useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.js';
-import * as helpers from './helpers.js';
-export { helpers as conform };