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

package/helpers.d.ts

@@ -1,10 +1,16 @@
 import type { FieldConfig } from '@conform-to/dom';
-import type { HTMLInputTypeAttribute } from 'react';
+import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
 interface FieldProps {
+    id?: string;
     name: string;
     form?: string;
     required?: boolean;
     autoFocus?: boolean;
+    tabIndex?: number;
+    style?: CSSProperties;
+    'aria-invalid': boolean;
+    'aria-describedby'?: string;
+    'aria-hidden'?: boolean;
 }
 interface InputProps<Schema> extends FieldProps {
     type?: HTMLInputTypeAttribute;
@@ -30,18 +36,21 @@ interface TextareaProps extends FieldProps {
 }
 declare type InputOptions = {
     type: 'checkbox' | 'radio';
+    hidden?: boolean;
     value?: string;
 } | {
-    type: 'file';
-    value?: never;
-} | {
-    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden' | 'file'>;
+    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden'>;
+    hidden?: boolean;
     value?: never;
 };
 export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: {
     type: 'file';
 }): InputProps<Schema>;
 export declare function input<Schema extends any>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
-export declare function select<Schema>(config: FieldConfig<Schema>): SelectProps;
-export declare function textarea<Schema>(config: FieldConfig<Schema>): TextareaProps;
+export declare function select<Schema>(config: FieldConfig<Schema>, options?: {
+    hidden?: boolean;
+}): SelectProps;
+export declare function textarea<Schema>(config: FieldConfig<Schema>, options?: {
+    hidden?: boolean;
+}): TextareaProps;
 export {};

package/helpers.js

@@ -2,9 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/**
+ * Style to make the input element visually hidden
+ * Based on the `sr-only` class from tailwindcss
+ */
+var hiddenStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  whiteSpace: 'nowrap',
+  border: 0
+};
 function input(config) {
+  var _config$initialError;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
+    id: config.id,
     type: options.type,
     name: config.name,
     form: config.form,
@@ -15,8 +32,15 @@ function input(config) {
     max: config.max,
     step: config.step,
     pattern: config.pattern,
-    multiple: config.multiple
+    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;
   }
@@ -29,31 +53,47 @@ function input(config) {
   }
   return attributes;
 }
-function select(config) {
-  var _config$defaultValue;
+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
+    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;
 }
-function textarea(config) {
-  var _config$defaultValue2;
+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,
     minLength: config.minLength,
     maxLength: config.maxLength,
-    autoFocus: Boolean(config.initialError)
+    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;
   }

package/hooks.d.ts

@@ -1,6 +1,11 @@
-import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
+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>> {
+    /**
+     * If the form id is provided, Id for label,
+     * input and error elements will be derived.
+     */
+    id?: string;
     /**
      * Validation mode. Default to `client-only`.
      */
@@ -20,6 +25,10 @@ export interface FormConfig<Schema extends Record<string, any>> {
      * An object describing the state from the last submission
      */
     state?: Submission<Schema>;
+    /**
+     * An object describing the constraint of each field
+     */
+    constraint?: FieldsetConstraint<Schema>;
     /**
      * Enable native validation before hydation.
      *
@@ -53,10 +62,12 @@ export interface FormConfig<Schema extends Record<string, any>> {
  */
 interface FormProps {
     ref: RefObject<HTMLFormElement>;
+    id?: string;
     onSubmit: (event: FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 }
 interface Form<Schema extends Record<string, any>> {
+    id?: string;
     ref: RefObject<HTMLFormElement>;
     error: string;
     props: FormProps;
@@ -66,9 +77,9 @@ interface Form<Schema extends Record<string, any>> {
  * 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.4.1/packages/conform-react/README.md#useform
+ * @see https://conform.guide/api/react#useform
  */
-export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
+export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): [Form<Schema>, Fieldset<Schema>];
 /**
  * All the information of the field, including state and config.
  */
@@ -107,43 +118,25 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldset
+ * @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>;
-interface CommandButtonProps {
-    name?: string;
-    value?: string;
-    form?: string;
-    formNoValidate: true;
-}
-declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
-    type: Type;
-}>['payload'];
 /**
  * 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.4.1/packages/conform-react/README.md#usefieldlist
+ * @see https://conform.guide/api/react#usefieldlist
  */
-export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
-    Array<{
-        key: string;
-        error: string | undefined;
-        config: FieldConfig<Payload>;
-    }>,
-    {
-        prepend(payload?: ListCommandPayload<Payload, 'prepend'>): CommandButtonProps;
-        append(payload?: ListCommandPayload<Payload, 'append'>): CommandButtonProps;
-        replace(payload: ListCommandPayload<Payload, 'replace'>): CommandButtonProps;
-        remove(payload: ListCommandPayload<Payload, 'remove'>): CommandButtonProps;
-        reorder(payload: ListCommandPayload<Payload, 'reorder'>): CommandButtonProps;
-    }
-];
+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 InputControl<Element extends {
+interface LegacyInputControl<Element extends {
     focus: () => void;
 }> {
     ref: RefObject<Element>;
@@ -161,9 +154,33 @@ 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.4.1/packages/conform-react/README.md#usecontrolledinput
+ * @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, InputControl<Element>];
+} = HTMLInputElement, Schema extends Primitive = Primitive>(config: FieldConfig<Schema>): [ShadowInputProps, LegacyInputControl<Element>];
+interface InputControl {
+    change: (eventOrValue: {
+        target: {
+            value: string;
+        };
+    } | string) => 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<RefShape extends FieldElement = HTMLInputElement>(options?: {
+    onSubmit?: (event: SubmitEvent) => void;
+    onReset?: (event: Event) => void;
+}): [RefObject<RefShape>, InputControl];
+export declare function useInputEvent<RefShape extends Exclude<any, FieldElement>>(options: {
+    getElement: (ref: RefShape | null) => FieldElement | null | undefined;
+    onSubmit?: (event: SubmitEvent) => void;
+    onReset?: (event: Event) => void;
+}): [RefObject<RefShape>, InputControl];
 export {};