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

package/README.md

@@ -10,11 +10,10 @@
 - [useFieldset](#usefieldset)
 - [useFieldList](#usefieldlist)
 - [useInputEvent](#useinputevent)
-- [useControlledInput](#usecontrolledinput)
 - [conform](#conform)
 - [list](#list)
 - [validate](#validate)
-- [requestCommand](#requestcommand)
+- [requestIntent](#requestintent)
 - [getFormElements](#getformelements)
 - [hasError](#haserror)
 - [parse](#parse)
@@ -43,14 +42,6 @@ function LoginForm() {
      */
     id: undefined,
 
-    /**
-     * Validation mode.
-     * Support "client-only" or "server-validation".
-     *
-     * Default to `client-only`.
-     */
-    mode: 'client-only',
-
     /**
      * Define when the error should be reported initially.
      * Support "onSubmit", "onChange", "onBlur".
@@ -330,49 +321,6 @@ function MuiForm() {
 
 ---
 
-### useControlledInput
-
-> This API is deprecated and replaced with the [useInputEvent](#useinputevent) hook.
-
-It returns the properties required to configure a shadow input for validation and helper to integrate it. This is particularly useful when [integrating custom input components](/docs/integrations.md#custom-input-component) like dropdown and datepicker.
-
-```tsx
-import { useForm, useControlledInput } from '@conform-to/react';
-import { Select, MenuItem } from '@mui/material';
-
-function MuiForm() {
-  const [form, { category }] = useForm();
-  const [inputProps, control] = useControlledInput(category.config);
-
-  return (
-    <form {...form.props}>
-      {/* Render a shadow input somewhere */}
-      <input {...inputProps} />
-
-      {/* MUI Select is a controlled component */}
-      <TextField
-        label="Category"
-        inputRef={control.ref}
-        value={control.value}
-        onChange={control.onChange}
-        onBlur={control.onBlur}
-        inputProps={{
-          onInvalid: control.onInvalid,
-        }}
-        select
-      >
-        <MenuItem value="">Please select</MenuItem>
-        <MenuItem value="a">Category A</MenuItem>
-        <MenuItem value="b">Category B</MenuItem>
-        <MenuItem value="c">Category C</MenuItem>
-      </TextField>
-    </form>
-  );
-}
-```
-
----
-
 ### conform
 
 It provides several helpers to remove the boilerplate when configuring a form control.
@@ -499,9 +447,9 @@ function Example() {
 
 ---
 
-### requestCommand
+### requestIntent
 
-It lets you [trigger a command](/docs/commands.md#triggering-a-command) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) command.
+It lets you [trigger an intent](/docs/commands.md#triggering-an-intent) without requiring users to click on a button. It supports both [list](#list) and [validate](#validate) intent.
 
 ```tsx
 import {
@@ -509,7 +457,7 @@ import {
   useFieldList,
   conform,
   list,
-  requestCommand,
+  requestIntent,
 } from '@conform-to/react';
 import DragAndDrop from 'awesome-dnd-example';
 
@@ -518,7 +466,7 @@ export default function Todos() {
   const taskList = useFieldList(form.ref, tasks.config);
 
   const handleDrop = (from, to) =>
-    requestCommand(form.ref.current, list.reorder({ from, to }));
+    requestIntent(form.ref.current, list.reorder({ from, to }));
 
   return (
     <form {...form.props}>
@@ -580,27 +528,6 @@ export default function LoginForm() {
 
 ---
 
-### hasError
-
-This helper checks if there is any message defined in error array with the provided name.
-
-```ts
-import { hasError } from '@conform-to/react';
-
-/**
- * Assume the error looks like this:
- */
-const error = [['email', 'Email is required']];
-
-// This will log `true`
-console.log(hasError(error, 'email'));
-
-// This will log `false`
-console.log(hasError(error, 'password'));
-```
-
----
-
 ### parse
 
 It parses the formData based on the [naming convention](/docs/submission).
@@ -624,20 +551,15 @@ This helper checks if the scope of validation includes a specific field by check
 import { shouldValidate } from '@conform-to/react';
 
 /**
- * The submission type and intent give us hint on what should be valdiated.
- * If the type is 'validate', only the field with name matching the metadata must be validated.
- * If the type is 'submit', everything should be validated (Default submission)
+ * The submission intent give us hint on what should be valdiated.
+ * If the intent is 'validate/:field', only the field with name matching must be validated.
+ * If the intent is undefined, everything should be validated (Default submission)
  */
-const submission = {
-  context: 'validate',
-  intent: 'email',
-  value: {},
-  error: [],
-};
+const intent = 'validate/email';
 
 // This will log 'true'
-console.log(shouldValidate(submission, 'email'));
+console.log(shouldValidate(intent, 'email'));
 
 // This will log 'false'
-console.log(shouldValidate(submission, 'password'));
+console.log(shouldValidate(intent, 'password'));
 ```

package/_virtual/_rollupPluginBabelHelpers.js

@@ -24,6 +24,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -36,6 +37,22 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 exports.defineProperty = _defineProperty;
 exports.objectSpread2 = _objectSpread2;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;

package/helpers.d.ts

@@ -1,4 +1,4 @@
-import type { FieldConfig } from '@conform-to/dom';
+import { type FieldConfig, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
 interface FieldProps {
     id?: string;
@@ -34,7 +34,7 @@ interface TextareaProps extends FieldProps {
     maxLength?: number;
     defaultValue?: string;
 }
-declare type InputOptions = {
+type InputOptions = {
     type: 'checkbox' | 'radio';
     hidden?: boolean;
     value?: string;
@@ -53,4 +53,5 @@ export declare function select<Schema>(config: FieldConfig<Schema>, options?: {
 export declare function textarea<Schema>(config: FieldConfig<Schema>, options?: {
     hidden?: boolean;
 }): TextareaProps;
-export {};
+export declare const intent = "__intent__";
+export { VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

package/helpers.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var dom = require('@conform-to/dom');
+
 /**
  * Style to make the input element visually hidden
  * Based on the `sr-only` class from tailwindcss
@@ -41,7 +43,7 @@ function input(config) {
     attributes.tabIndex = -1;
     attributes['aria-hidden'] = true;
   }
-  if (config.initialError && config.initialError.length > 0) {
+  if (config.initialError && Object.entries(config.initialError).length > 0) {
     attributes.autoFocus = true;
   }
   if (options.type === 'checkbox' || options.type === 'radio') {
@@ -70,7 +72,7 @@ function select(config, options) {
     attributes.tabIndex = -1;
     attributes['aria-hidden'] = true;
   }
-  if (config.initialError && config.initialError.length > 0) {
+  if (config.initialError && Object.entries(config.initialError).length > 0) {
     attributes.autoFocus = true;
   }
   return attributes;
@@ -94,12 +96,22 @@ function textarea(config, options) {
     attributes.tabIndex = -1;
     attributes['aria-hidden'] = true;
   }
-  if (config.initialError && config.initialError.length > 0) {
+  if (config.initialError && Object.entries(config.initialError).length > 0) {
     attributes.autoFocus = true;
   }
   return attributes;
 }
+var intent = '__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.intent = intent;
 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".
@@ -24,7 +20,7 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * An object describing the state from the last submission
      */
-    state?: Submission<Schema>;
+    state?: Submission;
     /**
      * An object describing the constraint of each field
      */
@@ -47,14 +43,17 @@ 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;
 }
 /**
@@ -79,18 +78,19 @@ 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<Schema>, Fieldset<Schema>];
 /**
  * All the information of the field, including state and config.
  */
-export declare type Field<Schema> = {
+export type Field<Schema> = {
     config: FieldConfig<Schema>;
     error?: string;
+    errors?: string[];
 };
 /**
  * A set of field information.
  */
-export declare type Fieldset<Schema extends Record<string, any>> = {
+export type Fieldset<Schema extends Record<string, any>> = {
     [Key in keyof Schema]-?: Field<Schema[Key]>;
 };
 export interface FieldsetConfig<Schema extends Record<string, any>> {
@@ -105,7 +105,7 @@ 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
      */
@@ -131,35 +131,9 @@ 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>;
 }>;
-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>];
 interface InputControl {
     change: (eventOrValue: {
         target: {