@pixpilot/formily-shadcn 1.4.5 → 1.5.0

package/dist/components/IconPicker.d.ts

@@ -1,4 +1,4 @@
-import * as react4 from "react";
+import * as react7 from "react";
 import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/IconPicker.d.ts
@@ -8,8 +8,8 @@ import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
  * Automatically connects to Formily field state
  * Supports both static and async icon providers
  */
-declare const IconPicker$1: react4.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
+declare const IconPicker$1: react7.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
   providers?: IconProviderProps[];
-}> & react4.RefAttributes<unknown>>;
+}> & react7.RefAttributes<unknown>>;
 //#endregion
 export { IconPicker$1 as IconPicker };

package/dist/components/IconToggle.d.ts

@@ -1,4 +1,4 @@
-import * as react6 from "react";
+import * as react4 from "react";
 import * as _pixpilot_shadcn_ui0 from "@pixpilot/shadcn-ui";
 
 //#region src/components/IconToggle.d.ts
@@ -6,6 +6,6 @@ import * as _pixpilot_shadcn_ui0 from "@pixpilot/shadcn-ui";
  * Formily-connected IconToggle component
  * Toggle button with customizable icons for boolean values
  */
-declare const IconToggle$1: react6.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui0.IconToggleProps, "ref"> & react6.RefAttributes<HTMLButtonElement>>, "ref"> & react6.RefAttributes<unknown>>;
+declare const IconToggle$1: react4.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui0.IconToggleProps, "ref"> & react4.RefAttributes<HTMLButtonElement>>, "ref"> & react4.RefAttributes<unknown>>;
 //#endregion
 export { IconToggle$1 as IconToggle };

package/dist/components/Separator.d.cts

@@ -1,4 +1,4 @@
-import * as react19 from "react";
+import * as react16 from "react";
 import * as _radix_ui_react_separator0 from "@radix-ui/react-separator";
 
 //#region src/components/Separator.d.ts
@@ -6,6 +6,6 @@ import * as _radix_ui_react_separator0 from "@radix-ui/react-separator";
  * Formily-connected Separator component
  * A visual divider for content sections
  */
-declare const Separator: react19.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_separator0.SeparatorProps & react19.RefAttributes<HTMLDivElement>>, "ref"> & react19.RefAttributes<unknown>>;
+declare const Separator: react16.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_separator0.SeparatorProps & react16.RefAttributes<HTMLDivElement>>, "ref"> & react16.RefAttributes<unknown>>;
 //#endregion
 export { Separator };

package/dist/components/Switch.d.cts

@@ -1,4 +1,4 @@
-import * as react16 from "react";
+import * as react19 from "react";
 import * as _radix_ui_react_switch0 from "@radix-ui/react-switch";
 
 //#region src/components/Switch.d.ts
@@ -6,6 +6,6 @@ import * as _radix_ui_react_switch0 from "@radix-ui/react-switch";
  * Formily-connected Switch component
  * Toggle switch for boolean values
  */
-declare const Switch: react16.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_switch0.SwitchProps & react16.RefAttributes<HTMLButtonElement>>, "ref"> & react16.RefAttributes<unknown>>;
+declare const Switch: react19.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_switch0.SwitchProps & react19.RefAttributes<HTMLButtonElement>>, "ref"> & react19.RefAttributes<unknown>>;
 //#endregion
 export { Switch };

package/dist/components/TagsInputInline.d.cts

@@ -1,5 +1,5 @@
-import * as react25 from "react";
-import * as _pixpilot_shadcn_ui2 from "@pixpilot/shadcn-ui";
+import * as react26 from "react";
+import * as _pixpilot_shadcn_ui1 from "@pixpilot/shadcn-ui";
 
 //#region src/components/TagsInputInline.d.ts
 
@@ -10,6 +10,6 @@ import * as _pixpilot_shadcn_ui2 from "@pixpilot/shadcn-ui";
  * Based on DiceUI's tags-input for inline tag editing with keyboard navigation
  * and validation support.
  */
-declare const TagsInputInLine: react25.ForwardRefExoticComponent<Partial<_pixpilot_shadcn_ui2.TagsInputProps> & react25.RefAttributes<unknown>>;
+declare const TagsInputInLine: react26.ForwardRefExoticComponent<Partial<_pixpilot_shadcn_ui1.TagsInputProps> & react26.RefAttributes<unknown>>;
 //#endregion
 export { TagsInputInLine };

package/dist/components/Textarea.d.cts

