@cube-dev/ui-kit 0.178.0 → 0.180.0

package/dist/components/form/Form/use-field/use-field-binding.js

@@ -0,0 +1,93 @@
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
+import { useEvent } from "../../../../_internal/hooks/use-event.js";
+import { isModernFormController } from "../backend.js";
+import { useField } from "./use-field.js";
+import { createModernFieldBackend, fieldRegistrationOptions, sameFieldView } from "../modern/field-binding.js";
+import { useMemo, useRef } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+
+//#region src/components/form/Form/use-field/use-field-binding.ts
+const noop = () => {};
+const selectView = (view) => view;
+/**
+* One unconditional subscription/registration boundary. The frozen legacy
+* adapter still runs its original hooks, inert on the modern path, so an input
+* can cross backends without remounting or changing hook order. Its render-time
+* mutations remain contained in use-field.ts; modern handles are pure to create.
+*/
+function useFieldBinding(props, params, generatedId) {
+	const modern = !params.unbound && isModernFormController(props.form);
+	const controller = modern ? props.form : void 0;
+	const name = props.name ?? "";
+	const legacy = useField(props, {
+		...params,
+		unbound: params.unbound || modern
+	});
+	const modernHandle = useMemo(() => controller ? createModernFieldBackend(controller, name) : void 0, [controller, name]);
+	const legacyHandle = useMemo(() => {
+		const snapshot = {
+			value: legacy.value,
+			errors: legacy.field?.errors ?? [],
+			status: legacy.field?.status ?? "unvalidated"
+		};
+		return {
+			subscribe: () => noop,
+			getSnapshot: () => snapshot,
+			getServerSnapshot: () => snapshot,
+			register: () => void 0,
+			change: (value, dontTouch, trigger) => legacy.onChange?.(value, dontTouch, trigger),
+			blur: legacy.onBlur
+		};
+	}, [legacy]);
+	const handle = modernHandle ?? legacyHandle;
+	const field = useSyncExternalStoreWithSelector(handle.subscribe, handle.getSnapshot, handle.getServerSnapshot, selectView, sameFieldView);
+	const registration = useRef(void 0);
+	useLayoutEffect$1(() => {
+		const token = handle.register();
+		registration.current = token;
+		return () => {
+			token?.release({ deferValueRemoval: true });
+			if (registration.current === token) registration.current = void 0;
+		};
+	}, [handle]);
+	useLayoutEffect$1(() => {
+		registration.current?.update(fieldRegistrationOptions(props, params.defaultValidationTrigger));
+	});
+	const trigger = props.validateTrigger ?? params.defaultValidationTrigger ?? "onBlur";
+	const onChange = useEvent((value, dontTouch) => {
+		if (controller && props.shouldUpdate !== void 0) {
+			const previous = controller.getValues();
+			if (props.shouldUpdate === false || typeof props.shouldUpdate === "function" && !props.shouldUpdate(previous, {
+				...previous,
+				[name]: value
+			})) return;
+		}
+		handle.change(value, dontTouch, trigger);
+	});
+	const onBlur = useEvent(() => handle.blur());
+	if (!controller) return legacy;
+	const required = props.isRequired || props.rules?.flat(Infinity).some((rule) => rule.required === true);
+	return {
+		form: controller,
+		name,
+		id: props.id ?? `${props.idPrefix ? `${props.idPrefix}_` : ""}${name}-${generatedId}`,
+		nonInput: false,
+		value: field ? field.value : props.defaultValue,
+		onChange,
+		onBlur,
+		validateTrigger: trigger,
+		isInvalid: props.isInvalid ?? !!field?.errors.length,
+		isValid: props.isValid ?? !!(props.showValid && field?.status === "valid"),
+		isLoading: props.isLoading ?? field?.status === "validating",
+		...required ? { isRequired: true } : {},
+		...required && !props.isRequired && props.necessityIndicator === void 0 ? { necessityIndicator: null } : {},
+		description: props.description,
+		message: props.message !== void 0 ? props.message : field?.errors[0],
+		errorMessage: props.errorMessage !== void 0 ? props.errorMessage : field?.errors[0]
+	};
+}
+
+//#endregion
+export { useFieldBinding };
+//# sourceMappingURL=use-field-binding.js.map

