@conform-to/react 0.5.0-pre.0 → 0.5.0

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, reportSubmission, getFormData, parse, isFieldElement, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { shouldValidate, reportSubmission, getFormData, parse, isFieldElement, hasError, getPaths, getName, requestCommand, validate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect } from 'react';
 import { input } from './helpers.js';
 
@@ -7,7 +7,7 @@ import { input } from './helpers.js';
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
+ * @see https://conform.guide/api/react#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -21,17 +21,26 @@ function useForm() {
     })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
     return message !== null && message !== void 0 ? message : '';
   });
-  var [fieldsetConfig, setFieldsetConfig] = useState(() => {
-    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
-    var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
+  var [uncontrolledState, setUncontrolledState] = useState(() => {
+    var submission = config.state;
+    if (!submission) {
+      return {
+        defaultValue: config.defaultValue
+      };
+    }
     return {
-      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
-      initialError: error.filter(_ref2 => {
+      defaultValue: submission.value,
+      initialError: submission.error.filter(_ref2 => {
         var [name] = _ref2;
-        return name !== '' && getSubmissionType(name) === null;
+        return name !== '' && shouldValidate(submission, name);
       })
     };
   });
+  var fieldsetConfig = _objectSpread2(_objectSpread2({}, uncontrolledState), {}, {
+    constraint: config.constraint,
+    form: config.id
+  });
+  var fieldset = useFieldset(ref, fieldsetConfig);
   var [noValidate, setNoValidate] = useState(config.noValidate || !config.fallbackNative);
   useEffect(() => {
     configRef.current = config;
@@ -55,11 +64,8 @@ function useForm() {
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (formConfig.initialReport === 'onChange') {
-        field.dataset.conformTouched = 'true';
-      }
-      if (field.dataset.conformTouched) {
-        requestValidate(form, field.name);
+      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
+        requestCommand(form, validate(field.name));
       }
     };
     var handleBlur = event => {
@@ -70,8 +76,7 @@ function useForm() {
         return;
       }
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
-        field.dataset.conformTouched = 'true';
-        requestValidate(form, field.name);
+        requestCommand(form, validate(field.name));
       }
     };
     var handleInvalid = event => {
@@ -96,11 +101,12 @@ function useForm() {
       for (var field of form.elements) {
         if (isFieldElement(field)) {
           delete field.dataset.conformTouched;
+          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
       setError('');
-      setFieldsetConfig({
+      setUncontrolledState({
         defaultValue: formConfig.defaultValue,
         initialError: []
       });
@@ -123,11 +129,13 @@ function useForm() {
       document.removeEventListener('reset', handleReset);
     };
   }, []);
-  return {
+  var form = {
+    id: config.id,
     ref,
     error,
     props: {
       ref,
+      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -169,16 +177,6 @@ function useForm() {
               }
             }
           }
-
-          // Touch all fields only if the submitter is not a command button
-          if (submission.type === 'submit') {
-            for (var field of form.elements) {
-              if (isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
           if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
@@ -198,6 +196,7 @@ function useForm() {
     },
     config: fieldsetConfig
   };
+  return [form, fieldset];
 }
 
 /**
@@ -258,6 +257,10 @@ function useFieldset(ref, config) {
       // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
+          // Update the aria attribute only if it is set
+          if (field.getAttribute('aria-invalid')) {
+            field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
+          }
           setError(prev => {
             var _prev$key;
             var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
@@ -312,21 +315,26 @@ function useFieldset(ref, config) {
       var field = {
         config: _objectSpread2({
           name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          form: fieldsetConfig.form,
           defaultValue: uncontrolledState.defaultValue[key],
           initialError: uncontrolledState.initialError[key]
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
+      if (fieldsetConfig.form) {
+        field.config.form = fieldsetConfig.form;
+        field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
+        field.config.errorId = "".concat(field.config.id, "-error");
+      }
       return field;
     }
   });
 }
+
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
+ * @see https://conform.guide/api/react#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = useRef(config);
@@ -357,41 +365,6 @@ function useFieldList(ref, config) {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
   });
-  var list = entries.map((_ref3, index) => {
-    var [key, defaultValue] = _ref3;
-    return {
-      key,
-      error: error[index],
-      config: {
-        name: "".concat(config.name, "[").concat(index, "]"),
-        form: config.form,
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-        initialError: uncontrolledState.initialError[index]
-      }
-    };
-  });
-
-  /***
-   * This use proxy to capture all information about the command and
-   * have it encoded in the value.
-   */
-  var command = new Proxy({}, {
-    get(_target, type) {
-      return function () {
-        var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return {
-          name: 'conform/list',
-          value: JSON.stringify({
-            type,
-            scope: config.name,
-            payload
-          }),
-          form: config.form,
-          formNoValidate: true
-        };
-      };
-    }
-  });
   useEffect(() => {
     configRef.current = config;
   });
@@ -488,16 +461,31 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list,
-  // @ts-expect-error proxy type
-  command];
+  return entries.map((_ref3, index) => {
+    var [key, defaultValue] = _ref3;
+    var fieldConfig = {
+      name: "".concat(config.name, "[").concat(index, "]"),
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
+      initialError: uncontrolledState.initialError[index]
+    };
+    if (config.form) {
+      fieldConfig.form = config.form;
+      fieldConfig.id = "".concat(config.form, "-").concat(config.name);
+      fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+    }
+    return {
+      key,
+      error: error[index],
+      config: fieldConfig
+    };
+  });
 }
 /**
  * Returns the properties required to configure a shadow input for validation.
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://conform.guide/api/react#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/module/index.js

@@ -1,4 +1,4 @@
-export { getFormElements, hasError, parse, shouldValidate } from '@conform-to/dom';
+export { getFormElements, hasError, list, parse, requestCommand, requestSubmit, shouldValidate, validate } from '@conform-to/dom';
 export { useControlledInput, useFieldList, useFieldset, useForm } from './hooks.js';
 import * as helpers from './helpers.js';
 export { helpers as conform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.5.0-pre.0",
+	"version": "0.5.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.5.0-pre.0"
+		"@conform-to/dom": "0.5.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"