@@ -1,9 +1,9 @@
-import * as react27 from "react";
+import * as react22 from "react";
 
 //#region src/components/Textarea.d.ts
 /**
  * Formily-connected Textarea component
  */
-declare const Textarea: react27.ForwardRefExoticComponent<Omit<Partial<react27.ClassAttributes<HTMLTextAreaElement> & react27.TextareaHTMLAttributes<HTMLTextAreaElement>>, "ref"> & react27.RefAttributes<unknown>>;
+declare const Textarea: react22.ForwardRefExoticComponent<Omit<Partial<react22.ClassAttributes<HTMLTextAreaElement> & react22.TextareaHTMLAttributes<HTMLTextAreaElement>>, "ref"> & react22.RefAttributes<unknown>>;
 //#endregion
 export { Textarea };

package/dist/components/ToggleButton.d.cts

@@ -1,11 +1,11 @@
-import * as react22 from "react";
-import * as _pixpilot_shadcn_ui1 from "@pixpilot/shadcn-ui";
+import * as react28 from "react";
+import * as _pixpilot_shadcn_ui2 from "@pixpilot/shadcn-ui";
 
 //#region src/components/ToggleButton.d.ts
 /**
  * Formily-connected IconToggle component
  * Toggle button with customizable icons for boolean values
  */
-declare const ToggleButton: react22.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui1.ToggleButtonProps, "ref"> & react22.RefAttributes<HTMLButtonElement>>, "ref"> & react22.RefAttributes<unknown>>;
+declare const ToggleButton: react28.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui2.ToggleButtonProps, "ref"> & react28.RefAttributes<HTMLButtonElement>>, "ref"> & react28.RefAttributes<unknown>>;
 //#endregion
 export { ToggleButton };

package/dist/components/array-common/ArrayItemDraftFields.cjs

@@ -19,32 +19,29 @@ function mergeClassName(a, b) {
 	if (!hasA && hasB) return bb;
 	return `${aa} ${bb}`;
 }
-function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className }) {
+/**
+* Renders item fields inside their own FormProvider.
+* SchemaField contexts (component registry, options, …) are captured from
+* the outer tree and re-provided inside the new form context so that string
+* component names like "Input" still resolve correctly.
+*/
+function IsolatedDraftFields({ schema, form, basePath }) {
 	const schemaComponents = react.default.use(__formily_react.SchemaComponentsContext);
-	const schemaOptions = react.default.use(__formily_react.SchemaOptionsContext);
-	const schemaExpressionScope = react.default.use(__formily_react.SchemaExpressionScopeContext);
-	const schemaMarkup = react.default.use(__formily_react.SchemaMarkupContext);
-	const schemaContext = react.default.use(__formily_react.SchemaContext);
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = require_get_x_component_props.getXComponentProps(schema);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		...itemWrapperRestProps,
-		className: mergeClassName(className, itemWrapperClassName),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.FormProvider, {
-			form,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaOptionsContext, {
-				value: schemaOptions,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaComponentsContext, {
-					value: schemaComponents,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaExpressionScopeContext, {
-						value: schemaExpressionScope,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaMarkupContext, {
-							value: schemaMarkup,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaContext, {
-								value: schemaContext,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
-									schema,
-									name: basePath
-								})
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.FormProvider, {
+		form,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaOptionsContext, {
+			value: react.default.use(__formily_react.SchemaOptionsContext),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaComponentsContext, {
+				value: schemaComponents,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaExpressionScopeContext, {
+					value: react.default.use(__formily_react.SchemaExpressionScopeContext),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaMarkupContext, {
+						value: react.default.use(__formily_react.SchemaMarkupContext),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.SchemaContext, {
+							value: react.default.use(__formily_react.SchemaContext),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+								schema,
+								name: basePath
 							})
 						})
 					})
@@ -53,6 +50,21 @@ function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component
 		})
 	});
 }
+function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className, isolated = true }) {
+	const { className: itemWrapperClassName,...itemWrapperRestProps } = require_get_x_component_props.getXComponentProps(schema);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...itemWrapperRestProps,
+		className: mergeClassName(className, itemWrapperClassName),
+		children: isolated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IsolatedDraftFields, {
+			schema,
+			form,
+			basePath
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+			schema,
+			name: basePath
+		})
+	});
+}
 
 //#endregion
 exports.ArrayItemDraftFields = ArrayItemDraftFields;

package/dist/components/array-common/ArrayItemDraftFields.js

