@conform-to/react 1.0.0-pre.5 → 1.0.0-pre.7

package/README

@@ -0,0 +1,32 @@
+
+
+ ███████╗  ██████╗  ███╗  ██╗ ████████╗  ██████╗  ███████╗  ███╗ ███╗
+██╔═════╝ ██╔═══██╗ ████╗ ██║ ██╔═════╝ ██╔═══██╗ ██╔═══██╗ ████████║
+██║       ██║   ██║ ██╔██╗██║ ███████╗  ██║   ██║ ███████╔╝ ██╔██╔██║
+██║       ██║   ██║ ██║╚████║ ██╔════╝  ██║   ██║ ██╔═══██╗ ██║╚═╝██║
+╚███████╗ ╚██████╔╝ ██║ ╚███║ ██║       ╚██████╔╝ ██║   ██║ ██║   ██║
+ ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
+
+
+Version 1.0.0-pre.7 / License MIT / Copyright (c) 2024 Edmund Hung
+
+A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix route action and Next.js server actions.
+
+> Getting Started
+
+Check out the overview and tutorial at our website https://conform.guide
+
+> Documentation
+
+The documentation is divided into several sections:
+
+* Overview: https://conform.guide/overview
+* Example Usages: https://conform.guide/examples
+* Complex structures: https://conform.guide/complex-structures
+* UI Integrations: https://conform.guide/integrations
+* Accessibility Guide: https://conform.guide/accessibility
+* API Reference: https://conform.guide/references
+
+> Support
+
+To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.

package/_virtual/_rollupPluginBabelHelpers.js

