@conform-to/react 1.2.0 → 1.2.1

package/context.d.ts

@@ -1,200 +1,72 @@
-import {
-	type Constraint,
-	type Combine,
-	type FormId,
-	type FieldName,
-	type FormContext as BaseFormContext,
-	type FormValue,
-	type FormState,
-	type Intent,
-	type SubscriptionScope,
-	type SubscriptionSubject,
-	type FormOptions as BaseFormOptions,
-} from '@conform-to/dom';
-import {
-	type FormEvent,
-	type ReactElement,
-	type ReactNode,
-	type MutableRefObject,
-} from 'react';
+import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
+import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
-	[K in keyof T]: T[K];
+    [K in keyof T]: T[K];
 } & {};
-export type Primitive =
-	| string
-	| number
-	| bigint
-	| boolean
-	| Date
-	| File
-	| null
-	| undefined;
-export type Metadata<
-	Schema,
-	FormSchema extends Record<string, unknown>,
-	FormError = string[],
-> = {
-	key: string | undefined;
-	id: string;
-	errorId: string;
-	descriptionId: string;
-	name: FieldName<Schema, FormSchema, FormError>;
-	initialValue: FormValue<Schema>;
-	value: FormValue<Schema>;
-	errors: FormError | undefined;
-	allErrors: Record<string, FormError>;
-	valid: boolean;
-	dirty: boolean;
+export type Primitive = string | number | bigint | boolean | Date | File | null | undefined;
+export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormError = string[]> = {
+    key: string | undefined;
+    id: string;
+    errorId: string;
+    descriptionId: string;
+    name: FieldName<Schema, FormSchema, FormError>;
+    initialValue: FormValue<Schema>;
+    value: FormValue<Schema>;
+    errors: FormError | undefined;
+    allErrors: Record<string, FormError>;
+    valid: boolean;
+    dirty: boolean;
 };
-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: Wrapped<FormContext<Schema, FormError>>;
-		status?: 'success' | 'error';
-		getFieldset: () => Required<{
-			[Key in keyof Combine<Schema>]: FieldMetadata<
-				Combine<Schema>[Key],
-				Schema,
-				FormError
-			>;
-		}>;
-		onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-		noValidate: boolean;
-	};
-type SubfieldMetadata<
-	Schema,
-	FormSchema extends Record<string, any>,
-	FormError,
-> = [Schema] extends [Primitive]
-	? {}
-	: [Schema] extends [Array<infer Item> | null | undefined]
-		? {
-				getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
-			}
-		: [Schema] extends [Record<string, any> | null | undefined]
-			? {
-					getFieldset: () => Required<{
-						[Key in keyof Combine<Schema>]: FieldMetadata<
-							Combine<Schema>[Key],
-							FormSchema,
-							FormError
-						>;
-					}>;
-				}
-			: {};
-export type FieldMetadata<
-	Schema = unknown,
-	FormSchema extends Record<string, any> = Record<string, unknown>,
-	FormError = string[],
-> = Metadata<Schema, FormSchema, FormError> &
-	Constraint & {
-		formId: FormId<FormSchema, FormError>;
-	} & SubfieldMetadata<Schema, FormSchema, FormError>;
-export declare const Form: import('react').Context<
-	FormContext<any, string[], any>[]
->;
+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: Wrapped<FormContext<Schema, FormError>>;
+    status?: 'success' | 'error';
+    getFieldset: () => Required<{
+        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], Schema, FormError>;
+    }>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    noValidate: boolean;
+};
+type SubfieldMetadata<Schema, FormSchema extends Record<string, any>, FormError> = [Schema] extends [Primitive] ? {} : [Schema] extends [Array<infer Item> | null | undefined] ? {
+    getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
+} : [Schema] extends [Record<string, any> | null | undefined] ? {
+    getFieldset: () => Required<{
+        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], FormSchema, FormError>;
+    }>;
+} : {};
+export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
+    formId: FormId<FormSchema, FormError>;
+} & SubfieldMetadata<Schema, FormSchema, FormError>;
+export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
 declare const wrappedSymbol: unique symbol;
 export type Wrapped<Type> = {
-	[wrappedSymbol]: 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, FormError, unknown>;
-export declare function useFormState<FormError>(
-	form: FormContext<any, FormError>,
-	subjectRef?: MutableRefObject<SubscriptionSubject>,
-): FormState<FormError>;
+export declare function getWrappedFormContext(context: Wrapped<FormContext>): 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>;
 export declare function FormProvider(props: {
-	context: Wrapped<FormContext<any, any>>;
-	children: ReactNode;
+    context: Wrapped<FormContext<any, any>>;
+    children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
-	formId?: string;
+    formId?: string;
 }): React.ReactElement;
-export declare function useSubjectRef(
-	initialSubject?: SubscriptionSubject,
-): MutableRefObject<SubscriptionSubject>;
-export declare function updateSubjectRef(
-	ref: MutableRefObject<SubscriptionSubject>,
-	subject: 'status' | 'formId',
-): void;
-export declare function updateSubjectRef(
-	ref: MutableRefObject<SubscriptionSubject>,
-	subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>,
-	scope: keyof SubscriptionScope,
-	name: string,
-): void;
-export declare function getMetadata<
-	Schema,
-	FormError,
-	FormSchema extends Record<string, any>,
->(
-	context: FormContext<FormSchema, FormError, any>,
-	subjectRef: MutableRefObject<SubscriptionSubject>,
-	stateSnapshot: FormState<FormError>,
-	name?: FieldName<Schema, FormSchema, FormError>,
-): Metadata<Schema, FormSchema, FormError>;
-export declare function getFieldMetadata<
-	Schema,
-	FormSchema extends Record<string, any>,
-	FormError,
->(
-	context: FormContext<FormSchema, FormError, any>,
-	subjectRef: MutableRefObject<SubscriptionSubject>,
-	stateSnapshot: FormState<FormError>,
-	prefix?: string,
-	key?: string | number,
-): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<
-	Schema extends Record<string, any>,
-	FormError = string[],
-	FormValue = Schema,
->(
-	context: FormContext<Schema, FormError, FormValue>,
-	subjectRef: MutableRefObject<SubscriptionSubject>,
-	stateSnapshot: FormState<FormError>,
-	noValidate: boolean,
-): FormMetadata<Schema, FormError>;
-export type FormOptions<
-	Schema extends Record<string, any> = any,
-	FormError = string[],
-	FormValue = Schema,
-> = BaseFormOptions<Schema, FormError, FormValue> & {
-	/**
-	 * A function to be called before the form is submitted.
-	 */
-	onSubmit?: (
-		event: FormEvent<HTMLFormElement>,
-		context: ReturnType<
-			BaseFormContext<Schema, FormError, FormValue>['submit']
-		>,
-	) => void;
+export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: 'status' | 'formId'): void;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>, scope: keyof SubscriptionScope, name: string): void;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
+    /**
+     * A function to be called before the form is submitted.
+     */
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: ReturnType<BaseFormContext<Schema, FormError, FormValue>['submit']>) => void;
 };
