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

package/hooks.d.ts

@@ -18,9 +18,9 @@ export interface FormConfig<Schema extends Record<string, any>, ClientSubmission
      */
     defaultValue?: FieldValue<Schema>;
     /**
-     * An object describing the state from the last submission
+     * An object describing the result of the last submission
      */
-    state?: Submission;
+    lastSubmission?: Submission;
     /**
      * An object describing the constraint of each field
      */
@@ -60,17 +60,20 @@ export interface FormConfig<Schema extends Record<string, any>, ClientSubmission
  * Properties to be applied to the form element
  */
 interface FormProps {
-    ref: RefObject<HTMLFormElement>;
     id?: string;
+    ref: RefObject<HTMLFormElement>;
     onSubmit: (event: FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
+    'aria-invalid'?: 'true';
+    'aria-describedby'?: string;
 }
-interface Form<Schema extends Record<string, any>> {
+interface Form {
     id?: string;
-    ref: RefObject<HTMLFormElement>;
+    errorId?: string;
     error: string;
+    errors: string[];
+    ref: RefObject<HTMLFormElement>;
     props: FormProps;
-    config: FieldsetConfig<Schema>;
 }
 /**
  * Returns properties required to hook into form events.
@@ -78,20 +81,12 @@ interface Form<Schema extends Record<string, any>> {
  *
  * @see https://conform.guide/api/react#useform
  */
-export declare function useForm<Schema extends Record<string, any>, ClientSubmission extends Submission | Submission<Schema> = Submission>(config?: FormConfig<Schema, ClientSubmission>): [Form<Schema>, Fieldset<Schema>];
-/**
- * All the information of the field, including state and config.
- */
-export type Field<Schema> = {
-    config: FieldConfig<Schema>;
-    error?: string;
-    errors?: string[];
-};
+export declare function useForm<Schema extends Record<string, any>, ClientSubmission extends Submission | Submission<Schema> = Submission>(config?: FormConfig<Schema, ClientSubmission>): [Form, Fieldset<Schema>];
 /**
- * A set of field information.
+ * A set of field configuration
  */
 export type Fieldset<Schema extends Record<string, any>> = {
-    [Key in keyof Schema]-?: Field<Schema[Key]>;
+    [Key in keyof Schema]-?: FieldConfig<Schema[Key]>;
 };
 export interface FieldsetConfig<Schema extends Record<string, any>> {
     /**
@@ -111,7 +106,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
      */
     constraint?: FieldsetConstraint<Schema>;
     /**
-     * The id of the form, connecting each field to a form remotely.
+     * The id of the form, connecting each field to a form remotely
      */
     form?: string;
 }
@@ -130,10 +125,7 @@ export declare function useFieldset<Schema extends Record<string, any>>(ref: Ref
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): Array<{
     key: string;
-    error: string | undefined;
-    errors: string[] | undefined;
-    config: FieldConfig<Payload>;
-}>;
+} & FieldConfig<Payload>>;
 interface InputControl {
     change: (eventOrValue: {
         target: {

package/hooks.js

@@ -13,30 +13,30 @@ var react = require('react');
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$state;
+  var _config$lastSubmissio;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = react.useRef(config);
   var ref = react.useRef(null);
-  var [lastSubmission, setLastSubmission] = react.useState((_config$state = config.state) !== null && _config$state !== void 0 ? _config$state : null);
-  var [error, setError] = react.useState(() => {
-    if (!config.state) {
-      return '';
+  var [lastSubmission, setLastSubmission] = react.useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
+  var [errors, setErrors] = react.useState(() => {
+    if (!config.lastSubmission) {
+      return [];
     }
-    var message = config.state.error[''];
-    return dom.getValidationMessage(message);
+    return [].concat(config.lastSubmission.error['']);
   });
   var [uncontrolledState, setUncontrolledState] = react.useState(() => {
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!submission) {
       return {
         defaultValue: config.defaultValue
       };
     }
+    var scope = dom.getScope(submission.intent);
     return {
       defaultValue: submission.payload,
       initialError: Object.entries(submission.error).reduce((result, _ref) => {
         var [name, message] = _ref;
-        if (name !== '' && dom.shouldValidate(submission.intent, name)) {
+        if (name !== '' && (scope === null || scope === name)) {
           result[name] = message;
         }
         return result;
@@ -57,7 +57,7 @@ function useForm() {
   }, []);
   react.useEffect(() => {
     var form = ref.current;
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!form || !submission) {
       return;
     }
@@ -68,7 +68,7 @@ function useForm() {
       }));
     }
     setLastSubmission(submission);
-  }, [config.state]);
+  }, [config.lastSubmission]);
   react.useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
@@ -103,12 +103,12 @@ function useForm() {
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== dom.FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setError(field.validationMessage);
+        setErrors(dom.getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
@@ -122,11 +122,10 @@ function useForm() {
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
-          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
-      setError('');
+      setErrors([]);
       setUncontrolledState({
         defaultValue: formConfig.defaultValue
       });
@@ -150,12 +149,11 @@ function useForm() {
     };
   }, []);
   var form = {
-    id: config.id,
     ref,
-    error,
+    error: errors[0],
+    errors,
     props: {
       ref,
-      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -198,14 +196,22 @@ function useForm() {
           console.warn(e);
         }
       }
-    },
-    config: fieldsetConfig
+    }
   };
+  if (config.id) {
+    form.id = config.id;
+    form.errorId = "".concat(config.id, "-error");
+    form.props.id = form.id;
+    form.props['aria-describedby'] = form.errorId;
+  }
+  if (form.errorId && form.errors.length > 0) {
+    form.props['aria-invalid'] = 'true';
+  }
   return [form, fieldset];
 }
 
 /**
- * All the information of the field, including state and config.
+ * A set of field configuration
  */
 
 function useFieldset(ref, config) {
@@ -233,7 +239,8 @@ function useFieldset(ref, config) {
   var [error, setError] = react.useState(() => {
     var result = {};
     for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
-      result[key] = dom.getErrors(dom.getValidationMessage(_error === null || _error === void 0 ? void 0 : _error['']));
+      var _error$;
+      result[key] = [].concat((_error$ = _error === null || _error === void 0 ? void 0 : _error['']) !== null && _error$ !== void 0 ? _error$ : []);
     }
     return result;
   });
@@ -254,10 +261,6 @@ 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 prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
             if (prevMessage === field.validationMessage) {
@@ -309,19 +312,17 @@ function useFieldset(ref, config) {
       var fieldsetConfig = config !== null && config !== void 0 ? config : {};
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var errors = error === null || error === void 0 ? void 0 : error[key];
-      var field = {
-        config: _rollupPluginBabelHelpers.objectSpread2({
-          name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          defaultValue: uncontrolledState.defaultValue[key],
-          initialError: uncontrolledState.initialError[key]
-        }, constraint),
+      var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
+        name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
+        defaultValue: uncontrolledState.defaultValue[key],
+        initialError: uncontrolledState.initialError[key],
         error: errors === null || errors === void 0 ? void 0 : errors[0],
         errors
-      };
+      });
       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");
+        field.form = fieldsetConfig.form;
+        field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
+        field.errorId = "".concat(field.id, "-error");
       }
       return field;
     }
@@ -354,7 +355,10 @@ function useFieldList(ref, config) {
       initialError
     };
   });
-  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => dom.getErrors(dom.getValidationMessage(error === null || error === void 0 ? void 0 : error['']))));
+  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => {
+    var _error$2;
+    return [].concat((_error$2 = error === null || error === void 0 ? void 0 : error['']) !== null && _error$2 !== void 0 ? _error$2 : []);
+  }));
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -464,19 +468,18 @@ function useFieldList(ref, config) {
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-      initialError: uncontrolledState.initialError[index]
+      initialError: uncontrolledState.initialError[index],
+      error: errors === null || errors === void 0 ? void 0 : errors[0],
+      errors
     };
     if (config.form) {
       fieldConfig.form = config.form;
       fieldConfig.id = "".concat(config.form, "-").concat(config.name);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
     }
