@cube-dev/ui-kit 0.180.0 → 0.181.0

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

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
-import { getFieldKey } from "./values.js";
+/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";
 
 //#region src/components/form/Form/modern/field-binding.ts
@@ -9,10 +9,26 @@ function sameFieldView(a, b) {
 function createModernFieldBackend(form, name) {
 	const { store, getServerSnapshot } = getControllerInternals(form, `The "${name}" field`);
 	const key = getFieldKey(name);
+	const path = normalizePath(name);
+	const views = /* @__PURE__ */ new WeakMap();
+	const view = (state) => {
+		if (state.fields[key]) return state.fields[key];
+		if (!hasPath(state.values, path)) return void 0;
+		let cached = views.get(state);
+		if (!cached) {
+			cached = Object.freeze({
+				value: readPath(state.values, path),
+				errors: Object.freeze([]),
+				status: "unvalidated"
+			});
+			views.set(state, cached);
+		}
+		return cached;
+	};
 	return {
 		subscribe: store.subscribe,
-		getSnapshot: () => store.getFieldSnapshot(name),
-		getServerSnapshot: () => getServerSnapshot().fields[key],
+		getSnapshot: () => view(store.getSnapshot()),
+		getServerSnapshot: () => view(getServerSnapshot()),
 		register: () => store.register(name),
 		change: (value, dontTouch) => store.setValue(name, value, {
 			source: "user",
@@ -27,9 +43,11 @@ function fieldRegistrationOptions(props, defaultTrigger) {
 	return {
 		...Object.hasOwn(props, "defaultValue") ? { defaultValue: props.defaultValue } : {},
 		preserve: props.preserve,
+		dependsOn: props.dependsOn,
+		deps: props.deps,
 		isEqual: props.isEqual,
 		rules: props.isRequired && !rules?.some((rule) => rule.required) ? [{ required: true }, ...rules ?? []] : rules,
-		rulesKey: props.rulesKey === void 0 ? void 0 : `${props.isRequired ? "required:" : ""}${props.rulesKey}`,
+		rulesKey: props.rulesKey,
 		validationDelay: props.validationDelay,
 		validateTrigger: props.validateTrigger ?? defaultTrigger ?? "onBlur",
 		errorPolicy: props.errorPolicy

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

@@ -1 +1 @@
-{"version":3,"file":"field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field-binding.ts"],"sourcesContent":["import { getControllerInternals } from './controller';\nimport { getFieldKey } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FieldCoreProps, ValidateTrigger } from '../../../../shared/form';\nimport type { FormController } from './controller';\nimport type {\n  FieldState,\n  RegistrationOptions,\n  RegistrationToken,\n} from './types';\n\n/** The only state a bound input renders; metadata stays in selector subscribers. */\nexport type FieldView = Pick<\n  FieldState<ReactNode>,\n  'value' | 'errors' | 'status'\n>;\n\nexport interface FieldBackendHandle {\n  subscribe(listener: () => void): () => void;\n  getSnapshot(): FieldView | undefined;\n  getServerSnapshot(): FieldView | undefined;\n  register(): RegistrationToken<ReactNode> | undefined;\n  change(value: unknown, dontTouch: boolean, trigger: ValidateTrigger): void;\n  blur(): void;\n}\n\nexport function sameFieldView(a?: FieldView, b?: FieldView) {\n  return (\n    Object.is(a?.value, b?.value) &&\n    a?.errors === b?.errors &&\n    a?.status === b?.status\n  );\n}\n\nexport function createModernFieldBackend(\n  form: FormController<any>,\n  name: string,\n): FieldBackendHandle {\n  const { store, getServerSnapshot } = getControllerInternals(\n    form,\n    `The \"${name}\" field`,\n  );\n  const key = getFieldKey(name);\n  return {\n    subscribe: store.subscribe,\n    getSnapshot: () => store.getFieldSnapshot(name),\n    getServerSnapshot: () => getServerSnapshot().fields[key],\n    register: () => store.register(name),\n    change: (value, dontTouch) =>\n      store.setValue(name, value, {\n        source: 'user',\n        touch: !dontTouch,\n        validate: dontTouch ? 'never' : 'auto',\n      }),\n    blur: () => store.blur(name),\n  };\n}\n\nexport function fieldRegistrationOptions(\n  props: FieldCoreProps & {\n    defaultValue?: unknown;\n    validateTrigger?: ValidateTrigger;\n  },\n  defaultTrigger?: ValidateTrigger,\n): RegistrationOptions<ReactNode> {\n  const rules = props.rules?.flat(Infinity);\n  return {\n    ...(Object.hasOwn(props, 'defaultValue')\n      ? { defaultValue: props.defaultValue }\n      : {}),\n    preserve: props.preserve,\n    isEqual: props.isEqual,\n    rules:\n      props.isRequired && !rules?.some((rule) => rule.required)\n        ? [{ required: true }, ...(rules ?? [])]\n        : rules,\n    rulesKey:\n      props.rulesKey === undefined\n        ? undefined\n        : `${props.isRequired ? 'required:' : ''}${props.rulesKey}`,\n    validationDelay: props.validationDelay,\n    validateTrigger: props.validateTrigger ?? defaultTrigger ?? 'onBlur',\n    errorPolicy: props.errorPolicy,\n  };\n}\n"],"mappings":";;;;;AA2BA,SAAgB,cAAc,GAAe,GAAe;AAC1D,QACE,OAAO,GAAG,GAAG,OAAO,GAAG,MAAM,IAC7B,GAAG,WAAW,GAAG,UACjB,GAAG,WAAW,GAAG;;AAIrB,SAAgB,yBACd,MACA,MACoB;CACpB,MAAM,EAAE,OAAO,sBAAsB,uBACnC,MACA,QAAQ,KAAK,SACd;CACD,MAAM,MAAM,YAAY,KAAK;AAC7B,QAAO;EACL,WAAW,MAAM;EACjB,mBAAmB,MAAM,iBAAiB,KAAK;EAC/C,yBAAyB,mBAAmB,CAAC,OAAO;EACpD,gBAAgB,MAAM,SAAS,KAAK;EACpC,SAAS,OAAO,cACd,MAAM,SAAS,MAAM,OAAO;GAC1B,QAAQ;GACR,OAAO,CAAC;GACR,UAAU,YAAY,UAAU;GACjC,CAAC;EACJ,YAAY,MAAM,KAAK,KAAK;EAC7B;;AAGH,SAAgB,yBACd,OAIA,gBACgC;CAChC,MAAM,QAAQ,MAAM,OAAO,KAAK,SAAS;AACzC,QAAO;EACL,GAAI,OAAO,OAAO,OAAO,eAAe,GACpC,EAAE,cAAc,MAAM,cAAc,GACpC,EAAE;EACN,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,OACE,MAAM,cAAc,CAAC,OAAO,MAAM,SAAS,KAAK,SAAS,GACrD,CAAC,EAAE,UAAU,MAAM,EAAE,GAAI,SAAS,EAAE,CAAE,GACtC;EACN,UACE,MAAM,aAAa,SACf,SACA,GAAG,MAAM,aAAa,cAAc,KAAK,MAAM;EACrD,iBAAiB,MAAM;EACvB,iBAAiB,MAAM,mBAAmB,kBAAkB;EAC5D,aAAa,MAAM;EACpB"}
+{"version":3,"file":"field-binding.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field-binding.ts"],"sourcesContent":["import { getControllerInternals } from './controller';\nimport { getFieldKey, hasPath, normalizePath, readPath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FieldCoreProps, ValidateTrigger } from '../../../../shared/form';\nimport type { FormController, ModernFormState } from './controller';\nimport type {\n  FieldState,\n  RegistrationOptions,\n  RegistrationToken,\n} from './types';\nimport type { FormPath } from './values';\n\n/** The only state a bound input renders; metadata stays in selector subscribers. */\nexport type FieldView = Pick<\n  FieldState<ReactNode>,\n  'value' | 'errors' | 'status'\n>;\n\nexport interface FieldBackendHandle {\n  subscribe(listener: () => void): () => void;\n  getSnapshot(): FieldView | undefined;\n  getServerSnapshot(): FieldView | undefined;\n  register(): RegistrationToken<ReactNode> | undefined;\n  change(value: unknown, dontTouch: boolean, trigger: ValidateTrigger): void;\n  blur(): void;\n}\n\nexport function sameFieldView(a?: FieldView, b?: FieldView) {\n  return (\n    Object.is(a?.value, b?.value) &&\n    a?.errors === b?.errors &&\n    a?.status === b?.status\n  );\n}\n\nexport function createModernFieldBackend(\n  form: FormController<any>,\n  name: FormPath,\n): FieldBackendHandle {\n  const { store, getServerSnapshot } = getControllerInternals(\n    form,\n    `The \"${name}\" field`,\n  );\n  const key = getFieldKey(name);\n  const path = normalizePath(name);\n  const views = new WeakMap<object, FieldView>();\n  const view = (state: ModernFormState): FieldView | undefined => {\n    if (state.fields[key]) return state.fields[key];\n    if (!hasPath(state.values, path)) return undefined;\n    let cached = views.get(state);\n    if (!cached) {\n      cached = Object.freeze({\n        value: readPath(state.values, path),\n        errors: Object.freeze([]),\n        status: 'unvalidated',\n      });\n      views.set(state, cached);\n    }\n    return cached;\n  };\n  return {\n    subscribe: store.subscribe,\n    getSnapshot: () => view(store.getSnapshot()),\n    getServerSnapshot: () => view(getServerSnapshot()),\n    register: () => store.register(name),\n    change: (value, dontTouch) =>\n      store.setValue(name, value, {\n        source: 'user',\n        touch: !dontTouch,\n        validate: dontTouch ? 'never' : 'auto',\n      }),\n    blur: () => store.blur(name),\n  };\n}\n\nexport function fieldRegistrationOptions(\n  props: FieldCoreProps & {\n    defaultValue?: unknown;\n    validateTrigger?: ValidateTrigger;\n  },\n  defaultTrigger?: ValidateTrigger,\n): RegistrationOptions<ReactNode> {\n  const rules = props.rules?.flat(Infinity);\n  return {\n    ...(Object.hasOwn(props, 'defaultValue')\n      ? { defaultValue: props.defaultValue }\n      : {}),\n    preserve: props.preserve,\n    dependsOn: props.dependsOn,\n    deps: props.deps,\n    isEqual: props.isEqual,\n    rules:\n      props.isRequired && !rules?.some((rule) => rule.required)\n        ? [{ required: true }, ...(rules ?? [])]\n        : rules,\n    rulesKey: props.rulesKey,\n    validationDelay: props.validationDelay,\n    validateTrigger: props.validateTrigger ?? defaultTrigger ?? 'onBlur',\n    errorPolicy: props.errorPolicy,\n  };\n}\n"],"mappings":";;;;;AA4BA,SAAgB,cAAc,GAAe,GAAe;AAC1D,QACE,OAAO,GAAG,GAAG,OAAO,GAAG,MAAM,IAC7B,GAAG,WAAW,GAAG,UACjB,GAAG,WAAW,GAAG;;AAIrB,SAAgB,yBACd,MACA,MACoB;CACpB,MAAM,EAAE,OAAO,sBAAsB,uBACnC,MACA,QAAQ,KAAK,SACd;CACD,MAAM,MAAM,YAAY,KAAK;CAC7B,MAAM,OAAO,cAAc,KAAK;CAChC,MAAM,wBAAQ,IAAI,SAA4B;CAC9C,MAAM,QAAQ,UAAkD;AAC9D,MAAI,MAAM,OAAO,KAAM,QAAO,MAAM,OAAO;AAC3C,MAAI,CAAC,QAAQ,MAAM,QAAQ,KAAK,CAAE,QAAO;EACzC,IAAI,SAAS,MAAM,IAAI,MAAM;AAC7B,MAAI,CAAC,QAAQ;AACX,YAAS,OAAO,OAAO;IACrB,OAAO,SAAS,MAAM,QAAQ,KAAK;IACnC,QAAQ,OAAO,OAAO,EAAE,CAAC;IACzB,QAAQ;IACT,CAAC;AACF,SAAM,IAAI,OAAO,OAAO;;AAE1B,SAAO;;AAET,QAAO;EACL,WAAW,MAAM;EACjB,mBAAmB,KAAK,MAAM,aAAa,CAAC;EAC5C,yBAAyB,KAAK,mBAAmB,CAAC;EAClD,gBAAgB,MAAM,SAAS,KAAK;EACpC,SAAS,OAAO,cACd,MAAM,SAAS,MAAM,OAAO;GAC1B,QAAQ;GACR,OAAO,CAAC;GACR,UAAU,YAAY,UAAU;GACjC,CAAC;EACJ,YAAY,MAAM,KAAK,KAAK;EAC7B;;AAGH,SAAgB,yBACd,OAIA,gBACgC;CAChC,MAAM,QAAQ,MAAM,OAAO,KAAK,SAAS;AACzC,QAAO;EACL,GAAI,OAAO,OAAO,OAAO,eAAe,GACpC,EAAE,cAAc,MAAM,cAAc,GACpC,EAAE;EACN,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,MAAM,MAAM;EACZ,SAAS,MAAM;EACf,OACE,MAAM,cAAc,CAAC,OAAO,MAAM,SAAS,KAAK,SAAS,GACrD,CAAC,EAAE,UAAU,MAAM,EAAE,GAAI,SAAS,EAAE,CAAE,GACtC;EACN,UAAU,MAAM;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,MAAM,mBAAmB,kBAAkB;EAC5D,aAAa,MAAM;EACpB"}

package/dist/components/form/Form/modern/field.d.ts

@@ -0,0 +1,30 @@
+
+import { FormPath } from "./values.js";
+import { CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue, FormValues } from "./read-types.js";
+import { RegistrationOptions } from "./types.js";
+import { FormController } from "./controller.js";
+import { ReactNode } from "react";
+
+//#region src/components/form/Form/modern/field.d.ts
+declare const FIELD_VALUE: unique symbol;
+/** Pure configuration, never a mutable/reactive field instance. */
+interface FormField<Value = unknown> {
+  readonly [FIELD_VALUE]: Value;
+  readonly form: FormController<any>;
+  readonly path: FormPath;
+  readonly options: RegistrationOptions<ReactNode>;
+}
+interface FormFieldContext<T extends object> {
+  readonly signal: AbortSignal;
+  getValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+  getValues(): FormValues<T>;
+}
+interface FormFieldOptions<T extends object, Value> extends Omit<RegistrationOptions<ReactNode>, 'defaultValue' | 'isEqual'> {
+  readonly validate?: (value: FormReadValue<Value> | undefined, context: FormFieldContext<T>) => ReactNode | void | Promise<ReactNode | void>;
+  readonly defaultValue?: Value;
+  readonly isEqual?: (previous: FormReadValue<Value> | undefined, next: FormReadValue<Value> | undefined) => boolean;
+}
+//#endregion
+export { FormField, FormFieldContext, FormFieldOptions };
+//# sourceMappingURL=field.d.ts.map

package/dist/components/form/Form/modern/field.js

@@ -0,0 +1,23 @@
+/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+import { normalizePath } from "./values.js";
+
+//#region src/components/form/Form/modern/field.ts
+function createFormField(form, path, options = {}) {
+	const { validate, ...registration } = options;
+	const normalized = normalizePath(path);
+	return Object.freeze({
+		form,
+		path: typeof path === "string" ? path : normalized,
+		options: Object.freeze({
+			...registration,
+			...validate && { rules: [...registration.rules ?? [], {
+				authored: validate,
+				validator: (_rule, value, context) => validate(value, context)
+			}] }
+		})
+	});
+}
+
+//#endregion
+export { createFormField };
+//# sourceMappingURL=field.js.map

package/dist/components/form/Form/modern/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../../../src/components/form/Form/modern/field.ts"],"sourcesContent":["import { normalizePath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type { FormController } from './controller';\nimport type { CheckedFormPath, FormValueAtPath } from './path-types';\nimport type { FormReadValue, FormValues } from './read-types';\nimport type { RegistrationOptions } from './types';\nimport type { FormPath } from './values';\n\ndeclare const FIELD_VALUE: unique symbol;\n\n/** Pure configuration, never a mutable/reactive field instance. */\nexport interface FormField<Value = unknown> {\n  readonly [FIELD_VALUE]: Value;\n  readonly form: FormController<any>;\n  readonly path: FormPath;\n  readonly options: RegistrationOptions<ReactNode>;\n}\n\nexport interface FormFieldContext<T extends object> {\n  readonly signal: AbortSignal;\n  getValue<const Path extends FormPath>(\n    path: CheckedFormPath<T, Path>,\n  ): FormReadValue<FormValueAtPath<T, Path>> | undefined;\n  getValues(): FormValues<T>;\n}\n\nexport interface FormFieldOptions<T extends object, Value>\n  extends Omit<RegistrationOptions<ReactNode>, 'defaultValue' | 'isEqual'> {\n  readonly validate?: (\n    value: FormReadValue<Value> | undefined,\n    context: FormFieldContext<T>,\n  ) => ReactNode | void | Promise<ReactNode | void>;\n  readonly defaultValue?: Value;\n  readonly isEqual?: (\n    previous: FormReadValue<Value> | undefined,\n    next: FormReadValue<Value> | undefined,\n  ) => boolean;\n}\n\nexport function createFormField<T extends object, Value>(\n  form: FormController<T>,\n  path: FormPath,\n  options: FormFieldOptions<T, Value> = {},\n): FormField<Value> {\n  const { validate, ...registration } = options;\n  const normalized = normalizePath(path);\n  return Object.freeze({\n    form,\n    path: typeof path === 'string' ? path : normalized,\n    options: Object.freeze({\n      ...registration,\n      ...(validate && {\n        rules: [\n          ...(registration.rules ?? []),\n          {\n            // The adapter has fixed source. Retain the authored function for\n            // lazy rule comparison, without changing the consumer's deps.\n            authored: validate,\n            validator: (_rule, value, context) =>\n              validate(value, context as FormFieldContext<T>),\n          },\n        ],\n      }),\n    }),\n  }) as FormField<Value>;\n}\n"],"mappings":";;;;AAwCA,SAAgB,gBACd,MACA,MACA,UAAsC,EAAE,EACtB;CAClB,MAAM,EAAE,UAAU,GAAG,iBAAiB;CACtC,MAAM,aAAa,cAAc,KAAK;AACtC,QAAO,OAAO,OAAO;EACnB;EACA,MAAM,OAAO,SAAS,WAAW,OAAO;EACxC,SAAS,OAAO,OAAO;GACrB,GAAG;GACH,GAAI,YAAY,EACd,OAAO,CACL,GAAI,aAAa,SAAS,EAAE,EAC5B;IAGE,UAAU;IACV,YAAY,OAAO,OAAO,YACxB,SAAS,OAAO,QAA+B;IAClD,CACF,EACF;GACF,CAAC;EACH,CAAC"}

package/dist/components/form/Form/modern/path-types.d.ts

@@ -2,11 +2,15 @@
 import { FormPath } from "./values.js";
 
 //#region src/components/form/Form/modern/path-types.d.ts
+type ValidPath<Value, Path extends readonly (string | number)[]> = unknown extends Value ? true : Path extends readonly [infer Key extends string | number, ...infer Rest extends readonly (string | number)[]] ? Key extends keyof NonNullable<Value> ? Rest extends readonly [] ? true : ValidPath<NonNullable<Value>[Key], Rest> : NonNullable<Value> extends readonly (infer Item)[] ? Key extends `${number}` ? ValidPath<Item, Rest> : false : false : true;
+/** Check only the supplied literal path. Widened strings support dynamic models. */
+type CheckedFormPath<T extends object, Path extends FormPath> = Path & (Path extends string ? string extends Path ? unknown : Path extends keyof T ? unknown : never : Path extends readonly (string | number)[] ? ValidPath<T, Path> extends false ? never : unknown : never);
 /** Resolve only the supplied path; never enumerate a model's possible paths. */
 type SegmentValue<Value, Key extends string | number> = Value extends null | undefined ? undefined : Key extends keyof Value ? Value[Key] : Value extends readonly (infer Item)[] ? Key extends `${number}` ? Item : unknown : unknown;
 type TupleValue<Value, Path extends readonly (string | number)[]> = Path extends readonly [infer Key extends string | number, ...infer Rest extends readonly (string | number)[]] ? Rest extends readonly [] ? SegmentValue<Value, Key> : TupleValue<SegmentValue<Value, Key>, Rest> : unknown;
 /** Strings are literal keys; unknown/dynamic names and paths return unknown. */
 type FormValueAtPath<Values extends object, Path extends FormPath> = Path extends string ? Path extends keyof Values ? Values[Path] : unknown : Path extends readonly (string | number)[] ? TupleValue<Values, Path> : unknown;
+type CheckedFormDependencies<T extends object, Dependencies extends readonly FormPath[]> = { readonly [I in keyof Dependencies]: CheckedFormPath<T, Dependencies[I]> };
 //#endregion
-export { FormValueAtPath };
+export { CheckedFormDependencies, CheckedFormPath, FormValueAtPath };
 //# sourceMappingURL=path-types.d.ts.map

package/dist/components/form/Form/modern/react.d.ts

@@ -1,10 +1,15 @@
 
-import { FormController, ModernFormState, UseFormControllerOptions } from "./controller.js";
+import { FormPath } from "./values.js";
+import { CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue } from "./read-types.js";
+import { FormController, ModernFieldState, ModernFormState, UseFormControllerOptions } from "./controller.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/Form/modern/react.d.ts
 declare function useFormController<T extends object = Record<string, unknown>>(options?: UseFormControllerOptions<T>): FormController<T>;
+declare function useFormValue<T extends object, const Path extends FormPath>(form: FormController<T>, path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+declare function useFormFieldState<T extends object, const Path extends FormPath>(form: FormController<T>, path: CheckedFormPath<T, Path>): ModernFieldState<FormValueAtPath<T, Path>> | undefined;
 interface FormSelectorOptions<Selected> {
   isEqual?: (previous: Selected, next: Selected) => boolean;
 }
@@ -17,5 +22,5 @@ interface FormSubscribeProps<T extends object, Selected> extends FormSelectorOpt
 }
 declare function FormSubscribe<T extends object = Record<string, unknown>, Selected = unknown>(props: FormSubscribeProps<T, Selected>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormSelector };
+export { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormFieldState, useFormSelector, useFormValue };
 //# sourceMappingURL=react.d.ts.map

package/dist/components/form/Form/modern/react.js

@@ -1,15 +1,33 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
+import { getFieldKey, normalizePath, readPath } from "./values.js";
 import { createFormController, getControllerInternals } from "./controller.js";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
 
 //#region src/components/form/Form/modern/react.tsx
 function useFormController(options) {
 	const [controller] = useState(() => createFormController(options));
+	const { store } = getControllerInternals(controller, "Form.useController()");
+	useLayoutEffect$1(() => {
+		store.updateCallbacks({
+			onSubmit: options?.onSubmit,
+			onSubmitFailed: options?.onSubmitFailed,
+			onValuesChange: options?.onValuesChange
+		});
+	});
 	return controller;
 }
+function useFormValue(form, path) {
+	const normalized = useMemo(() => normalizePath(path), [path]);
+	return useFormSelector(form, (state) => readPath(state.values, normalized));
+}
+function useFormFieldState(form, path) {
+	const key = useMemo(() => getFieldKey(path), [path]);
+	return useFormSelector(form, (state) => state.fields[key]);
+}
 function useFormSelector(controller, selector, options) {
 	const { getServerSnapshot } = getControllerInternals(controller, "Form.useSelector()");
 	return useSyncExternalStoreWithSelector(controller.subscribe, controller.getSnapshot, getServerSnapshot, selector, options?.isEqual);
@@ -23,5 +41,5 @@ function FormSubscribe(props) {
 }
 
 //#endregion
-export { FormSubscribe, useFormController, useFormSelector };
+export { FormSubscribe, useFormController, useFormFieldState, useFormSelector, useFormValue };
 //# sourceMappingURL=react.js.map

package/dist/components/form/Form/modern/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../../../../../src/components/form/Form/modern/react.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { ModernControllerContext } from './context';\nimport { createFormController, getControllerInternals } from './controller';\n\nimport type { ReactNode } from 'react';\nimport type {\n  FormController,\n  ModernFormState,\n  UseFormControllerOptions,\n} from './controller';\n\nexport function useFormController<T extends object = Record<string, unknown>>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  // Initial options seed synchronously. A new options object never resets the\n  // controller, and the creator does not subscribe its owner to form changes.\n  const [controller] = useState(() => createFormController(options));\n  // Do not dispose from effect cleanup: Strict Mode and hidden React trees\n  // reconnect effects while preserving state. Subscriptions own their cleanup;\n  // the controller has no external resources and is collected with its owner.\n  return controller;\n}\n\nexport interface FormSelectorOptions<Selected> {\n  isEqual?: (previous: Selected, next: Selected) => boolean;\n}\n\nexport function useFormSelector<T extends object, Selected>(\n  controller: FormController<T>,\n  selector: (state: ModernFormState<T>) => Selected,\n  options?: FormSelectorOptions<Selected>,\n): Selected {\n  const { getServerSnapshot } = getControllerInternals(\n    controller,\n    'Form.useSelector()',\n  );\n  return useSyncExternalStoreWithSelector(\n    controller.subscribe,\n    controller.getSnapshot,\n    getServerSnapshot,\n    selector,\n    options?.isEqual,\n  );\n}\n\nexport interface FormSubscribeProps<T extends object, Selected>\n  extends FormSelectorOptions<Selected> {\n  /** Omit to use modern context. An explicit undefined detaches from context. */\n  form?: FormController<T>;\n  selector: (state: ModernFormState<T>) => Selected;\n  children: (selected: Selected) => ReactNode;\n}\n\nexport function FormSubscribe<\n  T extends object = Record<string, unknown>,\n  Selected = unknown,\n>(props: FormSubscribeProps<T, Selected>) {\n  const fromContext = useContext(ModernControllerContext);\n  const controller = Object.hasOwn(props, 'form') ? props.form : fromContext;\n  if (!controller) {\n    throw new Error(\n      '<Form.Subscribe> requires a modern form prop or a modern <Form> root.',\n    );\n  }\n  const selected = useFormSelector(controller, props.selector, {\n    isEqual: props.isEqual,\n  });\n  return <>{props.children(selected)}</>;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,kBACd,SACmB;CAGnB,MAAM,CAAC,cAAc,eAAe,qBAAqB,QAAQ,CAAC;AAIlE,QAAO;;AAOT,SAAgB,gBACd,YACA,UACA,SACU;CACV,MAAM,EAAE,sBAAsB,uBAC5B,YACA,qBACD;AACD,QAAO,iCACL,WAAW,WACX,WAAW,aACX,mBACA,UACA,SAAS,QACV;;AAWH,SAAgB,cAGd,OAAwC;CACxC,MAAM,cAAc,WAAW,wBAAwB;CACvD,MAAM,aAAa,OAAO,OAAO,OAAO,OAAO,GAAG,MAAM,OAAO;AAC/D,KAAI,CAAC,WACH,OAAM,IAAI,MACR,wEACD;CAEH,MAAM,WAAW,gBAAgB,YAAY,MAAM,UAAU,EAC3D,SAAS,MAAM,SAChB,CAAC;AACF,QAAO,4CAAG,MAAM,SAAS,SAAS,GAAI"}
+{"version":3,"file":"react.js","names":[],"sources":["../../../../../src/components/form/Form/modern/react.tsx"],"sourcesContent":["import { useContext, useMemo, useState } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';\n\nimport { useLayoutEffect } from '../../../../utils/react/useLayoutEffect';\n\nimport { ModernControllerContext } from './context';\nimport { createFormController, getControllerInternals } from './controller';\nimport { getFieldKey, normalizePath, readPath } from './values';\n\nimport type { ReactNode } from 'react';\nimport type {\n  FormController,\n  ModernFieldState,\n  ModernFormState,\n  UseFormControllerOptions,\n} from './controller';\nimport type { CheckedFormPath, FormValueAtPath } from './path-types';\nimport type { FormReadValue } from './read-types';\nimport type { FormPath } from './values';\n\nexport function useFormController<T extends object = Record<string, unknown>>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  // Initial options seed synchronously. A new options object never resets the\n  // controller, and the creator does not subscribe its owner to form changes.\n  const [controller] = useState(() => createFormController(options));\n  const { store } = getControllerInternals(controller, 'Form.useController()');\n  // Intentionally commit after every render: callbacks are live, unlike the\n  // initial defaults/policy. Abandoned renders must never replace callbacks.\n  useLayoutEffect(() => {\n    store.updateCallbacks({\n      onSubmit: options?.onSubmit,\n      onSubmitFailed: options?.onSubmitFailed,\n      onValuesChange: options?.onValuesChange,\n    });\n  });\n  // Do not dispose from effect cleanup: Strict Mode and hidden React trees\n  // reconnect effects while preserving state. Subscriptions own their cleanup;\n  // the controller has no external resources and is collected with its owner.\n  return controller;\n}\n\nexport function useFormValue<T extends object, const Path extends FormPath>(\n  form: FormController<T>,\n  path: CheckedFormPath<T, Path>,\n): FormReadValue<FormValueAtPath<T, Path>> | undefined {\n  const normalized = useMemo(() => normalizePath(path), [path]);\n  return useFormSelector(form, (state) =>\n    readPath(state.values, normalized),\n  ) as FormReadValue<FormValueAtPath<T, Path>> | undefined;\n}\n\nexport function useFormFieldState<\n  T extends object,\n  const Path extends FormPath,\n>(\n  form: FormController<T>,\n  path: CheckedFormPath<T, Path>,\n): ModernFieldState<FormValueAtPath<T, Path>> | undefined {\n  const key = useMemo(() => getFieldKey(path), [path]);\n  return useFormSelector(form, (state) => state.fields[key]) as\n    | ModernFieldState<FormValueAtPath<T, Path>>\n    | undefined;\n}\n\nexport interface FormSelectorOptions<Selected> {\n  isEqual?: (previous: Selected, next: Selected) => boolean;\n}\n\nexport function useFormSelector<T extends object, Selected>(\n  controller: FormController<T>,\n  selector: (state: ModernFormState<T>) => Selected,\n  options?: FormSelectorOptions<Selected>,\n): Selected {\n  const { getServerSnapshot } = getControllerInternals(\n    controller,\n    'Form.useSelector()',\n  );\n  return useSyncExternalStoreWithSelector(\n    controller.subscribe,\n    controller.getSnapshot,\n    getServerSnapshot,\n    selector,\n    options?.isEqual,\n  );\n}\n\nexport interface FormSubscribeProps<T extends object, Selected>\n  extends FormSelectorOptions<Selected> {\n  /** Omit to use modern context. An explicit undefined detaches from context. */\n  form?: FormController<T>;\n  selector: (state: ModernFormState<T>) => Selected;\n  children: (selected: Selected) => ReactNode;\n}\n\nexport function FormSubscribe<\n  T extends object = Record<string, unknown>,\n  Selected = unknown,\n>(props: FormSubscribeProps<T, Selected>) {\n  const fromContext = useContext(ModernControllerContext);\n  const controller = Object.hasOwn(props, 'form') ? props.form : fromContext;\n  if (!controller) {\n    throw new Error(\n      '<Form.Subscribe> requires a modern form prop or a modern <Form> root.',\n    );\n  }\n  const selected = useFormSelector(controller, props.selector, {\n    isEqual: props.isEqual,\n  });\n  return <>{props.children(selected)}</>;\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,kBACd,SACmB;CAGnB,MAAM,CAAC,cAAc,eAAe,qBAAqB,QAAQ,CAAC;CAClE,MAAM,EAAE,UAAU,uBAAuB,YAAY,uBAAuB;AAG5E,yBAAsB;AACpB,QAAM,gBAAgB;GACpB,UAAU,SAAS;GACnB,gBAAgB,SAAS;GACzB,gBAAgB,SAAS;GAC1B,CAAC;GACF;AAIF,QAAO;;AAGT,SAAgB,aACd,MACA,MACqD;CACrD,MAAM,aAAa,cAAc,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAC7D,QAAO,gBAAgB,OAAO,UAC5B,SAAS,MAAM,QAAQ,WAAW,CACnC;;AAGH,SAAgB,kBAId,MACA,MACwD;CACxD,MAAM,MAAM,cAAc,YAAY,KAAK,EAAE,CAAC,KAAK,CAAC;AACpD,QAAO,gBAAgB,OAAO,UAAU,MAAM,OAAO,KAAK;;AAS5D,SAAgB,gBACd,YACA,UACA,SACU;CACV,MAAM,EAAE,sBAAsB,uBAC5B,YACA,qBACD;AACD,QAAO,iCACL,WAAW,WACX,WAAW,aACX,mBACA,UACA,SAAS,QACV;;AAWH,SAAgB,cAGd,OAAwC;CACxC,MAAM,cAAc,WAAW,wBAAwB;CACvD,MAAM,aAAa,OAAO,OAAO,OAAO,OAAO,GAAG,MAAM,OAAO;AAC/D,KAAI,CAAC,WACH,OAAM,IAAI,MACR,wEACD;CAEH,MAAM,WAAW,gBAAgB,YAAY,MAAM,UAAU,EAC3D,SAAS,MAAM,SAChB,CAAC;AACF,QAAO,4CAAG,MAAM,SAAS,SAAS,GAAI"}

package/dist/components/form/Form/modern/read-types.d.ts

@@ -0,0 +1,11 @@
+
+import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
+
+//#region src/components/form/Form/modern/read-types.d.ts
+type AtomicFormValue = Date | RegExp | File | Blob | Map<any, any> | Set<any> | ((...args: any[]) => any) | CalendarDate | CalendarDateTime | Time | ZonedDateTime;
+/** Partial immutable data; platform and date-control values stay atomic. */
+type FormReadValue<T> = T extends AtomicFormValue ? T : T extends object ? { readonly [K in keyof T]?: FormReadValue<T[K]> } : T;
+type FormValues<T extends object> = FormReadValue<T>;
+//#endregion
+export { FormReadValue, FormValues };
+//# sourceMappingURL=read-types.d.ts.map

package/dist/components/form/Form/modern/store.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
 import { FORM_BACKEND } from "../backend.js";
+import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, pathValueChanged, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 import { rulesSignature, runRules } from "./validation.js";
-import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 
 //#region src/components/form/Form/modern/store.ts
 const EMPTY_ERRORS = Object.freeze([]);
@@ -10,6 +10,12 @@ const EMPTY_FIELDS = Object.freeze(Object.create(null));
 function related(a, b) {
 	return a.slice(0, Math.min(a.length, b.length)).every((key, index) => key === b[index]);
 }
+function sameDependencies(a = [], b = []) {
+	return a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
+}
+function samePaths(a = [], b = []) {
+	return a.length === b.length && a.every((path, index) => sameDependencies(path, b[index]));
+}
 /** Only traverse path ancestors; a field's value (even cyclic data) is a leaf. */
 function projectActive(value, path, previous) {
 	if (path.terminal) return value;
@@ -54,6 +60,7 @@ function createFormStore(inputOptions = {}) {
 		isInvalid: false,
 		isValidating: false,
 		isSubmitting: false,
+		canReset: false,
 		submitError: void 0,
 		revision: 0
 	});
@@ -103,6 +110,8 @@ function createFormStore(inputOptions = {}) {
 	function invalidate(record, keepErrors = false) {
 		const controller = record.validation;
 		record.validation = void 0;
+		record.reads = void 0;
+		record.readsAll = false;
 		record.validationRevision++;
 		record.status = "unvalidated";
 		if (!keepErrors) record.errors = EMPTY_ERRORS;
@@ -114,11 +123,24 @@ function createFormStore(inputOptions = {}) {
 			controller.abort();
 		}
 	}
+	function dependencyChanged(record, previous) {
+		return record.owner?.options.dependsOn?.some((path) => pathValueChanged(previous, values, path)) ?? false;
+	}
+	function validationReadChanged(record, previous) {
+		if (!record.validation) return false;
+		if (record.readsAll && previous !== values) return true;
+		for (const path of record.reads?.values() ?? []) if (pathValueChanged(previous, values, path)) return true;
+		return false;
+	}
 	function invalidateRelated(path, previous, config) {
-		for (const record of records.values()) if (related(path, record.path) || !Object.is(readPath(previous, record.path), readPath(values, record.path)) || hasPath(previous, record.path) !== hasPath(values, record.path)) {
-			const revalidate = !!config && !!record.registrations.size && (config.validate === "always" || config.validate !== "never" && (record.owner?.options.validateTrigger === "onChange" || !!record.errors.length));
-			invalidate(record, revalidate);
-			if (revalidate) validateRecord(record, false);
+		for (const record of records.values()) {
+			const dependency = dependencyChanged(record, previous);
+			const fieldChanged = related(path, record.path) || pathValueChanged(previous, values, record.path);
+			if (fieldChanged || dependency || validationReadChanged(record, previous)) {
+				const revalidate = (fieldChanged || dependency) && !!config && !!record.registrations.size && (config.validate === "always" || config.validate !== "never" && (record.owner?.options.validateTrigger === "onChange" || !!record.errors.length || dependency && record.status !== "unvalidated"));
+				invalidate(record, revalidate);
+				if (revalidate) validateRecord(record, false);
+			}
 		}
 	}
 	function activeValues() {
@@ -152,6 +174,7 @@ function createFormStore(inputOptions = {}) {
 		let validCount = 0;
 		let invalid = false;
 		let validating = false;
+		let resettable = submitError != null;
 		for (const record of records.values()) {
 			const field = {
 				name: record.name,
@@ -172,6 +195,7 @@ function createFormStore(inputOptions = {}) {
 			});
 			if (field.dirty) dirtyNames.add(record.name);
 			if (field.touched) touchedNames.add(record.name);
+			resettable ||= field.dirty || field.touched || !!field.errors.length || field.status !== "unvalidated";
 			if (field.active) {
 				activeCount++;
 				if (field.status === "valid") validCount++;
@@ -192,6 +216,7 @@ function createFormStore(inputOptions = {}) {
 			isInvalid: invalid,
 			isValidating: validating,
 			isSubmitting: !!submission,
+			canReset: !submission && resettable,
 			submitError,
 			revision: state.revision
 		};
@@ -291,6 +316,8 @@ function createFormStore(inputOptions = {}) {
 	function prepareRegistration(path, config) {
 		const prepared = {
 			...config,
+			deps: config.deps ? Object.freeze([...config.deps]) : void 0,
+			dependsOn: config.dependsOn?.map((dependency) => Object.freeze(normalizePath(dependency))),
 			rules: config.rules?.map((rule) => Object.freeze({
 				...rule,
 				...rule.enum ? { enum: Object.freeze([...rule.enum]) } : {}
@@ -322,7 +349,7 @@ function createFormStore(inputOptions = {}) {
 		assertLive();
 		const normalized = normalizePath(path);
 		const prepared = prepareRegistration(normalized, config);
-		const signature = prepared.rulesKey ?? rulesSignature(prepared.rules);
+		const signature = rulesSignature(prepared.rules, { hashFunctions: prepared.rulesKey === void 0 });
 		const record = ensure(normalized);
 		const registration = {
 			options: prepared,
@@ -345,8 +372,8 @@ function createFormStore(inputOptions = {}) {
 			update(next) {
 				if (released || disposed) return;
 				const prepared = prepareRegistration(record.path, next);
-				const signature = prepared.rulesKey ?? rulesSignature(prepared.rules);
-				const validationChanged = registration.signature !== signature || registration.options.validationDelay !== prepared.validationDelay || registration.options.validateTrigger !== prepared.validateTrigger || registration.options.errorPolicy !== prepared.errorPolicy;
+				const signature = rulesSignature(prepared.rules, { hashFunctions: prepared.rulesKey === void 0 });
+				const validationChanged = registration.signature !== signature || registration.options.rulesKey !== prepared.rulesKey || !sameDependencies(registration.options.deps, prepared.deps) || !samePaths(registration.options.dependsOn, prepared.dependsOn) || registration.options.validationDelay !== prepared.validationDelay || registration.options.validateTrigger !== prepared.validateTrigger || registration.options.errorPolicy !== prepared.errorPolicy;
 				if (!(!registration.defaultConsidered && Object.hasOwn(prepared, "defaultValue")) && !validationChanged && (registration.options.preserve ?? true) === (prepared.preserve ?? true) && registration.options.isEqual === prepared.isEqual) {
 					registration.options = prepared;
 					return;
@@ -355,9 +382,11 @@ function createFormStore(inputOptions = {}) {
 					registration.options = prepared;
 					registration.signature = signature;
 					registration.order = ++order;
-					if (record.owner !== registration || validationChanged) invalidate(record);
+					const revalidate = validationChanged && record.status !== "unvalidated";
+					if (record.owner !== registration || validationChanged) invalidate(record, revalidate);
 					record.owner = registration;
 					seed(record, registration);
+					if (revalidate) validateRecord(record, false);
 				});
 			},
 			release(config = {}) {
@@ -372,9 +401,10 @@ function createFormStore(inputOptions = {}) {
 					if (!record.registrations.size) {
 						if (registration.options.preserve === false) {
 							const removeValue = () => {
+								const previous = values;
 								values = writePath(values, record.path, void 0, true);
 								record.touched = false;
-								for (const other of records.values()) if (other !== record && related(other.path, record.path)) invalidate(other);
+								invalidateRelated(record.path, previous, { validate: "auto" });
 								if (!hasPath(defaults, record.path)) records.delete(record.name);
 							};
 							if (config.deferValueRemoval) {
@@ -429,9 +459,10 @@ function createFormStore(inputOptions = {}) {
 			values = defaults;
 			for (const saved of preserved.sort((a, b) => a.path.length - b.path.length)) values = writePath(values, saved.path, saved.value, !saved.exists);
 			const names = [];
-			for (const record of records.values()) if (!Object.is(readPath(previous, record.path), readPath(values, record.path)) || hasPath(previous, record.path) !== hasPath(values, record.path)) {
-				invalidate(record);
-				names.push(record.name);
+			for (const record of records.values()) {
+				const changed = pathValueChanged(previous, values, record.path);
+				if (changed || dependencyChanged(record, previous) || validationReadChanged(record, previous)) invalidate(record);
+				if (changed) names.push(record.name);
 			}
 			event(names, "adopt");
 		});
@@ -483,6 +514,8 @@ function createFormStore(inputOptions = {}) {
 				const copied = errors.length ? Object.freeze([...errors]) : EMPTY_ERRORS;
 				batch(() => {
 					record.validation = void 0;
+					record.reads = void 0;
+					record.readsAll = false;
 					record.errors = copied;
 					record.status = copied.length ? "invalid" : "valid";
 				});
@@ -533,10 +566,16 @@ function createFormStore(inputOptions = {}) {
 			return Promise.resolve(result(EMPTY_ERRORS, true));
 		}
 		if (!rules.length) {
+			record.reads = void 0;
+			record.readsAll = false;
 			const committed = token.complete(EMPTY_ERRORS);
 			return Promise.resolve(result(EMPTY_ERRORS, !committed || record.validationRevision !== revision));
 		}
-		const value = readPath(values, record.path);
+		const validationValues = values;
+		const reads = /* @__PURE__ */ new Map();
+		record.reads = reads;
+		record.readsAll = false;
+		const value = readPath(validationValues, record.path);
 		return new Promise((resolve) => {
 			let timer;
 			let settled = false;
@@ -557,8 +596,21 @@ function createFormStore(inputOptions = {}) {
 				const errors = await runRules(value, rules, {
 					name: record.name,
 					signal: token.signal,
-					getValue: (path) => readPath(values, normalizePath(path)),
-					getValues: () => values
+					getValue: (path) => {
+						const normalized = normalizePath(path);
+						if (!settled && !token.signal.aborted) {
+							reads.set(getFieldKey(normalized), normalized);
+							if (pathValueChanged(validationValues, values, normalized)) token.cancel();
+						}
+						return readPath(validationValues, normalized);
+					},
+					getValues: () => {
+						if (!settled && !token.signal.aborted) {
+							record.readsAll = true;
+							if (values !== validationValues) token.cancel();
+						}
+						return validationValues;
+					}
 				}, config?.errorPolicy ?? options.errorPolicy ?? "first");
 				if (!settled) {
 					const committed = token.complete(errors);
@@ -669,7 +721,10 @@ function createFormStore(inputOptions = {}) {
 						errors: Object.freeze(errors)
 					};
 					try {
-						await callbacks.onSubmitFailed?.(errors);
+						await callbacks.onSubmitFailed?.({
+							status: "invalid",
+							errors: Object.freeze(errors)
+						});
 					} catch (error) {
 						report(error);
 					}
@@ -691,7 +746,10 @@ function createFormStore(inputOptions = {}) {
 						submitError = error;
 					});
 					try {
-						await callbacks.onSubmitFailed?.(error);
+						await callbacks.onSubmitFailed?.({
+							status: "failed",
+							error
+						});
 					} catch (failure) {
 						report(failure);
 					}
@@ -767,6 +825,11 @@ function createFormStore(inputOptions = {}) {
 		validate,
 		submit,
 		bindCallbacks,
+		updateCallbacks(callbacks) {
+			options.onSubmit = callbacks.onSubmit;
+			options.onSubmitFailed = callbacks.onSubmitFailed;
+			options.onValuesChange = callbacks.onValuesChange;
+		},
 		blur(path) {
 			const record = records.get(getFieldKey(path));
 			if (!record?.registrations.size) return;