@conform-to/react 0.7.2 → 0.7.4

package/README.md

@@ -156,7 +156,7 @@ function LoginForm() {
 
 ### useFieldset
 
-This hook enables you to work with [nested object](/docs/configuration.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
+This hook enables you to work with [nested object](/docs/complex-structures.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
@@ -238,7 +238,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-This hook enables you to work with [array](/docs/configuration.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/configuration.md#nested-list) at the same time.
+This hook enables you to work with [array](/docs/complex-structures.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/complex-structures.md#nested-list) at the same time.
 
 ```tsx
 import { useForm, useFieldList, list } from '@conform-to/react';
@@ -385,7 +385,7 @@ function Example() {
 
 ### parse
 
-It parses the formData based on the [naming convention](/docs/configuration.md#naming-convention) with the validation result from the resolver.
+It parses the formData based on the [naming convention](/docs/complex-structures.md#naming-convention) with the validation result from the resolver.
 
 ```tsx
 import { parse } from '@conform-to/react';

package/helpers.d.ts

@@ -1,16 +1,18 @@
 import { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from '@conform-to/dom';
 import type { FieldConfig, Primitive } from './hooks.js';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
-interface FormControlProps {
+interface FormElementProps {
     id?: string;
     name: string;
     form?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+interface FormControlProps extends FormElementProps {
     required?: boolean;
     autoFocus?: boolean;
     tabIndex?: number;
     style?: CSSProperties;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
     'aria-hidden'?: boolean;
 }
 interface InputProps<Schema> extends FormControlProps {
@@ -37,13 +39,14 @@ interface TextareaProps extends FormControlProps {
 }
 type BaseOptions = {
     ariaAttributes?: false;
-    hidden?: boolean;
 } | {
     ariaAttributes: true;
     description?: boolean;
+};
+type ControlOptions = BaseOptions & {
     hidden?: boolean;
 };
-type InputOptions = BaseOptions & ({
+type InputOptions = ControlOptions & ({
     type: 'checkbox' | 'radio';
     value?: string;
 } | {
@@ -59,6 +62,7 @@ export declare function input<Schema extends Primitive | unknown>(config: FieldC
 export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: InputOptions & {
     type: 'file';
 }): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): SelectProps;
-export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): TextareaProps;
+export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): SelectProps;
+export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): TextareaProps;
+export declare function fieldset<Schema extends Record<string, any> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
 export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

package/helpers.js

@@ -5,26 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
 
-function getFormControlProps(config, options) {
-  var props = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  };
-  if (options !== null && options !== void 0 && options.ariaAttributes) {
-    var _config$error;
-    if (config.descriptionId && options !== null && options !== void 0 && options.description) {
-      props['aria-describedby'] = config.descriptionId;
-    }
-    if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
-      props['aria-invalid'] = true;
-      props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
-    }
-  }
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
-}
+/**
+ * Cleanup `undefined` from the dervied props
+ * To minimize conflicts when merging with user defined props
+ */
 function cleanup(props) {
   for (var key in props) {
     if (props[key] === undefined) {
@@ -33,6 +17,30 @@ function cleanup(props) {
   }
   return props;
 }
+function getFormElementProps(config, options) {
+  var _config$error, _config$error2;
+  return cleanup({
+    id: config.id,
+    name: config.name,
+    form: config.form,
+    'aria-invalid': options !== null && options !== void 0 && options.ariaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
+    'aria-describedby': options !== null && options !== void 0 && options.ariaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options !== null && options !== void 0 && options.description ? config.descriptionId : undefined].reduce((result, id) => {
+      if (!result) {
+        return id;
+      }
+      if (!id) {
+        return result;
+      }
+      return "".concat(result, " ").concat(id);
+    }) : undefined
+  });
+}
+function getFormControlProps(config, options) {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormElementProps(config, options)), {}, {
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+}
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
@@ -74,19 +82,20 @@ function input(config) {
   return cleanup(props);
 }
 function select(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
-  });
-  return cleanup(props);
+  }));
 }
 function textarea(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
-  });
-  return cleanup(props);
+  }));
+}
+function fieldset(config, options) {
+  return getFormElementProps(config, options);
 }
 
 Object.defineProperty(exports, 'INTENT', {
@@ -101,6 +110,7 @@ Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
 	enumerable: true,
 	get: function () { return dom.VALIDATION_UNDEFINED; }
 });
+exports.fieldset = fieldset;
 exports.hiddenProps = hiddenProps;
 exports.input = input;
 exports.select = select;

package/helpers.mjs

