@conform-to/react 0.6.1 → 0.6.3-pre.0

package/helpers.d.ts

@@ -1,4 +1,5 @@
-import { type FieldConfig, type Primitive, VALIDATION_UNDEFINED, VALIDATION_SKIPPED, INTENT } from '@conform-to/dom';
+import { INTENT } from '@conform-to/dom';
+import { type FieldConfig, type Primitive, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from './hooks';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
 interface FormControlProps {
     id?: string;
@@ -45,10 +46,10 @@ type InputOptions = BaseOptions & ({
     type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden'>;
     value?: never;
 });
+export declare function input<Schema extends Primitive | unknown>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
 export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: InputOptions & {
     type: 'file';
 }): InputProps<Schema>;
-export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
-export declare function select(config: FieldConfig<Primitive | Primitive[]>, options?: BaseOptions): SelectProps;
-export declare function textarea(config: FieldConfig<Primitive>, options?: BaseOptions): TextareaProps;
+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 { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

package/helpers.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
+var hooks = require('./hooks.js');
 
 /**
  * Style to make the input element visually hidden
@@ -89,14 +90,8 @@ 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.VALIDATION_SKIPPED = hooks.VALIDATION_SKIPPED;
+exports.VALIDATION_UNDEFINED = hooks.VALIDATION_UNDEFINED;
 exports.input = input;
 exports.select = select;
 exports.textarea = textarea;

package/hooks.d.ts

@@ -1,6 +1,27 @@
-import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type FormMethod, type FormEncType, type Submission } from '@conform-to/dom';
+import { type FieldConstraint, type FieldElement, type FieldsetConstraint, type Submission, type KeysOf, type ResolveType, getFormEncType, getFormMethod } 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> {
+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 | 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;
+export interface FormConfig<Output extends Record<string, any>, Input extends Record<string, any> = Output> {
     /**
      * If the form id is provided, Id for label,
      * input and error elements will be derived.
@@ -31,7 +52,7 @@ export interface FormConfig<Schema extends Record<string, any>, ClientSubmission
     /**
      * An object representing the initial value of the form.
      */
-    defaultValue?: FieldValue<Schema>;
+    defaultValue?: FieldValue<Input>;
     /**
      * An object describing the result of the last submission
      */
@@ -39,7 +60,7 @@ export interface FormConfig<Schema extends Record<string, any>, ClientSubmission
     /**
      * An object describing the constraint of each field
      */
-    constraint?: FieldsetConstraint<Schema>;
+    constraint?: FieldsetConstraint<Input>;
     /**
      * Enable native validation before hydation.
      *
@@ -58,17 +79,17 @@ export interface FormConfig<Schema extends Record<string, any>, ClientSubmission
     onValidate?: ({ form, formData, }: {
         form: HTMLFormElement;
         formData: FormData;
-    }) => ClientSubmission;
+    }) => 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: ClientSubmission;
+        submission: Submission;
         action: string;
-        encType: FormEncType;
-        method: FormMethod;
+        encType: ReturnType<typeof getFormEncType>;
+        method: ReturnType<typeof getFormMethod>;
     }) => void;
 }
 /**
@@ -96,14 +117,14 @@ interface Form {
  *
  * @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, Fieldset<Schema>];
+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>> = {
-    [Key in keyof Schema]-?: FieldConfig<Schema[Key]>;
+export type Fieldset<Schema extends Record<string, any> | undefined> = {
+    [Key in KeysOf<Schema>]-?: FieldConfig<ResolveType<Schema, Key>>;
 };
-export interface FieldsetConfig<Schema extends Record<string, any>> {
+export interface FieldsetConfig<Schema extends Record<string, any> | undefined> {
     /**
      * The prefix used to generate the name of nested fields.
      */
@@ -130,17 +151,16 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
  *
  * @see https://conform.guide/api/react#usefieldset
  */
-export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
-export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
+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 config, with a group of helpers
- * configuring buttons for list manipulation
+ * Returns a list of key and field config.
  *
  * @see https://conform.guide/api/react#usefieldlist
  */
-export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): Array<{
+export declare function useFieldList<Schema extends Array<any> | undefined>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Array<{
     key: string;
-} & FieldConfig<Payload>>;
+} & FieldConfig<Schema extends Array<infer Item> ? Item : never>>;
 interface InputControl {
     change: (eventOrValue: {
         target: {
@@ -164,4 +184,35 @@ export declare function useInputEvent<RefShape extends Exclude<any, FieldElement
     onSubmit?: (event: SubmitEvent) => void;
     onReset?: (event: Event) => void;
 }): [RefObject<RefShape>, InputControl];
+export declare const VALIDATION_UNDEFINED = "__undefined__";
+export declare const VALIDATION_SKIPPED = "__skipped__";
+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>;
+    acceptMultipleErrors?: ({ name, intent, payload, }: {
+        name: string;
+        intent: string;
+        payload: Record<string, any>;
+    }) => boolean;
+    formatMessages?: ({ name, validity, constraint, defaultErrors, }: {
+        name: string;
+        validity: ValidityState;
+        constraint: Record<string, boolean>;
+        defaultErrors: string[];
+    }) => string[];
+}): Submission;
+export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
+/**
+ * Check if the current focus is on a intent button.
+ */
+export declare function isFocusedOnIntentButton(form: HTMLFormElement, intent: string): boolean;
 export {};