@contember/react-form 2.0.0-alpha.4 → 2.0.0-alpha.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-form",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.40",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -11,28 +11,22 @@
         "types": "./dist/types/index.d.ts",
         "development": "./dist/development/index.js",
         "production": "./dist/production/index.js",
+        "typescript": "./src/index.ts",
         "default": "./dist/production/index.js"
       },
       "require": {
         "types": "./dist/types/index.d.ts",
         "development": "./dist/development/index.cjs",
         "production": "./dist/production/index.cjs",
+        "typescript": "./src/index.ts",
         "default": "./dist/production/index.cjs"
       }
     }
   },
-  "files": [
-    "dist/",
-    "src/"
-  ],
   "typings": "./dist/types/index.d.ts",
   "scripts": {
-    "build": "yarn build:js:dev && yarn build:js:prod",
-    "build:js:dev": "NODE_ENV=development vite build --mode development",
-    "build:js:prod": "vite build --mode production",
     "ae:build": "api-extractor run --local",
-    "ae:test": "api-extractor run",
-    "test": "vitest"
+    "ae:test": "api-extractor run"
   },
   "repository": {
     "type": "git",
@@ -40,10 +34,10 @@
     "directory": "packages/react-form"
   },
   "dependencies": {
-    "@contember/react-binding": "2.0.0-alpha.4",
-    "@contember/react-utils": "2.0.0-alpha.4",
-    "@contember/utilities": "2.0.0-alpha.4",
-    "@radix-ui/react-slot": "^1.0.2"
+    "@contember/react-binding": "2.0.0-alpha.40",
+    "@contember/react-utils": "2.0.0-alpha.40",
+    "@contember/utilities": "2.0.0-alpha.40",
+    "@radix-ui/react-slot": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -52,6 +46,5 @@
   "devDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
-  },
-  "stableVersion": "0.0.0"
-}
+  }
+}