@@ -37,6 +37,33 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -54,5 +81,7 @@ function _toPropertyKey(arg) {
 
 exports.defineProperty = _defineProperty;
 exports.objectSpread2 = _objectSpread2;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;

package/_virtual/_rollupPluginBabelHelpers.mjs

@@ -33,6 +33,33 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -48,4 +75,4 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/context.d.ts

@@ -1,49 +1,50 @@
-import { type Constraint, type ControlButtonProps, type FormId, type FieldName, type FormContext, type FormControl, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
 import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
     [K in keyof T]: T[K];
 } & {};
 export type Primitive = string | number | boolean | Date | File | null | undefined;
-export type Metadata<Schema, FormError, FormSchema extends Record<string, unknown>> = {
+export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormError = string[]> = {
     key: string | undefined;
     id: string;
     errorId: string;
     descriptionId: string;
-    name: FieldName<Schema, FormError, FormSchema>;
+    name: FieldName<Schema, FormSchema, FormError>;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
     errors: FormError | undefined;
     allErrors: Record<string, FormError>;
-    allValid: boolean;
     valid: boolean;
     dirty: boolean;
 };
-export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, FormError, Schema>, 'id'> & {
+export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, Schema, FormError>, 'id'> & Pick<FormContext<Schema, FormError>, Intent['type']> & {
     id: FormId<Schema, FormError>;
-    context: FormContext<Schema, FormError>;
+    context: Wrapped<FormContext<Schema, FormError>>;
     status?: 'success' | 'error';
-    dispatch(control: FormControl): void;
-    getControlButtonProps(control: FormControl): ControlButtonProps;
     getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError, Schema>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Schema, FormError>;
     };
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
-    onReset: (event: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema = unknown, FormError = string[], FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, FormError, FormSchema> & {
+export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & {
     formId: FormId<FormSchema, FormError>;
     constraint?: Constraint;
     getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
     };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormError>> : never;
+    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
 };
 export declare const Form: import("react").Context<FormContext[]>;
-export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
-export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
+declare const wrappedSymbol: unique symbol;
+export type Wrapped<Type> = {
+    [wrappedSymbol]: Type;
+};
+export declare function getWrappedFormContext(context: Wrapped<FormContext>): FormContext;
+export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, unknown, FormError>;
+export declare function useFormState<FormError>(form: FormContext<any, any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
 export declare function FormProvider(props: {
-    context: FormContext<any, any, any>;
+    context: Wrapped<FormContext<any, any, any>>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
@@ -51,6 +52,7 @@ export declare function FormStateInput(props: {
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormError, FormSchema>): Metadata<Schema, FormError, FormSchema>;
-export declare function getFieldMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormError, FormSchema>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, any>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormValue, FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export {};

package/context.js

@@ -8,6 +8,12 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Form = /*#__PURE__*/react.createContext([]);
+
+// To hide the FormContext type from the public API
+var wrappedSymbol = Symbol('wrapped');
+function getWrappedFormContext(context) {
+  return context[wrappedSymbol];
+}
 function useFormContext(formId) {
   var contexts = react.useContext(Form);
   var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
@@ -22,9 +28,10 @@ function useFormState(form, subjectRef) {
 }
 function FormProvider(props) {
   var forms = react.useContext(Form);
-  var value = react.useMemo(() => [props.context].concat(forms),
+  var context = getWrappedFormContext(props.context);
+  var value = react.useMemo(() => [context].concat(forms),
   // Put the latest form context first
-  [forms, props.context]);
+  [forms, context]);
   return /*#__PURE__*/jsxRuntime.jsx(Form.Provider, {
     value: value,
     children: props.children
@@ -78,18 +85,6 @@ function getMetadata(formId, state, subjectRef) {
     get dirty() {
       return state.dirty[name];
     },
-    get allValid() {
-      var keys = Object.keys(state.error);
-      if (name === '') {
-        return keys.length === 0;
-      }
-      for (var key of Object.keys(state.error)) {
-        if (dom.isPrefix(key, name) && !state.valid[key]) {
-          return false;
-        }
-      }
-      return true;
-    },
     get allErrors() {
       if (name === '') {
         return state.error;
@@ -116,18 +111,15 @@ function getMetadata(formId, state, subjectRef) {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'errors':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
+          updateSubjectRef(subjectRef, name, key, 'name');
           break;
+        case 'errors':
         case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', 'prefix');
-          break;
-        case 'allValid':
-          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
+          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
           break;
       }
       return Reflect.get(target, key, receiver);
@@ -169,17 +161,23 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     get(_, key, receiver) {
       switch (key) {
         case 'context':
-          return context;
+          return {
+            [wrappedSymbol]: context
+          };
         case 'status':
           return state.submissionStatus;
-        case 'dispatch':
-        case 'getControlButtonProps':
+        case 'validate':
+        case 'update':
+        case 'reset':
+        case 'insert':
+        case 'remove':
+        case 'reorder':
           return context[key];
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
-            context.submit(submitEvent);
-            if (submitEvent.defaultPrevented) {
+            var submission = context.submit(submitEvent);
+            if (submission && submission.status !== 'success' && submission.error !== null) {
               event.preventDefault();
             }
           };
@@ -197,6 +195,7 @@ exports.FormStateInput = FormStateInput;
 exports.getFieldMetadata = getFieldMetadata;
 exports.getFormMetadata = getFormMetadata;
 exports.getMetadata = getMetadata;
+exports.getWrappedFormContext = getWrappedFormContext;
 exports.updateSubjectRef = updateSubjectRef;
 exports.useFormContext = useFormContext;
 exports.useFormState = useFormState;

package/context.mjs

@@ -4,6 +4,12 @@ import { useContext, useMemo, createContext, useCallback, useSyncExternalStore,
 import { jsx } from 'react/jsx-runtime';
 
 var Form = /*#__PURE__*/createContext([]);
+
+// To hide the FormContext type from the public API
+var wrappedSymbol = Symbol('wrapped');
+function getWrappedFormContext(context) {
+  return context[wrappedSymbol];
+}
 function useFormContext(formId) {
   var contexts = useContext(Form);
   var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
@@ -18,9 +24,10 @@ function useFormState(form, subjectRef) {
 }
 function FormProvider(props) {
   var forms = useContext(Form);
-  var value = useMemo(() => [props.context].concat(forms),
+  var context = getWrappedFormContext(props.context);
+  var value = useMemo(() => [context].concat(forms),
   // Put the latest form context first
-  [forms, props.context]);
+  [forms, context]);
   return /*#__PURE__*/jsx(Form.Provider, {
     value: value,
     children: props.children
@@ -74,18 +81,6 @@ function getMetadata(formId, state, subjectRef) {
     get dirty() {
       return state.dirty[name];
     },
-    get allValid() {
-      var keys = Object.keys(state.error);
-      if (name === '') {
-        return keys.length === 0;
-      }
-      for (var key of Object.keys(state.error)) {
-        if (isPrefix(key, name) && !state.valid[key]) {
-          return false;
-        }
-      }
-      return true;
-    },
     get allErrors() {
       if (name === '') {
         return state.error;
@@ -112,18 +107,15 @@ function getMetadata(formId, state, subjectRef) {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'errors':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
+          updateSubjectRef(subjectRef, name, key, 'name');
           break;
+        case 'errors':
         case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', 'prefix');
-          break;
-        case 'allValid':
-          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
+          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
           break;
       }
       return Reflect.get(target, key, receiver);
@@ -165,17 +157,23 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     get(_, key, receiver) {
       switch (key) {
         case 'context':
-          return context;
+          return {
+            [wrappedSymbol]: context
+          };
         case 'status':
           return state.submissionStatus;
-        case 'dispatch':
-        case 'getControlButtonProps':
+        case 'validate':
+        case 'update':
+        case 'reset':
+        case 'insert':
+        case 'remove':
+        case 'reorder':
           return context[key];
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
-            context.submit(submitEvent);
-            if (submitEvent.defaultPrevented) {
+            var submission = context.submit(submitEvent);
+            if (submission && submission.status !== 'success' && submission.error !== null) {
               event.preventDefault();
             }
           };
@@ -187,4 +185,4 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   });
 }
 
-export { Form, FormProvider, FormStateInput, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormContext, useFormState, useSubjectRef };
+export { Form, FormProvider, FormStateInput, getFieldMetadata, getFormMetadata, getMetadata, getWrappedFormContext, updateSubjectRef, useFormContext, useFormState, useSubjectRef };

package/helpers.d.ts

@@ -6,7 +6,6 @@ type FormControlProps = {
     name: string;
     form: string;
     required?: boolean;
-    autoFocus?: boolean;
     'aria-describedby'?: string;
     'aria-invalid'?: boolean;
 };
@@ -16,19 +15,19 @@ type FormControlOptions = {
      */
     ariaAttributes?: true;
     /**
-     * Decide whether the aria attributes should be based on `field.valid` or `field.allValid`.
-     * @default 'field'
+     * Decide whether the aria-invalid attributes should be based on `meta.errors` or `meta.allErrors`.
+     * @default 'errors'
      */
-    ariaInvalid?: 'all' | 'field';
+    ariaInvalid?: 'errors' | 'allErrors';
     /**
-     * Assign additional `id` to the `aria-describedby` attribute. If `true`, it will use the `descriptionId` from the metadata.
+     * Assign additional `id` to the `aria-describedby` attribute.
      */
-    ariaDescribedBy?: boolean | string;
+    ariaDescribedBy?: string;
 } | {
     ariaAttributes: false;
 };
 type InputProps = Pretty<FormControlProps & {
-    type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
     minLength?: number;
     maxLength?: number;
     min?: string | number;
@@ -48,7 +47,7 @@ type InputOptions = Pretty<FormControlOptions & ({
      */
     value?: string | boolean;
 } | {
-    type?: Exclude<InputProps['type'], 'checkbox' | 'radio'>;
+    type: Exclude<InputProps['type'], 'checkbox' | 'radio'>;
     /**
      * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
      */
@@ -130,7 +129,7 @@ export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Sche
  * @example
  * ```tsx
  * // To setup an uncontrolled input
- * <input {...getInputProps(metadata)} />
+ * <input {...getInputProps(metadata, { type: 'text' })} />
  * // To setup an uncontrolled checkbox
  * <input {...getInputProps(metadata, { type: 'checkbox' })} />
  * // To setup an input without defaultValue
@@ -139,10 +138,7 @@ export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Sche
  * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
  * ```
  */
-export declare function getInputProps<Schema extends Exclude<Primitive, File>>(metadata: FieldMetadata<Schema, any, any>, options?: InputOptions): InputProps;
-export declare function getInputProps<Schema extends File | File[] | null | undefined>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
-    type: 'file';
-}): InputProps;
+export declare function getInputProps<Schema extends Primitive | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
 /**
  * Derives the properties of a select element based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`

package/helpers.js

@@ -25,8 +25,8 @@ function getAriaAttributes(metadata) {
   if (typeof options.ariaAttributes !== 'undefined' && !options.ariaAttributes) {
     return {};
   }
-  var invalid = options.ariaInvalid === 'all' ? !metadata.allValid : !metadata.valid;
-  var ariaDescribedBy = typeof options.ariaDescribedBy === 'string' ? options.ariaDescribedBy : options.ariaDescribedBy ? metadata.descriptionId : undefined;
+  var invalid = options.ariaInvalid === 'allErrors' ? !metadata.valid : typeof metadata.errors !== 'undefined';
+  var ariaDescribedBy = options.ariaDescribedBy;
   return simplify({
     'aria-invalid': invalid || undefined,
     'aria-describedby': invalid ? "".concat(metadata.errorId, " ").concat(ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : '').trim() : ariaDescribedBy
@@ -75,8 +75,7 @@ function getFormControlProps(metadata, options) {
   var _metadata$constraint;
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined,
-    autoFocus: !metadata.valid || undefined
+    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -91,7 +90,7 @@ function getFormControlProps(metadata, options) {
  * @example
  * ```tsx
  * // To setup an uncontrolled input
- * <input {...getInputProps(metadata)} />
+ * <input {...getInputProps(metadata, { type: 'text' })} />
  * // To setup an uncontrolled checkbox
  * <input {...getInputProps(metadata, { type: 'checkbox' })} />
  * // To setup an input without defaultValue
@@ -100,10 +99,8 @@ function getFormControlProps(metadata, options) {
  * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
  * ```
  */
-
-function getInputProps(metadata) {
+function getInputProps(metadata, options) {
   var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
     minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,

package/helpers.mjs

@@ -21,8 +21,8 @@ function getAriaAttributes(metadata) {
   if (typeof options.ariaAttributes !== 'undefined' && !options.ariaAttributes) {
     return {};
   }
-  var invalid = options.ariaInvalid === 'all' ? !metadata.allValid : !metadata.valid;
-  var ariaDescribedBy = typeof options.ariaDescribedBy === 'string' ? options.ariaDescribedBy : options.ariaDescribedBy ? metadata.descriptionId : undefined;
+  var invalid = options.ariaInvalid === 'allErrors' ? !metadata.valid : typeof metadata.errors !== 'undefined';
+  var ariaDescribedBy = options.ariaDescribedBy;
   return simplify({
     'aria-invalid': invalid || undefined,
     'aria-describedby': invalid ? "".concat(metadata.errorId, " ").concat(ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : '').trim() : ariaDescribedBy
@@ -71,8 +71,7 @@ function getFormControlProps(metadata, options) {
   var _metadata$constraint;
   return simplify(_objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined,
-    autoFocus: !metadata.valid || undefined
+    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -87,7 +86,7 @@ function getFormControlProps(metadata, options) {
  * @example
  * ```tsx
  * // To setup an uncontrolled input
- * <input {...getInputProps(metadata)} />
+ * <input {...getInputProps(metadata, { type: 'text' })} />
  * // To setup an uncontrolled checkbox
  * <input {...getInputProps(metadata, { type: 'checkbox' })} />
  * // To setup an input without defaultValue
@@ -96,10 +95,8 @@ function getFormControlProps(metadata, options) {
  * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
  * ```
  */
-
-function getInputProps(metadata) {
+function getInputProps(metadata, options) {
   var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
     minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,

package/hooks.d.ts

@@ -8,7 +8,7 @@ import { type FormMetadata, type FieldMetadata, type Pretty } from './context';
 export declare const useSafeLayoutEffect: typeof useEffect;
 export declare function useFormId<Schema extends Record<string, unknown>, FormError>(preferredId?: string): FormId<Schema, FormError>;
 export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
-export declare function useForm<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
+export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
     /**
      * The form id. If not provided, a random id will be generated.
      */
@@ -23,12 +23,12 @@ export declare function useForm<Schema extends Record<string, any>, FormError =
     FormMetadata<Schema, FormError>,
     ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError>(formId: FormId<Schema, FormError>, options?: {
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
 }): FormMetadata<Schema, FormError>;
-export declare function useField<FieldSchema, FormError = string[], FormSchema extends Record<string, unknown> = Record<string, unknown>>(name: FieldName<FieldSchema, FormError, FormSchema>, options?: {
+export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {
     formId?: FormId<FormSchema, FormError>;
 }): [
-    FieldMetadata<FieldSchema, FormError, FormSchema>,
+    FieldMetadata<FieldSchema, FormSchema, FormError>,
     FormMetadata<FormSchema, FormError>
 ];

package/hooks.js

@@ -7,6 +7,8 @@ var dom = require('@conform-to/dom');
 var react = require('react');
 var context = require('./context.js');
 
+var _excluded = ["id"];
+
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
@@ -30,33 +32,26 @@ function useNoValidate() {
   return noValidate;
 }
 function useForm(options) {
-  var formId = useFormId(options.id);
-  var [context$1] = react.useState(() => dom.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
+  var {
+      id
+    } = options,
+    formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
+  var formId = useFormId(id);
+  var [context$1] = react.useState(() => dom.unstable_createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
     formId
   })));
-  var optionsRef = react.useRef(options);
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', context$1.input);
-    document.addEventListener('focusout', context$1.blur);
-    document.addEventListener('reset', context$1.reset);
+    document.addEventListener('input', context$1.onInput);
+    document.addEventListener('focusout', context$1.onBlur);
+    document.addEventListener('reset', context$1.onReset);
     return () => {
-      document.removeEventListener('input', context$1.input);
-      document.removeEventListener('focusout', context$1.blur);
-      document.removeEventListener('reset', context$1.reset);
+      document.removeEventListener('input', context$1.onInput);
+      document.removeEventListener('focusout', context$1.onBlur);
+      document.removeEventListener('reset', context$1.onReset);
     };
   }, [context$1]);
   useSafeLayoutEffect(() => {
-    if (options.lastResult === optionsRef.current.lastResult) {
-      // If there is no change, do nothing
-      return;
-    }
-    if (options.lastResult) {
-      context$1.report(options.lastResult);
-    }
-  }, [context$1, options.lastResult]);
-  useSafeLayoutEffect(() => {
-    optionsRef.current = options;
-    context$1.update(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
+    context$1.onUpdate(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
       formId
     }));
   });