@contember/react-form 2.0.0-alpha.26 → 2.0.0-alpha.28

package/dist/types/types/index.d.ts

@@ -1,7 +1,19 @@
+import { ErrorAccessor } from '@contember/react-binding';
 import * as React from 'react';
 export type FormInputHandler = {
     parseValue: (value: string) => any;
     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;
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAA;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;CAC/D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAA;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;CAC/D,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,EAAE,CAAA;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE;QACP,UAAU,EAAE,MAAM,CAAA;QAClB,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;CACD,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-form",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.28",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -33,9 +33,9 @@
     "directory": "packages/react-form"
   },
   "dependencies": {
-    "@contember/react-binding": "2.0.0-alpha.26",
-    "@contember/react-utils": "2.0.0-alpha.26",
-    "@contember/utilities": "2.0.0-alpha.26",
+    "@contember/react-binding": "2.0.0-alpha.28",
+    "@contember/react-utils": "2.0.0-alpha.28",
+    "@contember/utilities": "2.0.0-alpha.28",
     "@radix-ui/react-slot": "^1.1.0"
   },
   "peerDependencies": {

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)
@@ -40,8 +50,9 @@ export const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing,
 			type="checkbox"
 			checked={accessor.value === true}
 			data-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}
-			data-invalid={dataAttribute(errors.length > 0)}
-			id={`${id}-input`}
+			data-invalid={dataAttribute(hasErrors)}
+			data-dirty={dataAttribute(dirty)}
+			id={id ? `${id}-input` : undefined}
 			onFocus={onFocus}
 			onBlur={onBlur}
 			onChange={useCallback<ChangeEventHandler<HTMLInputElement>>(e => {

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 ?? []).filter((it, index, arr) => arr.indexOf(it) === index), [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,29 @@
-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']
 	children: React.ReactNode
+	required?: boolean
 }
 
-export const FormHasManyRelationScope = ({ field, children }: FormHasManyRelationScopeProps) => {
-	const id = useId()
+export const FormHasManyRelationScope = ({ field, children, required }: FormHasManyRelationScopeProps) => {
 	const entityRelation = useEntityList({ field })
-	const errors = entityRelation.errors?.errors
+	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

@@ -3,7 +3,7 @@ import { dataAttribute } from '@contember/utilities'
 import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 import { ChangeEventHandler, useCallback } from 'react'
-import { useFormError, useFormFieldId } from '../contexts'
+import { useFormFieldState } from '../contexts'
 import { useFormInputValidationHandler } from '../hooks'
 
 const SlotInput = Slot as React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>>
@@ -17,9 +17,13 @@ export interface FormRadioItemProps {
 }
 
 export const FormRadioInput = Component<FormRadioItemProps>(({ field, value, defaultValue, isNonbearing, ...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 accessorGetter = accessor.getAccessor
 	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
 
@@ -33,9 +37,10 @@ export const FormRadioInput = Component<FormRadioItemProps>(({ field, value, def
 			type="radio"
 			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={handleChange}

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/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/src/contexts.ts

@@ -1,12 +0,0 @@
-import { createContext } from '@contember/react-utils'
-import { ErrorAccessor } from '@contember/react-binding'
-
-const FormFieldIdContext_ = createContext<string | undefined>('FormFieldIdContext', undefined)
-/** @internal */
-export const FormFieldIdContext = FormFieldIdContext_[0]
-export const useFormFieldId = FormFieldIdContext_[1]
-
-const FormErrorContext_ = createContext<ErrorAccessor.Error[] | undefined>('FormErrorContext', undefined)
-/** @internal */
-export const FormErrorContext = FormErrorContext_[0]
-export const useFormError = FormErrorContext_[1]