package/src/components/FormCheckbox.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
 import { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'
-import { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'
-import { useFormError, useFormFieldId } from '../contexts'
+import {
+	Component,
+	Field,
+	OptionallyVariableFieldValue,
+	SugaredRelativeSingleField,
+	TreeNodeEnvironmentFactory,
+	useField,
+} from '@contember/react-binding'
+import { useFormFieldState } from '../contexts'
 import { dataAttribute } from '@contember/utilities'
 import { useFormInputValidationHandler } from '../hooks'
 import { Slot } from '@radix-ui/react-slot'
@@ -16,10 +23,13 @@ export interface FormCheckboxProps {
 }
 
 export const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {
-	const id = useFormFieldId()
 	const accessor = useField<boolean>(field)
+
+	const formState = useFormFieldState()
+	const id = formState?.htmlId
+	const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0
+	const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges
 	const value = accessor.value
-	const errors = useFormError() ?? accessor.errors?.errors ?? []
 	const accessorGetter = accessor.getAccessor
 	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
 	const [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)
@@ -32,23 +42,24 @@ export const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing,
 	}, [checkboxRef, ref, value])
 
 	return (
-			<SlotInput
-				ref={it => {
-					(ref as any).current = checkboxRef
-					setCheckboxRef(it)
-				}}
-				type="checkbox"
-				checked={accessor.value === true}
-				data-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}
-				data-invalid={dataAttribute(errors.length > 0)}
-				id={`${id}-input`}
-				onFocus={onFocus}
-				onBlur={onBlur}
-				onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
-					accessorGetter().updateValue(e.target.checked)
-				}, [accessorGetter])}
-				{...props}
-			/>
+		<SlotInput
+			ref={it => {
+				(ref as any).current = checkboxRef
+				setCheckboxRef(it)
+			}}
+			type="checkbox"
+			checked={accessor.value === true}
+			data-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}
+			data-invalid={dataAttribute(hasErrors)}
+			data-dirty={dataAttribute(dirty)}
+			id={id ? `${id}-input` : undefined}
+			onFocus={onFocus}
+			onBlur={onBlur}
+			onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
+				accessorGetter().updateValue(e.target.checked)
+			}, [accessorGetter])}
+			{...props}
+		/>
 	)
 }, ({ field, isNonbearing, defaultValue }, env) => {
 	const node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()

package/src/components/FormError.tsx

@@ -1,21 +1,21 @@
 import { cloneElement, ReactElement, ReactNode, useMemo } from 'react'
-import { useFormError, useFormFieldId } from '../contexts'
+import { useFormFieldState } from '../contexts'
 import { BindingError, ErrorAccessor } from '@contember/react-binding'
 
 export const FormError = ({ children, formatter }: {
 	formatter: (errors: ErrorAccessor.Error[]) => ReactNode[]
 	children: ReactElement
 }) => {
-	const errors = useFormError()
-	const id = useFormFieldId()
-	const formatted = useMemo(() => formatter(errors ?? []), [errors, formatter])
-	if (errors === undefined || id === undefined) {
+	const formState = useFormFieldState()
+	if (!formState) {
 		throw new BindingError('FormError must be used inside a FormField')
 	}
+	const { errors, htmlId } = formState
+	const formatted = useMemo(() => formatter(errors ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [errors, formatter])
 	return formatted.map((it, index) => {
 		return cloneElement(children, {
 			key: index,
-			...{ id: `${id}-error-${index}` },
+			...(htmlId ? { id: `${htmlId}-error-${index}` } : {}),
 			children: it,
 		})
 	})

package/src/components/FormFieldScope.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react'
-import { useId } from 'react'
-import { FormErrorContext, FormFieldIdContext } from '../contexts'
+import { useMemo } from 'react'
 import { SugaredRelativeSingleField, useField } from '@contember/react-binding'
-
-const emptyArr: [] = []
+import { FormFieldStateProvider } from './FormFieldStateProvider'
 
 export type FormFieldScopeProps = {
 	field: SugaredRelativeSingleField['field']
 	children: React.ReactNode
+	required?: boolean
 }
 
-export const FormFieldScope = ({ field, children }: FormFieldScopeProps) => {
-	const id = useId()
+export const FormFieldScope = ({ field, children, required }: FormFieldScopeProps) => {
 	const fieldAccessor = useField({ field })
-	const errors = fieldAccessor.errors?.errors
+	const entityName = fieldAccessor.getParent().name
+	const fieldName = fieldAccessor.fieldName
+	const enumName = fieldAccessor.schema.enumName ?? undefined
+	const fieldInfo = useMemo(() => ({ entityName, fieldName, enumName }), [entityName, fieldName, enumName])
+
 	return (
-		<FormFieldIdContext.Provider value={id}>
-			<FormErrorContext.Provider value={errors ?? emptyArr}>
-				{children}
-			</FormErrorContext.Provider>
-		</FormFieldIdContext.Provider>
+		<FormFieldStateProvider
+			errors={fieldAccessor.errors?.errors}
+			required={required ?? !fieldAccessor.schema.nullable}
+			dirty={fieldAccessor.hasUnpersistedChanges}
+			field={fieldInfo}
+		>
+			{children}
+		</FormFieldStateProvider>
 	)
 }

package/src/components/FormFieldStateProvider.tsx

@@ -0,0 +1,71 @@
+import { ErrorAccessor } from '@contember/react-binding'
+import { useEffect, useId, useMemo } from 'react'
+import { FormFieldStateContext, useFormFieldState } from '../contexts'
+import { FormFieldState } from '../types'
+
+const emptyArr: [] = []
+
+export type FormFieldStateProvider =
+	& Partial<FormFieldState>
+	& {
+		children: React.ReactNode
+	}
+
+export const FormFieldStateProvider = ({ children, required = false, errors = emptyArr, dirty = false, htmlId, field }: FormFieldStateProvider) => {
+	const generatedId = useId()
+	htmlId ??= generatedId
+	const value = useMemo(() => ({ htmlId, required, errors, dirty, field }), [htmlId, required, errors, dirty, field])
+	return <FormFieldStateContext.Provider value={value}>{children}</FormFieldStateContext.Provider>
+}
+
+/**
+ * BC for
+ * 	<FormFieldIdContext.Provider value={id}>
+ * 	<FormErrorContext.Provider value={[]}>
+ */
+
+/**
+ * @deprecated use `FormFieldStateProvider` instead
+ */
+export const FormFieldIdContext = {
+	/**
+	 * @deprecated use `FormFieldStateProvider` instead
+	 */
+	Provider: ({ children, value }: { children: React.ReactNode; value: string }) => {
+		const state = useFormFieldState()
+		if (import.meta.env.DEV) {
+			// eslint-disable-next-line react-hooks/rules-of-hooks
+			useEffect(() => {
+				console.warn('FormFieldIdContext.Provider is deprecated, use FormFieldStateProvider instead')
+			}, [])
+		}
+		return (
+			<FormFieldStateProvider {...state} htmlId={value}>
+				{children}
+			</FormFieldStateProvider>
+		)
+	},
+}
+
+/**
+ * @deprecated use `FormFieldStateProvider` instead
+ */
+export const FormErrorContext = {
+	/**
+	 * @deprecated use `FormFieldStateProvider` instead
+	 */
+	Provider: ({ children, value }: { children: React.ReactNode; value: ErrorAccessor.Error[] }) => {
+		const state = useFormFieldState()
+		if (import.meta.env.DEV) {
+			// eslint-disable-next-line react-hooks/rules-of-hooks
+			useEffect(() => {
+				console.warn('FormErrorContext.Provider is deprecated, use FormFieldStateProvider instead')
+			}, [])
+		}
+		return (
+			<FormFieldStateProvider {...state} errors={value}>
+				{children}
+			</FormFieldStateProvider>
+		)
+	},
+}

package/src/components/FormHasManyRelationScope.tsx

@@ -1,24 +1,32 @@
-import { SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'
+import { HasManyRelationMarker, SugaredRelativeEntityList, useEntityList } from '@contember/react-binding'
 import * as React from 'react'
-import { useId } from 'react'
-import { FormErrorContext, FormFieldIdContext } from '../contexts'
-
-const emptyArr: [] = []
+import { FormFieldStateProvider } from './FormFieldStateProvider'
+import { useMemo } from 'react'
 
 export type FormHasManyRelationScopeProps = {
 	field: SugaredRelativeEntityList['field']
+	orderBy?: SugaredRelativeEntityList['orderBy']
+	limit?: SugaredRelativeEntityList['limit']
+	offset?: SugaredRelativeEntityList['offset']
 	children: React.ReactNode
+	required?: boolean
 }
 
-export const FormHasManyRelationScope = ({ field, children }: FormHasManyRelationScopeProps) => {
-	const id = useId()
-	const entityRelation = useEntityList({ field })
-	const errors = entityRelation.errors?.errors
+export const FormHasManyRelationScope = ({ children, required, ...props }: FormHasManyRelationScopeProps) => {
+	const entityRelation = useEntityList(props)
+	const entityName = entityRelation.getParent()!.name
+	const marker = entityRelation.getMarker() as HasManyRelationMarker
+	const fieldName = marker.parameters.field
+	const fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])
+
 	return (
-		<FormFieldIdContext.Provider value={id}>
-			<FormErrorContext.Provider value={errors ?? emptyArr}>
-				{children}
-			</FormErrorContext.Provider>
-		</FormFieldIdContext.Provider>
+		<FormFieldStateProvider
+			errors={entityRelation.errors?.errors}
+			dirty={entityRelation.hasUnpersistedChanges}
+			required={required}
+			field={fieldInfo}
+		>
+			{children}
+		</FormFieldStateProvider>
 	)
 }

package/src/components/FormHasOneRelationScope.tsx

@@ -1,24 +1,28 @@
 import * as React from 'react'
-import { useId } from 'react'
-import { FormErrorContext, FormFieldIdContext } from '../contexts'
-import { SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'
-
-const emptyArr: [] = []
+import { HasOneRelationMarker, SugaredRelativeSingleEntity, useEntity } from '@contember/react-binding'
+import { FormFieldStateProvider } from './FormFieldStateProvider'
+import { useMemo } from 'react'
 
 export type FormHasOneRelationScopeProps = {
 	field: SugaredRelativeSingleEntity['field']
 	children: React.ReactNode
+	required?: boolean
 }
 
-export const FormHasOneRelationScope = ({ field, children }: FormHasOneRelationScopeProps) => {
-	const id = useId()
+export const FormHasOneRelationScope = ({ field, children, required }: FormHasOneRelationScopeProps) => {
 	const entityRelation = useEntity({ field })
-	const errors = entityRelation.errors?.errors
+	const marker = entityRelation.getMarker() as HasOneRelationMarker
+	const fieldName = marker.parameters.field
+	const entityName = entityRelation.getParent()!.name
+	const fieldInfo = useMemo(() => ({ entityName, fieldName }), [entityName, fieldName])
 	return (
-		<FormFieldIdContext.Provider value={id}>
-			<FormErrorContext.Provider value={errors ?? emptyArr}>
-				{children}
-			</FormErrorContext.Provider>
-		</FormFieldIdContext.Provider>
+		<FormFieldStateProvider
+			errors={entityRelation.errors?.errors}
+			dirty={entityRelation.hasUnpersistedChanges}
+			required={required}
+			field={fieldInfo}
+		>
+			{children}
+		</FormFieldStateProvider>
 	)
 }

package/src/components/FormInput.tsx

@@ -4,7 +4,7 @@ import { Slot } from '@radix-ui/react-slot'
 import { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'
 import { dataAttribute } from '@contember/utilities'
 import { useFormInputHandler } from '../internal/useFormInputHandler'
-import { useFormError, useFormFieldId } from '../contexts'
+import { useFormFieldState } from '../contexts'
 import { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'
 import { FormInputHandler } from '../types'
 
@@ -21,9 +21,14 @@ export interface FormInputProps {
 }
 
 export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
-	const id = useFormFieldId()
 	const accessor = useField(field)
-	const errors = useFormError() ?? accessor.errors?.errors ?? []
+
+	const formState = useFormFieldState()
+	const id = formState?.htmlId
+	const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0
+	const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges
+	const required = formState?.required ?? !accessor.schema.nullable
+
 	const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })
 	const accessorGetter = accessor.getAccessor
 	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
@@ -32,7 +37,9 @@ export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defau
 		<SlotInput
 			ref={ref}
 			value={formatValue(accessor.value)}
-			data-invalid={dataAttribute(errors.length > 0)}
+			data-invalid={dataAttribute(hasErrors)}
+			data-dirty={dataAttribute(dirty)}
+			data-required={dataAttribute(required)}
 			onFocus={onFocus}
 			onBlur={onBlur}
 			onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
@@ -40,7 +47,7 @@ export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defau
 			}, [accessorGetter, parseValue])}
 			{...defaultInputProps}
 			id={id ? `${id}-input` : undefined}
-			required={!accessor.schema.nullable}
+			required={required}
 			{...props}
 		/>
 	)

package/src/components/FormLabel.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { dataAttribute } from '@contember/utilities'
-import { useFormError, useFormFieldId } from '../contexts'
+import { useFormFieldState } from '../contexts'
 import { BindingError } from '@contember/react-binding'
 
 export const FormLabel = (props: {
 	children: React.ReactElement
 }) => {
-	const id = useFormFieldId()
-	const errors = useFormError()
-	if (errors === undefined || id === undefined) {
-		throw new BindingError('FormLabel must be used inside a FormField')
+	const formState = useFormFieldState()
+	if (!formState) {
+		throw new BindingError('FormError must be used inside a FormField')
 	}
+	const { errors, htmlId, dirty, required } = formState
 	return (
 		<Slot
 			data-invalid={dataAttribute(errors.length > 0)}
-			{...{ htmlFor: `${id}-input` }}
+			data-dirty={dataAttribute(dirty)}
+			data-required={dataAttribute(required)}
+			{...(htmlId ? { htmlFor: `${htmlId}-input` } : {})}
 			{...props}
 		/>
 	)

package/src/components/FormRadioInput.tsx

@@ -1,45 +1,52 @@
 import { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, useField } from '@contember/react-binding'
+import { dataAttribute } from '@contember/utilities'
+import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 import { ChangeEventHandler, useCallback } from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { useFormError, useFormFieldId } from '../contexts'
+import { useFormFieldState } from '../contexts'
 import { useFormInputValidationHandler } from '../hooks'
-import { dataAttribute } from '@contember/utilities'
 
 const SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>
 
 export interface FormRadioItemProps {
 	field: SugaredRelativeSingleField['field']
-	value: string
+	value: string | null | number | boolean
 	isNonbearing?: boolean
 	defaultValue?: OptionallyVariableFieldValue
 	children: React.ReactNode
 }
 
 export const FormRadioInput = Component<FormRadioItemProps>(({ field, value, defaultValue, isNonbearing, ...props }) => {
-	const id = useFormFieldId()
-	const accessor = useField<string>(field)
-	const errors = useFormError() ?? accessor.errors?.errors ?? []
+	const accessor = useField(field)
+
+	const formState = useFormFieldState()
+	const id = formState?.htmlId
+	const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0
+	const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges
+
 	const accessorGetter = accessor.getAccessor
 	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
 
+	const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
+		accessorGetter().updateValue(value)
+	}, [accessorGetter, value])
+
 	return (
 		<SlotInput
 			ref={ref}
 			type="radio"
-			value={value}
+			value={typeof value === 'string' ? value : undefined}
 			checked={accessor.value === value}
-			data-invalid={dataAttribute(errors.length > 0)}
-			name={id + '-input'}
-			id={`${id}-input-${value}`}
+			data-invalid={dataAttribute(hasErrors)}
+			data-dirty={dataAttribute(dirty)}
+			name={id ? id + '-input' : undefined}
+			id={id ? `${id}-input` : undefined}
 			onFocus={onFocus}
 			onBlur={onBlur}
-			onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {
-				accessorGetter().updateValue(value)
-			}, [accessorGetter, value])}
+			onChange={handleChange}
 			{...props}
 		/>
 	)
 }, ({ field, isNonbearing, defaultValue }) => {
-	return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />
+	return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue}/>
 })

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './FormError'
 export * from './FormCheckbox'
 export * from './FormFieldScope'