package/dist/components/form/Form/use-field/use-field-binding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-binding.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\nimport { isModernFormController } from '../backend';\nimport {\n  createModernFieldBackend,\n  fieldRegistrationOptions,\n  sameFieldView,\n} from '../modern/field-binding';\n\nimport { useField } from './use-field';\n\nimport type { ReactNode } from 'react';\nimport type { FormController } from '../modern/controller';\nimport type { FieldBackendHandle, FieldView } from '../modern/field-binding';\nimport type { RegistrationToken } from '../modern/types';\nimport type { FieldTypes } from '../types';\nimport type { FieldReturnValue, UseFieldProps } from './types';\nimport type { UseFieldParams } from './use-field';\n\nconst noop = () => {};\nconst selectView = (view: FieldView | undefined) => view;\n\n/**\n * One unconditional subscription/registration boundary. The frozen legacy\n * adapter still runs its original hooks, inert on the modern path, so an input\n * can cross backends without remounting or changing hook order. Its render-time\n * mutations remain contained in use-field.ts; modern handles are pure to create.\n */\nexport function useFieldBinding<\n  T extends FieldTypes,\n  P extends UseFieldProps<T>,\n>(\n  props: P,\n  params: UseFieldParams,\n  generatedId: string,\n): Omit<FieldReturnValue<T>, 'form'> & {\n  form?: FieldReturnValue<T>['form'] | FormController<any>;\n  isLoading?: boolean;\n} {\n  const modern = !params.unbound && isModernFormController(props.form);\n  const controller = modern\n    ? (props.form as unknown as FormController<any>)\n    : undefined;\n  const name = props.name ?? '';\n  const legacy = useField<T, P>(props, {\n    ...params,\n    unbound: params.unbound || modern,\n  });\n  const modernHandle = useMemo(\n    () => (controller ? createModernFieldBackend(controller, name) : undefined),\n    [controller, name],\n  );\n  const legacyHandle = useMemo<FieldBackendHandle>(() => {\n    const snapshot: FieldView = {\n      value: legacy.value,\n      errors: legacy.field?.errors ?? [],\n      status: legacy.field?.status ?? 'unvalidated',\n    };\n    return {\n      subscribe: () => noop,\n      getSnapshot: () => snapshot,\n      getServerSnapshot: () => snapshot,\n      register: () => undefined,\n      change: (value, dontTouch, trigger) =>\n        legacy.onChange?.(value, dontTouch, trigger),\n      blur: legacy.onBlur,\n    };\n  }, [legacy]);\n  const handle = modernHandle ?? legacyHandle;\n  const field = useSyncExternalStoreWithSelector(\n    handle.subscribe,\n    handle.getSnapshot,\n    handle.getServerSnapshot,\n    selectView,\n    sameFieldView,\n  );\n  const registration = useRef<RegistrationToken<ReactNode> | undefined>(\n    undefined,\n  );\n  useLayoutEffect(() => {\n    const token = handle.register();\n    registration.current = token;\n    return () => {\n      token?.release({ deferValueRemoval: true });\n      if (registration.current === token) registration.current = undefined;\n    };\n  }, [handle]);\n  useLayoutEffect(() => {\n    registration.current?.update(\n      fieldRegistrationOptions(props, params.defaultValidationTrigger),\n    );\n  });\n  const trigger =\n    props.validateTrigger ?? params.defaultValidationTrigger ?? 'onBlur';\n  const onChange = useEvent((value: unknown, dontTouch: boolean) => {\n    if (controller && props.shouldUpdate !== undefined) {\n      const previous = controller.getValues();\n      if (\n        props.shouldUpdate === false ||\n        (typeof props.shouldUpdate === 'function' &&\n          !props.shouldUpdate(previous, { ...previous, [name]: value }))\n      )\n        return;\n    }\n    handle.change(value, dontTouch, trigger);\n  });\n  const onBlur = useEvent(() => handle.blur());\n  if (!controller) return legacy;\n\n  const required =\n    props.isRequired ||\n    props.rules?.flat(Infinity).some((rule) => rule.required === true);\n  const id =\n    props.id ??\n    `${props.idPrefix ? `${props.idPrefix}_` : ''}${name}-${generatedId}`;\n  return {\n    form: controller,\n    name,\n    id,\n    nonInput: false,\n    value: field ? field.value : props.defaultValue,\n    onChange,\n    onBlur,\n    validateTrigger: trigger,\n    isInvalid: props.isInvalid ?? !!field?.errors.length,\n    isValid: props.isValid ?? !!(props.showValid && field?.status === 'valid'),\n    isLoading: props.isLoading ?? field?.status === 'validating',\n    ...(required ? { isRequired: true } : {}),\n    ...(required && !props.isRequired && props.necessityIndicator === undefined\n      ? { necessityIndicator: null }\n      : {}),\n    description: props.description,\n    message: props.message !== undefined ? props.message : field?.errors[0],\n    errorMessage:\n      props.errorMessage !== undefined ? props.errorMessage : field?.errors[0],\n  };\n}\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,cAAc,SAAgC;;;;;;;AAQpD,SAAgB,gBAId,OACA,QACA,aAIA;CACA,MAAM,SAAS,CAAC,OAAO,WAAW,uBAAuB,MAAM,KAAK;CACpE,MAAM,aAAa,SACd,MAAM,OACP;CACJ,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,SAAe,OAAO;EACnC,GAAG;EACH,SAAS,OAAO,WAAW;EAC5B,CAAC;CACF,MAAM,eAAe,cACZ,aAAa,yBAAyB,YAAY,KAAK,GAAG,QACjE,CAAC,YAAY,KAAK,CACnB;CACD,MAAM,eAAe,cAAkC;EACrD,MAAM,WAAsB;GAC1B,OAAO,OAAO;GACd,QAAQ,OAAO,OAAO,UAAU,EAAE;GAClC,QAAQ,OAAO,OAAO,UAAU;GACjC;AACD,SAAO;GACL,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,gBAAgB;GAChB,SAAS,OAAO,WAAW,YACzB,OAAO,WAAW,OAAO,WAAW,QAAQ;GAC9C,MAAM,OAAO;GACd;IACA,CAAC,OAAO,CAAC;CACZ,MAAM,SAAS,gBAAgB;CAC/B,MAAM,QAAQ,iCACZ,OAAO,WACP,OAAO,aACP,OAAO,mBACP,YACA,cACD;CACD,MAAM,eAAe,OACnB,OACD;AACD,yBAAsB;EACpB,MAAM,QAAQ,OAAO,UAAU;AAC/B,eAAa,UAAU;AACvB,eAAa;AACX,UAAO,QAAQ,EAAE,mBAAmB,MAAM,CAAC;AAC3C,OAAI,aAAa,YAAY,MAAO,cAAa,UAAU;;IAE5D,CAAC,OAAO,CAAC;AACZ,yBAAsB;AACpB,eAAa,SAAS,OACpB,yBAAyB,OAAO,OAAO,yBAAyB,CACjE;GACD;CACF,MAAM,UACJ,MAAM,mBAAmB,OAAO,4BAA4B;CAC9D,MAAM,WAAW,UAAU,OAAgB,cAAuB;AAChE,MAAI,cAAc,MAAM,iBAAiB,QAAW;GAClD,MAAM,WAAW,WAAW,WAAW;AACvC,OACE,MAAM,iBAAiB,SACtB,OAAO,MAAM,iBAAiB,cAC7B,CAAC,MAAM,aAAa,UAAU;IAAE,GAAG;KAAW,OAAO;IAAO,CAAC,CAE/D;;AAEJ,SAAO,OAAO,OAAO,WAAW,QAAQ;GACxC;CACF,MAAM,SAAS,eAAe,OAAO,MAAM,CAAC;AAC5C,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,WACJ,MAAM,cACN,MAAM,OAAO,KAAK,SAAS,CAAC,MAAM,SAAS,KAAK,aAAa,KAAK;AAIpE,QAAO;EACL,MAAM;EACN;EACA,IALA,MAAM,MACN,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,KAAK,KAAK,KAAK,GAAG;EAKxD,UAAU;EACV,OAAO,QAAQ,MAAM,QAAQ,MAAM;EACnC;EACA;EACA,iBAAiB;EACjB,WAAW,MAAM,aAAa,CAAC,CAAC,OAAO,OAAO;EAC9C,SAAS,MAAM,WAAW,CAAC,EAAE,MAAM,aAAa,OAAO,WAAW;EAClE,WAAW,MAAM,aAAa,OAAO,WAAW;EAChD,GAAI,WAAW,EAAE,YAAY,MAAM,GAAG,EAAE;EACxC,GAAI,YAAY,CAAC,MAAM,cAAc,MAAM,uBAAuB,SAC9D,EAAE,oBAAoB,MAAM,GAC5B,EAAE;EACN,aAAa,MAAM;EACnB,SAAS,MAAM,YAAY,SAAY,MAAM,UAAU,OAAO,OAAO;EACrE,cACE,MAAM,iBAAiB,SAAY,MAAM,eAAe,OAAO,OAAO;EACzE"}

package/dist/components/form/Form/use-field/use-field-props.d.ts

@@ -23,7 +23,18 @@ type UseFieldPropsParams = {
    */
   unsafe__isDisabled?: boolean;
 };
-declare function useFieldProps<T extends FieldTypes, Props extends UseFieldProps<T>>(props: Props, params?: UseFieldPropsParams): Props;
+/**
+ * The single entry point for input components (see
+ * `docs/rules/input-components.md`).
+ *
+ * Every hook below runs on every render, whatever the mode: standalone (no
+ * `name`), inside the deprecated `<Field>`, disabled through
+ * `unsafe__isDisabled`, or bound to a form. The mode only decides which props
+ * come back, so an input can gain or lose a `name`, or move between forms,
+ * without changing its hook order. The legacy binding (`useField`) is the
+ * legacy backend's adapter and is inert when the field is not bound to it.
+ */
+declare function useFieldProps<T extends FieldTypes, Props extends UseFieldProps<T>>(inputProps: Props, params?: UseFieldPropsParams): Props;
 //#endregion
 export { UseFieldPropsParams, useFieldProps };
 //# sourceMappingURL=use-field-props.d.ts.map

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,71 +1,88 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";
 import { useProviderProps } from "../../../../provider.js";
 import { useValidationProps } from "../../validation/use-validation-props.js";
+import { isModernFormController } from "../backend.js";
 import { useFormProps } from "../Form.js";
-import { useField } from "./use-field.js";
+import { useFieldBinding } from "./use-field-binding.js";
 import { useInsideLegacyField } from "../Field.js";
-import { useDebugValue, useId, useRef } from "react";
+import { useDebugValue, useId, useState } from "react";
 
 //#region src/components/form/Form/use-field/use-field-props.tsx
