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

package/README.md

@@ -507,7 +507,7 @@ export default function SignupForm() {
 
 ### list
 
-It provides serveral helpers to configure an intent button for [modifying a list](/docs/commands.md#modifying-a-list).
+It provides serveral helpers to configure an intent button for [modifying a list](/docs/intent-button.md#modifying-a-list).
 
 ```tsx
 import { list } from '@conform-to/react';
@@ -540,7 +540,7 @@ function Example() {
 
 ### validate
 
-It returns the properties required to configure an intent button for [validation](/docs/commands.md#validation).
+It returns the properties required to configure an intent button for [validation](/docs/intent-button.md#validation).
 
 ```tsx
 import { validate } from '@conform-to/react';
@@ -562,7 +562,7 @@ function Example() {
 
 ### requestIntent
 
-It lets you [trigger an intent](/docs/commands.md#triggering-an-intent) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) intent.
+It lets you [trigger an intent](/docs/intent-button.md#triggering-an-intent) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) intent.
 
 ```tsx
 import {

package/_virtual/_rollupPluginBabelHelpers.js

@@ -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.cjs → _rollupPluginBabelHelpers.mjs}

@@ -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/helpers.d.ts

@@ -1,5 +1,5 @@
 import { INTENT } from '@conform-to/dom';
-import { type FieldConfig, type Primitive, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from './hooks';
+import { type FieldConfig, type Primitive, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from './hooks.js';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
 interface FormControlProps {
     id?: string;

package/helpers.js

@@ -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.js');
+var dom = require('@conform-to/dom');
+var hooks = require('./hooks.js');
 
 /**
  * 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.cjs → helpers.mjs}

@@ -1,10 +1,6 @@
-'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');
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+export { INTENT } from '@conform-to/dom';
+export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from './hooks.mjs';
 
 /**
  * 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/hooks.d.ts

@@ -1,4 +1,4 @@
-import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod } from '@conform-to/dom';
+import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod, parseIntent } from '@conform-to/dom';
 import { type FormEvent, type RefObject } from 'react';
 export type Primitive = null | undefined | string | number | boolean | Date;
 export interface FieldConfig<Schema> extends FieldConstraint<Schema> {
@@ -211,8 +211,5 @@ export declare function validateConstraint(options: {
     }) => string[];
 }): Submission;
 export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
-/**
- * Check if the current focus is on a intent button.
- */
-export declare function isFocusedOnIntentButton(form: HTMLFormElement, intent: string): boolean;
+export declare function getScope(intent: ReturnType<typeof parseIntent>): string | null;
 export {};

package/hooks.js

@@ -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.js');
+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,17 @@ 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 intent = dom.parseIntent(submission.intent);
+    var scope = getScope(intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -151,7 +156,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 +166,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 +191,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,20 +226,35 @@ 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);
-          var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
-            var [, message] = _ref2;
-            return messages.concat(normalizeError(message));
-          }, []);
-          var shouldValidate = !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate);
-          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)) {
+          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : dom.parse(formData);
+          var {
+            errors: _errors,
+            shouldServerValidate
+          } = Object.entries(submission.error).reduce((result, _ref2) => {
+            var [, error] = _ref2;
+            for (var message of normalizeError(error)) {
+              if (message === VALIDATION_UNDEFINED) {
+                result.shouldServerValidate = true;
+              } else if (message !== VALIDATION_SKIPPED) {
+                result.errors.push(message);
+              }
+            }
+            return result;
+          }, {
+            errors: [],
+            shouldServerValidate: false
+          });
+          if (
+          // has client validation
+          typeof config.onValidate !== 'undefined' &&
+          // not necessary to validate on the server
+          !shouldServerValidate && (
+          // client validation failed or non submit intent
+          !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && _errors.length > 0 || dom.parseIntent(submission.intent) !== null)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -242,9 +262,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 +311,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,37 +347,33 @@ 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);
-      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
+      var intent = dom.parseIntent(event.detail);
+      if ((intent === null || intent === void 0 ? void 0 : intent.type) !== 'list' || (intent === null || intent === void 0 ? void 0 : intent.payload.name) !== configRef.current.name) {
         return;
       }
       setEntries(entries => {
-        switch (command.type) {
+        var list = [...entries];
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            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]
-              })
+            return dom.updateList(list, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
+              defaultValue: [
+              // Generate a random key to avoid conflicts
+              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
             }));
           default:
-            {
-              return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
-            }
+            return dom.updateList(list, intent.payload);
         }
       });
       setError(error => {
@@ -367,28 +383,24 @@ function useFieldList(ref, config) {
             errorList[key] = messages;
           }
         }
-        switch (command.type) {
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, command), {}, {
-              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
-                defaultValue: undefined
-              })
+            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
+              defaultValue: undefined
             }));
             break;
           default:
-            {
-              errorList = updateList(errorList, command);
-              break;
-            }
+            errorList = dom.updateList(errorList, intent.payload);
+            break;
         }
         return Object.assign({}, errorList);
       });
     };
     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 +422,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 +441,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 +480,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 +537,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 +652,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 +730,9 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = getScope(submission.intent);
-  for (var element of getFormControls(form)) {
+  var intent = dom.parseIntent(submission.intent);
+  var scope = getScope(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,25 +742,31 @@ 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 (scope) {
-      focusFormControl(form, scope);
-    } else {
-      focusFirstInvalidControl(form);
-    }
+  if (!intent) {
+    dom.focusFirstInvalidControl(form);
   }
 }
-
-/**
- * Check if the current focus is on a intent button.
- */
-function isFocusedOnIntentButton(form, intent) {
-  var element = document.activeElement;
-  return isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === INTENT && element.value === intent;
+function getScope(intent) {
+  switch (intent === null || intent === void 0 ? void 0 : intent.type) {
+    case 'validate':
+      return intent.payload;
+    case 'list':
+      return intent.payload.name;
+  }
+  return null;
 }
 
-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.getScope = getScope;
+exports.reportSubmission = reportSubmission;
+exports.useFieldList = useFieldList;
+exports.useFieldset = useFieldset;
+exports.useForm = useForm;
+exports.useInputEvent = useInputEvent;
+exports.validateConstraint = validateConstraint;

package/{hooks.cjs → hooks.mjs}

@@ -1,10 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.cjs');
-var dom = require('@conform-to/dom');
-var react = require('react');
+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';
 
 /**
  * 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,17 @@ 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 intent = parseIntent(submission.intent);
+    var scope = getScope(intent);
     return scope === null ? submission.error : {
       [scope]: submission.error[scope]
     };
@@ -155,7 +152,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 +162,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 +187,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,20 +222,35 @@ 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);
-          var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
-            var [, message] = _ref2;
-            return messages.concat(normalizeError(message));
-          }, []);
-          var shouldValidate = !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate);
-          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)) {
+          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : parse(formData);
+          var {
+            errors: _errors,
+            shouldServerValidate
+          } = Object.entries(submission.error).reduce((result, _ref2) => {
+            var [, error] = _ref2;
+            for (var message of normalizeError(error)) {
+              if (message === VALIDATION_UNDEFINED) {
+                result.shouldServerValidate = true;
+              } else if (message !== VALIDATION_SKIPPED) {
+                result.errors.push(message);
+              }
+            }
+            return result;
+          }, {
+            errors: [],
+            shouldServerValidate: false
+          });
+          if (
+          // has client validation
+          typeof config.onValidate !== 'undefined' &&
+          // not necessary to validate on the server
+          !shouldServerValidate && (
+          // client validation failed or non submit intent
+          !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && _errors.length > 0 || parseIntent(submission.intent) !== null)) {
             report(form, submission);
             event.preventDefault();
           } else {
@@ -246,9 +258,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 +307,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,37 +343,33 @@ 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);
-      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
+      var intent = parseIntent(event.detail);
+      if ((intent === null || intent === void 0 ? void 0 : intent.type) !== 'list' || (intent === null || intent === void 0 ? void 0 : intent.payload.name) !== configRef.current.name) {
         return;
       }
       setEntries(entries => {
-        switch (command.type) {
+        var list = [...entries];
+        switch (intent.payload.operation) {
           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), {}, {
-                defaultValue: ["".concat(Date.now()),
-                // @ts-expect-error unknown type as it is sent through network
-                command.payload.defaultValue]
-              })
+            return updateList(list, _objectSpread2(_objectSpread2({}, intent.payload), {}, {
+              defaultValue: [
+              // Generate a random key to avoid conflicts
+              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
             }));
           default:
-            {
-              return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
-            }
+            return updateList(list, intent.payload);
         }
       });
       setError(error => {
@@ -371,28 +379,24 @@ function useFieldList(ref, config) {
             errorList[key] = messages;
           }
         }
-        switch (command.type) {
+        switch (intent.payload.operation) {
           case 'append':
           case 'prepend':
           case 'replace':
-            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
-              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
-                defaultValue: undefined
-              })
+            errorList = updateList(errorList, _objectSpread2(_objectSpread2({}, intent.payload), {}, {
+              defaultValue: undefined
             }));
             break;
           default:
-            {
-              errorList = dom.updateList(errorList, command);
-              break;
-            }
+            errorList = updateList(errorList, intent.payload);
+            break;
         }
         return Object.assign({}, errorList);
       });
     };
     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 +418,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 +437,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 +476,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 +533,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 +648,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 +726,9 @@ function reportSubmission(form, submission) {
       form.appendChild(button);
     }
   }
-  var scope = dom.getScope(submission.intent);
-  for (var element of dom.getFormControls(form)) {
+  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 : '';
     var messages = normalizeError(submission.error[_elementName]);
     if (scope === null || scope === _elementName) {
@@ -733,34 +738,22 @@ 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 (scope) {
-      dom.focusFormControl(form, scope);
-    } else {
-      dom.focusFirstInvalidControl(form);
-    }
+  if (!intent) {
+    focusFirstInvalidControl(form);
   }
 }
-
-/**
- * Check if the current focus is on a intent button.
- */
-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;
+function getScope(intent) {
+  switch (intent === null || intent === void 0 ? void 0 : intent.type) {
+    case 'validate':
+      return intent.payload;
+    case 'list':
+      return intent.payload.name;
+  }
+  return null;
 }
 
-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, getScope, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };

package/index.d.ts

@@ -1,3 +1,3 @@
 export { type FieldsetConstraint, type Submission, parse, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
-export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, } from './hooks';
-export * as conform from './helpers';
+export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, } from './hooks.js';
+export * as conform from './helpers.js';

package/index.js

@@ -1,4 +1,36 @@
-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 };
+'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;

package/index.mjs

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

package/package.json

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

package/index.cjs

@@ -1,36 +0,0 @@
-'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;