@conform-to/react 0.8.0-pre.1 → 0.8.0-pre.2

package/helpers.d.ts

@@ -65,4 +65,8 @@ export declare function input<Schema extends File | File[]>(config: FieldConfig<
 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, unknown> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
+export declare function collection<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(config: FieldConfig<Schema>, options: BaseOptions & {
+    type: 'checkbox' | 'radio';
+    options: string[];
+}): Array<InputProps<Schema> & Pick<Required<InputProps<Schema>>, 'type' | 'value'>>;
 export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

package/helpers.js

@@ -99,6 +99,18 @@ function textarea(config, options) {
 function fieldset(config, options) {
   return getFormElementProps(config, options);
 }
+function collection(config, options) {
+  return options.options.map(value => cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+    id: config.id ? "".concat(config.id, "-").concat(value) : undefined,
+    type: options.type,
+    value,
+    defaultChecked: options.type === 'checkbox' && Array.isArray(config.defaultValue) ? config.defaultValue.includes(value) : config.defaultValue === value,
+    // The required attribute doesn't make sense for checkbox group
+    // As it would require all checkboxes to be checked instead of at least one
+    // overriden with `undefiend` so it gets cleaned up
+    required: options.type === 'checkbox' ? undefined : config.required
+  })));
+}
 
 Object.defineProperty(exports, 'INTENT', {
 	enumerable: true,
@@ -112,6 +124,7 @@ Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
 	enumerable: true,
 	get: function () { return dom.VALIDATION_UNDEFINED; }
 });
+exports.collection = collection;
 exports.fieldset = fieldset;
 exports.hiddenProps = hiddenProps;
 exports.input = input;

package/helpers.mjs

@@ -95,5 +95,17 @@ function textarea(config, options) {
 function fieldset(config, options) {
   return getFormElementProps(config, options);
 }
+function collection(config, options) {
+  return options.options.map(value => cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    id: config.id ? "".concat(config.id, "-").concat(value) : undefined,
+    type: options.type,
+    value,
+    defaultChecked: options.type === 'checkbox' && Array.isArray(config.defaultValue) ? config.defaultValue.includes(value) : config.defaultValue === value,
+    // The required attribute doesn't make sense for checkbox group
+    // As it would require all checkboxes to be checked instead of at least one
+    // overriden with `undefiend` so it gets cleaned up
+    required: options.type === 'checkbox' ? undefined : config.required
+  })));
+}
 
-export { fieldset, hiddenProps, input, select, textarea };
+export { collection, fieldset, hiddenProps, input, select, textarea };

package/hooks.d.ts

@@ -26,11 +26,6 @@ type SubmissionResult = {
     payload: Submission['payload'] | null;
     error: Submission['error'];
 };
-interface ReportOptions {
-    formError?: string[];
-    resetForm?: boolean;
-}
-export declare function report(submission: Submission, options?: ReportOptions): SubmissionResult;
 export interface FormConfig<Output extends Record<string, any>, Input extends Record<string, any> = Output> {
     /**
      * If the form id is provided, Id for label,
@@ -43,14 +38,14 @@ export interface FormConfig<Output extends Record<string, any>, Input extends Re
     ref?: RefObject<HTMLFormElement>;
     /**
      * Define when conform should start validation.
-     * Support "onSubmit", "onChange", "onBlur".
+     * Support "onSubmit", "onInput", "onBlur".
      *
      * @default "onSubmit"
      */
     shouldValidate?: 'onSubmit' | 'onBlur' | 'onInput';
     /**
      * Define when conform should revalidate again.
-     * Support "onSubmit", "onChange", "onBlur".
+     * Support "onSubmit", "onInput", "onBlur".
      *
      * @default shouldValidate, or "onSubmit" if shouldValidate is not provided.
      */

package/hooks.js

@@ -6,17 +6,6 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var dom = require('@conform-to/dom');
 var react = require('react');
 
-function report(submission, options) {
-  var _submission$error$;
-  return {
-    intent: submission.intent,
-    payload: options !== null && options !== void 0 && options.resetForm ? null : submission.payload,
-    error: options !== null && options !== void 0 && options.formError ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission.error), {}, {
-      '': options.formError.concat((_submission$error$ = submission.error['']) !== null && _submission$error$ !== void 0 ? _submission$error$ : [])
-    }) : submission.error
-  };
-}
-
 /**
  * Properties to be applied to the form element
  */
