@cube-dev/ui-kit 0.180.0 → 0.181.0

package/dist/components/form/Form/ModernFormRoot.js

@@ -1,6 +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 { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
@@ -14,10 +15,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/form/Form/ModernFormRoot.tsx
 const EMPTY_LEGACY_CONTEXT = {};
 function ModernFormRoot(props, ref) {
-	const { form, qa, name, children, orientation = "vertical", labelPosition: authoredLabelPosition, labelWidth: authoredLabelWidth, labelStyles, necessityIndicator, validateTrigger, requiredMark = true, showValid, isDisabled, isReadOnly, isInvalid, isValid, defaultValues, onSubmit, onSubmitFailed, onValuesChange, ...otherProps } = useValidationProps(useProviderProps(props));
+	const { form, qa, name, children, orientation = "vertical", labelPosition: authoredLabelPosition, labelWidth: authoredLabelWidth, labelStyles, necessityIndicator, validateTrigger, requiredMark = true, showValid, isDisabled, isReadOnly, isInvalid, isValid, defaultValues, onSubmit, onSubmitFailed, onValuesChange, submitValues = "active", ...otherProps } = useValidationProps(useProviderProps(props));
 	const labelPosition = authoredLabelPosition ?? (orientation === "horizontal" ? "side" : "top");
 	const labelWidth = authoredLabelWidth ?? (orientation === "horizontal" ? "auto" : void 0);
-	const { store } = getControllerInternals(form, "<Form>");
+	const internals = getControllerInternals(form, "<Form>");
+	const { store } = internals;
+	const rootRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(ref, rootRef), [ref]);
+	useLayoutEffect$1(() => internals.bindRootElement(rootRef.current), [internals]);
 	if (defaultValues !== void 0) throw new Error("A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.");
 	const binding = useRef(void 0);
 	useLayoutEffect$1(() => {
@@ -38,9 +43,10 @@ function ModernFormRoot(props, ref) {
 	const handleSubmit = useEvent((event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		form.submit();
+		form.submit({ include: submitValues });
 	});
 	const handleReset = useEvent((event) => {
+		event.stopPropagation();
 		otherProps.onReset?.(event);
 		if (!event.defaultPrevented) {
 			event.preventDefault();
@@ -70,7 +76,7 @@ function ModernFormRoot(props, ref) {
 	if (labelWidth) styles["$label-width"] = labelWidth;
 	return /* @__PURE__ */ jsx(FormElement, {
 		...filterBaseProps(otherProps, { propNames: formPropNames }),
-		ref,
+		ref: mergedRef,
 		qa,
 		noValidate: true,
 		styles,
@@ -80,7 +86,8 @@ function ModernFormRoot(props, ref) {
 			horizontal: orientation === "horizontal"
 		},
 		onSubmit: otherProps.action == null ? handleSubmit : void 0,
-		onReset: otherProps.action == null ? handleReset : otherProps.onReset,
+		onReset: otherProps.action == null ? void 0 : otherProps.onReset,
+		onResetCapture: otherProps.action == null ? handleReset : void 0,
 		children: /* @__PURE__ */ jsx(FormContext.Provider, {
 			value: EMPTY_LEGACY_CONTEXT,
 			children: /* @__PURE__ */ jsx(ModernControllerContext.Provider, {

package/dist/components/form/Form/ModernFormRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { Provider, useProviderProps } from '../../../provider';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/use-validation-props';\n\nimport {\n  FormContext,\n  FormElement,\n  FormPresentationContext,\n  formPropNames,\n} from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { getControllerInternals } from './modern/controller';\n\nimport type { FormEvent, ReactElement, Ref } from 'react';\nimport type { CubeFormProps, FormPresentationContextValue } from './Form';\nimport type { FormController } from './modern/controller';\nimport type { CallbackBinding, FormCallbacks } from './modern/types';\n\n/** Modern root owns callback bindings; subscriptions stay in descendants. */\nexport interface ModernFormProps<T extends object = Record<string, unknown>>\n  extends Omit<\n    CubeFormProps<T>,\n    'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'\n  > {\n  form: FormController<T>;\n  defaultValues?: never;\n  onReset?: (event: FormEvent<HTMLFormElement>) => void;\n  onSubmit?: FormCallbacks<T>['onSubmit'];\n  onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];\n  onValuesChange?: FormCallbacks<T>['onValuesChange'];\n}\n\nconst EMPTY_LEGACY_CONTEXT = {};\n\nfunction ModernFormRoot<T extends object>(\n  props: ModernFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n): ReactElement {\n  const resolved = useValidationProps(useProviderProps(props));\n  const {\n    form,\n    qa,\n    name,\n    children,\n    orientation = 'vertical',\n    labelPosition: authoredLabelPosition,\n    labelWidth: authoredLabelWidth,\n    labelStyles,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark = true,\n    showValid,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    defaultValues,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    ...otherProps\n  } = resolved;\n  const labelPosition =\n    authoredLabelPosition ?? (orientation === 'horizontal' ? 'side' : 'top');\n  const labelWidth =\n    authoredLabelWidth ?? (orientation === 'horizontal' ? 'auto' : undefined);\n  const { store } = getControllerInternals(form, '<Form>');\n  if (defaultValues !== undefined) {\n    throw new Error(\n      'A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.',\n    );\n  }\n  const binding = useRef<CallbackBinding<T> | undefined>(undefined);\n  useLayoutEffect(() => {\n    const token = store.bindCallbacks({});\n    binding.current = token;\n    return () => {\n      token.release();\n      if (binding.current === token) binding.current = undefined;\n    };\n  }, [store]);\n  useLayoutEffect(() => {\n    binding.current?.update({\n      ...(onSubmit === undefined ? {} : { onSubmit }),\n      ...(onSubmitFailed === undefined ? {} : { onSubmitFailed }),\n      ...(onValuesChange === undefined ? {} : { onValuesChange }),\n    });\n  });\n  const handleSubmit = useEvent((event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    void form.submit();\n  });\n  const handleReset = useEvent((event: FormEvent<HTMLFormElement>) => {\n    otherProps.onReset?.(event);\n    if (!event.defaultPrevented) {\n      event.preventDefault();\n      form.reset();\n    }\n  });\n  const presentation = useMemo<FormPresentationContextValue>(\n    () => ({\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      idPrefix: name,\n    }),\n    [\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      name,\n    ],\n  );\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n  if (labelWidth) styles['$label-width'] = labelWidth;\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={ref}\n      qa={qa}\n      noValidate\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: orientation === 'horizontal',\n      }}\n      onSubmit={otherProps.action == null ? handleSubmit : undefined}\n      onReset={otherProps.action == null ? handleReset : otherProps.onReset}\n    >\n      <FormContext.Provider value={EMPTY_LEGACY_CONTEXT}>\n        <ModernControllerContext.Provider value={form}>\n          <FormPresentationContext.Provider value={presentation}>\n            <Provider\n              insideForm\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            >\n              {children}\n            </Provider>\n          </FormPresentationContext.Provider>\n        </ModernControllerContext.Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\nconst _ModernFormRoot = forwardRef(ModernFormRoot) as unknown as <\n  T extends object,\n>(\n  props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,uBAAuB,EAAE;AAE/B,SAAS,eACP,OACA,KACc;CAEd,MAAM,EACJ,MACA,IACA,MACA,UACA,cAAc,YACd,eAAe,uBACf,YAAY,oBACZ,aACA,oBACA,iBACA,eAAe,MACf,WACA,YACA,YACA,WACA,SACA,eACA,UACA,gBACA,gBACA,GAAG,eAtBY,mBAAmB,iBAAiB,MAAM,CAAC;CAwB5D,MAAM,gBACJ,0BAA0B,gBAAgB,eAAe,SAAS;CACpE,MAAM,aACJ,uBAAuB,gBAAgB,eAAe,SAAS;CACjE,MAAM,EAAE,UAAU,uBAAuB,MAAM,SAAS;AACxD,KAAI,kBAAkB,OACpB,OAAM,IAAI,MACR,gHACD;CAEH,MAAM,UAAU,OAAuC,OAAU;AACjE,yBAAsB;EACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,CAAC;AACrC,UAAQ,UAAU;AAClB,eAAa;AACX,SAAM,SAAS;AACf,OAAI,QAAQ,YAAY,MAAO,SAAQ,UAAU;;IAElD,CAAC,MAAM,CAAC;AACX,yBAAsB;AACpB,UAAQ,SAAS,OAAO;GACtB,GAAI,aAAa,SAAY,EAAE,GAAG,EAAE,UAAU;GAC9C,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC1D,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC3D,CAAC;GACF;CACF,MAAM,eAAe,UAAU,UAAsC;AACnE,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,EAAK,KAAK,QAAQ;GAClB;CACF,MAAM,cAAc,UAAU,UAAsC;AAClE,aAAW,UAAU,MAAM;AAC3B,MAAI,CAAC,MAAM,kBAAkB;AAC3B,SAAM,gBAAgB;AACtB,QAAK,OAAO;;GAEd;CACF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAC1D,KAAI,WAAY,QAAO,kBAAkB;AAEzC,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EACxD;EACD;EACJ;EACQ;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY,gBAAgB;GAC7B;EACD,UAAU,WAAW,UAAU,OAAO,eAAe;EACrD,SAAS,WAAW,UAAU,OAAO,cAAc,WAAW;YAE9D,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC,wBAAwB;IAAS,OAAO;cACvC,oBAAC,wBAAwB;KAAS,OAAO;eACvC,oBAAC;MACC;MACY;MACA;MACD;MACF;MAER;OACQ;MACsB;KACF;IACd;GACX;;AAIlB,MAAM,kBAAkB,WAAW,eAAe;AAMlD,AAAC,gBAAwB,cAAc"}
+{"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { Provider, useProviderProps } from '../../../provider';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/use-validation-props';\n\nimport {\n  FormContext,\n  FormElement,\n  FormPresentationContext,\n  formPropNames,\n} from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { getControllerInternals } from './modern/controller';\n\nimport type { FormEvent, ReactElement, ReactNode, Ref } from 'react';\nimport type { CubeFormProps, FormPresentationContextValue } from './Form';\nimport type { FormController } from './modern/controller';\nimport type { CallbackBinding, FormCallbacks } from './modern/types';\n\n/** Modern root owns callback bindings; subscriptions stay in descendants. */\nexport interface ModernFormProps<T extends object = Record<string, unknown>>\n  extends Omit<\n    CubeFormProps<T>,\n    'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'\n  > {\n  form: FormController<T>;\n  defaultValues?: never;\n  /** Runs before a controller reset; preventDefault cancels the reset, including nested controls. */\n  onReset?: (event: FormEvent<HTMLFormElement>) => void;\n  /** Reserved for controller reset interception. Use onReset to cancel. */\n  onResetCapture?: never;\n  onSubmit?: FormCallbacks<T, ReactNode>['onSubmit'];\n  onSubmitFailed?: FormCallbacks<T, ReactNode>['onSubmitFailed'];\n  onValuesChange?: FormCallbacks<T, ReactNode>['onValuesChange'];\n  /** Payload selection for native submission, including Enter and external buttons. */\n  submitValues?: 'active' | 'all';\n}\n\nconst EMPTY_LEGACY_CONTEXT = {};\n\nfunction ModernFormRoot<T extends object>(\n  props: ModernFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n): ReactElement {\n  const resolved = useValidationProps(useProviderProps(props));\n  const {\n    form,\n    qa,\n    name,\n    children,\n    orientation = 'vertical',\n    labelPosition: authoredLabelPosition,\n    labelWidth: authoredLabelWidth,\n    labelStyles,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark = true,\n    showValid,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    defaultValues,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    submitValues = 'active',\n    ...otherProps\n  } = resolved;\n  const labelPosition =\n    authoredLabelPosition ?? (orientation === 'horizontal' ? 'side' : 'top');\n  const labelWidth =\n    authoredLabelWidth ?? (orientation === 'horizontal' ? 'auto' : undefined);\n  const internals = getControllerInternals(form, '<Form>');\n  const { store } = internals;\n  const rootRef = useRef<HTMLFormElement>(null);\n  const mergedRef = useMemo(() => mergeRefs(ref, rootRef), [ref]);\n  useLayoutEffect(\n    () => internals.bindRootElement(rootRef.current),\n    [internals],\n  );\n  if (defaultValues !== undefined) {\n    throw new Error(\n      'A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.',\n    );\n  }\n  const binding = useRef<CallbackBinding<T, ReactNode> | undefined>(undefined);\n  useLayoutEffect(() => {\n    const token = store.bindCallbacks({});\n    binding.current = token;\n    return () => {\n      token.release();\n      if (binding.current === token) binding.current = undefined;\n    };\n  }, [store]);\n  useLayoutEffect(() => {\n    binding.current?.update({\n      ...(onSubmit === undefined ? {} : { onSubmit }),\n      ...(onSubmitFailed === undefined ? {} : { onSubmitFailed }),\n      ...(onValuesChange === undefined ? {} : { onValuesChange }),\n    });\n  });\n  const handleSubmit = useEvent((event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    void form.submit({ include: submitValues });\n  });\n  const handleReset = useEvent((event: FormEvent<HTMLFormElement>) => {\n    // React Aria's native reset listeners do not honor preventDefault. Handle\n    // controller resets in capture, before they can write mount-time defaults.\n    event.stopPropagation();\n    otherProps.onReset?.(event);\n    if (!event.defaultPrevented) {\n      event.preventDefault();\n      form.reset();\n    }\n  });\n  const presentation = useMemo<FormPresentationContextValue>(\n    () => ({\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      idPrefix: name,\n    }),\n    [\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      name,\n    ],\n  );\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n  if (labelWidth) styles['$label-width'] = labelWidth;\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={mergedRef}\n      qa={qa}\n      noValidate\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: orientation === 'horizontal',\n      }}\n      onSubmit={otherProps.action == null ? handleSubmit : undefined}\n      onReset={otherProps.action == null ? undefined : otherProps.onReset}\n      onResetCapture={otherProps.action == null ? handleReset : undefined}\n    >\n      <FormContext.Provider value={EMPTY_LEGACY_CONTEXT}>\n        <ModernControllerContext.Provider value={form}>\n          <FormPresentationContext.Provider value={presentation}>\n            <Provider\n              insideForm\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            >\n              {children}\n            </Provider>\n          </FormPresentationContext.Provider>\n        </ModernControllerContext.Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\nconst _ModernFormRoot = forwardRef(ModernFormRoot) as unknown as <\n  T extends object,\n>(\n  props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":";;;;;;;;;;;;;;;AA2CA,MAAM,uBAAuB,EAAE;AAE/B,SAAS,eACP,OACA,KACc;CAEd,MAAM,EACJ,MACA,IACA,MACA,UACA,cAAc,YACd,eAAe,uBACf,YAAY,oBACZ,aACA,oBACA,iBACA,eAAe,MACf,WACA,YACA,YACA,WACA,SACA,eACA,UACA,gBACA,gBACA,eAAe,UACf,GAAG,eAvBY,mBAAmB,iBAAiB,MAAM,CAAC;CAyB5D,MAAM,gBACJ,0BAA0B,gBAAgB,eAAe,SAAS;CACpE,MAAM,aACJ,uBAAuB,gBAAgB,eAAe,SAAS;CACjE,MAAM,YAAY,uBAAuB,MAAM,SAAS;CACxD,MAAM,EAAE,UAAU;CAClB,MAAM,UAAU,OAAwB,KAAK;CAC7C,MAAM,YAAY,cAAc,UAAU,KAAK,QAAQ,EAAE,CAAC,IAAI,CAAC;AAC/D,yBACQ,UAAU,gBAAgB,QAAQ,QAAQ,EAChD,CAAC,UAAU,CACZ;AACD,KAAI,kBAAkB,OACpB,OAAM,IAAI,MACR,gHACD;CAEH,MAAM,UAAU,OAAkD,OAAU;AAC5E,yBAAsB;EACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,CAAC;AACrC,UAAQ,UAAU;AAClB,eAAa;AACX,SAAM,SAAS;AACf,OAAI,QAAQ,YAAY,MAAO,SAAQ,UAAU;;IAElD,CAAC,MAAM,CAAC;AACX,yBAAsB;AACpB,UAAQ,SAAS,OAAO;GACtB,GAAI,aAAa,SAAY,EAAE,GAAG,EAAE,UAAU;GAC9C,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC1D,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC3D,CAAC;GACF;CACF,MAAM,eAAe,UAAU,UAAsC;AACnE,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,EAAK,KAAK,OAAO,EAAE,SAAS,cAAc,CAAC;GAC3C;CACF,MAAM,cAAc,UAAU,UAAsC;AAGlE,QAAM,iBAAiB;AACvB,aAAW,UAAU,MAAM;AAC3B,MAAI,CAAC,MAAM,kBAAkB;AAC3B,SAAM,gBAAgB;AACtB,QAAK,OAAO;;GAEd;CACF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAC1D,KAAI,WAAY,QAAO,kBAAkB;AAEzC,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EAC7D,KAAK;EACD;EACJ;EACQ;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY,gBAAgB;GAC7B;EACD,UAAU,WAAW,UAAU,OAAO,eAAe;EACrD,SAAS,WAAW,UAAU,OAAO,SAAY,WAAW;EAC5D,gBAAgB,WAAW,UAAU,OAAO,cAAc;YAE1D,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC,wBAAwB;IAAS,OAAO;cACvC,oBAAC,wBAAwB;KAAS,OAAO;eACvC,oBAAC;MACC;MACY;MACA;MACD;MACF;MAER;OACQ;MACsB;KACF;IACd;GACX;;AAIlB,MAAM,kBAAkB,WAAW,eAAe;AAMlD,AAAC,gBAAwB,cAAc"}

package/dist/components/form/Form/ResetButton/ResetButton.d.ts

@@ -1,7 +1,7 @@
 
+import { FormController } from "../modern/controller.js";
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
-import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @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 { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.d.ts

@@ -1,7 +1,7 @@
 
+import { FormController } from "../modern/controller.js";
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
-import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";
@@ -9,6 +9,8 @@ import * as _react_types_shared0 from "@react-types/shared";
 //#region src/components/form/Form/SubmitButton/SubmitButton.d.ts
 interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
   form?: CubeFormInstance<T> | FormController<T>;
+  /** Modern forms: disable after validation fails. Defaults to false so submit can show errors. */
+  disableOnInvalid?: boolean;
 }
 declare const _SubmitButton: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion

package/dist/components/form/Form/SubmitButton/SubmitButton.js

@@ -1,4 +1,4 @@
-/** @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 { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { isModernFormController } from "../backend.js";
@@ -13,7 +13,7 @@ function LegacySubmitButton(props, ref) {
 	props = useFormProps(props);
 	const { isDisabled: isContextDisabled } = providerProps;
 	props = useFormProps(props);
-	const { form, isDisabled, ...otherProps } = props;
+	const { form, isDisabled, disableOnInvalid: _disableOnInvalid, ...otherProps } = props;
 	const isSomethingDisabled = isDisabled || isContextDisabled;
 	return /* @__PURE__ */ jsx(Button, {
 		ref,

package/dist/components/form/Form/SubmitButton/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","names":[],"sources":["../../../../../src/components/form/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../../../provider';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { isModernFormController } from '../backend';\nimport { useFormProps } from '../Form';\nimport { ModernSubmitButton } from '../modern/actions';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nimport type { FormController } from '../modern/controller';\n\nexport interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes>\n  extends CubeButtonProps {\n  form?: CubeFormInstance<T> | FormController<T>;\n}\n\nfunction LegacySubmitButton(\n  props: Omit<CubeSubmitButtonProps, 'form'> & {\n    form?: CubeFormInstance<FieldTypes>;\n  },\n  ref: FocusableRef<HTMLElement>,\n) {\n  const providerProps = useProviderProps({} as CubeButtonProps);\n\n  props = useFormProps(props);\n\n  const { isDisabled: isContextDisabled } = providerProps;\n\n  props = useFormProps(props);\n\n  const { form, isDisabled, ...otherProps } = props;\n  const isSomethingDisabled = isDisabled || isContextDisabled;\n\n  return (\n    <Button\n      ref={ref}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={form?.isSubmitting}\n      isDisabled={\n        isSomethingDisabled || form?.isSubmitting ? true : form?.isInvalid\n      }\n      {...otherProps}\n    />\n  );\n}\n\nfunction SubmitButton(\n  props: CubeSubmitButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const resolved = useFormProps(props);\n  if (isModernFormController(resolved.form)) {\n    return (\n      <ModernSubmitButton\n        {...resolved}\n        form={resolved.form as FormController}\n        buttonRef={ref}\n      />\n    );\n  }\n  return (\n    <LegacySubmitButtonWithRef\n      {...(props as Omit<CubeSubmitButtonProps, 'form'> & {\n        form?: CubeFormInstance<FieldTypes>;\n      })}\n      ref={ref}\n    />\n  );\n}\n\nconst LegacySubmitButtonWithRef = forwardRef(LegacySubmitButton);\nconst _SubmitButton = forwardRef(SubmitButton);\n\n_SubmitButton.displayName = 'SubmitButton';\n\nexport { _SubmitButton as SubmitButton };\n"],"mappings":";;;;;;;;;;AAkBA,SAAS,mBACP,OAGA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;AAE1C,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,MAAM,YAAY,GAAG,eAAe;CAC5C,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,WAAW,MAAM;EACjB,YACE,uBAAuB,MAAM,eAAe,OAAO,MAAM;EAE3D,GAAI;GACJ;;AAIN,SAAS,aACP,OACA,KACA;CACA,MAAM,WAAW,aAAa,MAAM;AACpC,KAAI,uBAAuB,SAAS,KAAK,CACvC,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;EACf,WAAW;GACX;AAGN,QACE,oBAAC;EACC,GAAK;EAGA;GACL;;AAIN,MAAM,4BAA4B,WAAW,mBAAmB;AAChE,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"SubmitButton.js","names":[],"sources":["../../../../../src/components/form/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../../../provider';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { isModernFormController } from '../backend';\nimport { useFormProps } from '../Form';\nimport { ModernSubmitButton } from '../modern/actions';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nimport type { FormController } from '../modern/controller';\n\nexport interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes>\n  extends CubeButtonProps {\n  form?: CubeFormInstance<T> | FormController<T>;\n  /** Modern forms: disable after validation fails. Defaults to false so submit can show errors. */\n  disableOnInvalid?: boolean;\n}\n\nfunction LegacySubmitButton(\n  props: Omit<CubeSubmitButtonProps, 'form'> & {\n    form?: CubeFormInstance<FieldTypes>;\n  },\n  ref: FocusableRef<HTMLElement>,\n) {\n  const providerProps = useProviderProps({} as CubeButtonProps);\n\n  props = useFormProps(props);\n\n  const { isDisabled: isContextDisabled } = providerProps;\n\n  props = useFormProps(props);\n\n  const {\n    form,\n    isDisabled,\n    disableOnInvalid: _disableOnInvalid,\n    ...otherProps\n  } = props;\n  const isSomethingDisabled = isDisabled || isContextDisabled;\n\n  return (\n    <Button\n      ref={ref}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={form?.isSubmitting}\n      isDisabled={\n        isSomethingDisabled || form?.isSubmitting ? true : form?.isInvalid\n      }\n      {...otherProps}\n    />\n  );\n}\n\nfunction SubmitButton(\n  props: CubeSubmitButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const resolved = useFormProps(props);\n  if (isModernFormController(resolved.form)) {\n    return (\n      <ModernSubmitButton\n        {...resolved}\n        form={resolved.form as FormController}\n        buttonRef={ref}\n      />\n    );\n  }\n  return (\n    <LegacySubmitButtonWithRef\n      {...(props as Omit<CubeSubmitButtonProps, 'form'> & {\n        form?: CubeFormInstance<FieldTypes>;\n      })}\n      ref={ref}\n    />\n  );\n}\n\nconst LegacySubmitButtonWithRef = forwardRef(LegacySubmitButton);\nconst _SubmitButton = forwardRef(SubmitButton);\n\n_SubmitButton.displayName = 'SubmitButton';\n\nexport { _SubmitButton as SubmitButton };\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,mBACP,OAGA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;AAE1C,SAAQ,aAAa,MAAM;CAE3B,MAAM,EACJ,MACA,YACA,kBAAkB,mBAClB,GAAG,eACD;CACJ,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,WAAW,MAAM;EACjB,YACE,uBAAuB,MAAM,eAAe,OAAO,MAAM;EAE3D,GAAI;GACJ;;AAIN,SAAS,aACP,OACA,KACA;CACA,MAAM,WAAW,aAAa,MAAM;AACpC,KAAI,uBAAuB,SAAS,KAAK,CACvC,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;EACf,WAAW;GACX;AAGN,QACE,oBAAC;EACC,GAAK;EAGA;GACL;;AAIN,MAAM,4BAA4B,WAAW,mBAAmB;AAChE,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/form/Form/SubmitError.d.ts

@@ -1,13 +1,19 @@
 
+import { FormController } from "./modern/controller.js";
 import { CubeAlertProps } from "../../content/Alert/types.js";
 import "../../content/Alert/index.js";
 import * as react from "react";
+import { ReactNode } from "react";
 
 //#region src/components/form/Form/SubmitError.d.ts
+interface CubeSubmitErrorProps extends CubeAlertProps {
+  form?: FormController<any>;
+  renderError?: (error: unknown) => ReactNode;
+}
 /**
  * An alert that shows a form error message received from the onSubmit callback.
  */
-declare const _SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+declare const _SubmitError: react.ForwardRefExoticComponent<CubeSubmitErrorProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { _SubmitError };
+export { CubeSubmitErrorProps, _SubmitError };
 //# sourceMappingURL=SubmitError.d.ts.map

package/dist/components/form/Form/SubmitError.js

@@ -1,4 +1,4 @@
-/** @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 { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";
@@ -8,9 +8,15 @@ import { forwardRef, isValidElement, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/SubmitError.tsx
-function ErrorAlert({ submitError, ...props }, ref) {
+function ErrorAlert({ submitError, renderError, ...props }, ref) {
 	const { t } = useI18n();
 	if (!submitError) return null;
+	if (renderError) return /* @__PURE__ */ jsx(Alert, {
+		ref,
+		theme: "danger",
+		...props,
+		children: renderError(submitError)
+	});
 	if (!isValidElement(submitError) && typeof submitError !== "string") submitError = t("form.internalError", "Internal error");
 	return /* @__PURE__ */ jsx(Alert, {
 		ref,
@@ -28,8 +34,9 @@ function ModernSubmitError({ form, alertRef, ...props }) {
 		submitError
 	});
 }
-function SubmitError(props, ref) {
-	const modern = useContext(ModernControllerContext);
+function SubmitError({ form, ...props }, ref) {
+	const context = useContext(ModernControllerContext);
+	const modern = form ?? context;
 	const legacy = useContext(FormContext);
 	return modern ? /* @__PURE__ */ jsx(ModernSubmitError, {
 		...props,

package/dist/components/form/Form/SubmitError.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitError.js","names":[],"sources":["../../../../src/components/form/Form/SubmitError.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useContext,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { Alert, CubeAlertProps } from '../../content/Alert/index';\n\nimport { FormContext } from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { useFormSelector } from './modern/react';\n\nimport type { FormController } from './modern/controller';\n\ntype SubmitErrorContextProps = {\n  submitError?: unknown;\n};\n\nfunction ErrorAlert(\n  { submitError, ...props }: CubeAlertProps & SubmitErrorContextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  if (!submitError) {\n    return null;\n  }\n\n  if (\n    !isValidElement(submitError as ReactNode) &&\n    typeof submitError !== 'string'\n  ) {\n    submitError = t('form.internalError', 'Internal error');\n  }\n\n  return (\n    <Alert ref={ref} theme=\"danger\" {...props}>\n      {submitError as ReactNode}\n    </Alert>\n  );\n}\n\nconst ForwardedErrorAlert = forwardRef(ErrorAlert);\n\nfunction ModernSubmitError({\n  form,\n  alertRef,\n  ...props\n}: CubeAlertProps & {\n  form: FormController<any>;\n  alertRef: ForwardedRef<HTMLDivElement>;\n}) {\n  const submitError = useFormSelector(form, (state) => state.submitError);\n  return (\n    <ForwardedErrorAlert {...props} ref={alertRef} submitError={submitError} />\n  );\n}\n\nfunction SubmitError(props: CubeAlertProps, ref: ForwardedRef<HTMLDivElement>) {\n  const modern = useContext(ModernControllerContext);\n  const legacy = useContext(FormContext) as SubmitErrorContextProps;\n  return modern ? (\n    <ModernSubmitError {...props} form={modern} alertRef={ref} />\n  ) : (\n    <ForwardedErrorAlert\n      {...props}\n      ref={ref}\n      submitError={legacy.submitError}\n    />\n  );\n}\n\n/**\n * An alert that shows a form error message received from the onSubmit callback.\n */\nconst _SubmitError = forwardRef(SubmitError);\n\n_SubmitError.displayName = 'SubmitError';\n\nexport { _SubmitError as SubmitError };\n"],"mappings":";;;;;;;;;;AAqBA,SAAS,WACP,EAAE,aAAa,GAAG,SAClB,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,KAAI,CAAC,YACH,QAAO;AAGT,KACE,CAAC,eAAe,YAAyB,IACzC,OAAO,gBAAgB,SAEvB,eAAc,EAAE,sBAAsB,iBAAiB;AAGzD,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC;GACK;;AAIZ,MAAM,sBAAsB,WAAW,WAAW;AAElD,SAAS,kBAAkB,EACzB,MACA,UACA,GAAG,SAIF;CACD,MAAM,cAAc,gBAAgB,OAAO,UAAU,MAAM,YAAY;AACvE,QACE,oBAAC;EAAoB,GAAI;EAAO,KAAK;EAAuB;GAAe;;AAI/E,SAAS,YAAY,OAAuB,KAAmC;CAC7E,MAAM,SAAS,WAAW,wBAAwB;CAClD,MAAM,SAAS,WAAW,YAAY;AACtC,QAAO,SACL,oBAAC;EAAkB,GAAI;EAAO,MAAM;EAAQ,UAAU;GAAO,GAE7D,oBAAC;EACC,GAAI;EACC;EACL,aAAa,OAAO;GACpB;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"SubmitError.js","names":[],"sources":["../../../../src/components/form/Form/SubmitError.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useContext,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { Alert, CubeAlertProps } from '../../content/Alert/index';\n\nimport { FormContext } from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { useFormSelector } from './modern/react';\n\nimport type { FormController } from './modern/controller';\n\ntype SubmitErrorContextProps = {\n  submitError?: unknown;\n};\n\nexport interface CubeSubmitErrorProps extends CubeAlertProps {\n  form?: FormController<any>;\n  renderError?: (error: unknown) => ReactNode;\n}\n\nfunction ErrorAlert(\n  {\n    submitError,\n    renderError,\n    ...props\n  }: CubeSubmitErrorProps & SubmitErrorContextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  if (!submitError) {\n    return null;\n  }\n\n  if (renderError)\n    return (\n      <Alert ref={ref} theme=\"danger\" {...props}>\n        {renderError(submitError)}\n      </Alert>\n    );\n\n  if (\n    !isValidElement(submitError as ReactNode) &&\n    typeof submitError !== 'string'\n  ) {\n    submitError = t('form.internalError', 'Internal error');\n  }\n\n  return (\n    <Alert ref={ref} theme=\"danger\" {...props}>\n      {submitError as ReactNode}\n    </Alert>\n  );\n}\n\nconst ForwardedErrorAlert = forwardRef(ErrorAlert);\n\nfunction ModernSubmitError({\n  form,\n  alertRef,\n  ...props\n}: CubeSubmitErrorProps & {\n  form: FormController<any>;\n  alertRef: ForwardedRef<HTMLDivElement>;\n}) {\n  const submitError = useFormSelector(form, (state) => state.submitError);\n  return (\n    <ForwardedErrorAlert {...props} ref={alertRef} submitError={submitError} />\n  );\n}\n\nfunction SubmitError(\n  { form, ...props }: CubeSubmitErrorProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const context = useContext(ModernControllerContext);\n  const modern = form ?? context;\n  const legacy = useContext(FormContext) as SubmitErrorContextProps;\n  return modern ? (\n    <ModernSubmitError {...props} form={modern} alertRef={ref} />\n  ) : (\n    <ForwardedErrorAlert\n      {...props}\n      ref={ref}\n      submitError={legacy.submitError}\n    />\n  );\n}\n\n/**\n * An alert that shows a form error message received from the onSubmit callback.\n */\nconst _SubmitError = forwardRef(SubmitError);\n\n_SubmitError.displayName = 'SubmitError';\n\nexport { _SubmitError as SubmitError };\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,WACP,EACE,aACA,aACA,GAAG,SAEL,KACA;CACA,MAAM,EAAE,MAAM,SAAS;AAEvB,KAAI,CAAC,YACH,QAAO;AAGT,KAAI,YACF,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC,YAAY,YAAY;GACnB;AAGZ,KACE,CAAC,eAAe,YAAyB,IACzC,OAAO,gBAAgB,SAEvB,eAAc,EAAE,sBAAsB,iBAAiB;AAGzD,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC;GACK;;AAIZ,MAAM,sBAAsB,WAAW,WAAW;AAElD,SAAS,kBAAkB,EACzB,MACA,UACA,GAAG,SAIF;CACD,MAAM,cAAc,gBAAgB,OAAO,UAAU,MAAM,YAAY;AACvE,QACE,oBAAC;EAAoB,GAAI;EAAO,KAAK;EAAuB;GAAe;;AAI/E,SAAS,YACP,EAAE,MAAM,GAAG,SACX,KACA;CACA,MAAM,UAAU,WAAW,wBAAwB;CACnD,MAAM,SAAS,QAAQ;CACvB,MAAM,SAAS,WAAW,YAAY;AACtC,QAAO,SACL,oBAAC;EAAkB,GAAI;EAAO,MAAM;EAAQ,UAAU;GAAO,GAE7D,oBAAC;EACC,GAAI;EACC;EACL,aAAa,OAAO;GACpB;;;;;AAON,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/form/Form/backend.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

package/dist/components/form/Form/index.d.ts

@@ -1,10 +1,12 @@
 
 import { FormPath } from "./modern/values.js";
-import { ModernValidationContext } from "./modern/validation.js";
-import { FieldTypes, Fields } from "./types.js";
 import { FormValueAtPath } from "./modern/path-types.js";
+import { FormReadValue, FormValues } from "./modern/read-types.js";
+import { ModernValidationContext } from "./modern/validation.js";
 import { FormChange, ModernSubmitContext, SetValueOptions } from "./modern/types.js";
-import { FormController, ModernFieldValidationResult, ModernFormState, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions } from "./modern/controller.js";
+import { FormController, ModernFieldState, ModernFieldValidationResult, ModernFormState, ModernSubmitFailure, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions } from "./modern/controller.js";
+import { FormField, FormFieldContext, FormFieldOptions } from "./modern/field.js";
+import { FieldTypes, Fields } from "./types.js";
 import { CubeFormInstance, useForm } from "./use-form.js";
 import { ModernFormProps } from "./ModernFormRoot.js";
 import { CubeFormProps, FormContext, FormRootComponent, FormScopeMask, useFormProps } from "./Form.js";
@@ -12,12 +14,10 @@ import { CubeSubmitButtonProps, _SubmitButton } from "./SubmitButton/SubmitButto
 import "./SubmitButton/index.js";
 import { CubeResetButtonProps, _ResetButton } from "./ResetButton/ResetButton.js";
 import "./ResetButton/index.js";
-import { CubeAlertProps } from "../../content/Alert/types.js";
-import "../../content/Alert/index.js";
+import { CubeSubmitErrorProps, _SubmitError } from "./SubmitError.js";
 import { Field } from "./Field.js";
 import { useFormControllerContext } from "./modern/context.js";
-import { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormSelector } from "./modern/react.js";
-import { _SubmitError } from "./SubmitError.js";
+import { FormSelectorOptions, FormSubscribe, FormSubscribeProps, useFormController, useFormFieldState, useFormSelector, useFormValue } from "./modern/react.js";
 import { FieldReturnValue, UseFieldProps } from "./use-field/types.js";
 import { UseFieldParams, useField } from "./use-field/use-field.js";
 import { UseFieldPropsParams, useFieldProps } from "./use-field/use-field-props.js";
@@ -34,6 +34,8 @@ declare const Form: FormRootComponent & {
   useForm: typeof useForm;
   useController: typeof useFormController;
   useSelector: typeof useFormSelector;
+  useValue: typeof useFormValue;
+  useFieldState: typeof useFormFieldState;
   Subscribe: typeof FormSubscribe;
   useControllerContext: typeof useFormControllerContext;
 } & {
@@ -41,11 +43,13 @@ declare const Form: FormRootComponent & {
   useForm: typeof useForm;
   useController: typeof useFormController;
   useSelector: typeof useFormSelector;
+  useValue: typeof useFormValue;
+  useFieldState: typeof useFormFieldState;
   Subscribe: typeof FormSubscribe;
   useControllerContext: typeof useFormControllerContext;
   Submit: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
   Reset: react.ForwardRefExoticComponent<Omit<CubeResetButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
-  SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+  SubmitError: react.ForwardRefExoticComponent<CubeSubmitErrorProps & react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { Form };

package/dist/components/form/Form/index.js

@@ -1,11 +1,11 @@
-/** @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 { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { FormContext, FormScopeMask, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";
 import { useFieldProps } from "./use-field/use-field-props.js";
 import { Field } from "./Field.js";
-import { FormSubscribe, useFormController, useFormSelector } from "./modern/react.js";
+import { FormSubscribe, useFormController, useFormFieldState, useFormSelector, useFormValue } from "./modern/react.js";
 import { _ResetButton } from "./ResetButton/ResetButton.js";
 import { _SubmitButton } from "./SubmitButton/SubmitButton.js";
 import { _SubmitError } from "./SubmitError.js";
@@ -16,6 +16,8 @@ const Form = Object.assign(_Form, {
 	useForm,
 	useController: useFormController,
 	useSelector: useFormSelector,
+	useValue: useFormValue,
+	useFieldState: useFormFieldState,
 	Subscribe: FormSubscribe,
 	useControllerContext: useFormControllerContext,
 	Submit: _SubmitButton,

package/dist/components/form/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SubmitButton","ResetButton"],"sources":["../../../../src/components/form/Form/index.ts"],"sourcesContent":["import { CubeAlertProps } from '../../content/Alert/index';\n\nimport { Field } from './Field';\nimport {\n  Form as _Form,\n  FormContext,\n  FormScopeMask,\n  useFormProps,\n} from './Form';\nimport { useFormControllerContext } from './modern/context';\nimport {\n  FormSubscribe,\n  useFormController,\n  useFormSelector,\n} from './modern/react';\nimport { ResetButton } from './ResetButton';\nimport { SubmitButton } from './SubmitButton';\nimport { SubmitError } from './SubmitError';\nimport { useForm } from './use-form';\n\nconst Form = Object.assign(\n  _Form as typeof _Form & {\n    Item: typeof Field;\n    SubmitError: typeof SubmitError;\n    Submit: typeof SubmitButton;\n    Reset: typeof ResetButton;\n    useForm: typeof useForm;\n    useController: typeof useFormController;\n    useSelector: typeof useFormSelector;\n    Subscribe: typeof FormSubscribe;\n    useControllerContext: typeof useFormControllerContext;\n  },\n  {\n    Item: Field,\n    useForm,\n    useController: useFormController,\n    useSelector: useFormSelector,\n    Subscribe: FormSubscribe,\n    useControllerContext: useFormControllerContext,\n    Submit: SubmitButton,\n    Reset: ResetButton,\n    SubmitError,\n  },\n);\n\nexport * from './SubmitError';\nexport * from './SubmitButton';\nexport * from './ResetButton';\nexport * from './use-field';\nexport { useFormProps, Form, Field, useForm, FormContext, FormScopeMask };\nexport type { CubeFormProps } from './Form';\nexport type { ModernFormProps } from './ModernFormRoot';\nexport type {\n  FormController,\n  ModernFormState,\n  UseFormControllerOptions,\n  ModernValidationRule,\n  ModernValidationResult,\n  ModernFieldValidationResult,\n  ModernSubmitResult,\n} from './modern/controller';\nexport type { FormSelectorOptions, FormSubscribeProps } from './modern/react';\nexport type {\n  FormChange,\n  SetValueOptions,\n  ModernSubmitContext,\n} from './modern/types';\nexport type { ModernValidationContext } from './modern/validation';\nexport type { FormPath } from './modern/values';\nexport type { FormValueAtPath } from './modern/path-types';\nexport type { CubeFormInstance } from './use-form';\nexport type { FieldTypes, Fields } from './types';\nexport type { CubeAlertProps as CubeSubmitErrorProps };\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,OAAO,OAAO,OAClB,OAWA;CACE,MAAM;CACN;CACA,eAAe;CACf,aAAa;CACb,WAAW;CACX,sBAAsB;CACtB,QAAQA;CACR,OAAOC;CACP;CACD,CACF"}
+{"version":3,"file":"index.js","names":["SubmitButton","ResetButton"],"sources":["../../../../src/components/form/Form/index.ts"],"sourcesContent":["import { Field } from './Field';\nimport {\n  Form as _Form,\n  FormContext,\n  FormScopeMask,\n  useFormProps,\n} from './Form';\nimport { useFormControllerContext } from './modern/context';\nimport {\n  FormSubscribe,\n  useFormController,\n  useFormFieldState,\n  useFormSelector,\n  useFormValue,\n} from './modern/react';\nimport { ResetButton } from './ResetButton';\nimport { SubmitButton } from './SubmitButton';\nimport { SubmitError } from './SubmitError';\nimport { useForm } from './use-form';\n\nconst Form = Object.assign(\n  _Form as typeof _Form & {\n    Item: typeof Field;\n    SubmitError: typeof SubmitError;\n    Submit: typeof SubmitButton;\n    Reset: typeof ResetButton;\n    useForm: typeof useForm;\n    useController: typeof useFormController;\n    useSelector: typeof useFormSelector;\n    useValue: typeof useFormValue;\n    useFieldState: typeof useFormFieldState;\n    Subscribe: typeof FormSubscribe;\n    useControllerContext: typeof useFormControllerContext;\n  },\n  {\n    Item: Field,\n    useForm,\n    useController: useFormController,\n    useSelector: useFormSelector,\n    useValue: useFormValue,\n    useFieldState: useFormFieldState,\n    Subscribe: FormSubscribe,\n    useControllerContext: useFormControllerContext,\n    Submit: SubmitButton,\n    Reset: ResetButton,\n    SubmitError,\n  },\n);\n\nexport * from './SubmitError';\nexport * from './SubmitButton';\nexport * from './ResetButton';\nexport * from './use-field';\nexport { useFormProps, Form, Field, useForm, FormContext, FormScopeMask };\nexport type { CubeFormProps } from './Form';\nexport type { ModernFormProps } from './ModernFormRoot';\nexport type {\n  FormController,\n  ModernFormState,\n  ModernFieldState,\n  ModernSubmitFailure,\n  UseFormControllerOptions,\n  ModernValidationRule,\n  ModernValidationResult,\n  ModernFieldValidationResult,\n  ModernSubmitResult,\n} from './modern/controller';\nexport type { FormSelectorOptions, FormSubscribeProps } from './modern/react';\nexport type {\n  FormChange,\n  SetValueOptions,\n  ModernSubmitContext,\n} from './modern/types';\nexport type { ModernValidationContext } from './modern/validation';\nexport type { FormPath } from './modern/values';\nexport type { FormValueAtPath } from './modern/path-types';\nexport type { CubeFormInstance } from './use-form';\nexport type { FieldTypes, Fields } from './types';\n\nexport type {\n  FormField,\n  FormFieldOptions,\n  FormFieldContext,\n} from './modern/field';\nexport type { FormReadValue, FormValues } from './modern/read-types';\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,OAAO,OAAO,OAClB,OAaA;CACE,MAAM;CACN;CACA,eAAe;CACf,aAAa;CACb,UAAU;CACV,eAAe;CACf,WAAW;CACX,sBAAsB;CACtB,QAAQA;CACR,OAAOC;CACP;CACD,CACF"}

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

@@ -1,38 +1,56 @@
-/** @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 { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
+import { getControllerInternals } from "./controller.js";
 import { useFormSelector } from "./react.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/modern/actions.tsx
-function ModernSubmitButton({ form, buttonRef, ...props }) {
+function ModernSubmitButton({ form, buttonRef, onClick, disableOnInvalid = false, ...props }) {
 	const { isDisabled: contextDisabled } = useProviderProps({});
 	const submitting = useFormSelector(form, (state) => state.isSubmitting);
 	const invalid = useFormSelector(form, (state) => state.isInvalid);
+	const click = useEvent((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const root = getControllerInternals(form, "<Form.Submit>").getRootElement();
+		const button = event.currentTarget;
+		if (root && button.form === root && button.type === "submit") return;
+		event.preventDefault();
+		if (root?.isConnected) root.requestSubmit();
+		else form.submit();
+	});
 	return /* @__PURE__ */ jsx(Button, {
 		ref: buttonRef,
 		type: "primary",
 		htmlType: "submit",
 		isLoading: submitting,
 		...props,
-		isDisabled: contextDisabled || props.isDisabled || submitting || invalid
+		onClick: click,
+		isDisabled: contextDisabled || props.isDisabled || submitting || disableOnInvalid && invalid
 	});
 }
-function ModernResetButton({ form, buttonRef, onPress, ...props }) {
+function ModernResetButton({ form, buttonRef, onClick, ...props }) {
 	const { isDisabled: contextDisabled } = useProviderProps({});
-	const disabled = useFormSelector(form, (state) => state.isSubmitting || !state.isTouched);
+	const canReset = useFormSelector(form, (state) => state.canReset);
 	const reset = useEvent((event) => {
-		form.reset();
-		onPress?.(event);
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const root = getControllerInternals(form, "<Form.Reset>").getRootElement();
+		const button = event.currentTarget;
+		if (root && button.form === root && button.type === "reset") return;
+		event.preventDefault();
+		if (root?.isConnected) root.reset();
+		else form.reset();
 	});
 	return /* @__PURE__ */ jsx(Button, {
 		ref: buttonRef,
 		type: "primary",
 		htmlType: "button",
 		...props,
-		onPress: reset,
-		isDisabled: contextDisabled || props.isDisabled || disabled
+		onClick: reset,
+		isDisabled: contextDisabled || props.isDisabled || !canReset
 	});
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"actions.js","names":[],"sources":["../../../../../src/components/form/Form/modern/actions.tsx"],"sourcesContent":["import { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useProviderProps } from '../../../../provider';\nimport { Button } from '../../../actions/Button/Button';\n\nimport { useFormSelector } from './react';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeButtonProps } from '../../../actions/Button/Button';\nimport type { FormController } from './controller';\n\nexport function ModernSubmitButton({\n  form,\n  buttonRef,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const submitting = useFormSelector(form, (state) => state.isSubmitting);\n  const invalid = useFormSelector(form, (state) => state.isInvalid);\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={submitting}\n      {...props}\n      isDisabled={contextDisabled || props.isDisabled || submitting || invalid}\n    />\n  );\n}\n\nexport function ModernResetButton({\n  form,\n  buttonRef,\n  onPress,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const disabled = useFormSelector(\n    form,\n    (state) => state.isSubmitting || !state.isTouched,\n  );\n  const reset = useEvent((event) => {\n    form.reset();\n    onPress?.(event);\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"button\"\n      {...props}\n      onPress={reset}\n      isDisabled={contextDisabled || props.isDisabled || disabled}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,mBAAmB,EACjC,MACA,WACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,aAAa,gBAAgB,OAAO,UAAU,MAAM,aAAa;CACvE,MAAM,UAAU,gBAAgB,OAAO,UAAU,MAAM,UAAU;AACjE,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,WAAW;EACX,GAAI;EACJ,YAAY,mBAAmB,MAAM,cAAc,cAAc;GACjE;;AAIN,SAAgB,kBAAkB,EAChC,MACA,WACA,SACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,WAAW,gBACf,OACC,UAAU,MAAM,gBAAgB,CAAC,MAAM,UACzC;CACD,MAAM,QAAQ,UAAU,UAAU;AAChC,OAAK,OAAO;AACZ,YAAU,MAAM;GAChB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,GAAI;EACJ,SAAS;EACT,YAAY,mBAAmB,MAAM,cAAc;GACnD"}
+{"version":3,"file":"actions.js","names":[],"sources":["../../../../../src/components/form/Form/modern/actions.tsx"],"sourcesContent":["import { useEvent } from '../../../../_internal/hooks/use-event';\nimport { useProviderProps } from '../../../../provider';\nimport { Button } from '../../../actions/Button/Button';\n\nimport { getControllerInternals } from './controller';\nimport { useFormSelector } from './react';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { MouseEvent } from 'react';\nimport type { CubeButtonProps } from '../../../actions/Button/Button';\nimport type { FormController } from './controller';\n\nexport function ModernSubmitButton({\n  form,\n  buttonRef,\n  onClick,\n  disableOnInvalid = false,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n  disableOnInvalid?: boolean;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const submitting = useFormSelector(form, (state) => state.isSubmitting);\n  const invalid = useFormSelector(form, (state) => state.isInvalid);\n  const click = useEvent((event: MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const root = getControllerInternals(form, '<Form.Submit>').getRootElement();\n    const button = event.currentTarget as HTMLButtonElement;\n    if (root && button.form === root && button.type === 'submit') return;\n    event.preventDefault();\n    if (root?.isConnected) root.requestSubmit();\n    else void form.submit();\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={submitting}\n      {...props}\n      onClick={click}\n      isDisabled={\n        contextDisabled ||\n        props.isDisabled ||\n        submitting ||\n        (disableOnInvalid && invalid)\n      }\n    />\n  );\n}\n\nexport function ModernResetButton({\n  form,\n  buttonRef,\n  onClick,\n  ...props\n}: CubeButtonProps & {\n  form: FormController<any>;\n  buttonRef: FocusableRef<HTMLElement>;\n}) {\n  const { isDisabled: contextDisabled } = useProviderProps(\n    {} as CubeButtonProps,\n  );\n  const canReset = useFormSelector(form, (state) => state.canReset);\n  const reset = useEvent((event: MouseEvent<HTMLElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const root = getControllerInternals(form, '<Form.Reset>').getRootElement();\n    const button = event.currentTarget as HTMLButtonElement;\n    if (root && button.form === root && button.type === 'reset') return;\n    event.preventDefault();\n    if (root?.isConnected) root.reset();\n    else form.reset();\n  });\n  return (\n    <Button\n      ref={buttonRef}\n      type=\"primary\"\n      htmlType=\"button\"\n      {...props}\n      onClick={reset}\n      isDisabled={contextDisabled || props.isDisabled || !canReset}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAAmB,EACjC,MACA,WACA,SACA,mBAAmB,OACnB,GAAG,SAKF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,aAAa,gBAAgB,OAAO,UAAU,MAAM,aAAa;CACvE,MAAM,UAAU,gBAAgB,OAAO,UAAU,MAAM,UAAU;CACjE,MAAM,QAAQ,UAAU,UAAmC;AACzD,YAAU,MAAM;AAChB,MAAI,MAAM,iBAAkB;EAC5B,MAAM,OAAO,uBAAuB,MAAM,gBAAgB,CAAC,gBAAgB;EAC3E,MAAM,SAAS,MAAM;AACrB,MAAI,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,SAAU;AAC9D,QAAM,gBAAgB;AACtB,MAAI,MAAM,YAAa,MAAK,eAAe;MACtC,CAAK,KAAK,QAAQ;GACvB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,WAAW;EACX,GAAI;EACJ,SAAS;EACT,YACE,mBACA,MAAM,cACN,cACC,oBAAoB;GAEvB;;AAIN,SAAgB,kBAAkB,EAChC,MACA,WACA,SACA,GAAG,SAIF;CACD,MAAM,EAAE,YAAY,oBAAoB,iBACtC,EAAE,CACH;CACD,MAAM,WAAW,gBAAgB,OAAO,UAAU,MAAM,SAAS;CACjE,MAAM,QAAQ,UAAU,UAAmC;AACzD,YAAU,MAAM;AAChB,MAAI,MAAM,iBAAkB;EAC5B,MAAM,OAAO,uBAAuB,MAAM,eAAe,CAAC,gBAAgB;EAC1E,MAAM,SAAS,MAAM;AACrB,MAAI,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,QAAS;AAC7D,QAAM,gBAAgB;AACtB,MAAI,MAAM,YAAa,MAAK,OAAO;MAC9B,MAAK,OAAO;GACjB;AACF,QACE,oBAAC;EACC,KAAK;EACL,MAAK;EACL,UAAS;EACT,GAAI;EACJ,SAAS;EACT,YAAY,mBAAmB,MAAM,cAAc,CAAC;GACpD"}

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

@@ -1,5 +1,8 @@
 
+import "./read-types.js";
+import "./types.js";
 import { FormController } from "./controller.js";
+import "./field.js";
 import "react";
 
 //#region src/components/form/Form/modern/context.d.ts

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

@@ -1,4 +1,4 @@
-/** @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 { createContext, useContext } from "react";
 
 //#region src/components/form/Form/modern/context.ts

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

@@ -1,23 +1,34 @@
 
+import { FORM_BACKEND } from "../backend.js";
 import { FormPath } from "./values.js";
+import { CheckedFormDependencies, CheckedFormPath, FormValueAtPath } from "./path-types.js";
+import { FormReadValue } from "./read-types.js";
 import { ModernValidationRule as ModernValidationRule$1 } from "./validation.js";
-import { FormValueAtPath } from "./path-types.js";
-import { FormState, FormStore, FormStoreOptions, ModernFieldValidationResult as ModernFieldValidationResult$1, ModernSubmitResult as ModernSubmitResult$1, ModernValidationResult as ModernValidationResult$1, SetValueOptions } from "./types.js";
-import { FORM_BACKEND } from "../backend.js";
+import { FieldState, FormState, FormStore, FormStoreOptions, ModernFieldValidationResult as ModernFieldValidationResult$1, ModernSubmitFailure as ModernSubmitFailure$1, ModernSubmitResult as ModernSubmitResult$1, ModernValidationResult as ModernValidationResult$1, SetValueOptions } from "./types.js";
+import { FormField, FormFieldOptions } from "./field.js";
 import { ReactNode } from "react";
 
 //#region src/components/form/Form/modern/controller.d.ts
 type ModernValidationRule = ModernValidationRule$1<ReactNode>;
 type ModernValidationResult = ModernValidationResult$1<ReactNode>;
 type ModernFieldValidationResult = ModernFieldValidationResult$1<ReactNode>;
+type ModernSubmitFailure = ModernSubmitFailure$1<ReactNode>;
+type ModernFieldState<Value = unknown> = Omit<FieldState<ReactNode>, 'value' | 'defaultValue'> & {
+  readonly value: FormReadValue<Value> | undefined;
+  readonly defaultValue: FormReadValue<Value> | undefined;
+};
 type ModernSubmitResult = ModernSubmitResult$1<ReactNode>;
 type ModernFormState<T extends object = Record<string, unknown>> = FormState<T, ReactNode>;
-type UseFormControllerOptions<T extends object = Record<string, unknown>> = FormStoreOptions<T>;
+type UseFormControllerOptions<T extends object = Record<string, unknown>> = FormStoreOptions<T, ReactNode>;
 /** Public commands; registration and pipeline state tokens stay internal. */
-type FormController<T extends object = Record<string, unknown>> = Readonly<Pick<FormStore<T, ReactNode>, typeof FORM_BACKEND | 'validate' | 'submit' | 'blur' | 'getSnapshot' | 'getFieldSnapshot' | 'getValues' | 'getActiveValues' | 'subscribe' | 'setValues' | 'batch' | 'setDefaultValues' | 'adoptDefaultValues' | 'reset' | 'touch' | 'setFieldErrors' | 'clearFieldErrors' | 'setSubmitError' | 'clearSubmitError'> & {
-  getValue<const Path extends FormPath>(path: Path): FormValueAtPath<T, Path> | undefined;
-  setValue<const Path extends FormPath>(path: Path, value: FormValueAtPath<T, NoInfer<Path>> | undefined, options?: SetValueOptions): void;
+type FormController<T extends object = Record<string, unknown>> = Readonly<Pick<FormStore<T, ReactNode>, typeof FORM_BACKEND | 'validate' | 'submit' | 'blur' | 'getSnapshot' | 'getValues' | 'getActiveValues' | 'subscribe' | 'setValues' | 'batch' | 'setDefaultValues' | 'adoptDefaultValues' | 'reset' | 'touch' | 'setFieldErrors' | 'clearFieldErrors' | 'setSubmitError' | 'clearSubmitError'> & {
+  getFieldSnapshot<const Path extends FormPath>(path: CheckedFormPath<T, Path>): ModernFieldState<FormValueAtPath<T, Path>> | undefined;
+  getValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>): FormReadValue<FormValueAtPath<T, Path>> | undefined;
+  setValue<const Path extends FormPath>(path: CheckedFormPath<T, Path>, value: FormValueAtPath<T, NoInfer<Path>> | undefined, options?: SetValueOptions): void;
+  field<const Path extends FormPath, const Dependencies extends readonly FormPath[] = readonly FormPath[]>(path: CheckedFormPath<T, Path>, options?: FormFieldOptions<T, FormValueAtPath<T, NoInfer<Path>>> & {
+    dependsOn?: Dependencies & CheckedFormDependencies<T, Dependencies>;
+  }): FormField<FormValueAtPath<T, Path>>;
 }>;
 //#endregion
-export { FormController, ModernFieldValidationResult, ModernFormState, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions };
+export { FormController, ModernFieldState, ModernFieldValidationResult, ModernFormState, ModernSubmitFailure, ModernSubmitResult, ModernValidationResult, ModernValidationRule, UseFormControllerOptions };
 //# sourceMappingURL=controller.d.ts.map

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

@@ -1,5 +1,6 @@
-/** @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, isModernFormController } from "../backend.js";
+import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";
 
 //#region src/components/form/Form/modern/controller.ts
@@ -8,11 +9,19 @@ const CONTROLLER_STORE = Symbol.for("@cube-dev/ui-kit/form-controller-store");
 function createFormController(options) {
 	const store = createFormStore(options);
 	const serverSnapshot = store.getSnapshot();
+	let rootElement;
 	const internals = {
 		store,
-		getServerSnapshot: () => serverSnapshot
+		getServerSnapshot: () => serverSnapshot,
+		getRootElement: () => rootElement,
+		bindRootElement(element) {
+			rootElement = element ?? void 0;
+			return () => {
+				if (rootElement === element) rootElement = void 0;
+			};
+		}
 	};
-	return Object.freeze({
+	const controller = Object.freeze({
 		[FORM_BACKEND]: "modern",
 		[CONTROLLER_STORE]: internals,
 		validate: store.validate,
@@ -34,8 +43,10 @@ function createFormController(options) {
 		setFieldErrors: store.setFieldErrors,
 		clearFieldErrors: store.clearFieldErrors,
 		setSubmitError: store.setSubmitError,
-		clearSubmitError: store.clearSubmitError
+		clearSubmitError: store.clearSubmitError,
+		field: (path, config) => createFormField(controller, path, config)
 	});
+	return controller;
 }
 function getControllerInternals(controller, receiver) {
 	const internals = isModernFormController(controller) ? controller[CONTROLLER_STORE] : void 0;

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

@@ -1 +1 @@
-{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/components/form/Form/modern/controller.ts"],"sourcesContent":["import { FORM_BACKEND, isModernFormController } from '../backend';\n\nimport { createFormStore } from './store';\n\nimport type { ReactNode } from 'react';\nimport type { FormValueAtPath } from './path-types';\nimport type {\n  FormState,\n  FormStore,\n  FormStoreOptions,\n  SetValueOptions,\n  ModernFieldValidationResult as StoreFieldValidationResult,\n  ModernSubmitResult as StoreSubmitResult,\n  ModernValidationResult as StoreValidationResult,\n} from './types';\nimport type { ModernValidationRule as StoreValidationRule } from './validation';\nimport type { FormPath } from './values';\n\nexport type ModernValidationRule = StoreValidationRule<ReactNode>;\nexport type ModernValidationResult = StoreValidationResult<ReactNode>;\nexport type ModernFieldValidationResult = StoreFieldValidationResult<ReactNode>;\nexport type ModernSubmitResult = StoreSubmitResult<ReactNode>;\n\nexport type ModernFormState<T extends object = Record<string, unknown>> =\n  FormState<T, ReactNode>;\n\nexport type UseFormControllerOptions<\n  T extends object = Record<string, unknown>,\n> = FormStoreOptions<T>;\n\n/** Public commands; registration and pipeline state tokens stay internal. */\nexport type FormController<T extends object = Record<string, unknown>> =\n  Readonly<\n    Pick<\n      FormStore<T, ReactNode>,\n      | typeof FORM_BACKEND\n      | 'validate'\n      | 'submit'\n      | 'blur'\n      | 'getSnapshot'\n      | 'getFieldSnapshot'\n      | 'getValues'\n      | 'getActiveValues'\n      | 'subscribe'\n      | 'setValues'\n      | 'batch'\n      | 'setDefaultValues'\n      | 'adoptDefaultValues'\n      | 'reset'\n      | 'touch'\n      | 'setFieldErrors'\n      | 'clearFieldErrors'\n      | 'setSubmitError'\n      | 'clearSubmitError'\n    > & {\n      getValue<const Path extends FormPath>(\n        path: Path,\n      ): FormValueAtPath<T, Path> | undefined;\n      setValue<const Path extends FormPath>(\n        path: Path,\n        value: FormValueAtPath<T, NoInfer<Path>> | undefined,\n        options?: SetValueOptions,\n      ): void;\n    }\n  >;\n\n// Symbol.for also lets two copies of the kit share a controller, just as the\n// backend brand does. This symbol and the store are not package exports.\nconst CONTROLLER_STORE = Symbol.for('@cube-dev/ui-kit/form-controller-store');\n\ninterface ControllerInternals<T extends object> {\n  store: FormStore<T, ReactNode>;\n  getServerSnapshot(): ModernFormState<T>;\n}\n\n/** Pure allocation for the creation hook; no listeners or external effects. */\nexport function createFormController<T extends object>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  const store = createFormStore<T, ReactNode>(options);\n  const serverSnapshot = store.getSnapshot();\n  const internals: ControllerInternals<T> = {\n    store,\n    getServerSnapshot: () => serverSnapshot,\n  };\n  return Object.freeze({\n    [FORM_BACKEND]: 'modern' as const,\n    [CONTROLLER_STORE]: internals,\n    validate: store.validate,\n    submit: store.submit,\n    blur: store.blur,\n    getSnapshot: store.getSnapshot,\n    getFieldSnapshot: store.getFieldSnapshot,\n    getValue: store.getValue,\n    getValues: store.getValues,\n    getActiveValues: store.getActiveValues,\n    subscribe: store.subscribe,\n    setValue: store.setValue,\n    setValues: store.setValues,\n    batch: store.batch,\n    setDefaultValues: store.setDefaultValues,\n    adoptDefaultValues: store.adoptDefaultValues,\n    reset: store.reset,\n    touch: store.touch,\n    setFieldErrors: store.setFieldErrors,\n    clearFieldErrors: store.clearFieldErrors,\n    setSubmitError: store.setSubmitError,\n    clearSubmitError: store.clearSubmitError,\n  }) as FormController<T>;\n}\n\nexport function getControllerInternals<T extends object>(\n  controller: FormController<T>,\n  receiver: string,\n): ControllerInternals<T> {\n  const internals = isModernFormController(controller)\n    ? (controller as unknown as Record<symbol, ControllerInternals<T>>)[\n        CONTROLLER_STORE\n      ]\n    : undefined;\n  if (!internals) {\n    throw new Error(\n      `${receiver} requires a modern form controller created by Form.useController(). Legacy Form instances and bare backend brands are not supported.`,\n    );\n  }\n  return internals;\n}\n"],"mappings":";;;;;AAoEA,MAAM,mBAAmB,OAAO,IAAI,yCAAyC;;AAQ7E,SAAgB,qBACd,SACmB;CACnB,MAAM,QAAQ,gBAA8B,QAAQ;CACpD,MAAM,iBAAiB,MAAM,aAAa;CAC1C,MAAM,YAAoC;EACxC;EACA,yBAAyB;EAC1B;AACD,QAAO,OAAO,OAAO;GAClB,eAAe;GACf,mBAAmB;EACpB,UAAU,MAAM;EAChB,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,kBAAkB,MAAM;EACxB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,iBAAiB,MAAM;EACvB,WAAW,MAAM;EACjB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;EAC1B,OAAO,MAAM;EACb,OAAO,MAAM;EACb,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACzB,CAAC;;AAGJ,SAAgB,uBACd,YACA,UACwB;CACxB,MAAM,YAAY,uBAAuB,WAAW,GAC/C,WACC,oBAEF;AACJ,KAAI,CAAC,UACH,OAAM,IAAI,MACR,GAAG,SAAS,sIACb;AAEH,QAAO"}
+{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/components/form/Form/modern/controller.ts"],"sourcesContent":["import { FORM_BACKEND, isModernFormController } from '../backend';\n\nimport { createFormField } from './field';\nimport { createFormStore } from './store';\n\nimport type { ReactNode } from 'react';\nimport type { FormField, FormFieldOptions } from './field';\nimport type {\n  CheckedFormDependencies,\n  CheckedFormPath,\n  FormValueAtPath,\n} from './path-types';\nimport type { FormReadValue } from './read-types';\nimport type {\n  FieldState,\n  FormState,\n  FormStore,\n  FormStoreOptions,\n  SetValueOptions,\n  ModernFieldValidationResult as StoreFieldValidationResult,\n  ModernSubmitFailure as StoreSubmitFailure,\n  ModernSubmitResult as StoreSubmitResult,\n  ModernValidationResult as StoreValidationResult,\n} from './types';\nimport type { ModernValidationRule as StoreValidationRule } from './validation';\nimport type { FormPath } from './values';\n\nexport type ModernValidationRule = StoreValidationRule<ReactNode>;\nexport type ModernValidationResult = StoreValidationResult<ReactNode>;\nexport type ModernFieldValidationResult = StoreFieldValidationResult<ReactNode>;\nexport type ModernSubmitFailure = StoreSubmitFailure<ReactNode>;\nexport type ModernFieldState<Value = unknown> = Omit<\n  FieldState<ReactNode>,\n  'value' | 'defaultValue'\n> & {\n  readonly value: FormReadValue<Value> | undefined;\n  readonly defaultValue: FormReadValue<Value> | undefined;\n};\n\nexport type ModernSubmitResult = StoreSubmitResult<ReactNode>;\n\nexport type ModernFormState<T extends object = Record<string, unknown>> =\n  FormState<T, ReactNode>;\n\nexport type UseFormControllerOptions<\n  T extends object = Record<string, unknown>,\n> = FormStoreOptions<T, ReactNode>;\n\n/** Public commands; registration and pipeline state tokens stay internal. */\nexport type FormController<T extends object = Record<string, unknown>> =\n  Readonly<\n    Pick<\n      FormStore<T, ReactNode>,\n      | typeof FORM_BACKEND\n      | 'validate'\n      | 'submit'\n      | 'blur'\n      | 'getSnapshot'\n      | 'getValues'\n      | 'getActiveValues'\n      | 'subscribe'\n      | 'setValues'\n      | 'batch'\n      | 'setDefaultValues'\n      | 'adoptDefaultValues'\n      | 'reset'\n      | 'touch'\n      | 'setFieldErrors'\n      | 'clearFieldErrors'\n      | 'setSubmitError'\n      | 'clearSubmitError'\n    > & {\n      getFieldSnapshot<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n      ): ModernFieldState<FormValueAtPath<T, Path>> | undefined;\n      getValue<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n      ): FormReadValue<FormValueAtPath<T, Path>> | undefined;\n      setValue<const Path extends FormPath>(\n        path: CheckedFormPath<T, Path>,\n        value: FormValueAtPath<T, NoInfer<Path>> | undefined,\n        options?: SetValueOptions,\n      ): void;\n      field<\n        const Path extends FormPath,\n        const Dependencies extends readonly FormPath[] = readonly FormPath[],\n      >(\n        path: CheckedFormPath<T, Path>,\n        options?: FormFieldOptions<T, FormValueAtPath<T, NoInfer<Path>>> & {\n          dependsOn?: Dependencies & CheckedFormDependencies<T, Dependencies>;\n        },\n      ): FormField<FormValueAtPath<T, Path>>;\n    }\n  >;\n\n// Symbol.for also lets two copies of the kit share a controller, just as the\n// backend brand does. This symbol and the store are not package exports.\nconst CONTROLLER_STORE = Symbol.for('@cube-dev/ui-kit/form-controller-store');\n\ninterface ControllerInternals<T extends object> {\n  store: FormStore<T, ReactNode>;\n  getServerSnapshot(): ModernFormState<T>;\n  getRootElement(): HTMLFormElement | undefined;\n  bindRootElement(element: HTMLFormElement | null): () => void;\n}\n\n/** Pure allocation for the creation hook; no listeners or external effects. */\nexport function createFormController<T extends object>(\n  options?: UseFormControllerOptions<T>,\n): FormController<T> {\n  const store = createFormStore<T, ReactNode>(options);\n  const serverSnapshot = store.getSnapshot();\n  let rootElement: HTMLFormElement | undefined;\n  const internals: ControllerInternals<T> = {\n    store,\n    getServerSnapshot: () => serverSnapshot,\n    getRootElement: () => rootElement,\n    bindRootElement(element) {\n      rootElement = element ?? undefined;\n      return () => {\n        if (rootElement === element) rootElement = undefined;\n      };\n    },\n  };\n  const controller = Object.freeze({\n    [FORM_BACKEND]: 'modern' as const,\n    [CONTROLLER_STORE]: internals,\n    validate: store.validate,\n    submit: store.submit,\n    blur: store.blur,\n    getSnapshot: store.getSnapshot,\n    getFieldSnapshot: store.getFieldSnapshot,\n    getValue: store.getValue,\n    getValues: store.getValues,\n    getActiveValues: store.getActiveValues,\n    subscribe: store.subscribe,\n    setValue: store.setValue,\n    setValues: store.setValues,\n    batch: store.batch,\n    setDefaultValues: store.setDefaultValues,\n    adoptDefaultValues: store.adoptDefaultValues,\n    reset: store.reset,\n    touch: store.touch,\n    setFieldErrors: store.setFieldErrors,\n    clearFieldErrors: store.clearFieldErrors,\n    setSubmitError: store.setSubmitError,\n    clearSubmitError: store.clearSubmitError,\n    field: (path: FormPath, config?: FormFieldOptions<T, unknown>) =>\n      createFormField(controller, path, config),\n  }) as FormController<T>;\n  return controller;\n}\n\nexport function getControllerInternals<T extends object>(\n  controller: FormController<T>,\n  receiver: string,\n): ControllerInternals<T> {\n  const internals = isModernFormController(controller)\n    ? (controller as unknown as Record<symbol, ControllerInternals<T>>)[\n        CONTROLLER_STORE\n      ]\n    : undefined;\n  if (!internals) {\n    throw new Error(\n      `${receiver} requires a modern form controller created by Form.useController(). Legacy Form instances and bare backend brands are not supported.`,\n    );\n  }\n  return internals;\n}\n"],"mappings":";;;;;;AAiGA,MAAM,mBAAmB,OAAO,IAAI,yCAAyC;;AAU7E,SAAgB,qBACd,SACmB;CACnB,MAAM,QAAQ,gBAA8B,QAAQ;CACpD,MAAM,iBAAiB,MAAM,aAAa;CAC1C,IAAI;CACJ,MAAM,YAAoC;EACxC;EACA,yBAAyB;EACzB,sBAAsB;EACtB,gBAAgB,SAAS;AACvB,iBAAc,WAAW;AACzB,gBAAa;AACX,QAAI,gBAAgB,QAAS,eAAc;;;EAGhD;CACD,MAAM,aAAa,OAAO,OAAO;GAC9B,eAAe;GACf,mBAAmB;EACpB,UAAU,MAAM;EAChB,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,kBAAkB,MAAM;EACxB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,iBAAiB,MAAM;EACvB,WAAW,MAAM;EACjB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,OAAO,MAAM;EACb,kBAAkB,MAAM;EACxB,oBAAoB,MAAM;EAC1B,OAAO,MAAM;EACb,OAAO,MAAM;EACb,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,gBAAgB,MAAM;EACtB,kBAAkB,MAAM;EACxB,QAAQ,MAAgB,WACtB,gBAAgB,YAAY,MAAM,OAAO;EAC5C,CAAC;AACF,QAAO;;AAGT,SAAgB,uBACd,YACA,UACwB;CACxB,MAAM,YAAY,uBAAuB,WAAW,GAC/C,WACC,oBAEF;AACJ,KAAI,CAAC,UACH,OAAM,IAAI,MACR,GAAG,SAAS,sIACb;AAEH,QAAO"}