-    return {
-      key,
-      error: errors === null || errors === void 0 ? void 0 : errors[0],
-      errors,
-      config: fieldConfig
-    };
+    return _rollupPluginBabelHelpers.objectSpread2({
+      key
+    }, fieldConfig);
   });
 }
 

package/index.d.ts

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

package/index.js

@@ -8,9 +8,9 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'getFormElements', {
+Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
-	get: function () { return dom.getFormElements; }
+	get: function () { return dom.isFieldElement; }
 });
 Object.defineProperty(exports, 'list', {
 	enumerable: true,
@@ -24,10 +24,6 @@ Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
 	get: function () { return dom.requestIntent; }
 });
-Object.defineProperty(exports, 'requestSubmit', {
-	enumerable: true,
-	get: function () { return dom.requestSubmit; }
-});
 Object.defineProperty(exports, 'validate', {
 	enumerable: true,
 	get: function () { return dom.validate; }

package/module/helpers.js

@@ -1,4 +1,5 @@
-export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+export { INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 
 /**
  * Style to make the input element visually hidden
@@ -15,88 +16,66 @@ var hiddenStyle = {
   whiteSpace: 'nowrap',
   border: 0
 };
-function input(config) {
-  var _config$initialError;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var attributes = {
+function getFormControlProps(config, options) {
+  var _config$error;
+  var props = {
     id: config.id,
-    type: options.type,
     name: config.name,
     form: config.form,
-    required: config.required,
+    required: config.required
+  };
+  if (config.id) {
+    props.id = config.id;
+    props['aria-describedby'] = config.errorId;
+  }
+  if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
+    props['aria-invalid'] = true;
+  }
+  if (config.initialError && Object.entries(config.initialError).length > 0) {
+    props.autoFocus = true;
+  }
+  if (options !== null && options !== void 0 && options.hidden) {
+    props.style = hiddenStyle;
+    props.tabIndex = -1;
+    props['aria-hidden'] = true;
+  }
+  return props;
+}
+function input(config) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    type: options.type,
     minLength: config.minLength,
     maxLength: config.maxLength,
     min: config.min,
     max: config.max,
     step: config.step,
     pattern: config.pattern,
-    multiple: config.multiple,
-    'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
+    multiple: config.multiple
+  });
   if (options.type === 'checkbox' || options.type === 'radio') {
     var _options$value;
-    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
-    attributes.defaultChecked = config.defaultValue === attributes.value;
+    props.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
+    props.defaultChecked = config.defaultValue === props.value;
   } else if (options.type !== 'file') {
-    attributes.defaultValue = config.defaultValue;
+    props.defaultValue = config.defaultValue;
   }
-  return attributes;
+  return props;
 }
 function select(config, options) {
-  var _config$defaultValue, _config$initialError2;
-  var attributes = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
-    required: config.required,
-    multiple: config.multiple,
-    'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    defaultValue: config.defaultValue,
+    multiple: config.multiple
+  });
+  return props;
 }
 function textarea(config, options) {
-  var _config$defaultValue2, _config$initialError3;
-  var attributes = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
-    required: config.required,
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    defaultValue: config.defaultValue,
     minLength: config.minLength,
-    maxLength: config.maxLength,
-    autoFocus: Boolean(config.initialError),
-    'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+    maxLength: config.maxLength
+  });
+  return props;
 }
-var intent = '__intent__';
 
-export { input, intent, select, textarea };
+export { input, select, textarea };