+export * from './FormFieldStateProvider'
 export * from './FormHasOneRelationScope'
 export * from './FormHasManyRelationScope'
 export * from './FormInput'

package/src/contexts.tsx

@@ -0,0 +1,18 @@
+import { createContext } from '@contember/react-utils'
+import { FormFieldState } from './types'
+
+
+const FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)
+export const FormFieldStateContext = FormFieldStateContext_[0]
+export const useFormFieldState = FormFieldStateContext_[1]
+
+
+/**
+ * @deprecated use `useFormState` instead
+ */
+export const useFormFieldId = () => useFormFieldState()?.htmlId
+
+/**
+ * @deprecated use `useFormState` instead
+ */
+export const useFormError = () => useFormFieldState()?.errors

package/src/hooks/useFormInputValidationHandler.tsx

@@ -25,9 +25,12 @@ export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
 		const previousMessage = validationMessage.current
 		validationMessage.current = message
 
+		const accessor = accessorGetter()
 		// if there is no message, we want to clear the error
 		if (!message) {
-			accessorGetter().clearErrors()
+			if (previousMessage) {
+				clearSpecificError(accessor, previousMessage)
+			}
 			return
 		}
 		if (message === previousMessage) {
@@ -41,8 +44,8 @@ export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
 		// if the input is not focused, we want to show the error message
 		// also, even the input is focused, we want to replace the previous message
 		if (!focus || !!previousMessage) {
-			accessorGetter().clearErrors()
-			accessorGetter().addError(message)
+			accessor.clearErrors()
+			accessor.addError(message)
 		}
 	})
 