-export type FormContext<
-	Schema extends Record<string, any> = any,
-	FormError = string[],
-	FormValue = Schema,
-> = Omit<
-	BaseFormContext<Schema, FormError, FormValue>,
-	'submit' | 'onUpdate'
-> & {
-	submit: (event: FormEvent<HTMLFormElement>) => void;
-	onUpdate: (
-		options: Partial<FormOptions<Schema, FormError, FormValue>>,
-	) => void;
+export type FormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = Omit<BaseFormContext<Schema, FormError, FormValue>, 'submit' | 'onUpdate'> & {
+    submit: (event: FormEvent<HTMLFormElement>) => void;
+    onUpdate: (options: Partial<FormOptions<Schema, FormError, FormValue>>) => void;
 };
-export declare function createFormContext<
-	Schema extends Record<string, any> = any,
-	FormError = string[],
-	FormValue = Schema,
->(
-	options: FormOptions<Schema, FormError, FormValue>,
-): FormContext<Schema, FormError, FormValue>;
+export declare function createFormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema>(options: FormOptions<Schema, FormError, FormValue>): FormContext<Schema, FormError, FormValue>;
 export {};

package/hooks.d.ts

@@ -1,63 +1,34 @@
 import { type FormId, type FieldName } from '@conform-to/dom';
 import { useEffect } from 'react';
-import {
-	type FormMetadata,
-	type FieldMetadata,
-	type Pretty,
-	type FormOptions,
-} from './context';
+import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions } from './context';
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
  */
 export declare const useSafeLayoutEffect: typeof useEffect;
-export declare function useFormId<
-	Schema extends Record<string, unknown>,
-	FormError,
->(preferredId?: string): FormId<Schema, FormError>;
+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>,
-	FormValue = Schema,
-	FormError = string[],
->(
-	options: Pretty<
-		Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
-			/**
-			 * The form id. If not provided, a random id will be generated.
-			 */
-			id?: string;
-			/**
-			 * Enable constraint validation before the dom is hydated.
-			 *
-			 * Default to `true`.
-			 */
-			defaultNoValidate?: boolean;
-		}
-	>,
-): [
-	FormMetadata<Schema, FormError>,
-	ReturnType<FormMetadata<Schema, FormError>['getFieldset']>,
+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.
+     */
+    id?: string;
+    /**
+     * Enable constraint validation before the dom is hydated.
+     *
+     * Default to `true`.
+     */
+    defaultNoValidate?: boolean;
+}>): [
+    FormMetadata<Schema, FormError>,
+    ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
 ];
