@conform-to/react 0.3.1 → 0.4.0-pre.1

package/helpers.js

@@ -22,7 +22,7 @@ function input(config) {
     multiple: config.multiple
   };
 
-  if (typeof config.initialError !== 'undefined') {
+  if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
 
@@ -43,11 +43,10 @@ function select(config) {
     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,
-    autoFocus: typeof config.initialError !== 'undefined' ? Boolean(config.initialError) : undefined
+    multiple: config.multiple
   };
 
-  if (typeof config.initialError !== 'undefined') {
+  if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
 
@@ -66,7 +65,7 @@ function textarea(config) {
     autoFocus: Boolean(config.initialError)
   };
 
-  if (typeof config.initialError !== 'undefined') {
+  if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
 

package/hooks.d.ts

@@ -1,6 +1,15 @@
-import { type FieldConfig, type FieldError, type FieldValue, type FieldElement, type FieldsetConstraint, type ListCommand, type Primitive } from '@conform-to/dom';
+import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
 import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
-export interface FormConfig {
+interface FormContext<Schema extends Record<string, any>> {
+    form: HTMLFormElement;
+    formData: FormData;
+    submission: Submission<Schema>;
+}
+export interface FormConfig<Schema extends Record<string, any>> {
+    /**
+     * Validation mode. Default to `client-only`.
+     */
+    mode?: 'client-only' | 'server-validation';
     /**
      * Define when the error should be reported initially.
      * Support "onSubmit", "onChange", "onBlur".
@@ -8,6 +17,14 @@ export interface FormConfig {
      * Default to `onSubmit`.
      */
     initialReport?: 'onSubmit' | 'onChange' | 'onBlur';
+    /**
+     * An object representing the initial value of the form.
+     */
+    defaultValue?: FieldValue<Schema>;
+    /**
+     * An object describing the state from the last submission
+     */
+    state?: Submission<Schema>;
     /**
      * Enable native validation before hydation.
      *
@@ -23,12 +40,12 @@ export interface FormConfig {
     /**
      * A function to be called when the form should be (re)validated.
      */
-    validate?: (form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null) => void;
+    onValidate?: (context: FormContext<Schema>) => void;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
      */
-    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: FormContext<Schema>) => void;
 }
 /**
  * Properties to be applied to the form element
@@ -38,13 +55,19 @@ interface FormProps {
     onSubmit: (event: FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 }
+interface Form<Schema extends Record<string, any>> {
+    ref: RefObject<HTMLFormElement>;
+    error: string;
+    props: FormProps;
+    config: FieldsetConfig<Schema>;
+}
 /**
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#useform
  */
-export declare function useForm(config?: FormConfig): FormProps;
+export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
  * All the information of the field, including state and config.
  */
@@ -70,7 +93,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
     /**
      * An object describing the initial error of each field
      */
-    initialError?: FieldError<Schema>['details'];
+    initialError?: Array<[string, string]>;
     /**
      * An object describing the constraint of each field
      */
@@ -83,7 +106,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#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>;
@@ -110,7 +133,7 @@ interface ListControl<Schema> {
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
@@ -140,9 +163,9 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;
-} = HTMLInputElement, Schema extends Primitive = Primitive>(field: FieldConfig<Schema>): [ShadowInputProps, InputControl<Element>];
+} = HTMLInputElement, Schema extends Primitive = Primitive>(config: FieldConfig<Schema>): [ShadowInputProps, InputControl<Element>];
 export {};