@@ -60,3 +63,10 @@ export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
 		}, [accessorGetter]),
 	}
 }
+
+const clearSpecificError = (field: FieldAccessor<any>, message: string) => {
+	const errors = field.errors?.errors ?? []
+	const error = errors.filter(e => !(e.type === 'validation' && e.message === message))
+	field.clearErrors()
+	error.forEach(e => field.addError(e))
+}

package/src/tsconfig.json

@@ -1,11 +1,14 @@
 {
 	"extends": "../../../tsconfig.settings.json",
 	"compilerOptions": {
-		"outDir": "../dist/types"
+		"outDir": "../dist/types",
+		"types": [
+			"vite/client"
+		]
 	},
 	"references": [
 		{ "path": "../../react-binding/src" },
 		{ "path": "../../react-utils/src" },
-		{ "path": "../../utilities/src" },
+		{ "path": "../../utilities/src" }
 	]
 }

package/src/types/index.ts

@@ -1,3 +1,4 @@
+import { ErrorAccessor } from '@contember/react-binding'
 import * as React from 'react'
 
 export type FormInputHandler = {
@@ -5,3 +6,15 @@ export type FormInputHandler = {
 	formatValue: (value: any) => string
 	defaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
+
+export type FormFieldState = {
+	htmlId: string
+	errors: ErrorAccessor.Error[]
+	required: boolean
+	dirty: boolean
+	field?: {
+		entityName: string
+		fieldName: string
+		enumName?: string
+	}
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"include": [],
+	"references": [
+		{ "path": "./src" },
+	],
+}

package/tsdoc.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+	"extends": [
+		"../../tsdoc.json"
+	]
+}

package/dist/development/components/FormCheckbox.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormCheckbox.cjs","sources":["../../../src/components/FormCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ChangeEventHandler, ReactElement, useCallback, useEffect } from 'react'\nimport { Component, Field, OptionallyVariableFieldValue, SugaredRelativeSingleField, TreeNodeEnvironmentFactory, useField } from '@contember/react-binding'\nimport { useFormError, useFormFieldId } from '../contexts'\nimport { dataAttribute } from '@contember/utilities'\nimport { useFormInputValidationHandler } from '../hooks'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface FormCheckboxProps {\n\tfield: SugaredRelativeSingleField['field']\n\tisNonbearing?: boolean\n\tdefaultValue?: OptionallyVariableFieldValue\n\tchildren: ReactElement<HTMLInputElement, 'input'>\n}\n\nexport const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing, defaultValue, ...props }) => {\n\tconst id = useFormFieldId()\n\tconst accessor = useField<boolean>(field)\n\tconst value = accessor.value\n\tconst errors = useFormError() ?? accessor.errors?.errors ?? []\n\tconst accessorGetter = accessor.getAccessor\n\tconst { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)\n\tconst [checkboxRef, setCheckboxRef] = React.useState<HTMLInputElement | null>(null)\n\n\tuseEffect(() => {\n\t\tif (!checkboxRef) {\n\t\t\treturn\n\t\t}\n\t\tcheckboxRef.indeterminate = value === null\n\t}, [checkboxRef, ref, value])\n\n\treturn (\n\t\t\t<SlotInput\n\t\t\t\tref={it => {\n\t\t\t\t\t(ref as any).current = checkboxRef\n\t\t\t\t\tsetCheckboxRef(it)\n\t\t\t\t}}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={accessor.value === true}\n\t\t\t\tdata-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}\n\t\t\t\tdata-invalid={dataAttribute(errors.length > 0)}\n\t\t\t\tid={`${id}-input`}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tonChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {\n\t\t\t\t\taccessorGetter().updateValue(e.target.checked)\n\t\t\t\t}, [accessorGetter])}\n\t\t\t\t{...props}\n\t\t\t/>\n\t)\n}, ({ field, isNonbearing, defaultValue }, env) => {\n\tconst node = TreeNodeEnvironmentFactory.createEnvironmentForField(env, { field }).getSubTreeNode()\n\tconst resolvedDefaultValue = defaultValue !== undefined ? defaultValue : (node.field.defaultValue ?? (node.field.nullable ? null : false))\n\n\treturn <Field field={field} isNonbearing={isNonbearing} defaultValue={resolvedDefaultValue} />\n})\n"],"names":["Slot","Component","useFormFieldId","useField","useFormError","useFormInputValidationHandler","React","useEffect","jsxDEV","dataAttribute","useCallback","this","TreeNodeEnvironmentFactory","Field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAYA,UAAAA;AASL,MAAA,eAAeC,uBAA6B,CAAC,EAAE,OAAO,cAAc,cAAc,GAAG,YAAY;AAC7G,QAAM,KAAKC,SAAAA;AACL,QAAA,WAAWC,sBAAkB,KAAK;AACxC,QAAM,QAAQ,SAAS;AACvB,QAAM,SAASC,SAAAA,aAAa,KAAK,SAAS,QAAQ,UAAU;AAC5D,QAAM,iBAAiB,SAAS;AAChC,QAAM,EAAE,KAAK,SAAS,OAAO,IAAIC,8BAAAA,8BAA8B,QAAQ;AACvE,QAAM,CAAC,aAAa,cAAc,IAAIC,iBAAM,SAAkC,IAAI;AAElFC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,aAAa;AACjB;AAAA,IACD;AACA,gBAAY,gBAAgB,UAAU;AAAA,EACpC,GAAA,CAAC,aAAa,KAAK,KAAK,CAAC;AAG1B,SAAAC,8BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAK,CAAM,OAAA;AACT,YAAY,UAAU;AACvB,uBAAe,EAAE;AAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,SAAS,SAAS,UAAU;AAAA,MAC5B,cAAY,UAAU,OAAO,kBAAmB,QAAQ,YAAY;AAAA,MACpE,gBAAcC,UAAA,cAAc,OAAO,SAAS,CAAC;AAAA,MAC7C,IAAI,GAAG,EAAE;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAUC,MAAAA,YAAkD,CAAK,MAAA;AAChE,uBAAiB,EAAA,YAAY,EAAE,OAAO,OAAO;AAAA,MAAA,GAC3C,CAAC,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,IAAA;AAAA,IAfL;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAAC;AAAAA,EAAA;AAkBH,GAAG,CAAC,EAAE,OAAO,cAAc,aAAA,GAAgB,QAAQ;AAC5C,QAAA,OAAOC,wCAA2B,0BAA0B,KAAK,EAAE,MAAO,CAAA,EAAE;AAC5E,QAAA,uBAAuB,iBAAiB,SAAY,eAAgB,KAAK,MAAM,iBAAiB,KAAK,MAAM,WAAW,OAAO;AAEnI,SAAQJ,8BAAA,OAAAK,oBAAA,EAAM,OAAc,cAA4B,cAAc,qBAA/D,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAqF,GAAAF,MAAA;AAC7F,CAAC;;"}