@@ -15,32 +15,29 @@ function mergeClassName(a, b) {
 	if (!hasA && hasB) return bb;
 	return `${aa} ${bb}`;
 }
-function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className }) {
+/**
+* Renders item fields inside their own FormProvider.
+* SchemaField contexts (component registry, options, …) are captured from
+* the outer tree and re-provided inside the new form context so that string
+* component names like "Input" still resolve correctly.
+*/
+function IsolatedDraftFields({ schema, form, basePath }) {
 	const schemaComponents = React.use(SchemaComponentsContext);
-	const schemaOptions = React.use(SchemaOptionsContext);
-	const schemaExpressionScope = React.use(SchemaExpressionScopeContext);
-	const schemaMarkup = React.use(SchemaMarkupContext);
-	const schemaContext = React.use(SchemaContext);
-	const { className: itemWrapperClassName,...itemWrapperRestProps } = getXComponentProps(schema);
-	return /* @__PURE__ */ jsx(Component, {
-		...itemWrapperRestProps,
-		className: mergeClassName(className, itemWrapperClassName),
-		children: /* @__PURE__ */ jsx(FormProvider, {
-			form,
-			children: /* @__PURE__ */ jsx(SchemaOptionsContext, {
-				value: schemaOptions,
-				children: /* @__PURE__ */ jsx(SchemaComponentsContext, {
-					value: schemaComponents,
-					children: /* @__PURE__ */ jsx(SchemaExpressionScopeContext, {
-						value: schemaExpressionScope,
-						children: /* @__PURE__ */ jsx(SchemaMarkupContext, {
-							value: schemaMarkup,
-							children: /* @__PURE__ */ jsx(SchemaContext, {
-								value: schemaContext,
-								children: /* @__PURE__ */ jsx(RecursionField, {
-									schema,
-									name: basePath
-								})
+	return /* @__PURE__ */ jsx(FormProvider, {
+		form,
+		children: /* @__PURE__ */ jsx(SchemaOptionsContext, {
+			value: React.use(SchemaOptionsContext),
+			children: /* @__PURE__ */ jsx(SchemaComponentsContext, {
+				value: schemaComponents,
+				children: /* @__PURE__ */ jsx(SchemaExpressionScopeContext, {
+					value: React.use(SchemaExpressionScopeContext),
+					children: /* @__PURE__ */ jsx(SchemaMarkupContext, {
+						value: React.use(SchemaMarkupContext),
+						children: /* @__PURE__ */ jsx(SchemaContext, {
+							value: React.use(SchemaContext),
+							children: /* @__PURE__ */ jsx(RecursionField, {
+								schema,
+								name: basePath
 							})
 						})
 					})
@@ -49,6 +46,21 @@ function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component
 		})
 	});
 }
+function ArrayItemDraftFields({ schema, form, basePath = "draft", as: Component = "div", className, isolated = true }) {
+	const { className: itemWrapperClassName,...itemWrapperRestProps } = getXComponentProps(schema);
+	return /* @__PURE__ */ jsx(Component, {
+		...itemWrapperRestProps,
+		className: mergeClassName(className, itemWrapperClassName),
+		children: isolated ? /* @__PURE__ */ jsx(IsolatedDraftFields, {
+			schema,
+			form,
+			basePath
+		}) : /* @__PURE__ */ jsx(RecursionField, {
+			schema,
+			name: basePath
+		})
+	});
+}
 
 //#endregion
 export { ArrayItemDraftFields };

package/dist/components/array-common/ArrayItemsList.cjs

@@ -21,7 +21,7 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 * Shared component for rendering array items list
 * Displays items with move up/down, edit, and remove controls
 */
-const ArrayItemsList = (0, __formily_react.observer)(({ isNewItem, children, className, containerProps }) => {
+const ArrayItemsList = (0, __formily_react.observer)(({ isNewItem, activeIndex, children, className, containerProps }) => {
 	const field = (0, __formily_react.useField)();
 	const schema = (0, __formily_react.useFieldSchema)();
 	const dataSource = require_use_array_data_source.useArrayDataSource();
@@ -39,7 +39,8 @@ const ArrayItemsList = (0, __formily_react.observer)(({ isNewItem, children, cla
 				itemKey,
 				index,
 				record,
-				isNew
+				isNew,
+				isAnchor: activeIndex === index && !isNew
 			}, itemKey);
 		}) }), children]
 	});

package/dist/components/array-common/ArrayItemsList.js

@@ -16,7 +16,7 @@ import { cn } from "@pixpilot/shadcn";
 * Shared component for rendering array items list
 * Displays items with move up/down, edit, and remove controls
 */
-const ArrayItemsList = observer(({ isNewItem, children, className, containerProps }) => {
+const ArrayItemsList = observer(({ isNewItem, activeIndex, children, className, containerProps }) => {
 	const field = useField();
 	const schema = useFieldSchema();
 	const dataSource = useArrayDataSource();
@@ -34,7 +34,8 @@ const ArrayItemsList = observer(({ isNewItem, children, className, containerProp
 				itemKey,
 				index,
 				record,
-				isNew
+				isNew,
+				isAnchor: activeIndex === index && !isNew
 			}, itemKey);
 		}) }), children]
 	});

package/dist/components/array-common/ItemWrapper.cjs

@@ -16,6 +16,7 @@ const ItemWrapper = (props) => {
 	const hasErrors = require_has_array_item_errors.hasArrayItemErrors((0, __formily_react.useField)(), index);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...rest,
+		"data-array-item-index": index,
 		className: (0, __pixpilot_shadcn_ui.cn)("border-input bg-card rounded-md border  transition-colors items-center", hasErrors && "border-destructive border-2", props.className),
 		children
 	});

package/dist/components/array-common/ItemWrapper.js

@@ -11,6 +11,7 @@ const ItemWrapper = (props) => {
 	const hasErrors = hasArrayItemErrors(useField(), index);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
+		"data-array-item-index": index,
 		className: cn("border-input bg-card rounded-md border  transition-colors items-center", hasErrors && "border-destructive border-2", props.className),
 		children
 	});

package/dist/components/array-common/ListItem.cjs

@@ -20,7 +20,7 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 * Individual list item component for array items
 * Displays an item with label and operation controls
 */
-const ListItem = react.default.memo(({ itemKey, index, record, isNew }) => {
+const ListItem = react.default.memo(({ itemKey, index, record, isNew, isAnchor }) => {
 	const schema = (0, __formily_react.useFieldSchema)();
 	const hiddenItemSchema = react.default.useMemo(() => {
 		return require_get_hidden_item_schema.getHiddenItemSchema(schema.items);
@@ -29,9 +29,26 @@ const ListItem = react.default.memo(({ itemKey, index, record, isNew }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Item, {
 		index,
 		record,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SortableItem.SortableItem, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SortableItem.SortableItem, {
 			id: itemKey,
-			children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			children: isAnchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverAnchor, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { display: "none" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+						schema: hiddenItemSchema,
+						name: index
+					})
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ItemWrapper.ItemWrapper, {
+					className: (0, __pixpilot_shadcn.cn)("px-3 pl-4 py-2", isNewItem && "hidden"),
+					index,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemHeaderRow.ArrayItemHeaderRow, {
+						schema,
+						index,
+						slots: { content: { content: "text-foreground font-medium" } }
+					})
+				})] })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: { display: "none" },
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
 					schema: hiddenItemSchema,
@@ -45,7 +62,7 @@ const ListItem = react.default.memo(({ itemKey, index, record, isNew }) => {
 					index,
 					slots: { content: { content: "text-foreground font-medium" } }
 				})
-			})]
+			})] })
 		})
 	}, itemKey);
 });

package/dist/components/array-common/ListItem.js

@@ -7,15 +7,15 @@ import { getHiddenItemSchema } from "./get-hidden-item-schema.js";
 import { ItemWrapper } from "./ItemWrapper.js";
 import { RecursionField, useFieldSchema } from "@formily/react";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@pixpilot/shadcn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PopoverAnchor, cn } from "@pixpilot/shadcn";
 
 //#region src/components/array-common/ListItem.tsx
 /**
 * Individual list item component for array items
 * Displays an item with label and operation controls
 */
-const ListItem = React.memo(({ itemKey, index, record, isNew }) => {
+const ListItem = React.memo(({ itemKey, index, record, isNew, isAnchor }) => {
 	const schema = useFieldSchema();
 	const hiddenItemSchema = React.useMemo(() => {
 		return getHiddenItemSchema(schema.items);
@@ -24,9 +24,26 @@ const ListItem = React.memo(({ itemKey, index, record, isNew }) => {
 	return /* @__PURE__ */ jsx(ArrayBase.Item, {
 		index,
 		record,
-		children: /* @__PURE__ */ jsxs(SortableItem, {
+		children: /* @__PURE__ */ jsx(SortableItem, {
 			id: itemKey,
-			children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
+			children: isAnchor ? /* @__PURE__ */ jsx(PopoverAnchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", { children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
+					style: { display: "none" },
+					children: /* @__PURE__ */ jsx(RecursionField, {
+						schema: hiddenItemSchema,
+						name: index
+					})
+				}) : null, /* @__PURE__ */ jsx(ItemWrapper, {
+					className: cn("px-3 pl-4 py-2", isNewItem && "hidden"),
+					index,
+					children: /* @__PURE__ */ jsx(ArrayItemHeaderRow, {
+						schema,
+						index,
+						slots: { content: { content: "text-foreground font-medium" } }
+					})
+				})] })
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [hiddenItemSchema ? /* @__PURE__ */ jsx("div", {
 				style: { display: "none" },
 				children: /* @__PURE__ */ jsx(RecursionField, {
 					schema: hiddenItemSchema,
@@ -40,7 +57,7 @@ const ListItem = React.memo(({ itemKey, index, record, isNew }) => {
 					index,
 					slots: { content: { content: "text-foreground font-medium" } }
 				})
-			})]
+			})] })
 		})
 	}, itemKey);
 });

package/dist/components/array-common/use-array-item-draft-form.cjs

@@ -11,29 +11,45 @@ function useArrayItemDraftForm({ arrayField, index, autoSave, onDraftChange, ini
 		onDraftChangeRef.current = onDraftChange;
 	}, [onDraftChange]);
 	return react.default.useMemo(() => {
+		if (autoSave) {
+			const basePath = index ?? "draft";
+			const validationPath = index != null ? `${arrayField.address.toString()}.${index}.*` : void 0;
+			return {
+				form: arrayField.form,
+				basePath,
+				validationPath,
+				isolatedForm: false
+			};
+		}
 		const arrayValue = arrayField.value;
 		const hasArray = Array.isArray(arrayValue);
 		const arrayLength = hasArray ? arrayValue.length : 0;
 		const currentItemValue = index != null && hasArray && index >= 0 && index < arrayLength ? arrayValue[index] : initialDraftValue;
 		let didSkipInitial = false;
-		return (0, __formily_core.createForm)({
-			values: { draft: currentItemValue },
-			effects: () => {
-				if (!autoSave || onDraftChange == null) return;
-				(0, __formily_core.onFormValuesChange)((form) => {
-					if (!didSkipInitial) {
-						didSkipInitial = true;
-						return;
-					}
-					onDraftChangeRef.current?.(form.values.draft);
-				});
-			}
-		});
+		return {
+			form: (0, __formily_core.createForm)({
+				values: { draft: currentItemValue },
+				effects: () => {
+					if (onDraftChangeRef.current == null) return;
+					(0, __formily_core.onFormValuesChange)((form) => {
+						if (!didSkipInitial) {
+							didSkipInitial = true;
+							return;
+						}
+						onDraftChangeRef.current?.(form.values.draft);
+					});
+				}
+			}),
+			basePath: "draft",
+			validationPath: void 0,
+			isolatedForm: true
+		};
 	}, [
+		autoSave,
+		arrayField.form,
+		arrayField.address,
 		arrayField.value,
 		index,
-		autoSave,
-		onDraftChange,
 		initialDraftValue
 	]);
 }

package/dist/components/array-common/use-array-item-draft-form.js

@@ -8,29 +8,45 @@ function useArrayItemDraftForm({ arrayField, index, autoSave, onDraftChange, ini
 		onDraftChangeRef.current = onDraftChange;
 	}, [onDraftChange]);
 	return React.useMemo(() => {
+		if (autoSave) {
+			const basePath = index ?? "draft";
+			const validationPath = index != null ? `${arrayField.address.toString()}.${index}.*` : void 0;
+			return {
+				form: arrayField.form,
+				basePath,
+				validationPath,
+				isolatedForm: false
+			};
+		}
 		const arrayValue = arrayField.value;
 		const hasArray = Array.isArray(arrayValue);
 		const arrayLength = hasArray ? arrayValue.length : 0;
 		const currentItemValue = index != null && hasArray && index >= 0 && index < arrayLength ? arrayValue[index] : initialDraftValue;
 		let didSkipInitial = false;
-		return createForm({
-			values: { draft: currentItemValue },
-			effects: () => {
-				if (!autoSave || onDraftChange == null) return;
-				onFormValuesChange((form) => {
-					if (!didSkipInitial) {
-						didSkipInitial = true;
-						return;
-					}
-					onDraftChangeRef.current?.(form.values.draft);
-				});
-			}
-		});
+		return {
+			form: createForm({
+				values: { draft: currentItemValue },
+				effects: () => {
+					if (onDraftChangeRef.current == null) return;
+					onFormValuesChange((form) => {
+						if (!didSkipInitial) {
+							didSkipInitial = true;
+							return;
+						}
+						onDraftChangeRef.current?.(form.values.draft);
+					});
+				}
+			}),
+			basePath: "draft",
+			validationPath: void 0,
+			isolatedForm: true
+		};
 	}, [
+		autoSave,
+		arrayField.form,
+		arrayField.address,
 		arrayField.value,
 		index,
-		autoSave,
-		onDraftChange,
 		initialDraftValue
 	]);
 }

package/dist/components/array-common/use-array-item-edit-state.cjs

@@ -5,30 +5,18 @@ const require_use_edit_handlers = require('./use-edit-handlers.cjs');
 const require_use_shake_animation = require('./use-shake-animation.cjs');
 let __formily_react = require("@formily/react");
 __formily_react = require_rolldown_runtime.__toESM(__formily_react);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
 
 //#region src/components/array-common/use-array-item-edit-state.ts
-function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, onAutoSave, autoSave }) {
+function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, autoSave }) {
 	const arrayField = (0, __formily_react.useField)();
 	const activeIndex = activeItemManager.activeItem;
 	const isNewItem = activeItemManager.isNew;
 	const open = activeIndex !== void 0;
 	const normalizedAutoSave = autoSave === true || autoSave === "true";
-	const handleDraftChange = react.default.useCallback((nextValue) => {
-		if (!normalizedAutoSave) return;
-		if (activeIndex === void 0) return;
-		onAutoSave?.(activeIndex, nextValue);
-	}, [
-		activeIndex,
-		normalizedAutoSave,
-		onAutoSave
-	]);
-	const draftForm = require_use_array_item_draft_form.useArrayItemDraftForm({
+	const { form: draftForm, basePath, validationPath, isolatedForm } = require_use_array_item_draft_form.useArrayItemDraftForm({
 		arrayField,
 		index: activeIndex,
 		autoSave: normalizedAutoSave,
-		onDraftChange: normalizedAutoSave ? handleDraftChange : void 0,
 		initialDraftValue: activeItemManager.draftInitialValue
 	});
 	const isDirty = !normalizedAutoSave && draftForm.modified;
@@ -52,6 +40,9 @@ function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, on
 		open,
 		normalizedAutoSave,
 		draftForm,
+		basePath,
+		validationPath,
+		isolatedForm,
 		isDirty,
 		title,
 		description,

package/dist/components/array-common/use-array-item-edit-state.js

@@ -3,29 +3,18 @@ import { useArrayItemEditLabels } from "./use-array-item-edit-labels.js";
 import { useEditHandlers } from "./use-edit-handlers.js";
 import { useShakeAnimation } from "./use-shake-animation.js";
 import { useField } from "@formily/react";
-import React from "react";
 
 //#region src/components/array-common/use-array-item-edit-state.ts
-function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, onAutoSave, autoSave }) {
+function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, autoSave }) {
 	const arrayField = useField();
 	const activeIndex = activeItemManager.activeItem;
 	const isNewItem = activeItemManager.isNew;
 	const open = activeIndex !== void 0;
 	const normalizedAutoSave = autoSave === true || autoSave === "true";
-	const handleDraftChange = React.useCallback((nextValue) => {
-		if (!normalizedAutoSave) return;
-		if (activeIndex === void 0) return;
-		onAutoSave?.(activeIndex, nextValue);
-	}, [
-		activeIndex,
-		normalizedAutoSave,
-		onAutoSave
-	]);
-	const draftForm = useArrayItemDraftForm({
+	const { form: draftForm, basePath, validationPath, isolatedForm } = useArrayItemDraftForm({
 		arrayField,
 		index: activeIndex,
 		autoSave: normalizedAutoSave,
-		onDraftChange: normalizedAutoSave ? handleDraftChange : void 0,
 		initialDraftValue: activeItemManager.draftInitialValue
 	});
 	const isDirty = !normalizedAutoSave && draftForm.modified;
@@ -49,6 +38,9 @@ function useArrayItemEditState({ schema, activeItemManager, onSave, onCancel, on
 		open,
 		normalizedAutoSave,
 		draftForm,
+		basePath,
+		validationPath,
+		isolatedForm,
 		isDirty,
 		title,
 		description,