@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/components/ErrorState/ErrorState.d.ts

@@ -1,13 +1,7 @@
 import { ReactNode } from 'react';
 /**
- * How the error reads, not what it is about.
- *
- * This prop used to be a union of five names: network, configuration, model,
- * permission, generic. Two of those, and "model" in particular, are one
- * product's categories rather than anything a shared component can reason
- * about, and all five resolved to three colours anyway: network and permission
- * were the same amber, model and generic the same red. A consumer decides
- * which of its own error categories reads as which tone.
+ * How the error reads, not what it is about. A consumer maps its own error
+ * categories onto these three.
  */
 export type ErrorTone = "danger" | "warning" | "accent";
 export interface ErrorAction {
@@ -17,22 +11,19 @@ export interface ErrorAction {
 export interface ErrorStateProps {
     /** How the error reads. Defaults to `danger`. */
     tone?: ErrorTone;
-    /** Replaces the default alert icon. */
+    /** Replaces the default icon (Astryx's `error` glyph). */
     icon?: ReactNode;
-    /** Error title - main heading */
+    /** Error title, the region's heading */
     title: string;
     /** Detailed error message */
     message: string;
-    /** Primary action button (e.g., Retry, Go to Settings) */
+    /** Primary action button (e.g. Retry, Go to settings) */
     primaryAction?: ErrorAction;
-    /** Secondary action button (e.g., View Logs, Report Issue) */
+    /** Secondary action button (e.g. View logs, Report issue) */
     secondaryAction?: ErrorAction;
     /** Additional CSS classes */
     className?: string;
-    /** Whether to show error icon */
+    /** Whether to show the icon. Default: true */
     showIcon?: boolean;
 }
-/**
- * ErrorState Component
- */
 export declare function ErrorState({ tone, icon, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;

package/dist/components/ErrorState/ErrorState2.js

@@ -1,56 +1,56 @@
-import { Button as e } from "../Button/Button2.js";
-import { AlertCircleIcon as t } from "../../icons/AlertCircleIcon.js";
 /* empty css           */
-import { useCallback as n } from "react";
+import { Button as e } from "@astryxdesign/core/Button";
+import { Heading as t } from "@astryxdesign/core/Heading";
+import { Text as n } from "@astryxdesign/core/Text";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@astryxdesign/core/Icon";
 //#region src/components/ErrorState/ErrorState.tsx
-function a({ tone: a = "danger", icon: o, title: s, message: c, primaryAction: l, secondaryAction: u, className: d = "", showIcon: f = !0 }) {
-	let p = n(() => {
-		l?.onClick();
-	}, [l]), m = n(() => {
-		u?.onClick();
-	}, [u]), h = [
-		"error-state",
-		`error-state--${a}`,
-		d
+function o({ tone: o = "danger", icon: s, title: c, message: l, primaryAction: u, secondaryAction: d, className: f = "", showIcon: p = !0 }) {
+	let m = [
+		"uic-error-state",
+		`uic-error-state--${o}`,
+		f
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ i("div", {
-		className: h,
+		className: m,
 		role: "alert",
 		"aria-live": "polite",
 		children: [
-			f && /* @__PURE__ */ r("div", {
-				className: "error-state__icon",
+			p && /* @__PURE__ */ r("div", {
+				className: "uic-error-state__icon",
 				"aria-hidden": "true",
-				children: o ?? /* @__PURE__ */ r(t, { size: 48 })
+				children: s ?? /* @__PURE__ */ r(a, { icon: "error" })
 			}),
-			/* @__PURE__ */ r("h2", {
-				className: "error-state__title",
-				children: s
-			}),
-			/* @__PURE__ */ r("p", {
-				className: "error-state__message",
+			/* @__PURE__ */ r(t, {
+				level: 2,
+				className: "uic-error-state__title",
 				children: c
 			}),
-			(l || u) && /* @__PURE__ */ i("div", {
-				className: "error-state__actions",
-				children: [l && /* @__PURE__ */ r(e, {
+			/* @__PURE__ */ r(n, {
+				as: "p",
+				color: "secondary",
+				className: "uic-error-state__message",
+				children: l
+			}),
+			(u || d) && /* @__PURE__ */ i("div", {
+				className: "uic-error-state__actions",
+				children: [u && /* @__PURE__ */ r(e, {
 					variant: "primary",
-					onClick: p,
-					className: "error-state__action-btn error-state__action-btn--primary",
-					children: l.label
-				}), u && /* @__PURE__ */ r(e, {
+					label: u.label,
+					onClick: () => u.onClick(),
+					className: "uic-error-state__action uic-error-state__action--primary"
+				}), d && /* @__PURE__ */ r(e, {
 					variant: "secondary",
-					onClick: m,
-					className: "error-state__action-btn error-state__action-btn--secondary",
-					children: u.label
+					label: d.label,
+					onClick: () => d.onClick(),
+					className: "uic-error-state__action uic-error-state__action--secondary"
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { a as ErrorState };
+export { o as ErrorState };
 
 //# sourceMappingURL=ErrorState2.js.map
 import "../../assets/components/ErrorState/ErrorState.css";

package/dist/components/ErrorState/ErrorState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Three visual tones\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport type { ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\n/**\n * How the error reads, not what it is about.\n *\n * This prop used to be a union of five names: network, configuration, model,\n * permission, generic. Two of those, and \"model\" in particular, are one\n * product's categories rather than anything a shared component can reason\n * about, and all five resolved to three colours anyway: network and permission\n * were the same amber, model and generic the same red. A consumer decides\n * which of its own error categories reads as which tone.\n */\nexport type ErrorTone = \"danger\" | \"warning\" | \"accent\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** How the error reads. Defaults to `danger`. */\n  tone?: ErrorTone;\n  /** Replaces the default alert icon. */\n  icon?: ReactNode;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  tone = \"danger\",\n  icon,\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {icon ?? <AlertCircleIcon size={48} />}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA0DA,SAAgB,EAAW,EACzB,UAAO,UACP,SACA,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,KAAQ,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;GAClC,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}
+{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState\n *\n * A full-area error with a title, a message and up to two recovery actions.\n * Built on Astryx `Icon`, `Heading`, `Text` and `Button`.\n *\n * @example\n * <ErrorState\n *   tone=\"warning\"\n *   title=\"Connection error\"\n *   message=\"Could not reach the server.\"\n *   primaryAction={{ label: \"Retry\", onClick: retry }}\n * />\n */\nimport type { ReactNode } from \"react\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { Heading } from \"@astryxdesign/core/Heading\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport \"./ErrorState.css\";\n\n/**\n * How the error reads, not what it is about. A consumer maps its own error\n * categories onto these three.\n */\nexport type ErrorTone = \"danger\" | \"warning\" | \"accent\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** How the error reads. Defaults to `danger`. */\n  tone?: ErrorTone;\n  /** Replaces the default icon (Astryx's `error` glyph). */\n  icon?: ReactNode;\n  /** Error title, the region's heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g. Retry, Go to settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g. View logs, Report issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show the icon. Default: true */\n  showIcon?: boolean;\n}\n\nexport function ErrorState({\n  tone = \"danger\",\n  icon,\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const containerClass = [\"uic-error-state\", `uic-error-state--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"uic-error-state__icon\" aria-hidden=\"true\">\n          {icon ?? <Icon icon=\"error\" />}\n        </div>\n      )}\n\n      <Heading level={2} className=\"uic-error-state__title\">\n        {title}\n      </Heading>\n\n      <Text as=\"p\" color=\"secondary\" className=\"uic-error-state__message\">\n        {message}\n      </Text>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"uic-error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              label={primaryAction.label}\n              onClick={() => primaryAction.onClick()}\n              className=\"uic-error-state__action uic-error-state__action--primary\"\n            />\n          )}\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              label={secondaryAction.label}\n              onClick={() => secondaryAction.onClick()}\n              className=\"uic-error-state__action uic-error-state__action--secondary\"\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAoDA,SAAgB,EAAW,EACzB,UAAO,UACP,SACA,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAiB;EAAC;EAAmB,oBAAoB;EAAQ;CAAS,CAAC,CAC9E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAwB,eAAY;IAChD,UAAA,KAAQ,kBAAC,GAAD,EAAM,MAAK,QAAS,CAAA;GAC1B,CAAA;GAGP,kBAAC,GAAD;IAAS,OAAO;IAAG,WAAU;IAC1B,UAAA;GACM,CAAA;GAET,kBAAC,GAAD;IAAM,IAAG;IAAI,OAAM;IAAY,WAAU;IACtC,UAAA;GACG,CAAA;IAEJ,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAO,EAAc;KACrB,eAAe,EAAc,QAAQ;KACrC,WAAU;IACX,CAAA,GAEF,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAO,EAAgB;KACvB,eAAe,EAAgB,QAAQ;KACvC,WAAU;IACX,CAAA,CAEA;;EAEJ;;AAET"}

package/dist/components/Form/ErrorList.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `Form.ErrorList`: the errors of a list-level rule, which belong to the
+ * collection rather than to any row. Uses the item shell's explain classes.
+ */
+import * as React from "react";
+export interface ErrorListProps {
+    errors?: React.ReactNode[];
+    warnings?: React.ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ErrorList: React.FC<ErrorListProps>;
+export default ErrorList;

package/dist/components/Form/ErrorList.js

@@ -0,0 +1,21 @@
+/* empty css               */
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/Form/ErrorList.tsx
+var n = ({ errors: n = [], warnings: r = [], className: i, style: a }) => !n.length && !r.length ? null : /* @__PURE__ */ t("div", {
+	className: ["uic-form-item__explain", i].filter(Boolean).join(" "),
+	role: "alert",
+	style: a,
+	children: [n.map((t, n) => /* @__PURE__ */ e("div", {
+		className: "uic-form-item__explain-error",
+		children: t
+	}, `e-${n}`)), r.map((t, n) => /* @__PURE__ */ e("div", {
+		className: "uic-form-item__explain-warning",
+		children: t
+	}, `w-${n}`))]
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=ErrorList.js.map
+import "../../assets/components/Form/FormItemVisual.css";

package/dist/components/Form/ErrorList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorList.js","names":[],"sources":["../../../src/components/Form/ErrorList.tsx"],"sourcesContent":["/**\n * `Form.ErrorList`: the errors of a list-level rule, which belong to the\n * collection rather than to any row. Uses the item shell's explain classes.\n */\nimport * as React from \"react\";\n\nimport \"./FormItemVisual.css\";\n\nexport interface ErrorListProps {\n  errors?: React.ReactNode[];\n  warnings?: React.ReactNode[];\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = ({\n  errors = [],\n  warnings = [],\n  className,\n  style,\n}) => {\n  if (!errors.length && !warnings.length) {\n    return null;\n  }\n  return (\n    <div\n      className={[\"uic-form-item__explain\", className].filter(Boolean).join(\" \")}\n      role=\"alert\"\n      style={style}\n    >\n      {errors.map((error, index) => (\n        <div key={`e-${index}`} className=\"uic-form-item__explain-error\">\n          {error}\n        </div>\n      ))}\n      {warnings.map((warning, index) => (\n        <div key={`w-${index}`} className=\"uic-form-item__explain-warning\">\n          {warning}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default ErrorList;\n"],"mappings":";;;;AAeA,IAAM,KAAuC,EAC3C,YAAS,CAAC,GACV,cAAW,CAAC,GACZ,cACA,eAEI,CAAC,EAAO,UAAU,CAAC,EAAS,SACvB,OAGP,kBAAC,OAAD;CACE,WAAW,CAAC,0BAA0B,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACzE,MAAK;CACE;CAHT,UAAA,CAKG,EAAO,KAAK,GAAO,MAClB,kBAAC,OAAD;EAAwB,WAAU;EAC/B,UAAA;CACE,GAFK,KAAK,GAEV,CACN,GACA,EAAS,KAAK,GAAS,MACtB,kBAAC,OAAD;EAAwB,WAAU;EAC/B,UAAA;CACE,GAFK,KAAK,GAEV,CACN,CACE"}

package/dist/components/Form/Field.d.ts

@@ -0,0 +1,88 @@
+import { FieldEntity, InternalFormInstance, InternalValidateOptions, Meta, NotifyInfo, Rule, RuleError, StoreValue } from './interface';
+import { InternalNamePath, NamePath, Store } from './namePath';
+import * as React from "react";
+export interface FieldProps {
+    name?: NamePath;
+    children?: React.ReactNode | ((control: Record<string, any>, meta: Meta, form: InternalFormInstance) => React.ReactNode);
+    rules?: Rule[];
+    dependencies?: NamePath[];
+    shouldUpdate?: boolean | ((prev: Store, next: Store, info: {
+        source?: string;
+    }) => boolean);
+    initialValue?: any;
+    preserve?: boolean;
+    trigger?: string;
+    validateTrigger?: string | string[] | false;
+    validateFirst?: boolean | "parallel";
+    valuePropName?: string;
+    getValueProps?: (value: StoreValue) => Record<string, unknown>;
+    getValueFromEvent?: (...args: any[]) => StoreValue;
+    messageVariables?: Record<string, string>;
+    isListField?: boolean;
+    isList?: boolean;
+    onReset?: () => void;
+    onMetaChange?: (meta: Meta & {
+        destroy?: boolean;
+    }) => void;
+}
+interface InternalFieldProps extends Omit<FieldProps, "name"> {
+    name?: InternalNamePath;
+    fieldContext: InternalFormInstance;
+}
+declare class Field extends React.PureComponent<InternalFieldProps, {
+    resetCount: number;
+}> implements FieldEntity {
+    static contextType: React.Context<InternalFormInstance>;
+    state: {
+        resetCount: number;
+    };
+    private cancelRegisterFunc;
+    private mounted;
+    /**
+     * Kept off React state on purpose: these must be readable synchronously
+     * during the same tick they change, before React has re-rendered.
+     */
+    private touched;
+    /** Touched OR validated. Only `dependencies` re-validation consults it. */
+    private dirty;
+    private validatePromise;
+    private errors;
+    private warnings;
+    private metaCache;
+    constructor(props: InternalFieldProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private cancelRegister;
+    getNamePath: () => InternalNamePath;
+    private getRules;
+    private reRender;
+    /** Remount the child subtree (used on reset so uncontrolled inputs clear). */
+    private refresh;
+    private triggerMetaEvent;
+    onStoreChange: (prevStore: Store, namePathList: InternalNamePath[] | null, info: NotifyInfo) => void;
+    validateRules: (options?: InternalValidateOptions) => Promise<RuleError[]>;
+    isFieldValidating: () => boolean;
+    isFieldTouched: () => boolean;
+    isFieldDirty: () => boolean;
+    getErrors: () => string[];
+    getWarnings: () => string[];
+    isListField: () => boolean | undefined;
+    isList: () => boolean | undefined;
+    isPreserve: () => boolean | undefined;
+    getMeta: () => Meta;
+    private getValue;
+    private getOnlyChild;
+    getControlled: (childProps?: Record<string, any>) => Record<string, any>;
+    render(): React.JSX.Element;
+}
+/**
+ * Normalises `name` and resolves the list/field contexts before handing off
+ * to the class. The `key` trick matters: a NON-list field is keyed by its
+ * path, so renaming it remounts a clean field instead of carrying the old
+ * one's touched/error state onto a different name.
+ */
+declare const WrapperField: React.FC<FieldProps & {
+    fieldContext?: InternalFormInstance;
+}>;
+export default WrapperField;
+export { Field as InternalField };

package/dist/components/Form/Field.js

@@ -0,0 +1,212 @@
+import { FieldContext as e, HOOK_MARK as t, ListContext as n } from "./context.js";
+import { containsNamePath as r, defaultGetValueFromEvent as i, getNamePath as a, getValue as o, toArray as s } from "./namePath.js";
+import { delayFrame as c } from "./FormStore.js";
+import { validateRules as l } from "./validate.js";
+import { isEqual as u } from "./isEqual.js";
+import * as d from "react";
+import { jsx as f } from "react/jsx-runtime";
+//#region src/components/Form/Field.tsx
+var p = [];
+function m(e, t, n, r, i, a) {
+	return typeof e == "function" ? e(t, n, "source" in a ? { source: a.source } : {}) : r !== i;
+}
+var h = class extends d.PureComponent {
+	static contextType = e;
+	state = { resetCount: 0 };
+	cancelRegisterFunc = null;
+	mounted = !1;
+	touched = !1;
+	dirty = !1;
+	validatePromise;
+	errors = p;
+	warnings = p;
+	metaCache = null;
+	constructor(e) {
+		super(e), e.fieldContext && e.fieldContext.getInternalHooks(t)?.initEntityValue(this);
+	}
+	componentDidMount() {
+		let { shouldUpdate: e, fieldContext: n } = this.props;
+		if (this.mounted = !0, n) {
+			let e = n.getInternalHooks(t);
+			this.cancelRegisterFunc = e?.registerField(this) ?? null;
+		}
+		e === !0 && this.reRender();
+	}
+	componentWillUnmount() {
+		this.cancelRegister(), this.triggerMetaEvent(!0), this.mounted = !1;
+	}
+	cancelRegister = () => {
+		let { preserve: e, isListField: t, name: n } = this.props;
+		this.cancelRegisterFunc?.(t, e, a(n)), this.cancelRegisterFunc = null;
+	};
+	getNamePath = () => {
+		let { name: e, fieldContext: t } = this.props, { prefixName: n = [] } = t;
+		return e === void 0 ? [] : [...n, ...e];
+	};
+	getRules = () => {
+		let { rules: e = [], fieldContext: t } = this.props;
+		return e.map((e) => typeof e == "function" ? e(t) : e);
+	};
+	reRender() {
+		this.mounted && this.forceUpdate();
+	}
+	refresh = () => {
+		this.mounted && this.setState(({ resetCount: e }) => ({ resetCount: e + 1 }));
+	};
+	triggerMetaEvent = (e) => {
+		let { onMetaChange: t } = this.props;
+		if (t) {
+			let n = {
+				...this.getMeta(),
+				destroy: e
+			};
+			u(this.metaCache, n) || t(n), this.metaCache = n;
+		} else this.metaCache = null;
+	};
+	onStoreChange = (e, t, n) => {
+		let { shouldUpdate: i, dependencies: o = [], onReset: s } = this.props, { store: c } = n, l = this.getNamePath(), d = this.getValue(e), f = this.getValue(c), h = t && r(t, l);
+		switch (n.type === "valueUpdate" && n.source === "external" && !u(d, f) && (this.touched = !0, this.dirty = !0, this.validatePromise = null, this.errors = p, this.warnings = p, this.triggerMetaEvent()), n.type) {
+			case "reset":
+				if (!t || h) {
+					this.touched = !1, this.dirty = !1, this.validatePromise = void 0, this.errors = p, this.warnings = p, this.triggerMetaEvent(), s?.(), this.refresh();
+					return;
+				}
+				break;
+			case "remove":
+				if (i && m(i, e, c, d, f, n)) {
+					this.reRender();
+					return;
+				}
+				break;
+			case "setField": {
+				let { data: a } = n;
+				if (h) {
+					"touched" in a && (this.touched = a.touched), "validating" in a && !("originRCField" in a) && (this.validatePromise = a.validating ? Promise.resolve([]) : null), "errors" in a && (this.errors = a.errors || p), "warnings" in a && (this.warnings = a.warnings || p), this.dirty = !0, this.triggerMetaEvent(), this.reRender();
+					return;
+				}
+				if ("value" in a && r(t, l, !0)) {
+					this.reRender();
+					return;
+				}
+				if (i && !l.length && m(i, e, c, d, f, n)) {
+					this.reRender();
+					return;
+				}
+				break;
+			}
+			case "dependenciesUpdate":
+				if (o.map(a).some((e) => r(n.relatedFields, e))) {
+					this.reRender();
+					return;
+				}
+				break;
+			default: if (h || (!o.length || l.length || i) && m(i, e, c, d, f, n)) {
+				this.reRender();
+				return;
+			}
+		}
+		i === !0 && this.reRender();
+	};
+	validateRules = (e) => {
+		let t = this.getNamePath(), n = this.getValue(), { triggerName: r, validateOnly: i = !1, delayFrame: a } = e || {}, o = Promise.resolve().then(async () => {
+			if (!this.mounted) return [];
+			let { validateFirst: i = !1, messageVariables: u } = this.props;
+			a && await c();
+			let d = this.getRules();
+			r && (d = d.filter((e) => e).filter((e) => {
+				let { validateTrigger: t } = e;
+				return !t || s(t).includes(r);
+			}));
+			let f = l(t, n, d, e?.validateMessages ?? {}, i, u);
+			return f.catch((e) => e).then((e = []) => {
+				if (this.validatePromise === o) {
+					this.validatePromise = null;
+					let t = [], n = [];
+					e.forEach?.(({ rule: { warningOnly: e }, errors: r = [] }) => {
+						e ? n.push(...r) : t.push(...r);
+					}), this.errors = t, this.warnings = n, this.triggerMetaEvent(), this.reRender();
+				}
+			}), f;
+		});
+		return i ? o : (this.validatePromise = o, this.dirty = !0, this.errors = p, this.warnings = p, this.triggerMetaEvent(), this.reRender(), o);
+	};
+	isFieldValidating = () => !!this.validatePromise;
+	isFieldTouched = () => this.touched;
+	isFieldDirty = () => this.dirty || this.props.initialValue !== void 0 ? !0 : this.props.fieldContext.getInternalHooks(t)?.getInitialValue(this.getNamePath()) !== void 0;
+	getErrors = () => this.errors;
+	getWarnings = () => this.warnings;
+	isListField = () => this.props.isListField;
+	isList = () => this.props.isList;
+	isPreserve = () => this.props.preserve;
+	getMeta = () => ({
+		touched: this.isFieldTouched(),
+		validating: this.isFieldValidating(),
+		errors: this.errors,
+		warnings: this.warnings,
+		name: this.getNamePath(),
+		validated: this.validatePromise === null
+	});
+	getValue = (e) => {
+		let { getFieldsValue: t } = this.props.fieldContext;
+		return o(e || t(!0), this.getNamePath());
+	};
+	getOnlyChild = (e) => {
+		if (typeof e == "function") {
+			let t = this.getMeta();
+			return {
+				...this.getOnlyChild(e(this.getControlled(), t, this.props.fieldContext)),
+				isFunction: !0
+			};
+		}
+		let t = d.Children.toArray(e);
+		return t.length !== 1 || !d.isValidElement(t[0]) ? {
+			child: t,
+			isFunction: !1
+		} : {
+			child: t[0],
+			isFunction: !1
+		};
+	};
+	getControlled = (e = {}) => {
+		let { name: n, trigger: r = "onChange", validateTrigger: a, getValueFromEvent: o, valuePropName: c = "value", getValueProps: l, fieldContext: u } = this.props, d = a === void 0 ? u.validateTrigger : a, f = this.getNamePath(), p = u.getInternalHooks(t)?.dispatch, m = this.getValue(), h = l || ((e) => ({ [c]: e })), g = e[r], _ = n === void 0 ? {} : h(m), v = {
+			...e,
+			..._
+		};
+		return v[r] = (...e) => {
+			this.touched = !0, this.dirty = !0, this.triggerMetaEvent();
+			let t = o ? o(...e) : i(c, ...e);
+			t !== m && p?.({
+				type: "updateValue",
+				namePath: f,
+				value: t
+			}), g?.(...e);
+		}, s(d || []).forEach((e) => {
+			let t = v[e];
+			v[e] = (...n) => {
+				t?.(...n);
+				let { rules: r } = this.props;
+				r && r.length && p?.({
+					type: "validateField",
+					namePath: f,
+					triggerName: e
+				});
+			};
+		}), v;
+	};
+	render() {
+		let { resetCount: e } = this.state, { children: t } = this.props, { child: n, isFunction: r } = this.getOnlyChild(t), i;
+		return i = r ? n : d.isValidElement(n) ? d.cloneElement(n, this.getControlled(n.props)) : n, /* @__PURE__ */ f(d.Fragment, { children: i }, e);
+	}
+}, g = ({ name: t, ...r }) => {
+	let i = d.useContext(e), o = d.useContext(n), s = t === void 0 ? void 0 : a(t), c = r.isListField ?? !!o, l = c ? "keep" : `_${(s || []).join("_")}`;
+	return /* @__PURE__ */ f(h, {
+		...r,
+		name: s,
+		isListField: c,
+		fieldContext: r.fieldContext ?? i
+	}, l);
+};
+//#endregion
+export { h as InternalField, g as default };
+
+//# sourceMappingURL=Field.js.map

package/dist/components/Form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../../src/components/Form/Field.tsx"],"sourcesContent":["/**\n * `Field`: the state half of a form item. It renders no DOM of its own: it\n * clones its single child with `value` / `onChange` (or the declared\n * `valuePropName` / `trigger`), owns that field's meta, and decides when to\n * re-render. Everything visual lives in `FormItem`.\n *\n * A class component because the store holds a reference to each mounted field\n * and calls imperative methods on it (`validateRules`, `getMeta`,\n * `onStoreChange`, `isFieldDirty`).\n *\n * The re-render decision in `onStoreChange` matches upstream on purpose:\n * making it more precise changes when a component that reads values during\n * render without subscribing to them updates.\n */\nimport { delayFrame } from \"./FormStore\";\nimport { FieldContext, ListContext, HOOK_MARK, type ListContextValue } from \"./context\";\nimport type {\n  FieldEntity,\n  InternalFormInstance,\n  InternalValidateOptions,\n  Meta,\n  NotifyInfo,\n  Rule,\n  RuleError,\n  RuleObject,\n  StoreValue,\n} from \"./interface\";\nimport {\n  containsNamePath,\n  defaultGetValueFromEvent,\n  getNamePath,\n  getValue,\n  toArray,\n  type InternalNamePath,\n  type NamePath,\n  type Store,\n} from \"./namePath\";\nimport { validateRules } from \"./validate\";\nimport { isEqual } from \"./isEqual\";\nimport * as React from \"react\";\n\nconst EMPTY_ERRORS: string[] = [];\n\nexport interface FieldProps {\n  name?: NamePath;\n  children?:\n    | React.ReactNode\n    | ((\n        control: Record<string, any>,\n        meta: Meta,\n        form: InternalFormInstance,\n      ) => React.ReactNode);\n  rules?: Rule[];\n  dependencies?: NamePath[];\n  shouldUpdate?:\n    boolean | ((prev: Store, next: Store, info: { source?: string }) => boolean);\n  initialValue?: any;\n  preserve?: boolean;\n  trigger?: string;\n  validateTrigger?: string | string[] | false;\n  validateFirst?: boolean | \"parallel\";\n  valuePropName?: string;\n  getValueProps?: (value: StoreValue) => Record<string, unknown>;\n  getValueFromEvent?: (...args: any[]) => StoreValue;\n  messageVariables?: Record<string, string>;\n  isListField?: boolean;\n  isList?: boolean;\n  onReset?: () => void;\n  onMetaChange?: (meta: Meta & { destroy?: boolean }) => void;\n}\n\ninterface InternalFieldProps extends Omit<FieldProps, \"name\"> {\n  name?: InternalNamePath;\n  fieldContext: InternalFormInstance;\n}\n\nfunction requireUpdate(\n  shouldUpdate: FieldProps[\"shouldUpdate\"],\n  prev: Store,\n  next: Store,\n  prevValue: any,\n  nextValue: any,\n  info: NotifyInfo,\n): boolean {\n  if (typeof shouldUpdate === \"function\") {\n    // Only a value update carries a `source`; upstream passes `{}` otherwise,\n    // and comparators destructure it.\n    return shouldUpdate(prev, next, \"source\" in info ? { source: info.source } : {});\n  }\n  return prevValue !== nextValue;\n}\n\nclass Field\n  extends React.PureComponent<InternalFieldProps, { resetCount: number }>\n  implements FieldEntity\n{\n  static override contextType = FieldContext;\n\n  override state = { resetCount: 0 };\n\n  private cancelRegisterFunc:\n    | ((\n        isListField?: boolean,\n        preserve?: boolean,\n        subNamePath?: InternalNamePath,\n      ) => void)\n    | null = null;\n\n  private mounted = false;\n\n  /**\n   * Kept off React state on purpose: these must be readable synchronously\n   * during the same tick they change, before React has re-rendered.\n   */\n  private touched = false;\n\n  /** Touched OR validated. Only `dependencies` re-validation consults it. */\n  private dirty = false;\n\n  private validatePromise: Promise<any> | null | undefined;\n\n  private errors: string[] = EMPTY_ERRORS;\n\n  private warnings: string[] = EMPTY_ERRORS;\n\n  private metaCache: (Meta & { destroy?: boolean }) | null = null;\n\n  constructor(props: InternalFieldProps) {\n    super(props);\n    // Write `initialValue` into the store during construction, before the\n    // first render reads it — otherwise the control paints empty once.\n    if (props.fieldContext) {\n      props.fieldContext.getInternalHooks(HOOK_MARK)?.initEntityValue(this);\n    }\n  }\n\n  override componentDidMount() {\n    const { shouldUpdate, fieldContext } = this.props;\n    this.mounted = true;\n    if (fieldContext) {\n      const hooks = fieldContext.getInternalHooks(HOOK_MARK);\n      this.cancelRegisterFunc = hooks?.registerField(this) ?? null;\n    }\n    // `shouldUpdate === true` means \"render me again on anything\"; the extra\n    // pass makes sure the first paint sees sibling fields that mounted after.\n    if (shouldUpdate === true) {\n      this.reRender();\n    }\n  }\n\n  override componentWillUnmount() {\n    this.cancelRegister();\n    this.triggerMetaEvent(true);\n    this.mounted = false;\n  }\n\n  private cancelRegister = () => {\n    const { preserve, isListField, name } = this.props;\n    this.cancelRegisterFunc?.(isListField, preserve, getNamePath(name));\n    this.cancelRegisterFunc = null;\n  };\n\n  // ================================ Utils =================================\n\n  getNamePath = (): InternalNamePath => {\n    const { name, fieldContext } = this.props;\n    const { prefixName = [] } = fieldContext;\n    // `prefixName` is what makes a Form.List child's `name` RELATIVE while\n    // its `dependencies` stay absolute.\n    return name !== undefined ? [...prefixName, ...name] : [];\n  };\n\n  private getRules = (): RuleObject[] => {\n    const { rules = [], fieldContext } = this.props;\n    return rules.map((rule) =>\n      typeof rule === \"function\" ? rule(fieldContext) : rule,\n    );\n  };\n\n  private reRender() {\n    if (!this.mounted) return;\n    this.forceUpdate();\n  }\n\n  /** Remount the child subtree (used on reset so uncontrolled inputs clear). */\n  private refresh = () => {\n    if (!this.mounted) return;\n    this.setState(({ resetCount }) => ({ resetCount: resetCount + 1 }));\n  };\n\n  private triggerMetaEvent = (destroy?: boolean) => {\n    const { onMetaChange } = this.props;\n    if (onMetaChange) {\n      const meta = { ...this.getMeta(), destroy };\n      if (!isEqual(this.metaCache, meta)) {\n        onMetaChange(meta);\n      }\n      this.metaCache = meta;\n    } else {\n      this.metaCache = null;\n    }\n  };\n\n  // ========================= Field entity API =============================\n\n  onStoreChange = (\n    prevStore: Store,\n    namePathList: InternalNamePath[] | null,\n    info: NotifyInfo,\n  ) => {\n    const { shouldUpdate, dependencies = [], onReset } = this.props;\n    const { store } = info;\n    const namePath = this.getNamePath();\n    const prevValue = this.getValue(prevStore);\n    const curValue = this.getValue(store);\n    const namePathMatch = namePathList && containsNamePath(namePathList, namePath);\n\n    // `setFieldsValue` is treated as user input: it marks the field touched\n    // and clears any error the previous value had produced.\n    if (\n      info.type === \"valueUpdate\" &&\n      info.source === \"external\" &&\n      !isEqual(prevValue, curValue)\n    ) {\n      this.touched = true;\n      this.dirty = true;\n      this.validatePromise = null;\n      this.errors = EMPTY_ERRORS;\n      this.warnings = EMPTY_ERRORS;\n      this.triggerMetaEvent();\n    }\n\n    switch (info.type) {\n      case \"reset\":\n        if (!namePathList || namePathMatch) {\n          this.touched = false;\n          this.dirty = false;\n          this.validatePromise = undefined;\n          this.errors = EMPTY_ERRORS;\n          this.warnings = EMPTY_ERRORS;\n          this.triggerMetaEvent();\n          onReset?.();\n          this.refresh();\n          return;\n        }\n        break;\n\n      case \"remove\": {\n        // A `preserve: false` field disappearing can cascade: A hides B hides C.\n        if (\n          shouldUpdate &&\n          requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)\n        ) {\n          this.reRender();\n          return;\n        }\n        break;\n      }\n\n      case \"setField\": {\n        const { data } = info;\n        if (namePathMatch) {\n          if (\"touched\" in data) {\n            this.touched = data.touched as boolean;\n          }\n          if (\"validating\" in data && !(\"originRCField\" in data)) {\n            this.validatePromise = data.validating ? Promise.resolve([]) : null;\n          }\n          if (\"errors\" in data) {\n            this.errors = data.errors || EMPTY_ERRORS;\n          }\n          if (\"warnings\" in data) {\n            this.warnings = data.warnings || EMPTY_ERRORS;\n          }\n          this.dirty = true;\n          this.triggerMetaEvent();\n          this.reRender();\n          return;\n        }\n        if (\"value\" in data && containsNamePath(namePathList, namePath, true)) {\n          this.reRender();\n          return;\n        }\n        if (\n          shouldUpdate &&\n          !namePath.length &&\n          requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)\n        ) {\n          this.reRender();\n          return;\n        }\n        break;\n      }\n\n      case \"dependenciesUpdate\": {\n        const dependencyList = dependencies.map(getNamePath);\n        if (\n          dependencyList.some((dependency) =>\n            containsNamePath(info.relatedFields, dependency),\n          )\n        ) {\n          this.reRender();\n          return;\n        }\n        break;\n      }\n\n      default:\n        // A field re-renders when its own path changed, or — for a field with\n        // no `dependencies` shortcut — when `shouldUpdate` says so.\n        if (\n          namePathMatch ||\n          ((!dependencies.length || namePath.length || shouldUpdate) &&\n            requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info))\n        ) {\n          this.reRender();\n          return;\n        }\n        break;\n    }\n\n    if (shouldUpdate === true) {\n      this.reRender();\n    }\n  };\n\n  validateRules = (options?: InternalValidateOptions): Promise<RuleError[]> => {\n    // Snapshot both, so a `form.setFieldValue` mid-validation cannot swap the\n    // value out from under the rules.\n    const namePath = this.getNamePath();\n    const currentValue = this.getValue();\n    const {\n      triggerName,\n      validateOnly = false,\n      delayFrame: showDelayFrame,\n    } = options || {};\n\n    const rootPromise = Promise.resolve().then(async () => {\n      if (!this.mounted) {\n        return [] as RuleError[];\n      }\n      const { validateFirst = false, messageVariables } = this.props;\n\n      if (showDelayFrame) {\n        await delayFrame();\n      }\n\n      let filteredRules = this.getRules();\n      if (triggerName) {\n        filteredRules = filteredRules\n          .filter((rule) => rule)\n          .filter((rule) => {\n            const { validateTrigger } = rule;\n            if (!validateTrigger) {\n              return true;\n            }\n            return toArray(validateTrigger).includes(triggerName);\n          });\n      }\n\n      const promise = validateRules(\n        namePath,\n        currentValue,\n        filteredRules,\n        options?.validateMessages ?? {},\n        validateFirst,\n        messageVariables,\n      );\n\n      promise\n        .catch((e) => e)\n        .then((ruleErrors: RuleError[] = []) => {\n          // Ignore a stale run: only the latest validation may publish.\n          if (this.validatePromise === rootPromise) {\n            this.validatePromise = null;\n            const nextErrors: string[] = [];\n            const nextWarnings: string[] = [];\n            ruleErrors.forEach?.(({ rule: { warningOnly }, errors = [] }) => {\n              if (warningOnly) {\n                nextWarnings.push(...errors);\n              } else {\n                nextErrors.push(...errors);\n              }\n            });\n            this.errors = nextErrors;\n            this.warnings = nextWarnings;\n            this.triggerMetaEvent();\n            this.reRender();\n          }\n        });\n\n      return promise;\n    });\n\n    if (validateOnly) {\n      return rootPromise as Promise<RuleError[]>;\n    }\n\n    this.validatePromise = rootPromise;\n    this.dirty = true;\n    this.errors = EMPTY_ERRORS;\n    this.warnings = EMPTY_ERRORS;\n    this.triggerMetaEvent();\n    this.reRender();\n\n    return rootPromise as Promise<RuleError[]>;\n  };\n\n  isFieldValidating = () => !!this.validatePromise;\n\n  isFieldTouched = () => this.touched;\n\n  isFieldDirty = () => {\n    if (this.dirty || this.props.initialValue !== undefined) {\n      return true;\n    }\n    const hooks = this.props.fieldContext.getInternalHooks(HOOK_MARK);\n    return hooks?.getInitialValue(this.getNamePath()) !== undefined;\n  };\n\n  getErrors = () => this.errors;\n\n  getWarnings = () => this.warnings;\n\n  isListField = () => this.props.isListField;\n\n  isList = () => this.props.isList;\n\n  isPreserve = () => this.props.preserve;\n\n  getMeta = (): Meta => ({\n    touched: this.isFieldTouched(),\n    validating: this.isFieldValidating(),\n    errors: this.errors,\n    warnings: this.warnings,\n    name: this.getNamePath(),\n    validated: this.validatePromise === null,\n  });\n\n  // ============================ Field control =============================\n\n  private getValue = (store?: Store) => {\n    const { getFieldsValue } = this.props.fieldContext;\n    return getValue(store || getFieldsValue(true), this.getNamePath());\n  };\n\n  private getOnlyChild = (\n    children: InternalFieldProps[\"children\"],\n  ): { child: React.ReactNode; isFunction: boolean } => {\n    if (typeof children === \"function\") {\n      const meta = this.getMeta();\n      return {\n        ...this.getOnlyChild(\n          children(this.getControlled(), meta, this.props.fieldContext),\n        ),\n        isFunction: true,\n      };\n    }\n    const childList = React.Children.toArray(children);\n    if (childList.length !== 1 || !React.isValidElement(childList[0])) {\n      return { child: childList, isFunction: false };\n    }\n    return { child: childList[0], isFunction: false };\n  };\n\n  getControlled = (childProps: Record<string, any> = {}) => {\n    const {\n      name,\n      trigger = \"onChange\",\n      validateTrigger,\n      getValueFromEvent,\n      valuePropName = \"value\",\n      getValueProps,\n      fieldContext,\n    } = this.props;\n    const mergedValidateTrigger =\n      validateTrigger !== undefined ? validateTrigger : fieldContext.validateTrigger;\n    const namePath = this.getNamePath();\n    const dispatch = fieldContext.getInternalHooks(HOOK_MARK)?.dispatch;\n    const value = this.getValue();\n    const mergedGetValueProps =\n      getValueProps || ((val: StoreValue) => ({ [valuePropName]: val }));\n    const originTriggerFunc = childProps[trigger];\n    // A layout-only Field (no `name`) must not inject `value` into its child.\n    const valueProps = name !== undefined ? mergedGetValueProps(value) : {};\n\n    const control: Record<string, any> = { ...childProps, ...valueProps };\n\n    control[trigger] = (...args: any[]) => {\n      this.touched = true;\n      this.dirty = true;\n      this.triggerMetaEvent();\n      const newValue = getValueFromEvent\n        ? getValueFromEvent(...args)\n        : defaultGetValueFromEvent(valuePropName, ...args);\n      if (newValue !== value) {\n        dispatch?.({ type: \"updateValue\", namePath, value: newValue });\n      }\n      originTriggerFunc?.(...args);\n    };\n\n    toArray(mergedValidateTrigger || []).forEach((triggerName) => {\n      const originTrigger = control[triggerName];\n      control[triggerName] = (...args: any[]) => {\n        originTrigger?.(...args);\n        // Read `rules` at call time — a `dependencies`-driven rule swap must\n        // take effect immediately, not on the next render.\n        const { rules } = this.props;\n        if (rules && rules.length) {\n          dispatch?.({ type: \"validateField\", namePath, triggerName });\n        }\n      };\n    });\n\n    return control;\n  };\n\n  override render() {\n    const { resetCount } = this.state;\n    const { children } = this.props;\n    const { child, isFunction } = this.getOnlyChild(children);\n\n    let returnChildNode: React.ReactNode;\n    if (isFunction) {\n      returnChildNode = child;\n    } else if (React.isValidElement(child)) {\n      returnChildNode = React.cloneElement(\n        child,\n        this.getControlled((child as React.ReactElement<any>).props),\n      );\n    } else {\n      returnChildNode = child;\n    }\n\n    return <React.Fragment key={resetCount}>{returnChildNode}</React.Fragment>;\n  }\n}\n\n/**\n * Normalises `name` and resolves the list/field contexts before handing off\n * to the class. The `key` trick matters: a NON-list field is keyed by its\n * path, so renaming it remounts a clean field instead of carrying the old\n * one's touched/error state onto a different name.\n */\nconst WrapperField: React.FC<FieldProps & { fieldContext?: InternalFormInstance }> = ({\n  name,\n  ...restProps\n}) => {\n  const fieldContext = React.useContext(FieldContext);\n  const listContext = React.useContext<ListContextValue | null>(ListContext);\n  const namePath = name !== undefined ? getNamePath(name) : undefined;\n  const isMergedListField = restProps.isListField ?? !!listContext;\n\n  const key = isMergedListField ? \"keep\" : `_${(namePath || []).join(\"_\")}`;\n\n  return (\n    <Field\n      key={key}\n      {...restProps}\n      name={namePath}\n      isListField={isMergedListField}\n      fieldContext={restProps.fieldContext ?? fieldContext}\n    />\n  );\n};\n\nexport default WrapperField;\nexport { Field as InternalField };\n"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { default as useForm, FormStore } from './FormStore';
+import { FormItemCol, FormLayout, FormSize, RequiredMark } from './context';
+import { Callbacks, FieldData, FormInstance, ValidateMessages } from './interface';
+import { Store } from './namePath';
+import * as React from "react";
+export interface FormProps<Values = any> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "children" | "onChange" | "onReset"> {
+    form?: FormInstance<Values>;
+    name?: string;
+    initialValues?: Store;
+    /** `false` drops unmounted fields' values; the default `true` keeps them. */
+    preserve?: boolean;
+    layout?: FormLayout;
+    requiredMark?: RequiredMark;
+    disabled?: boolean;
+    size?: FormSize;
+    labelCol?: FormItemCol;
+    wrapperCol?: FormItemCol;
+    colon?: boolean;
+    labelAlign?: "left" | "right";
+    labelWrap?: boolean;
+    validateMessages?: ValidateMessages;
+    validateTrigger?: string | string[] | false;
+    scrollToFirstError?: boolean | Record<string, unknown>;
+    clearOnDestroy?: boolean;
+    onValuesChange?: Callbacks<Values>["onValuesChange"];
+    onFieldsChange?: Callbacks<Values>["onFieldsChange"];
+    onFinish?: Callbacks<Values>["onFinish"];
+    onFinishFailed?: Callbacks<Values>["onFinishFailed"];
+    /** `false` renders no wrapper element at all (context only). */
+    component?: React.ComponentType<any> | string | false;
+    children?: React.ReactNode;
+}
+/**
+ * What `<Form ref>` hands back. `nativeElement` is OPTIONAL on purpose: call
+ * sites declare `useRef<FormInstance>(null)`, and a required extra member
+ * would make that ref type unassignable to the element's `ref` prop.
+ */
+export type FormRef<Values = any> = FormInstance<Values> & {
+    nativeElement?: HTMLElement | null;
+};
+/**
+ * The ref is declared as `Ref<FormInstance<Values>>`, not `Ref<FormRef<…>>`:
+ * call sites write `useRef<FormInstance<MyValues>>(null)`, and inference
+ * through the plain generic recovers `Values` from that, where an
+ * intersection type does not. The runtime object still carries
+ * `nativeElement`, which `FormRef` describes for anyone who wants it.
+ */
+declare const Form: <Values = any>(props: FormProps<Values> & {
+    ref?: React.Ref<FormInstance<Values>>;
+}) => React.ReactElement;
+export interface FormProviderProps {
+    validateMessages?: ValidateMessages;
+    onFormChange?: (name: string | undefined, info: {
+        changedFields: FieldData[];
+        forms: Record<string, FormInstance>;
+    }) => void;
+    onFormFinish?: (name: string | undefined, info: {
+        values: Store;
+        forms: Record<string, FormInstance>;
+    }) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Cross-form listener. `onFormChange` is wired to `onFieldsChange`, NOT to
+ * `onValuesChange`, so it observes programmatic mutations (`setFieldValue`,
+ * `setFieldsValue`, `setFields`) as well as user edits.
+ */
+export declare const FormProvider: React.FC<FormProviderProps>;
+export { useForm, FormStore };
+export default Form;