-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,
-	FormSchema extends Record<string, unknown> = Record<string, unknown>,
-	FormError = string[],
->(
-	name: FieldName<FieldSchema, FormSchema, FormError>,
-	options?: {
-		formId?: FormId<FormSchema, FormError>;
-	},
-): [
-	FieldMetadata<FieldSchema, FormSchema, FormError>,
-	FormMetadata<FormSchema, FormError>,
+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, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {
+    formId?: FormId<FormSchema, FormError>;
+}): [
+    FieldMetadata<FieldSchema, FormSchema, FormError>,
+    FormMetadata<FormSchema, FormError>
 ];

package/hooks.js

@@ -89,8 +89,8 @@ function useForm(options) {
         var prev = element.dataset.conform;
         var next = stateSnapshot.key[element.name];
         var defaultValue = stateSnapshot.initialValue[element.name];
-        if (prev === 'managed') {
-          // Skip fields managed by useInputControl()
+        if (prev === 'managed' || element.type === 'submit' || element.type === 'reset' || element.type === 'button') {
+          // Skip buttons and fields managed by useInputControl()
           continue;
         }
         if (typeof prev === 'undefined' || prev !== next) {

package/hooks.mjs

@@ -85,8 +85,8 @@ function useForm(options) {
         var prev = element.dataset.conform;
         var next = stateSnapshot.key[element.name];
         var defaultValue = stateSnapshot.initialValue[element.name];
-        if (prev === 'managed') {
-          // Skip fields managed by useInputControl()
+        if (prev === 'managed' || element.type === 'submit' || element.type === 'reset' || element.type === 'button') {
+          // Skip buttons and fields managed by useInputControl()
           continue;
         }
         if (typeof prev === 'undefined' || prev !== next) {

package/index.d.ts

@@ -1,29 +1,5 @@
-export {
-	type Submission,
-	type SubmissionResult,
-	type DefaultValue,
-	type Intent,
-	type FormId,
-	type FieldName,
-	parse,
-} from '@conform-to/dom';
-export {
-	type FieldMetadata,
-	type FormMetadata,
-	FormProvider,
-	FormStateInput,
-} from './context';
+export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
+export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
-export {
-	Control as unstable_Control,
-	useControl as unstable_useControl,
-	useInputControl,
-} from './integrations';
-export {
-	getFormProps,
-	getFieldsetProps,
-	getInputProps,
-	getSelectProps,
-	getTextareaProps,
-	getCollectionProps,
-} from './helpers';
+export { Control as unstable_Control, useControl as unstable_useControl, useInputControl, } from './integrations';
+export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",
@@ -30,7 +30,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.2.0"
+    "@conform-to/dom": "1.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",

package/README

@@ -1,37 +0,0 @@
-
-
- ███████╗  ██████╗  ███╗  ██╗ ████████╗  ██████╗  ███████╗  ███╗ ███╗
-██╔═════╝ ██╔═══██╗ ████╗ ██║ ██╔═════╝ ██╔═══██╗ ██╔═══██╗ ████████║
-██║       ██║   ██║ ██╔██╗██║ ███████╗  ██║   ██║ ███████╔╝ ██╔██╔██║
-██║       ██║   ██║ ██║╚████║ ██╔════╝  ██║   ██║ ██╔═══██╗ ██║╚═╝██║
-╚███████╗ ╚██████╔╝ ██║ ╚███║ ██║       ╚██████╔╝ ██║   ██║ ██║   ██║
- ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
-
-
-Version 1.1.3 / 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 and Next.js.
-
-# Getting Started
-
-Check out the overview and tutorial at our website https://conform.guide
-
-# Features
-
-- Progressive enhancement first APIs
-- Type-safe field inference
-- Fine-grained subscription
-- Built-in accessibility helpers
-- Automatic type coercion with Zod
-
-# Documentation
-
-- Validation: https://conform.guide/validation
-- Nested object and Array: https://conform.guide/complex-structures
-- UI Integrations: https://conform.guide/integration/ui-libraries
-- Intent button: https://conform.guide/intent-button
-- Accessibility Guide: https://conform.guide/accessibility
-
-# 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.