@octanejs/tanstack-form 0.0.1

package/src/useField.tsrx

@@ -0,0 +1,656 @@
+import { useMemo, useState } from 'octane';
+import { useSelector } from '@octanejs/tanstack-store';
+import { FieldApi, functionalUpdate } from '@tanstack/form-core';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import type {
+	AnyFieldApi,
+	AnyFieldMeta,
+	DeepKeys,
+	DeepValue,
+	FieldAsyncValidateOrFn,
+	FieldValidateOrFn,
+	FieldValidators,
+	FormAsyncValidateOrFn,
+	FormValidateOrFn,
+} from '@tanstack/form-core';
+import type { UseFieldOptions, UseFieldOptionsBound } from './types';
+
+type FieldRenderable = unknown;
+type FieldFunctionComponent<P = object> = (props: P) => FieldRenderable;
+
+/**
+ * A type representing a hook for using a field in a form with the given form data type.
+ *
+ * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
+ */
+export type UseField<
+	TParentData,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TPatentSubmitMeta,
+> = <
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+>(
+	opts: UseFieldOptionsBound<
+		TParentData,
+		TName,
+		TData,
+		TOnMount,
+		TOnChange,
+		TOnChangeAsync,
+		TOnBlur,
+		TOnBlurAsync,
+		TOnSubmit,
+		TOnSubmitAsync,
+		TOnDynamic,
+		TOnDynamicAsync
+	>,
+) => FieldApi<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TPatentSubmitMeta
+>;
+
+/**
+ * A hook for managing a field in a form.
+ * @param opts An object with field options.
+ *
+ * @returns The `FieldApi` instance for the specified field.
+ */
+export function useField<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TPatentSubmitMeta,
+>(
+	opts: UseFieldOptions<
+		TParentData,
+		TName,
+		TData,
+		TOnMount,
+		TOnChange,
+		TOnChangeAsync,
+		TOnBlur,
+		TOnBlurAsync,
+		TOnSubmit,
+		TOnSubmitAsync,
+		TOnDynamic,
+		TOnDynamicAsync,
+		TFormOnMount,
+		TFormOnChange,
+		TFormOnChangeAsync,
+		TFormOnBlur,
+		TFormOnBlurAsync,
+		TFormOnSubmit,
+		TFormOnSubmitAsync,
+		TFormOnDynamic,
+		TFormOnDynamicAsync,
+		TFormOnServer,
+		TPatentSubmitMeta
+	>,
+) {
+	// Keep a snapshot of options so compiler optimizations do not treat
+	// fieldApi as immutable.
+	const [prevOptions, setPrevOptions] = useState(() => ({
+		form: opts.form,
+		name: opts.name,
+	}));
+
+	const [fieldApiState, setFieldApi] = useState(() => {
+		return new FieldApi({
+			...opts,
+		});
+	});
+
+	let fieldApi = fieldApiState;
+
+	// We only want to
+	// update on name changes since those are at risk of becoming stale. The field
+	// state must be up to date for the internal JSX render.
+	// The other options can freely be in `fieldApi.update`
+	if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {
+		// Adjusting state during render: create the new FieldApi and use it for the
+		// rest of this render so the render prop reads state at the current `name`.
+		// Otherwise the discarded render still runs to completion with the stale
+		// instance, briefly surfacing `undefined` for shifted array items on removal.
+		// See: https://github.com/TanStack/form/issues/2238
+		fieldApi = new FieldApi({
+			...opts,
+		});
+		setFieldApi(fieldApi);
+		setPrevOptions({ form: opts.form, name: opts.name });
+	}
+
+	// For array mode, only track length changes to avoid re-renders when child properties change
+	// See: https://github.com/TanStack/form/issues/1925
+	const reactiveStateValue = useSelector(
+		fieldApi.store,
+		(opts.mode === 'array' ? (state) => state.meta._arrayVersion || 0 : (state) => state.value) as (
+			state: typeof fieldApi.state,
+		) => TData | number,
+	);
+	const reactiveMetaIsTouched = useSelector(fieldApi.store, (state) => state.meta.isTouched);
+	const reactiveMetaIsBlurred = useSelector(fieldApi.store, (state) => state.meta.isBlurred);
+	const reactiveMetaIsDirty = useSelector(fieldApi.store, (state) => state.meta.isDirty);
+	const reactiveMetaErrorMap = useSelector(fieldApi.store, (state) => state.meta.errorMap);
+	const reactiveMetaErrorSourceMap = useSelector(
+		fieldApi.store,
+		(state) => state.meta.errorSourceMap,
+	);
+	const reactiveMetaIsValidating = useSelector(fieldApi.store, (state) => state.meta.isValidating);
+
+	// Materialize the reactive snapshots in the extended API returned to render callbacks.
+	const extendedFieldApi = useMemo(() => {
+		const reactiveFieldApi = {
+			...fieldApi,
+			get state() {
+				return {
+					// For array mode, reactiveStateValue is the length (for reactivity tracking),
+					// so we need to get the actual value from fieldApi
+					value: opts.mode === 'array' ? fieldApi.state.value : reactiveStateValue,
+					get meta() {
+						return {
+							...fieldApi.state.meta,
+							isTouched: reactiveMetaIsTouched,
+							isBlurred: reactiveMetaIsBlurred,
+							isDirty: reactiveMetaIsDirty,
+							errorMap: reactiveMetaErrorMap,
+							errorSourceMap: reactiveMetaErrorSourceMap,
+							isValidating: reactiveMetaIsValidating,
+						} satisfies AnyFieldMeta;
+					},
+				} satisfies AnyFieldApi['state'];
+			},
+		};
+
+		const extendedApi: FieldApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TPatentSubmitMeta
+		> = reactiveFieldApi as never;
+
+		return extendedApi;
+	}, [
+		fieldApi,
+		opts.mode,
+		reactiveStateValue,
+		reactiveMetaIsTouched,
+		reactiveMetaIsBlurred,
+		reactiveMetaIsDirty,
+		reactiveMetaErrorMap,
+		reactiveMetaErrorSourceMap,
+		reactiveMetaIsValidating,
+	]);
+
+	useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi]);
+
+	/**
+	 * fieldApi.update should not have any side effects. Think of it like a `useRef`
+	 * that we need to keep updated every render with the most up-to-date information.
+	 */
+	useIsomorphicLayoutEffect(() => {
+		fieldApi.update(opts);
+	});
+
+	return extendedFieldApi;
+}
+
+/**
+ * @param children A render function that takes a field API instance and returns a renderable value.
+ */
+interface FieldComponentProps<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TPatentSubmitMeta,
+	ExtendedApi = {},
+> extends UseFieldOptions<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TPatentSubmitMeta
+> {
+	children: (
+		fieldApi: FieldApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TPatentSubmitMeta
+		> &
+			ExtendedApi,
+	) => FieldRenderable;
+}
+
+interface FieldComponentBoundProps<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TPatentSubmitMeta,
+	ExtendedApi = {},
+> extends UseFieldOptionsBound<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync
+> {
+	children: (
+		fieldApi: FieldApi<
+			TParentData,
+			TName,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync,
+			TFormOnMount,
+			TFormOnChange,
+			TFormOnChangeAsync,
+			TFormOnBlur,
+			TFormOnBlurAsync,
+			TFormOnSubmit,
+			TFormOnSubmitAsync,
+			TFormOnDynamic,
+			TFormOnDynamicAsync,
+			TFormOnServer,
+			TPatentSubmitMeta
+		> &
+			ExtendedApi,
+	) => FieldRenderable;
+}
+
+/**
+ * A type alias representing a field component for a specific form data type.
+ */
+export type FieldComponent<
+	in out TParentData,
+	in out TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	in out TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	in out TPatentSubmitMeta,
+	in out ExtendedApi = {},
+> = <
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+>({
+	children,
+	...fieldOptions
+}: FieldComponentBoundProps<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TPatentSubmitMeta,
+	ExtendedApi
+>) => ReturnType<FieldFunctionComponent>;
+
+/**
+ * A type alias representing a field component for a form lens data type.
+ */
+export type LensFieldComponent<
+	in out TLensData,
+	in out TParentSubmitMeta,
+	in out ExtendedApi = {},
+> = <
+	TName extends DeepKeys<TLensData>,
+	TData extends DeepValue<TLensData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<unknown, string, TData>,
+>({
+	children,
+	...fieldOptions
+}: Omit<
+	FieldComponentBoundProps<
+		unknown,
+		string,
+		TData,
+		TOnMount,
+		TOnChange,
+		TOnChangeAsync,
+		TOnBlur,
+		TOnBlurAsync,
+		TOnSubmit,
+		TOnSubmitAsync,
+		TOnDynamic,
+		TOnDynamicAsync,
+		undefined | FormValidateOrFn<unknown>,
+		undefined | FormValidateOrFn<unknown>,
+		undefined | FormAsyncValidateOrFn<unknown>,
+		undefined | FormValidateOrFn<unknown>,
+		undefined | FormAsyncValidateOrFn<unknown>,
+		undefined | FormValidateOrFn<unknown>,
+		undefined | FormAsyncValidateOrFn<unknown>,
+		undefined | FormValidateOrFn<unknown>,
+		undefined | FormAsyncValidateOrFn<unknown>,
+		undefined | FormAsyncValidateOrFn<unknown>,
+		TParentSubmitMeta,
+		ExtendedApi
+	>,
+	'name' | 'validators'
+> & {
+	name: TName;
+	validators?: Omit<
+		FieldValidators<
+			unknown,
+			string,
+			TData,
+			TOnMount,
+			TOnChange,
+			TOnChangeAsync,
+			TOnBlur,
+			TOnBlurAsync,
+			TOnSubmit,
+			TOnSubmitAsync,
+			TOnDynamic,
+			TOnDynamicAsync
+		>,
+		'onChangeListenTo' | 'onBlurListenTo'
+	> & {
+		/**
+		 * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+		 */
+		onChangeListenTo?: DeepKeys<TLensData>[];
+		/**
+		 * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+		 */
+		onBlurListenTo?: DeepKeys<TLensData>[];
+	};
+}) => ReturnType<FieldFunctionComponent>;
+
+/**
+ * A function component that takes field options and a render function as children.
+ *
+ * The `Field` component uses the `useField` hook internally to manage the field instance.
+ */
+export const Field = (<
+	TParentData,
+	TName extends DeepKeys<TParentData>,
+	TData extends DeepValue<TParentData, TName>,
+	TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+	TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+	TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
+	TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+	TPatentSubmitMeta,
+>({
+	children,
+	...fieldOptions
+}: FieldComponentProps<
+	TParentData,
+	TName,
+	TData,
+	TOnMount,
+	TOnChange,
+	TOnChangeAsync,
+	TOnBlur,
+	TOnBlurAsync,
+	TOnSubmit,
+	TOnSubmitAsync,
+	TOnDynamic,
+	TOnDynamicAsync,
+	TFormOnMount,
+	TFormOnChange,
+	TFormOnChangeAsync,
+	TFormOnBlur,
+	TFormOnBlurAsync,
+	TFormOnSubmit,
+	TFormOnSubmitAsync,
+	TFormOnDynamic,
+	TFormOnDynamicAsync,
+	TFormOnServer,
+	TPatentSubmitMeta
+>): ReturnType<FieldFunctionComponent> => {
+	const fieldApi = useField(fieldOptions as any);
+
+	const jsxToDisplay = useMemo(
+		() => functionalUpdate(children, fieldApi as any),
+		[children, fieldApi],
+	);
+	return (<>{jsxToDisplay}</>) as never;
+}) satisfies FieldFunctionComponent<
+	FieldComponentProps<
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any,
+		any
+	>
+>;