@@ -1,26 +1,10 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 export { INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 
-function getFormControlProps(config, options) {
-  var props = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  };
-  if (options !== null && options !== void 0 && options.ariaAttributes) {
-    var _config$error;
-    if (config.descriptionId && options !== null && options !== void 0 && options.description) {
-      props['aria-describedby'] = config.descriptionId;
-    }
-    if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
-      props['aria-invalid'] = true;
-      props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
-    }
-  }
-  return _objectSpread2(_objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
-}
+/**
+ * Cleanup `undefined` from the dervied props
+ * To minimize conflicts when merging with user defined props
+ */
 function cleanup(props) {
   for (var key in props) {
     if (props[key] === undefined) {
@@ -29,6 +13,30 @@ function cleanup(props) {
   }
   return props;
 }
+function getFormElementProps(config, options) {
+  var _config$error, _config$error2;
+  return cleanup({
+    id: config.id,
+    name: config.name,
+    form: config.form,
+    'aria-invalid': options !== null && options !== void 0 && options.ariaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
+    'aria-describedby': options !== null && options !== void 0 && options.ariaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options !== null && options !== void 0 && options.description ? config.descriptionId : undefined].reduce((result, id) => {
+      if (!result) {
+        return id;
+      }
+      if (!id) {
+        return result;
+      }
+      return "".concat(result, " ").concat(id);
+    }) : undefined
+  });
+}
+function getFormControlProps(config, options) {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormElementProps(config, options)), {}, {
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+}
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
@@ -70,19 +78,20 @@ function input(config) {
   return cleanup(props);
 }
 function select(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
-  });
-  return cleanup(props);
+  }));
 }
 function textarea(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
-  });
-  return cleanup(props);
+  }));
+}
+function fieldset(config, options) {
+  return getFormElementProps(config, options);
 }
 
-export { hiddenProps, input, select, textarea };
+export { fieldset, hiddenProps, input, select, textarea };

package/hooks.js

@@ -6,6 +6,10 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var dom = require('@conform-to/dom');
 var react = require('react');
 
+/**
+ * Properties to be applied to the form element
+ */
+
 /**
  * Normalize error to an array of string.
  */
@@ -302,6 +306,12 @@ function useForm() {
  * A set of field configuration
  */
 
+/**
+ * Returns all the information about the fieldset.
+ *
+ * @see https://conform.guide/api/react#usefieldset
+ */
+
 function useFieldset(ref, config) {
   var [error] = useFormError(ref, {
     initialError: config.initialError,
@@ -430,7 +440,7 @@ function useFieldList(ref, config) {
     };
   }, [ref, configRef, setError]);
   return entries.map((_ref3, index) => {
-    var _config$initialError, _config$defaultValue2;
+    var _config$initialError;
     var [key, defaultValue] = _ref3;
     var errors = error[index];
     var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref4) => {
@@ -443,7 +453,7 @@ function useFieldList(ref, config) {
     }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      defaultValue,
       initialError,
       error: errors === null || errors === void 0 ? void 0 : errors[0],
       errors
@@ -488,7 +498,7 @@ function useInputEvent(options) {
           if (listener !== 'onReset') {
             eventDispatched.current[listener] = true;
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
@@ -662,7 +672,7 @@ function validateConstraint(options) {
             constraint,
             defaultErrors: getDefaultErrors(_element3.validity, constraint)
           });
-          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 || (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
             name,
             payload,
             intent

package/hooks.mjs

@@ -2,6 +2,10 @@ import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHe
 import { parseIntent, getFormData, parse, VALIDATION_UNDEFINED, VALIDATION_SKIPPED, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, updateList, getValidationMessage, focusFirstInvalidControl, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
 import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
+/**
+ * Properties to be applied to the form element
+ */
+
 /**
  * Normalize error to an array of string.
  */
@@ -298,6 +302,12 @@ function useForm() {
  * A set of field configuration
  */
 
+/**
+ * Returns all the information about the fieldset.
+ *
+ * @see https://conform.guide/api/react#usefieldset
+ */
+
 function useFieldset(ref, config) {
   var [error] = useFormError(ref, {
     initialError: config.initialError,
@@ -426,7 +436,7 @@ function useFieldList(ref, config) {
     };
   }, [ref, configRef, setError]);
   return entries.map((_ref3, index) => {
-    var _config$initialError, _config$defaultValue2;
+    var _config$initialError;
     var [key, defaultValue] = _ref3;
     var errors = error[index];
     var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref4) => {
@@ -439,7 +449,7 @@ function useFieldList(ref, config) {
     }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      defaultValue,
       initialError,
       error: errors === null || errors === void 0 ? void 0 : errors[0],
       errors
@@ -484,7 +494,7 @@ function useInputEvent(options) {
           if (listener !== 'onReset') {
             eventDispatched.current[listener] = true;
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
@@ -658,7 +668,7 @@ function validateConstraint(options) {
             constraint,
             defaultErrors: getDefaultErrors(_element3.validity, constraint)
           });
-          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 || (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
             name,
             payload,
             intent

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.7.2",
+	"version": "0.7.4",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.7.2"
+		"@conform-to/dom": "0.7.4"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"