@conform-to/react 0.5.1 → 0.6.0

package/helpers.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var dom = require('@conform-to/dom');
+
 /**
  * Style to make the input element visually hidden
  * Based on the `sr-only` class from tailwindcss
@@ -17,89 +20,80 @@ 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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 && 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 && config.initialError.length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 && config.initialError.length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+    maxLength: config.maxLength
+  });
+  return props;
 }
 
+Object.defineProperty(exports, 'INTENT', {
+	enumerable: true,
+	get: function () { return dom.INTENT; }
+});
+Object.defineProperty(exports, 'VALIDATION_SKIPPED', {
+	enumerable: true,
+	get: function () { return dom.VALIDATION_SKIPPED; }
+});
+Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
+	enumerable: true,
+	get: function () { return dom.VALIDATION_UNDEFINED; }
+});
 exports.input = input;
 exports.select = select;
 exports.textarea = textarea;

package/hooks.d.ts

@@ -1,15 +1,11 @@
-import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type Primitive, type Submission } from '@conform-to/dom';
-import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
-export interface FormConfig<Schema extends Record<string, any>> {
+import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type FormMethod, type FormEncType, type Submission } from '@conform-to/dom';
+import { type FormEvent, type RefObject } from 'react';
+export interface FormConfig<Schema extends Record<string, any>, ClientSubmission extends Submission | Submission<Schema> = Submission> {
     /**
      * If the form id is provided, Id for label,
      * input and error elements will be derived.
      */
     id?: string;
-    /**
-     * Validation mode. Default to `client-only`.
-     */
-    mode?: 'client-only' | 'server-validation';
     /**
      * Define when the error should be reported initially.
      * Support "onSubmit", "onChange", "onBlur".
@@ -22,9 +18,9 @@ export interface FormConfig<Schema extends Record<string, any>> {
      */
     defaultValue?: FieldValue<Schema>;
     /**
-     * An object describing the state from the last submission
+     * An object describing the result of the last submission
      */
-    state?: Submission<Schema>;
+    lastSubmission?: Submission;
     /**
      * An object describing the constraint of each field
      */
@@ -47,31 +43,37 @@ export interface FormConfig<Schema extends Record<string, any>> {
     onValidate?: ({ form, formData, }: {
         form: HTMLFormElement;
         formData: FormData;
-    }) => Submission<Schema>;
+    }) => ClientSubmission;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
      */
     onSubmit?: (event: FormEvent<HTMLFormElement>, context: {
         formData: FormData;
-        submission: Submission<Schema>;
+        submission: ClientSubmission;
+        action: string;
+        encType: FormEncType;
+        method: FormMethod;
     }) => void;
 }
 /**
  * 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.
@@ -79,19 +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>>(config?: FormConfig<Schema>): [Form<Schema>, Fieldset<Schema>];
+export declare function useForm<Schema extends Record<string, any>, ClientSubmission extends Submission | Submission<Schema> = Submission>(config?: FormConfig<Schema, ClientSubmission>): [Form, Fieldset<Schema>];
 /**
- * All the information of the field, including state and config.
+ * A set of field configuration
  */
-export declare type Field<Schema> = {
-    config: FieldConfig<Schema>;
-    error?: string;
-};
-/**
- * A set of field information.
- */
-export declare type Fieldset<Schema extends Record<string, any>> = {
-    [Key in keyof Schema]-?: Field<Schema[Key]>;
+export type Fieldset<Schema extends Record<string, any>> = {
+    [Key in keyof Schema]-?: FieldConfig<Schema[Key]>;
 };
 export interface FieldsetConfig<Schema extends Record<string, any>> {
     /**
@@ -105,13 +100,13 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
     /**
      * An object describing the initial error of each field
      */
-    initialError?: Array<[string, string]>;
+    initialError?: Record<string, string | string[]>;
     /**
      * An object describing the constraint of each field
      */
     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,36 +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;
-    config: FieldConfig<Payload>;
-}>;
-interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    ref: RefObject<HTMLInputElement>;
-}
-interface LegacyInputControl<Element extends {
-    focus: () => void;
-}> {
-    ref: RefObject<Element>;
-    value: string;
-    onChange: (eventOrValue: {
-        target: {
-            value: string;
-        };
-    } | string) => void;
-    onBlur: () => void;
-    onInvalid: (event: FormEvent<FieldElement>) => void;
-}
-/**
- * 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.
- *
- * @deprecated Please use the `useInputEvent` hook instead
- * @see https://conform.guide/api/react#usecontrolledinput
- */
-export declare function useControlledInput<Element extends {
-    focus: () => void;
-} = HTMLInputElement, Schema extends Primitive = Primitive>(config: FieldConfig<Schema>): [ShadowInputProps, LegacyInputControl<Element>];
+} & FieldConfig<Payload>>;
 interface InputControl {
     change: (eventOrValue: {
         target: {