@conform-to/react 1.0.2 → 1.0.3

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.2 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.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.
 

package/context.d.ts

@@ -27,11 +27,11 @@ export type FormMetadata<Schema extends Record<string, unknown> = Record<string,
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-type SubfieldMetadata<Schema, FormSchema extends Record<string, any>, FormError, CombinedSchema = Combine<Schema>> = Exclude<Schema, undefined> extends Array<infer Item> ? {
+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>>;
-} : Exclude<Schema, undefined> extends Record<string, unknown> ? {
+} : [Schema] extends [Record<string, any> | null | undefined] ? {
     getFieldset: () => Required<{
-        [Key in keyof CombinedSchema]: FieldMetadata<CombinedSchema[Key], FormSchema, FormError>;
+        [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 & {

package/helpers.d.ts

@@ -125,7 +125,7 @@ export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Sche
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-input-props
+ * @see https://conform.guide/api/react/getInputProps
  * @example
  * ```tsx
  * // To setup an uncontrolled input
@@ -145,7 +145,7 @@ export declare function getInputProps<Schema>(metadata: FieldMetadata<Schema, an
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-select-props
+ * @see https://conform.guide/api/react/getSelectProps
  * @example
  * ```tsx
  * // To setup an uncontrolled select
@@ -161,7 +161,7 @@ export declare function getSelectProps<Schema>(metadata: FieldMetadata<Schema, a
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * // To setup an uncontrolled textarea
@@ -175,7 +175,7 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * <fieldset>
@@ -201,7 +201,7 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
      */
     options: string[];
     /**
-     * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
+     * Decide whether defaultValue should be returned. Pass `false` if you want to manage the value yourself.
      */
     value?: boolean;
 }>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;

package/helpers.js

@@ -85,7 +85,7 @@ function getFormControlProps(metadata, options) {
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-input-props
+ * @see https://conform.guide/api/react/getInputProps
  * @example
  * ```tsx
  * // To setup an uncontrolled input
@@ -126,7 +126,7 @@ function getInputProps(metadata, options) {
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-select-props
+ * @see https://conform.guide/api/react/getSelectProps
  * @example
  * ```tsx
  * // To setup an uncontrolled select
@@ -153,7 +153,7 @@ function getSelectProps(metadata) {
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * // To setup an uncontrolled textarea
@@ -179,7 +179,7 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * <fieldset>

package/helpers.mjs

@@ -81,7 +81,7 @@ function getFormControlProps(metadata, options) {
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-input-props
+ * @see https://conform.guide/api/react/getInputProps
  * @example
  * ```tsx
  * // To setup an uncontrolled input
@@ -122,7 +122,7 @@ function getInputProps(metadata, options) {
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-select-props
+ * @see https://conform.guide/api/react/getSelectProps
  * @example
  * ```tsx
  * // To setup an uncontrolled select
@@ -149,7 +149,7 @@ function getSelectProps(metadata) {
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * // To setup an uncontrolled textarea
@@ -175,7 +175,7 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/get-textarea-props
+ * @see https://conform.guide/api/react/getTextareaProps
  * @example
  * ```tsx
  * <fieldset>

package/hooks.d.ts

@@ -8,7 +8,7 @@ import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions }
 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>, FormValue = Schema, FormError = string[]>(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' | 'onSchedule'> & {
     /**
      * The form id. If not provided, a random id will be generated.
      */

package/hooks.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var react = require('react');
+var reactDom = require('react-dom');
 var context = require('./context.js');
 
 var _excluded = ["id"];
@@ -37,6 +38,7 @@ function useForm(options) {
     formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
   var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+    onSchedule: callback => reactDom.flushSync(callback),
     formId
   })));
   useSafeLayoutEffect(() => {

package/hooks.mjs

@@ -1,5 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { useState, useEffect, useLayoutEffect, useId } from 'react';
+import { flushSync } from 'react-dom';
 import { createFormContext, useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
 
 var _excluded = ["id"];
@@ -33,6 +34,7 @@ function useForm(options) {
     formConfig = _objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
   var [context] = useState(() => createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
+    onSchedule: callback => flushSync(callback),
     formId
   })));
   useSafeLayoutEffect(() => {

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,14 +30,16 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "1.0.2"
+		"@conform-to/dom": "1.0.3"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.43",
+		"@types/react": "^18.2.64",
+		"@types/react-dom": "^18.2.20",
 		"react": "^18.2.0"
 	},
 	"peerDependencies": {
-		"react": ">=18"
+		"react": ">=18",
+		"react-dom": ">=18"
 	},
 	"keywords": [
 		"constraint-validation",