@@ -368,7 +357,7 @@ function useFieldList(ref, config) {
   });
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue;
-    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
+    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : []);
   });
   react.useEffect(() => {
     var conformHandler = event => {
@@ -423,7 +412,7 @@ function useFieldList(ref, config) {
       if (!form || event.target !== form) {
         return;
       }
-      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : [undefined]));
+      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : []));
     };
 
     // @ts-expect-error Custom event: conform
@@ -456,7 +445,7 @@ function useFieldList(ref, config) {
     };
     if (config.form) {
       fieldConfig.form = config.form;
-      fieldConfig.id = "".concat(config.form, "-").concat(config.name);
+      fieldConfig.id = "".concat(config.form, "-").concat(config.name, "-").concat(index);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
       fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
@@ -698,15 +687,6 @@ function reportSubmission(form, submission) {
     // As `form.element.namedItem('')` will always returns null
     var elementName = name ? name : FORM_ERROR_ELEMENT_NAME;
     var item = form.elements.namedItem(elementName);
-    if (item instanceof RadioNodeList) {
-      for (var field of item) {
-        if (field.type !== 'radio') {
-          // eslint-disable-next-line no-console
-          console.warn('Repeated field name is not supported.');
-          continue;
-        }
-      }
-    }
     if (item === null) {
       // Create placeholder button to keep the error without contributing to the form data
       var button = document.createElement('button');
@@ -750,7 +730,6 @@ function getScope(intent) {
 exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
 exports.getScope = getScope;
 exports.getUniqueKey = getUniqueKey;
-exports.report = report;
 exports.reportSubmission = reportSubmission;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;

package/hooks.mjs

@@ -2,17 +2,6 @@ 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';
 
-function report(submission, options) {
-  var _submission$error$;
-  return {
-    intent: submission.intent,
-    payload: options !== null && options !== void 0 && options.resetForm ? null : submission.payload,
-    error: options !== null && options !== void 0 && options.formError ? _objectSpread2(_objectSpread2({}, submission.error), {}, {
-      '': options.formError.concat((_submission$error$ = submission.error['']) !== null && _submission$error$ !== void 0 ? _submission$error$ : [])
-    }) : submission.error
-  };
-}
-
 /**
  * Properties to be applied to the form element
  */
@@ -364,7 +353,7 @@ function useFieldList(ref, config) {
   });
   var [entries, setEntries] = useState(() => {
     var _config$defaultValue;
-    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
+    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : []);
   });
   useEffect(() => {
     var conformHandler = event => {
@@ -419,7 +408,7 @@ function useFieldList(ref, config) {
       if (!form || event.target !== form) {
         return;
       }
-      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : [undefined]));
+      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : []));
     };
 
     // @ts-expect-error Custom event: conform
@@ -452,7 +441,7 @@ function useFieldList(ref, config) {
     };
     if (config.form) {
       fieldConfig.form = config.form;
-      fieldConfig.id = "".concat(config.form, "-").concat(config.name);
+      fieldConfig.id = "".concat(config.form, "-").concat(config.name, "-").concat(index);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
       fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
@@ -694,15 +683,6 @@ function reportSubmission(form, submission) {
     // As `form.element.namedItem('')` will always returns null
     var elementName = name ? name : FORM_ERROR_ELEMENT_NAME;
     var item = form.elements.namedItem(elementName);
-    if (item instanceof RadioNodeList) {
-      for (var field of item) {
-        if (field.type !== 'radio') {
-          // eslint-disable-next-line no-console
-          console.warn('Repeated field name is not supported.');
-          continue;
-        }
-      }
-    }
     if (item === null) {
       // Create placeholder button to keep the error without contributing to the form data
       var button = document.createElement('button');
@@ -743,4 +723,4 @@ function getScope(intent) {
   return null;
 }
 
-export { FORM_ERROR_ELEMENT_NAME, getScope, getUniqueKey, report, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };
+export { FORM_ERROR_ELEMENT_NAME, getScope, getUniqueKey, 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, report, } from './hooks.js';
+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

@@ -28,7 +28,6 @@ Object.defineProperty(exports, 'validate', {
 	enumerable: true,
 	get: function () { return dom.validate; }
 });
-exports.report = hooks.report;
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;

package/index.mjs

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

package/package.json

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