@conform-to/react 0.9.0 → 1.0.0-pre.0

package/helpers.mjs

@@ -1,5 +1,4 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-export { INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 
 /**
  * Cleanup `undefined` from the dervied props
@@ -13,31 +12,25 @@ function cleanup(props) {
   }
   return props;
 }
-function getFormElementProps(config) {
-  var _options$ariaAttribut, _config$error, _config$error2;
+function getAriaAttributes(metadata) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var hasAriaAttributes = (_options$ariaAttribut = options.ariaAttributes) !== null && _options$ariaAttribut !== void 0 ? _options$ariaAttribut : true;
+  if (typeof options.ariaAttributes !== 'undefined' && !options.ariaAttributes) {
+    return {};
+  }
   return cleanup({
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    'aria-invalid': hasAriaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
-    'aria-describedby': hasAriaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options.ariaAttributes !== false && options.description ? config.descriptionId : undefined].reduce((result, id) => {
-      if (!result) {
-        return id;
-      }
-      if (!id) {
-        return result;
-      }
-      return "".concat(result, " ").concat(id);
-    }) : undefined
+    'aria-invalid': !metadata.valid || undefined,
+    'aria-describedby': metadata.valid ? options.description ? metadata.descriptionId : undefined : "".concat(metadata.errorId, " ").concat(options.description ? metadata.descriptionId : '').trim()
   });
 }
-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));
+function getFormControlProps(metadata, options) {
+  var _metadata$constraint;
+  return cleanup(_objectSpread2(_objectSpread2({
+    id: metadata.id,
+    name: metadata.name,
+    form: metadata.formId,
+    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined,
+    autoFocus: !metadata.valid || undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined), getAriaAttributes(metadata, options)));
 }
 var hiddenProps = {
   /**
@@ -58,54 +51,83 @@ var hiddenProps = {
   tabIndex: -1,
   'aria-hidden': true
 };
-function input(config) {
+function input(field) {
+  var _field$constraint, _field$constraint2, _field$constraint3, _field$constraint4, _field$constraint5, _field$constraint6, _field$constraint7;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(field, 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
+    minLength: (_field$constraint = field.constraint) === null || _field$constraint === void 0 ? void 0 : _field$constraint.minLength,
+    maxLength: (_field$constraint2 = field.constraint) === null || _field$constraint2 === void 0 ? void 0 : _field$constraint2.maxLength,
+    min: (_field$constraint3 = field.constraint) === null || _field$constraint3 === void 0 ? void 0 : _field$constraint3.min,
+    max: (_field$constraint4 = field.constraint) === null || _field$constraint4 === void 0 ? void 0 : _field$constraint4.max,
+    step: (_field$constraint5 = field.constraint) === null || _field$constraint5 === void 0 ? void 0 : _field$constraint5.step,
+    pattern: (_field$constraint6 = field.constraint) === null || _field$constraint6 === void 0 ? void 0 : _field$constraint6.pattern,
+    multiple: (_field$constraint7 = field.constraint) === null || _field$constraint7 === void 0 ? void 0 : _field$constraint7.multiple
   });
   if (options.type === 'checkbox' || options.type === 'radio') {
     var _options$value;
     props.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
-    props.defaultChecked = config.defaultValue === props.value;
+    props.defaultChecked = typeof field.initialValue === 'boolean' ? field.initialValue : field.initialValue === props.value;
   } else if (options.type !== 'file') {
-    props.defaultValue = config.defaultValue;
+    var _field$initialValue;
+    props.defaultValue = (_field$initialValue = field.initialValue) === null || _field$initialValue === void 0 ? void 0 : _field$initialValue.toString();
   }
   return cleanup(props);
 }
-function select(config, options) {
-  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    multiple: config.multiple
+function select(metadata, options) {
+  var _metadata$initialValu, _metadata$constraint2;
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+    defaultValue: (_metadata$initialValu = metadata.initialValue) === null || _metadata$initialValu === void 0 ? void 0 : _metadata$initialValu.toString(),
+    multiple: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.multiple
   }));
 }
-function textarea(config, options) {
-  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    minLength: config.minLength,
-    maxLength: config.maxLength
+function textarea(metadata, options) {
+  var _metadata$initialValu2, _metadata$constraint3, _metadata$constraint4;
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+    defaultValue: (_metadata$initialValu2 = metadata.initialValue) === null || _metadata$initialValu2 === void 0 ? void 0 : _metadata$initialValu2.toString(),
+    minLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.minLength,
+    maxLength: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.maxLength
   }));
 }
-function fieldset(config, options) {
-  return getFormElementProps(config, options);
+function form(metadata, options) {
+  var onSubmit = options === null || options === void 0 ? void 0 : options.onSubmit;
+  var onReset = options === null || options === void 0 ? void 0 : options.onReset;
+  return cleanup(_objectSpread2({
+    id: metadata.id,
+    onSubmit: typeof onSubmit !== 'function' ? metadata.onSubmit : event => {
+      var context = metadata.onSubmit(event);
+      if (!event.defaultPrevented) {
+        onSubmit(event, context);
+      }
+    },
+    onReset: typeof onReset !== 'function' ? metadata.onReset : event => {
+      metadata.onReset(event);
+      onReset(event);
+    },
+    noValidate: metadata.noValidate
+  }, getAriaAttributes(metadata, 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
-  })));
+function fieldset(metadata, options) {
+  return cleanup(_objectSpread2({
+    id: metadata.id,
+    name: metadata.name,
+    form: metadata.formId
+  }, getAriaAttributes(metadata, options)));
+}
+function collection(metadata, options) {
+  return options.options.map(value => {
+    var _metadata$constraint5;
+    return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
+      id: "".concat(metadata.id, "-").concat(value),
+      type: options.type,
+      value,
+      defaultChecked: options.type === 'checkbox' && Array.isArray(metadata.initialValue) ? metadata.initialValue.includes(value) : metadata.initialValue === 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
+      // It is overriden with `undefiend` so it could be cleaned upW properly
+      required: options.type === 'checkbox' ? undefined : (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.required
+    }));
+  });
 }
 
-export { collection, fieldset, hiddenProps, input, select, textarea };
+export { collection, fieldset, form, hiddenProps, input, select, textarea };

package/hooks.d.ts

@@ -1,208 +1,54 @@
-import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod, parseIntent } from '@conform-to/dom';
-import { type FormEvent, type RefObject } from 'react';
-export type Primitive = null | undefined | string | number | boolean | Date;
-export interface FieldConfig<Schema> extends FieldConstraint<Schema> {
-    id?: string;
-    name: string;
-    defaultValue?: FieldValue<Schema>;
-    initialError?: Record<string, string[]>;
-    form?: string;
-    descriptionId?: string;
-    errorId?: string;
-    /**
-     * The frist error of the field
-     */
-    error?: string;
-    /**
-     * All of the field errors
-     */
-    errors?: string[];
-}
-export type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : unknown extends Schema ? any : Record<string, any> extends Schema ? {
-    [Key in KeysOf<Schema>]?: FieldValue<ResolveType<Schema, Key>>;
-} : any;
-type SubmissionResult = {
-    intent: Submission['intent'];
-    payload: Submission['payload'] | null;
-    error: Submission['error'];
-};
-export interface FormConfig<Output extends Record<string, any>, Input extends Record<string, any> = Output> {
+import { type UnionKeyof, type UnionKeyType, type FieldName, type Form, type FormOptions } from '@conform-to/dom';
+import { useEffect } from 'react';
+import { type FormMetadata, type FieldMetadata, type Pretty } from './context';
+/**
+ * useLayoutEffect is client-only.
+ * This basically makes it a no-op on server
+ */
+export declare const useSafeLayoutEffect: typeof useEffect;
+export declare function useFormId(preferredId?: string): string;
+export declare function useForm<Schema extends Record<string, any>>(options: Pretty<FormOptions<Schema> & {
     /**
      * If the form id is provided, Id for label,
      * input and error elements will be derived.
      */
     id?: string;
     /**
-     * A form ref object. Conform will fallback to its own ref object if it is not provided.
-     */
-    ref?: RefObject<HTMLFormElement>;
-    /**
-     * Define when conform should start validation.
-     * Support "onSubmit", "onInput", "onBlur".
-     *
-     * @default "onSubmit"
-     */
-    shouldValidate?: 'onSubmit' | 'onBlur' | 'onInput';
-    /**
-     * Define when conform should revalidate again.
-     * Support "onSubmit", "onInput", "onBlur".
-     *
-     * @default shouldValidate, or "onSubmit" if shouldValidate is not provided.
-     */
-    shouldRevalidate?: 'onSubmit' | 'onBlur' | 'onInput';
-    /**
-     * An object representing the initial value of the form.
-     */
-    defaultValue?: FieldValue<Input>;
-    /**
-     * An object describing the result of the last submission
-     */
-    lastSubmission?: SubmissionResult;
-    /**
-     * An object describing the constraint of each field
-     */
-    constraint?: FieldsetConstraint<Input>;
-    /**
-     * Enable native validation before hydation.
-     *
-     * Default to `false`.
-     */
-    fallbackNative?: boolean;
-    /**
-     * Accept form submission regardless of the form validity.
+     * Enable constraint validation before the dom is hydated.
      *
-     * Default to `false`.
+     * Default to `true`.
      */
-    noValidate?: boolean;
-    /**
-     * A function to be called when the form should be (re)validated.
-     */
-    onValidate?: ({ form, formData, }: {
-        form: HTMLFormElement;
-        formData: FormData;
-    }) => Submission | Submission<Output>;
-    /**
-     * 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;
-        action: string;
-        encType: ReturnType<typeof getFormEncType>;
-        method: ReturnType<typeof getFormMethod>;
-    }) => void;
-}
-/**
- * Properties to be applied to the form element
- */
-interface FormProps {
-    id?: string;
-    ref: RefObject<HTMLFormElement>;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    noValidate: boolean;
-    'aria-invalid'?: 'true';
-    'aria-describedby'?: string;
-}
-interface Form {
-    id?: string;
-    errorId?: string;
-    error: string | undefined;
-    errors: string[];
-    ref: RefObject<HTMLFormElement>;
-    props: FormProps;
-}
-/**
- * Returns properties required to hook into form events.
- * Applied custom validation and define when error should be reported.
- *
- * @see https://conform.guide/api/react#useform
- */
-export declare function useForm<Output extends Record<string, any>, Input extends Record<string, any> = Output>(config?: FormConfig<Output, Input>): [Form, Fieldset<Input>];
-/**
- * A set of field configuration
- */
-export type Fieldset<Schema extends Record<string, any> | undefined> = {
-    [Key in KeysOf<Schema>]-?: FieldConfig<ResolveType<Schema, Key>>;
+    defaultNoValidate?: boolean;
+}>): {
+    form: FormMetadata<Schema>;
+    context: Form<Schema>;
+    fields: Pretty<FieldsetMetadata<Schema>>;
 };
-export interface FieldsetConfig<Schema extends Record<string, any> | undefined> {
-    /**
-     * The prefix used to generate the name of nested fields.
-     */
-    name?: string;
-    /**
-     * An object representing the initial value of the fieldset.
-     */
-    defaultValue?: FieldValue<Schema>;
-    /**
-     * An object describing the initial error of each field
-     */
-    initialError?: Record<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
-     */
-    form?: string;
-}
-/**
- * Returns all the information about the fieldset.
- *
- * @see https://conform.guide/api/react#usefieldset
- */
-export declare function useFieldset<Schema extends Record<string, any> | undefined>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
-export declare function useFieldset<Schema extends Record<string, any> | undefined>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
-/**
- * Returns a list of key and field config.
- *
- * @see https://conform.guide/api/react#usefieldlist
- */
-export declare function useFieldList<Schema extends Array<any> | undefined>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Array<{
-    key: string;
-} & FieldConfig<Schema extends Array<infer Item> ? Item : never>>;
-interface InputControl {
-    change: (eventOrValue: {
-        target: {
-            value: string;
-        };
-    } | string | boolean) => void;
-    focus: () => void;
-    blur: () => void;
-}
-/**
- * Returns a ref object and a set of helpers that dispatch corresponding dom event.
- *
- * @see https://conform.guide/api/react#useinputevent
- */
-export declare function useInputEvent(options: {
-    ref: RefObject<FieldElement> | (() => Element | RadioNodeList | FieldElement | null | undefined);
-    onInput?: (event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onReset?: (event: Event) => void;
-}): InputControl;
-export declare const FORM_ERROR_ELEMENT_NAME = "__form__";
-/**
- * Validate the form with the Constraint Validation API
- * @see https://conform.guide/api/react#validateconstraint
- */
-export declare function validateConstraint(options: {
-    form: HTMLFormElement;
-    formData?: FormData;
-    constraint?: Record<Lowercase<string>, (value: string, context: {
-        formData: FormData;
-        attributeValue: string;
-    }) => boolean>;
-    formatMessages?: ({ name, validity, constraint, defaultErrors, }: {
-        name: string;
-        validity: ValidityState;
-        constraint: Record<string, boolean>;
-        defaultErrors: string[];
-    }) => string[];
-}): Submission;
-export declare function getUniqueKey(): string;
-export declare function reportSubmission(form: HTMLFormElement, submission: SubmissionResult): void;
-export declare function getScope(intent: ReturnType<typeof parseIntent>): string | null;
-export {};
+export declare function useFormMetadata<Schema extends Record<string, any>>(options: {
+    formId: string;
+    context?: Form<Schema>;
+    defaultNoValidate?: boolean;
+}): FormMetadata<Schema>;
+export type FieldsetMetadata<Schema> = Schema extends Array<any> ? {
+    [Key in keyof Schema]: FieldMetadata<Schema[Key]>;
+} : Schema extends {
+    [key in string]?: any;
+} ? {
+    [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>>;
+} : Record<string | number, FieldMetadata<any>>;
+export declare function useFieldset<Schema>(options: {
+    formId: string;
+    name?: FieldName<Schema>;
+    context?: Form;
+}): Pretty<FieldsetMetadata<Schema>>;
+export type Item<List> = List extends Array<infer Item> ? Item : any;
+export declare function useFieldList<Schema>(options: {
+    formId: string;
+    name: FieldName<Schema>;
+    context?: Form;
+}): Array<FieldMetadata<Item<Schema>>>;
+export declare function useField<Schema>(options: {
+    formId: string;
+    name: FieldName<Schema>;
+    context?: Form;
+}): FieldMetadata<Schema>;