@conform-to/react 1.1.5 → 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/helpers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 type FormControlProps = {
-    key: string | undefined;
+    key?: string;
     id: string;
     name: string;
     form: string;

package/helpers.js

@@ -73,7 +73,6 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
-    key: metadata.key,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

package/helpers.mjs

@@ -69,7 +69,6 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_objectSpread2({
-    key: metadata.key,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

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

@@ -56,10 +56,61 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = context.useSubjectRef();
+  var subjectRef = context.useSubjectRef({
+    key: {
+      // Subscribe to all key changes so it will re-render and
+      // update the field value as soon as the DOM is updated
+      prefix: ['']
+    }
+  });
   var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
+  react.useEffect(() => {
+    var formElement = document.forms.namedItem(formId);
+    if (!formElement) {
+      return;
+    }
+    var getAll = value => {
+      if (typeof value === 'string') {
+        return [value];
+      }
+      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
+        return value;
+      }
+      return undefined;
+    };
+    var get = value => {
+      var _getAll;
+      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
+    };
+    for (var element of formElement.elements) {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+        var prev = element.dataset.conform;
+        var next = stateSnapshot.key[element.name];
+        var defaultValue = stateSnapshot.initialValue[element.name];
+        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) {
+          element.dataset.conform = next;
+          if ('options' in element) {
+            var _getAll2;
+            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
+            for (var option of element.options) {
+              option.selected = value.includes(option.value);
+            }
+          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
+            element.checked = get(defaultValue) === element.value;
+          } else {
+            var _get;
+            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
+          }
+        }
+      }
+    }
+  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/hooks.mjs

@@ -52,10 +52,61 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = useSubjectRef();
+  var subjectRef = useSubjectRef({
+    key: {
+      // Subscribe to all key changes so it will re-render and
+      // update the field value as soon as the DOM is updated
+      prefix: ['']
+    }
+  });
   var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
+  useEffect(() => {
+    var formElement = document.forms.namedItem(formId);
+    if (!formElement) {
+      return;
+    }
+    var getAll = value => {
+      if (typeof value === 'string') {
+        return [value];
+      }
+      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
+        return value;
+      }
+      return undefined;
+    };
+    var get = value => {
+      var _getAll;
+      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
+    };
+    for (var element of formElement.elements) {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+        var prev = element.dataset.conform;
+        var next = stateSnapshot.key[element.name];
+        var defaultValue = stateSnapshot.initialValue[element.name];
+        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) {
+          element.dataset.conform = next;
+          if ('options' in element) {
+            var _getAll2;
+            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
+            for (var option of element.options) {
+              option.selected = value.includes(option.value);
+            }
+          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
+            element.checked = get(defaultValue) === element.value;
+          } else {
+            var _get;
+            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
+          }
+        }
+      }
+    }
+  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

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/integrations.js

@@ -31,7 +31,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'true';
+  select.dataset.conform = 'managed';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -52,7 +52,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'true';
+  return element.dataset.conform === 'managed';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -216,21 +216,8 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
-  var refCallback = element => {
-    var _meta$key;
-    register(element);
-    if (!element) {
-      return;
-    }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
-    }
-  };
   return {
-    register: refCallback,
+    register,
     value,
     change: handleChange,
     focus,

package/integrations.mjs

@@ -27,7 +27,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'true';
+  select.dataset.conform = 'managed';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -48,7 +48,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'true';
+  return element.dataset.conform === 'managed';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -212,21 +212,8 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
-  var refCallback = element => {
-    var _meta$key;
-    register(element);
-    if (!element) {
-      return;
-    }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
-    }
-  };
   return {
-    register: refCallback,
+    register,
     value,
     change: handleChange,
     focus,

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.1.5",
+  "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.1.5"
+    "@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.