-function useFieldProps(props, params = {}) {
-	props = useProviderProps(props);
-	props = useFormProps(props);
-	props = useValidationProps(props);
-	const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);
-	const { valuePropsMapper = ({ value, onChange }) => {
-		return {
-			value: value ?? null,
-			onChange
-		};
-	}, defaultValidationTrigger = "onBlur" } = params;
+const defaultValuePropsMapper = ({ value, onChange }) => ({
+	value: value ?? null,
+	onChange
+});
+/**
+* The single entry point for input components (see
+* `docs/rules/input-components.md`).
+*
+* Every hook below runs on every render, whatever the mode: standalone (no
+* `name`), inside the deprecated `<Field>`, disabled through
+* `unsafe__isDisabled`, or bound to a form. The mode only decides which props
+* come back, so an input can gain or lose a `name`, or move between forms,
+* without changing its hook order. The legacy binding (`useField`) is the
+* legacy backend's adapter and is inert when the field is not bound to it.
+*/
+function useFieldProps(inputProps, params = {}) {
+	const props = useValidationProps(useFormProps(useProviderProps(inputProps)));
+	const [isDisabled] = useState(params.unsafe__isDisabled ?? false);
+	const { valuePropsMapper = defaultValuePropsMapper, defaultValidationTrigger = "onBlur" } = params;
 	const isInsideLegacyField = useInsideLegacyField();
 	if (props.rules && !props.name) warn(`The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`);
-	if (isInsideLegacyField || isDisabledRef.current === true) return props;
 	const hasName = props.name != null;
 	const generatedId = useId();
-	if (!hasName) {
-		if (!props.id) {
-			const result = {
-				...props,
-				id: generatedId
-			};
-			if (result.id && !result.labelProps) result.labelProps = { for: result.id };
-			else if (result.id && result.labelProps && !result.labelProps.for) result.labelProps = {
-				...result.labelProps,
-				for: result.id
-			};
-			return result;
-		}
-		return props;
-	}
-	const field = useField(props, { defaultValidationTrigger: params.defaultValidationTrigger });
+	const isBound = hasName && !isInsideLegacyField && !isDisabled;
+	const field = useFieldBinding(props, {
+		defaultValidationTrigger: params.defaultValidationTrigger,
+		unbound: !isBound
+	}, generatedId);
 	const isOutsideOfForm = field?.form == null;
-	if (props.rules && isOutsideOfForm) warn(`The "rules" prop is not supported for fields that are not part of a form. The "${props.name}" field is placed outside the form.`);
 	const onChangeEvent = useEvent((value, dontTouch) => {
 		field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
 	});
-	const valueProps = !isOutsideOfForm ? valuePropsMapper({
-		value: field.value,
-		onChange: onChangeEvent
-	}) : {};
-	if (isInsideLegacyField && !isOutsideOfForm) {
-		const valuePropEventNames = !isOutsideOfForm ? Object.keys(valueProps).filter((name) => name.startsWith("on")) : [];
-		for (const valuePropName of valuePropEventNames) if (valuePropName in props) warn(`The "${valuePropName}" listener is not supported for input "${props.name}" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`);
-	}
-	const compiledErrorMessage = props.errorMessage !== void 0 ? props.errorMessage : field?.field?.status === "invalid" && field?.field?.errors?.length ? field.field.errors[0] : void 0;
-	const { form: _form, onChange: _fieldOnChange, onBlur: _fieldOnBlur, ...fieldRest } = field ?? {};
-	const result = isOutsideOfForm ? props : mergeProps(props, fieldRest, valueProps, {
-		validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
-		onBlur: field.onBlur,
-		errorMessage: compiledErrorMessage
-	});
-	if (result.id) {
-		if (!result.labelProps) result.labelProps = {};
-		result.labelProps.for = result.id;
+	function resolveResult() {
+		if (isInsideLegacyField || isDisabled) return props;
+		if (!hasName) {
+			if (!props.id) {
+				const result = {
+					...props,
+					id: generatedId
+				};
+				if (result.id && !result.labelProps) result.labelProps = { for: result.id };
+				else if (result.id && result.labelProps && !result.labelProps.for) result.labelProps = {
+					...result.labelProps,
+					for: result.id
+				};
+				return result;
+			}
+			return props;
+		}
+		if (props.rules && isOutsideOfForm) warn(`The "rules" prop is not supported for fields that are not part of a form. The "${props.name}" field is placed outside the form.`);
+		const valueProps = !isOutsideOfForm ? valuePropsMapper({
+			value: field.value,
+			onChange: onChangeEvent
+		}) : {};
+		const { form: _form, onChange: _fieldOnChange, onBlur: _fieldOnBlur, ...fieldRest } = field ?? {};
+		const result = isOutsideOfForm ? props : mergeProps(props, fieldRest, valueProps, {
+			validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
+			onBlur: field.onBlur
+		});
+		return result.id ? {
+			...result,
+			labelProps: {
+				...result.labelProps,
+				for: result.id
+			}
+		} : result;
 	}
+	const resolved = resolveResult();
+	const result = isModernFormController(resolved.form) ? {
+		...resolved,
+		form: void 0
+	} : resolved;
 	useDebugValue(result);
 	return result;
 }

package/dist/components/form/Form/use-field/use-field-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useRef } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useValidationProps } from '../../validation/index';\nimport { useInsideLegacyField } from '../Field';\nimport { useFormProps } from '../Form';\n\nimport { useField } from './use-field';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n  valuePropsMapper?: ({ value, onChange }) => any;\n  /**\n   * @default 'onBlur'\n   */\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n   * If you want to change this prop after mount, remount the component with a new value.\n   */\n  unsafe__isDisabled?: boolean;\n};\n\nexport function useFieldProps<\n  T extends FieldTypes,\n  Props extends UseFieldProps<T>,\n>(props: Props, params: UseFieldPropsParams = {}): Props {\n  // The single entry point for input components: provider defaults, then form context, then the\n  // normalization of the deprecated `validationState` prop into `isInvalid`/`isValid`.\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useValidationProps(props);\n\n  // We use ref here to \"memoize\" initial value\n  const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);\n\n  const {\n    valuePropsMapper = ({ value, onChange }) => {\n      return {\n        value: value ?? null,\n        onChange,\n      };\n    },\n    defaultValidationTrigger = 'onBlur',\n  } = params;\n\n  const isInsideLegacyField = useInsideLegacyField();\n\n  // useWarn(isInsideLegacyField, {\n  //   key: 'use-field-props',\n  //   args: ['<Field /> is deprecated, use component without <Field /> instead.'],\n  // });\n\n  if (props.rules && !props.name) {\n    warn(\n      `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n    );\n  }\n\n  if (isInsideLegacyField || isDisabledRef.current === true) {\n    return props;\n  }\n\n  // For standalone fields (no name), just generate an ID without calling useField\n  const hasName = props.name != null;\n  const generatedId = useId();\n\n  if (!hasName) {\n    // Standalone field - just add generated ID if not provided\n    if (!props.id) {\n      const result = { ...props, id: generatedId };\n\n      if (result.id && !result.labelProps) {\n        result.labelProps = { for: result.id };\n      } else if (result.id && result.labelProps && !result.labelProps.for) {\n        result.labelProps = { ...result.labelProps, for: result.id };\n      }\n\n      return result as Props;\n    }\n    return props;\n  }\n\n  // Form-connected field - use full useField logic\n  const field = useField<T, Props>(props, {\n    defaultValidationTrigger: params.defaultValidationTrigger,\n  });\n\n  const isOutsideOfForm = field?.form == null;\n\n  if (props.rules && isOutsideOfForm) {\n    warn(\n      `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n    );\n  }\n\n  const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n    field?.onChange?.(\n      value,\n      dontTouch,\n      field?.validateTrigger ?? defaultValidationTrigger,\n    );\n  });\n\n  const valueProps = !isOutsideOfForm\n    ? valuePropsMapper({\n        value: field.value,\n        onChange: onChangeEvent,\n      })\n    : {};\n\n  if (isInsideLegacyField && !isOutsideOfForm) {\n    const valuePropEventNames = !isOutsideOfForm\n      ? Object.keys(valueProps).filter((name) => name.startsWith('on'))\n      : [];\n\n    for (const valuePropName of valuePropEventNames) {\n      if (valuePropName in props) {\n        warn(\n          `The \"${valuePropName}\" listener is not supported for input \"${props.name}\" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`,\n        );\n      }\n    }\n  }\n\n  // Use errorMessage directly or fall back to validation errors\n  const compiledErrorMessage =\n    props.errorMessage !== undefined\n      ? props.errorMessage\n      : field?.field?.status === 'invalid' && field?.field?.errors?.length\n        ? field.field.errors[0]\n        : undefined;\n\n  // Exclude `form` (it must never reach a DOM node) and the field's own\n  // handlers: `valueProps` already routes the component's change event into\n  // `field.onChange` under the name the component listens to, and `onBlur` is\n  // added once below. `mergeProps` chains same-named handlers, so merging them\n  // here as well made every user change and every blur run the field handler\n  // twice — and onChange/onBlur-triggered validation validate twice.\n  const {\n    form: _form,\n    onChange: _fieldOnChange,\n    onBlur: _fieldOnBlur,\n    ...fieldRest\n  } = field ?? {};\n\n  const result: Props = isOutsideOfForm\n    ? props\n    : mergeProps(props, fieldRest, valueProps, {\n        validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n        // Chained after the caller's own `onBlur` by `mergeProps`.\n        onBlur: field.onBlur,\n        errorMessage: compiledErrorMessage,\n      });\n\n  if (result.id) {\n    if (!result.labelProps) {\n      result.labelProps = {};\n    }\n\n    result.labelProps.for = result.id;\n  }\n\n  // Unconditional on purpose: React makes `useDebugValue` a no-op outside its\n  // development build, and gating a hook on `isDevEnv()` would let hook order\n  // change between renders when `UIKIT_DEBUG` is toggled.\n  useDebugValue(result);\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;AA6BA,SAAgB,cAGd,OAAc,SAA8B,EAAE,EAAS;AAGvD,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,mBAAmB,MAAM;CAGjC,MAAM,gBAAgB,OAAO,OAAO,sBAAsB,MAAM;CAEhE,MAAM,EACJ,oBAAoB,EAAE,OAAO,eAAe;AAC1C,SAAO;GACL,OAAO,SAAS;GAChB;GACD;IAEH,2BAA2B,aACzB;CAEJ,MAAM,sBAAsB,sBAAsB;AAOlD,KAAI,MAAM,SAAS,CAAC,MAAM,KACxB,MACE,wHACD;AAGH,KAAI,uBAAuB,cAAc,YAAY,KACnD,QAAO;CAIT,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,cAAc,OAAO;AAE3B,KAAI,CAAC,SAAS;AAEZ,MAAI,CAAC,MAAM,IAAI;GACb,MAAM,SAAS;IAAE,GAAG;IAAO,IAAI;IAAa;AAE5C,OAAI,OAAO,MAAM,CAAC,OAAO,WACvB,QAAO,aAAa,EAAE,KAAK,OAAO,IAAI;YAC7B,OAAO,MAAM,OAAO,cAAc,CAAC,OAAO,WAAW,IAC9D,QAAO,aAAa;IAAE,GAAG,OAAO;IAAY,KAAK,OAAO;IAAI;AAG9D,UAAO;;AAET,SAAO;;CAIT,MAAM,QAAQ,SAAmB,OAAO,EACtC,0BAA0B,OAAO,0BAClC,CAAC;CAEF,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,KAAI,MAAM,SAAS,gBACjB,MACE,kFAAkF,MAAM,KAAK,qCAC9F;CAGH,MAAM,gBAAgB,UAAU,OAAO,cAAuB;AAC5D,SAAO,WACL,OACA,WACA,OAAO,mBAAmB,yBAC3B;GACD;CAEF,MAAM,aAAa,CAAC,kBAChB,iBAAiB;EACf,OAAO,MAAM;EACb,UAAU;EACX,CAAC,GACF,EAAE;AAEN,KAAI,uBAAuB,CAAC,iBAAiB;EAC3C,MAAM,sBAAsB,CAAC,kBACzB,OAAO,KAAK,WAAW,CAAC,QAAQ,SAAS,KAAK,WAAW,KAAK,CAAC,GAC/D,EAAE;AAEN,OAAK,MAAM,iBAAiB,oBAC1B,KAAI,iBAAiB,MACnB,MACE,QAAQ,cAAc,yCAAyC,MAAM,KAAK,+HAC3E;;CAMP,MAAM,uBACJ,MAAM,iBAAiB,SACnB,MAAM,eACN,OAAO,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,SAC1D,MAAM,MAAM,OAAO,KACnB;CAQR,MAAM,EACJ,MAAM,OACN,UAAU,gBACV,QAAQ,cACR,GAAG,cACD,SAAS,EAAE;CAEf,MAAM,SAAgB,kBAClB,QACA,WAAW,OAAO,WAAW,YAAY;EACvC,iBAAiB,MAAM,mBAAmB;EAE1C,QAAQ,MAAM;EACd,cAAc;EACf,CAAC;AAEN,KAAI,OAAO,IAAI;AACb,MAAI,CAAC,OAAO,WACV,QAAO,aAAa,EAAE;AAGxB,SAAO,WAAW,MAAM,OAAO;;AAMjC,eAAc,OAAO;AAErB,QAAO"}
+{"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useState } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useValidationProps } from '../../validation/index';\nimport { isModernFormController } from '../backend';\nimport { useInsideLegacyField } from '../Field';\nimport { useFormProps } from '../Form';\n\nimport { useFieldBinding } from './use-field-binding';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n  valuePropsMapper?: ({ value, onChange }) => any;\n  /**\n   * @default 'onBlur'\n   */\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n   * If you want to change this prop after mount, remount the component with a new value.\n   */\n  unsafe__isDisabled?: boolean;\n};\n\nconst defaultValuePropsMapper = ({ value, onChange }) => ({\n  value: value ?? null,\n  onChange,\n});\n\n/**\n * The single entry point for input components (see\n * `docs/rules/input-components.md`).\n *\n * Every hook below runs on every render, whatever the mode: standalone (no\n * `name`), inside the deprecated `<Field>`, disabled through\n * `unsafe__isDisabled`, or bound to a form. The mode only decides which props\n * come back, so an input can gain or lose a `name`, or move between forms,\n * without changing its hook order. The legacy binding (`useField`) is the\n * legacy backend's adapter and is inert when the field is not bound to it.\n */\nexport function useFieldProps<\n  T extends FieldTypes,\n  Props extends UseFieldProps<T>,\n>(inputProps: Props, params: UseFieldPropsParams = {}): Props {\n  // Provider defaults, then form context, then the normalization of the\n  // deprecated `validationState` prop into `isInvalid`/`isValid`.\n  const props: Props = useValidationProps(\n    useFormProps(useProviderProps(inputProps)),\n  );\n\n  // The initial value is what counts: changing it after mount is unsupported.\n  const [isDisabled] = useState(params.unsafe__isDisabled ?? false);\n\n  const {\n    valuePropsMapper = defaultValuePropsMapper,\n    defaultValidationTrigger = 'onBlur',\n  } = params;\n\n  const isInsideLegacyField = useInsideLegacyField();\n\n  if (props.rules && !props.name) {\n    warn(\n      `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n    );\n  }\n\n  const hasName = props.name != null;\n  const generatedId = useId();\n  const isBound = hasName && !isInsideLegacyField && !isDisabled;\n\n  const field = useFieldBinding<T, Props>(\n    props,\n    {\n      defaultValidationTrigger: params.defaultValidationTrigger,\n      unbound: !isBound,\n    },\n    generatedId,\n  );\n\n  const isOutsideOfForm = field?.form == null;\n\n  const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n    field?.onChange?.(\n      value,\n      dontTouch,\n      field?.validateTrigger ?? defaultValidationTrigger,\n    );\n  });\n\n  function resolveResult(): Props {\n    if (isInsideLegacyField || isDisabled) {\n      return props;\n    }\n\n    if (!hasName) {\n      // Standalone field - just add generated ID if not provided\n      if (!props.id) {\n        const result = { ...props, id: generatedId };\n\n        if (result.id && !result.labelProps) {\n          result.labelProps = { for: result.id };\n        } else if (result.id && result.labelProps && !result.labelProps.for) {\n          result.labelProps = { ...result.labelProps, for: result.id };\n        }\n\n        return result as Props;\n      }\n      return props;\n    }\n\n    if (props.rules && isOutsideOfForm) {\n      warn(\n        `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n      );\n    }\n\n    const valueProps = !isOutsideOfForm\n      ? valuePropsMapper({\n          value: field.value,\n          onChange: onChangeEvent,\n        })\n      : {};\n\n    // Exclude `form` (it must never reach a DOM node) and the field's own\n    // handlers: `valueProps` already routes the component's change event into\n    // `field.onChange` under the name the component listens to, and `onBlur` is\n    // added once below. `mergeProps` chains same-named handlers, so merging them\n    // here as well made every user change and every blur run the field handler\n    // twice — and onChange/onBlur-triggered validation validate twice.\n    const {\n      form: _form,\n      onChange: _fieldOnChange,\n      onBlur: _fieldOnBlur,\n      ...fieldRest\n    } = field ?? {};\n\n    const result: Props = isOutsideOfForm\n      ? props\n      : mergeProps(props, fieldRest, valueProps, {\n          validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n          // Chained after the caller's own `onBlur` by `mergeProps`.\n          onBlur: field.onBlur,\n        });\n\n    return result.id\n      ? { ...result, labelProps: { ...result.labelProps, for: result.id } }\n      : result;\n  }\n\n  const resolved = resolveResult();\n  // React Aria forwards `form` to native inputs. A modern controller is a\n  // binding source, never an HTML form id, including in standalone/group mode.\n  const result = isModernFormController(resolved.form)\n    ? { ...resolved, form: undefined }\n    : resolved;\n\n  useDebugValue(result);\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,2BAA2B,EAAE,OAAO,gBAAgB;CACxD,OAAO,SAAS;CAChB;CACD;;;;;;;;;;;;AAaD,SAAgB,cAGd,YAAmB,SAA8B,EAAE,EAAS;CAG5D,MAAM,QAAe,mBACnB,aAAa,iBAAiB,WAAW,CAAC,CAC3C;CAGD,MAAM,CAAC,cAAc,SAAS,OAAO,sBAAsB,MAAM;CAEjE,MAAM,EACJ,mBAAmB,yBACnB,2BAA2B,aACzB;CAEJ,MAAM,sBAAsB,sBAAsB;AAElD,KAAI,MAAM,SAAS,CAAC,MAAM,KACxB,MACE,wHACD;CAGH,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,WAAW,CAAC,uBAAuB,CAAC;CAEpD,MAAM,QAAQ,gBACZ,OACA;EACE,0BAA0B,OAAO;EACjC,SAAS,CAAC;EACX,EACD,YACD;CAED,MAAM,kBAAkB,OAAO,QAAQ;CAEvC,MAAM,gBAAgB,UAAU,OAAO,cAAuB;AAC5D,SAAO,WACL,OACA,WACA,OAAO,mBAAmB,yBAC3B;GACD;CAEF,SAAS,gBAAuB;AAC9B,MAAI,uBAAuB,WACzB,QAAO;AAGT,MAAI,CAAC,SAAS;AAEZ,OAAI,CAAC,MAAM,IAAI;IACb,MAAM,SAAS;KAAE,GAAG;KAAO,IAAI;KAAa;AAE5C,QAAI,OAAO,MAAM,CAAC,OAAO,WACvB,QAAO,aAAa,EAAE,KAAK,OAAO,IAAI;aAC7B,OAAO,MAAM,OAAO,cAAc,CAAC,OAAO,WAAW,IAC9D,QAAO,aAAa;KAAE,GAAG,OAAO;KAAY,KAAK,OAAO;KAAI;AAG9D,WAAO;;AAET,UAAO;;AAGT,MAAI,MAAM,SAAS,gBACjB,MACE,kFAAkF,MAAM,KAAK,qCAC9F;EAGH,MAAM,aAAa,CAAC,kBAChB,iBAAiB;GACf,OAAO,MAAM;GACb,UAAU;GACX,CAAC,GACF,EAAE;EAQN,MAAM,EACJ,MAAM,OACN,UAAU,gBACV,QAAQ,cACR,GAAG,cACD,SAAS,EAAE;EAEf,MAAM,SAAgB,kBAClB,QACA,WAAW,OAAO,WAAW,YAAY;GACvC,iBAAiB,MAAM,mBAAmB;GAE1C,QAAQ,MAAM;GACf,CAAC;AAEN,SAAO,OAAO,KACV;GAAE,GAAG;GAAQ,YAAY;IAAE,GAAG,OAAO;IAAY,KAAK,OAAO;IAAI;GAAE,GACnE;;CAGN,MAAM,WAAW,eAAe;CAGhC,MAAM,SAAS,uBAAuB,SAAS,KAAK,GAChD;EAAE,GAAG;EAAU,MAAM;EAAW,GAChC;AAEJ,eAAc,OAAO;AAErB,QAAO"}

package/dist/components/form/Form/use-field/use-field.d.ts

@@ -7,6 +7,12 @@ import { FieldReturnValue, UseFieldProps } from "./types.js";
 //#region src/components/form/Form/use-field/use-field.d.ts
 type UseFieldParams = {
   defaultValidationTrigger?: ValidateTrigger;
+  /**
+   * Run without a binding: `useFieldProps` sets this for an input that is
+   * standalone, inside the deprecated `<Field>` or disabled, so that this hook
+   * is still called (stable hook order) but registers nothing.
+   */
+  unbound?: boolean;
 };
 declare function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(props: Props, params: UseFieldParams): FieldReturnValue<T>;
 //#endregion

package/dist/components/form/Form/use-field/use-field.js

@@ -1,7 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { resolveValidationProps } from "../../validation/resolve-validation-props.js";
+import { isModernFormController, modernBackendUnavailableError } from "../backend.js";
 import { delayValidationRule } from "../validation.js";
 import { useFormProps } from "../Form.js";
 import { useEffect, useMemo, useState } from "react";
@@ -26,7 +28,13 @@ function removeId(name, id) {
 }
 function useField(props, params) {
 	props = useFormProps(props);
-	let { defaultValue, id, idPrefix, name, form, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp, necessityIndicator: necessityIndicatorProp } = props;
+	let { defaultValue, id, idPrefix, name, form: sourceForm, rules, message, description, errorMessage, validateTrigger = params.defaultValidationTrigger, validationDelay, showValid, shouldUpdate, isRequired: isRequiredProp, necessityIndicator: necessityIndicatorProp } = props;
+	if (params.unbound) {
+		name = void 0;
+		sourceForm = void 0;
+	}
+	if (!params.unbound && isModernFormController(sourceForm)) throw modernBackendUnavailableError(name != null ? `The "${name}" field` : "A field without a name");
+	const form = sourceForm;
 	const { isInvalid: isInvalidProp, isValid: isValidProp } = resolveValidationProps(props);
 	const processedRules = useMemo(() => {
 		let finalRules = rules;
@@ -43,29 +51,37 @@ function useField(props, params) {
 	const nonInput = !name;
 	const fieldName = name != null ? name : "";
 	const isFirstRender = useIsFirstRender();
-	let [fieldId, setFieldId] = useState(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+	const baseId = id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName);
+	const [assignedId, setAssignedId] = useState({
+		base: baseId,
+		id: baseId
+	});
+	const currentId = id || (assignedId.base === baseId ? assignedId.id : baseId);
+	useLayoutEffect$1(() => {
+		if (id || nonInput) return;
+		const newId = createId(baseId);
+		setAssignedId((previous) => previous.base === baseId && previous.id === newId ? previous : {
+			base: baseId,
+			id: newId
+		});
+		return () => {
+			removeId(baseId, newId);
+		};
+	}, [
+		baseId,
+		id,
+		nonInput
+	]);
+	const [boundForms] = useState(() => /* @__PURE__ */ new Set());
 	useEffect(() => {
-		let newId;
-		if (!id && !nonInput) {
-			newId = createId(fieldId);
-			setFieldId(newId);
-		}
 		return () => {
-			if (!id) removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);
-			if (fieldName && form) form.removeField(fieldName);
+			if (fieldName) boundForms.forEach((boundForm) => boundForm.removeField(fieldName));
+			boundForms.clear();
 		};
-	}, [fieldName]);
+	}, [fieldName, boundForms]);
 	let field = form?.getFieldInstance(fieldName);
-	if (field) field.rules = processedRules;
-	let isRequired = !!processedRules?.find((rule) => "required" in rule && rule.required === true);
-	const suppressNecessityIndicator = isRequired && !isRequiredProp && necessityIndicatorProp === void 0;
-	useEffect(() => {
-		if (!form) return;
-		if (field) form.forceReRender();
-		else field = form.createField(fieldName);
-	}, [field]);
 	if (form) {
-		if (isFirstRender) {
+		if (isFirstRender || !field && fieldName) {
 			if (!field) field = form.createField(fieldName, true);
 			if (field?.value == null && defaultValue != null) {
 				form.setFieldValue(fieldName, defaultValue, false, true);
@@ -75,6 +91,15 @@ function useField(props, params) {
 		}
 		if (!field?.touched && defaultValue != null) form.setFieldValue(fieldName, defaultValue, false, true);
 	}
+	if (field) field.rules = processedRules;
+	let isRequired = !!processedRules?.find((rule) => "required" in rule && rule.required === true);
+	const suppressNecessityIndicator = isRequired && !isRequiredProp && necessityIndicatorProp === void 0;
+	useEffect(() => {
+		if (form && field) {
+			boundForms.add(form);
+			form.forceReRender();
+		}
+	}, [field, boundForms]);
 	const onChangeHandler = useEvent((val, dontTouch) => {
 		if (!form) return;
 		const field = form.getFieldInstance(fieldName);
@@ -95,7 +120,7 @@ function useField(props, params) {
 	});
 	let value = field?.value;
 	return useMemo(() => ({
-		id: fieldId,
+		id: currentId,
 		name: fieldName,
 		value,
 		validateTrigger,
@@ -117,7 +142,7 @@ function useField(props, params) {
 		field?.value,
 		field?.errors?.length,
 		field?.status,
-		fieldId,
+		currentId,
 		fieldName,
 		isRequired,
 		suppressNecessityIndicator,

package/dist/components/form/Form/use-field/use-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { resolveValidationProps } from '../../validation/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n  if (!name) return;\n\n  if (!ID_MAP[name]) {\n    ID_MAP[name] = [];\n  }\n\n  let i = 0;\n  let id;\n\n  do {\n    id = i ? `${name}_${i}` : name;\n    i++;\n  } while (ID_MAP[name].includes(id));\n\n  ID_MAP[name].push(id);\n\n  return id;\n}\n\nfunction removeId(name, id) {\n  if (!ID_MAP[name]) return;\n\n  ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n  defaultValidationTrigger?: ValidateTrigger;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n  props: Props,\n  params: UseFieldParams,\n): FieldReturnValue<T> {\n  props = useFormProps(props);\n\n  let {\n    defaultValue,\n    id,\n    idPrefix,\n    name,\n    form,\n    rules,\n    message,\n    description,\n    errorMessage,\n    validateTrigger = params.defaultValidationTrigger,\n    validationDelay,\n    showValid,\n    shouldUpdate,\n    isRequired: isRequiredProp,\n    necessityIndicator: necessityIndicatorProp,\n  } = props;\n\n  const { isInvalid: isInvalidProp, isValid: isValidProp } =\n    resolveValidationProps(props);\n\n  const processedRules = useMemo(() => {\n    let finalRules = rules;\n\n    // If isRequired prop is set, ensure there's a required rule\n    if (isRequiredProp) {\n      const hasRequiredRule = finalRules?.some(\n        (rule) => 'required' in rule && rule.required === true,\n      );\n\n      if (!hasRequiredRule) {\n        finalRules = finalRules\n          ? [{ required: true }, ...finalRules]\n          : [{ required: true }];\n      }\n    }\n\n    // Add delay rule if needed\n    if (finalRules && finalRules.length && validationDelay) {\n      return [delayValidationRule(validationDelay), ...finalRules];\n    }\n\n    return finalRules;\n  }, [rules, validationDelay, isRequiredProp]);\n\n  const nonInput = !name;\n  const fieldName: string = name != null ? name : '';\n\n  const isFirstRender = useIsFirstRender();\n  let [fieldId, setFieldId] = useState(\n    id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),\n  );\n\n  useEffect(() => {\n    let newId;\n\n    if (!id && !nonInput) {\n      newId = createId(fieldId);\n\n      setFieldId(newId);\n    }\n\n    return () => {\n      if (!id) {\n        removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);\n      }\n\n      if (fieldName && form) {\n        form.removeField(fieldName);\n      }\n    };\n  }, [fieldName]);\n\n  let field = form?.getFieldInstance(fieldName);\n\n  if (field) {\n    field.rules = processedRules;\n  }\n\n  let isRequired = !!processedRules?.find(\n    (rule) => 'required' in rule && rule.required === true,\n  );\n\n  // `isRequired` has two sources with different intent. A `required` rule states\n  // how the field behaves: it is what validation runs, and `aria-required` is\n  // its programmatic mirror, so the flag has to reach the input either way. The\n  // `isRequired` prop additionally states what the label should say. So unless\n  // the prop itself asked for the marker, suppress it — an absent prop and an\n  // explicit `isRequired={false}` both mean \"do not mark this\", the latter\n  // rather more loudly. An explicit `necessityIndicator` overrides either way,\n  // being a request for the marker in its own right.\n  const suppressNecessityIndicator =\n    isRequired && !isRequiredProp && necessityIndicatorProp === undefined;\n\n  useEffect(() => {\n    if (!form) return;\n\n    if (field) {\n      form.forceReRender();\n    } else {\n      field = form.createField(fieldName);\n    }\n  }, [field]);\n\n  if (form) {\n    if (isFirstRender) {\n      if (!field) {\n        field = form.createField(fieldName, true);\n      }\n\n      if (field?.value == null && defaultValue != null) {\n        form.setFieldValue(fieldName, defaultValue, false, true);\n        form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n        field = form?.getFieldInstance(fieldName);\n      }\n    }\n\n    if (!field?.touched && defaultValue != null) {\n      form.setFieldValue(fieldName, defaultValue, false, true);\n    }\n  }\n\n  const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n    if (!form) return;\n\n    const field = form.getFieldInstance(fieldName);\n\n    if (shouldUpdate) {\n      const fieldsValue = form.getFieldsValue();\n\n      // check if we should update the value of the field\n      const shouldNotBeUpdated =\n        typeof shouldUpdate === 'boolean'\n          ? !shouldUpdate\n          : !shouldUpdate(fieldsValue, {\n              ...fieldsValue,\n              [fieldName]: val,\n            });\n\n      if (shouldNotBeUpdated) {\n        return;\n      }\n    }\n\n    form.setFieldValue(fieldName, val, !dontTouch);\n\n    if (\n      !dontTouch &&\n      (validateTrigger === 'onChange' ||\n        (field && field.errors && field.errors.length))\n    ) {\n      form.validateField(fieldName).catch(() => {}); // do nothing on fail\n    }\n  });\n\n  const onBlurHandler = useEvent(() => {\n    if (validateTrigger === 'onBlur') {\n      // We need a timeout so the change event can be done.\n      setTimeout(() => {\n        form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n      });\n    }\n  });\n\n  let value = field?.value;\n\n  return useMemo(\n    () => ({\n      id: fieldId,\n      name: fieldName,\n      value,\n      validateTrigger,\n      form,\n      field,\n      nonInput,\n\n      // Explicit validation props always win over the state derived from the form\n      isInvalid: isInvalidProp ?? !!field?.errors?.length,\n      isValid: isValidProp ?? !!(showValid && field?.status === 'valid'),\n      ...(isRequired && { isRequired }),\n      ...(suppressNecessityIndicator && { necessityIndicator: null }),\n      message:\n        message !== undefined\n          ? message\n          : field?.status === 'invalid' && field?.errors?.[0],\n      description,\n      errorMessage:\n        errorMessage !== undefined\n          ? errorMessage\n          : field?.status === 'invalid' && field?.errors?.length\n            ? field.errors[0]\n            : undefined,\n      onBlur: onBlurHandler,\n      onChange: onChangeHandler,\n    }),\n    [\n      form,\n      field,\n      field?.value,\n      field?.errors?.length,\n      field?.status,\n      fieldId,\n      fieldName,\n      isRequired,\n      suppressNecessityIndicator,\n      message,\n      description,\n      errorMessage,\n      onBlurHandler,\n      onChangeHandler,\n      validateTrigger,\n      isInvalidProp,\n      isValidProp,\n      showValid,\n      nonInput,\n    ],\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-field.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { useEvent, useIsFirstRender } from '../../../../_internal/index';\nimport { ValidateTrigger } from '../../../../shared/index';\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\nimport { resolveValidationProps } from '../../validation/index';\nimport {\n  isModernFormController,\n  modernBackendUnavailableError,\n} from '../backend';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { delayValidationRule } from '../validation';\n\nimport { FieldReturnValue, UseFieldProps } from './types';\n\nimport type { CubeFormInstance } from '../use-form';\n\nconst ID_MAP = {};\n\nfunction createId(name) {\n  if (!name) return;\n\n  if (!ID_MAP[name]) {\n    ID_MAP[name] = [];\n  }\n\n  let i = 0;\n  let id;\n\n  do {\n    id = i ? `${name}_${i}` : name;\n    i++;\n  } while (ID_MAP[name].includes(id));\n\n  ID_MAP[name].push(id);\n\n  return id;\n}\n\nfunction removeId(name, id) {\n  if (!ID_MAP[name]) return;\n\n  ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);\n}\n\nexport type UseFieldParams = {\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * Run without a binding: `useFieldProps` sets this for an input that is\n   * standalone, inside the deprecated `<Field>` or disabled, so that this hook\n   * is still called (stable hook order) but registers nothing.\n   */\n  unbound?: boolean;\n};\n\nexport function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(\n  props: Props,\n  params: UseFieldParams,\n): FieldReturnValue<T> {\n  props = useFormProps(props);\n\n  let {\n    defaultValue,\n    id,\n    idPrefix,\n    name,\n    form: sourceForm,\n    rules,\n    message,\n    description,\n    errorMessage,\n    validateTrigger = params.defaultValidationTrigger,\n    validationDelay,\n    showValid,\n    shouldUpdate,\n    isRequired: isRequiredProp,\n    necessityIndicator: necessityIndicatorProp,\n  } = props;\n\n  if (params.unbound) {\n    name = undefined;\n    sourceForm = undefined;\n  }\n\n  if (!params.unbound && isModernFormController(sourceForm)) {\n    throw modernBackendUnavailableError(\n      name != null ? `The \"${name}\" field` : 'A field without a name',\n    );\n  }\n\n  // A modern source is rejected above (or cleared when this adapter is inert).\n  // Keep unbranded structural legacy instances supported as before.\n  const form = sourceForm as CubeFormInstance<T> | undefined;\n\n  const { isInvalid: isInvalidProp, isValid: isValidProp } =\n    resolveValidationProps(props);\n\n  const processedRules = useMemo(() => {\n    let finalRules = rules;\n\n    // If isRequired prop is set, ensure there's a required rule\n    if (isRequiredProp) {\n      const hasRequiredRule = finalRules?.some(\n        (rule) => 'required' in rule && rule.required === true,\n      );\n\n      if (!hasRequiredRule) {\n        finalRules = finalRules\n          ? [{ required: true }, ...finalRules]\n          : [{ required: true }];\n      }\n    }\n\n    // Add delay rule if needed\n    if (finalRules && finalRules.length && validationDelay) {\n      return [delayValidationRule(validationDelay), ...finalRules];\n    }\n\n    return finalRules;\n  }, [rules, validationDelay, isRequiredProp]);\n\n  const nonInput = !name;\n  const fieldName: string = name != null ? name : '';\n\n  const isFirstRender = useIsFirstRender();\n  const baseId = id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName);\n\n  // The id the effect below registered, with the base it was registered for.\n  // Between a base change and that effect's next run the state is stale, and\n  // handing it out would let the element carry the previous binding's id for\n  // one commit — which can duplicate a sibling's live id — so the current base\n  // is used until the effect catches up. An explicit `id` is used as it is.\n  const [assignedId, setAssignedId] = useState({ base: baseId, id: baseId });\n  const currentId = id || (assignedId.base === baseId ? assignedId.id : baseId);\n\n  // Ids are registered per base (form name prefix plus field name), so that\n  // duplicates get a suffix and the base is released when it changes or the\n  // input unmounts. `id` and `nonInput` cannot change without the base. A\n  // layout effect: when the base changes, the commit that carries the\n  // unsuffixed base is corrected before the browser paints, so a duplicate\n  // never shows a colliding id.\n  useLayoutEffect(() => {\n    if (id || nonInput) return;\n\n    const newId = createId(baseId);\n\n    setAssignedId((previous) =>\n      previous.base === baseId && previous.id === newId\n        ? previous\n        : { base: baseId, id: newId },\n    );\n\n    return () => {\n      removeId(baseId, newId);\n    };\n  }, [baseId, id, nonInput]);\n\n  // Every form this hook registered the current name with. The dual-backend\n  // shell keeps the hook mounted for standalone inputs, so a form may arrive\n  // later or change, and the name may change; the name is released from all\n  // of them, not from whichever form a closure happened to capture. This is\n  // state rather than a ref only to keep render free of ref access.\n  const [boundForms] = useState(() => new Set<CubeFormInstance<any>>());\n\n  useEffect(() => {\n    return () => {\n      if (fieldName) {\n        boundForms.forEach((boundForm) => boundForm.removeField(fieldName));\n      }\n\n      boundForms.clear();\n    };\n  }, [fieldName, boundForms]);\n\n  let field = form?.getFieldInstance(fieldName);\n\n  if (form) {\n    // First render of this binding: the hook's first render, or a named field\n    // that is not registered yet because the name or the form changed after\n    // mount. Without a name the engine returns an unstored placeholder, so it\n    // is only created on the first render, as before: creating it again on\n    // every render would give the effect below a new object each time.\n    if (isFirstRender || (!field && fieldName)) {\n      if (!field) {\n        field = form.createField(fieldName, true);\n      }\n\n      if (field?.value == null && defaultValue != null) {\n        form.setFieldValue(fieldName, defaultValue, false, true);\n        form.updateInitialFieldsValue({ [fieldName]: defaultValue });\n\n        field = form?.getFieldInstance(fieldName);\n      }\n    }\n\n    if (!field?.touched && defaultValue != null) {\n      form.setFieldValue(fieldName, defaultValue, false, true);\n    }\n  }\n\n  if (field) {\n    field.rules = processedRules;\n  }\n\n  let isRequired = !!processedRules?.find(\n    (rule) => 'required' in rule && rule.required === true,\n  );\n\n  // `isRequired` has two sources with different intent. A `required` rule states\n  // how the field behaves: it is what validation runs, and `aria-required` is\n  // its programmatic mirror, so the flag has to reach the input either way. The\n  // `isRequired` prop additionally states what the label should say. So unless\n  // the prop itself asked for the marker, suppress it — an absent prop and an\n  // explicit `isRequired={false}` both mean \"do not mark this\", the latter\n  // rather more loudly. An explicit `necessityIndicator` overrides either way,\n  // being a request for the marker in its own right.\n  const suppressNecessityIndicator =\n    isRequired && !isRequiredProp && necessityIndicatorProp === undefined;\n\n  // Registration happens during render. Once it is committed, remember the\n  // form for the release above and re-render the form's owner so its\n  // render-time reads see the new field. `form` is deliberately not a\n  // dependency: a form whose identity changes on every render (a copy, an\n  // inline mock) shares its store, and re-running here would loop.\n  useEffect(() => {\n    if (form && field) {\n      boundForms.add(form);\n      form.forceReRender();\n    }\n  }, [field, boundForms]);\n\n  const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {\n    if (!form) return;\n\n    const field = form.getFieldInstance(fieldName);\n\n    if (shouldUpdate) {\n      const fieldsValue = form.getFieldsValue();\n\n      // check if we should update the value of the field\n      const shouldNotBeUpdated =\n        typeof shouldUpdate === 'boolean'\n          ? !shouldUpdate\n          : !shouldUpdate(fieldsValue, {\n              ...fieldsValue,\n              [fieldName]: val,\n            });\n\n      if (shouldNotBeUpdated) {\n        return;\n      }\n    }\n\n    form.setFieldValue(fieldName, val, !dontTouch);\n\n    if (\n      !dontTouch &&\n      (validateTrigger === 'onChange' ||\n        (field && field.errors && field.errors.length))\n    ) {\n      form.validateField(fieldName).catch(() => {}); // do nothing on fail\n    }\n  });\n\n  const onBlurHandler = useEvent(() => {\n    if (validateTrigger === 'onBlur') {\n      // We need a timeout so the change event can be done.\n      setTimeout(() => {\n        form?.validateField(fieldName).catch(() => {}); // do nothing on fail\n      });\n    }\n  });\n\n  let value = field?.value;\n\n  return useMemo(\n    () => ({\n      id: currentId,\n      name: fieldName,\n      value,\n      validateTrigger,\n      form,\n      field,\n      nonInput,\n\n      // Explicit validation props always win over the state derived from the form\n      isInvalid: isInvalidProp ?? !!field?.errors?.length,\n      isValid: isValidProp ?? !!(showValid && field?.status === 'valid'),\n      ...(isRequired && { isRequired }),\n      ...(suppressNecessityIndicator && { necessityIndicator: null }),\n      message:\n        message !== undefined\n          ? message\n          : field?.status === 'invalid' && field?.errors?.[0],\n      description,\n      errorMessage:\n        errorMessage !== undefined\n          ? errorMessage\n          : field?.status === 'invalid' && field?.errors?.length\n            ? field.errors[0]\n            : undefined,\n      onBlur: onBlurHandler,\n      onChange: onChangeHandler,\n    }),\n    [\n      form,\n      field,\n      field?.value,\n      field?.errors?.length,\n      field?.status,\n      currentId,\n      fieldName,\n      isRequired,\n      suppressNecessityIndicator,\n      message,\n      description,\n      errorMessage,\n      onBlurHandler,\n      onChangeHandler,\n      validateTrigger,\n      isInvalidProp,\n      isValidProp,\n      showValid,\n      nonInput,\n    ],\n  );\n}\n"],"mappings":"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"}

package/dist/components/form/Form/use-form.d.ts

@@ -1,11 +1,14 @@
 
 import { CubeFieldData, FieldTypes, SetFieldsArrType } from "./types.js";
+import { FORM_BACKEND, LegacyFormBrand } from "./backend.js";
 import { ReactNode } from "react";
 
 //#region src/components/form/Form/use-form.d.ts
 type PartialString<T> = { [P in keyof T & string]?: T[P] };
 type CubeFormData<T extends FieldTypes> = { [K in keyof T & string]?: CubeFieldData<K, T[K]> };
-declare class CubeFormInstance<T extends FieldTypes, TFormData extends CubeFormData<T> = CubeFormData<T>> {
+declare class CubeFormInstance<T extends FieldTypes, TFormData extends CubeFormData<T> = CubeFormData<T>> implements LegacyFormBrand {
+  /** Backend brand: the `<Form>` facade and the field hook dispatch on it. */
+  readonly [FORM_BACKEND]: "legacy";
   forceReRender: () => void;
   private defaultValues;
   private fields;

package/dist/components/form/Form/use-form.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+import { FORM_BACKEND, isModernFormController, modernBackendUnavailableError } from "./backend.js";
 import { applyRules } from "./validation.js";
-import { dotize } from "@tenphi/tasty";
+import { dotizeConvert } from "../../../utils/dotize.js";
 import { useRef, useState } from "react";
 
 //#region src/components/form/Form/use-form.tsx
@@ -18,6 +19,8 @@ function isEqual(v1, v2) {
 	return JSON.stringify(v1) === JSON.stringify(v2);
 }
 var CubeFormInstance = class {
+	/** Backend brand: the `<Form>` facade and the field hook dispatch on it. */
+	[FORM_BACKEND] = "legacy";
 	forceReRender = () => {};
 	defaultValues = {};
 	fields = {};
@@ -55,7 +58,7 @@ var CubeFormInstance = class {
 		let flag = false;
 		newData = {
 			...newData,
-			...dotize.convert(newData)
+			...dotizeConvert(newData)
 		};
 		Object.keys(newData).forEach((name) => {
 			let field = this.fields[name];
@@ -127,14 +130,14 @@ var CubeFormInstance = class {
 	setInitialFieldsValue(values) {
 		this.defaultValues = {
 			...values,
-			...dotize.convert(values)
+			...dotizeConvert(values)
 		};
 	}
 	updateInitialFieldsValue(values) {
 		this.defaultValues = {
 			...this.defaultValues,
 			...values,
-			...dotize.convert(values)
+			...dotizeConvert(values)
 		};
 	}
 	resetFields(names, skipRender) {
@@ -318,6 +321,7 @@ var CubeFormInstance = class {
 };
 function useForm(form, ref, options = {}) {
 	const { onSubmit, onValuesChange } = options;
+	if (isModernFormController(form)) throw modernBackendUnavailableError("Form.useForm()");
 	const formRef = useRef(null);
 	const [, forceUpdate] = useState({});
 	if (!formRef.current) {