@pixpilot/formily-shadcn 1.4.5 → 1.6.0

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,

package/dist/components/array-dialog/ArrayDialog.cjs

@@ -1,4 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+require('../../hooks/index.cjs');
 const require_array_base = require('../array-base/array-base.cjs');
 const require_component_context = require('../array-base/component-context.cjs');
 require('../array-base/index.cjs');
@@ -25,7 +27,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 const ArrayDialogBase = (0, __formily_react.observer)((props) => {
 	const schema = (0, __formily_react.useFieldSchema)();
 	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, transformActions, dialogProps } = props;
-	const { autoSave } = props;
+	const { settings = {} } = require_use_form_context.useFormContext();
+	const { autoSave: globalAutoSave } = settings.dialog || {};
+	const autoSave = props.autoSave ?? globalAutoSave ?? false;
 	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleLiveChange, handleCancelClick } = require_use_array_editor.useArrayEditor({
 		onAdd,
 		onEdit,
@@ -35,7 +39,7 @@ const ArrayDialogBase = (0, __formily_react.observer)((props) => {
 	const items = require_use_array_item_schema.useArrayItemSchema();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_array_base.ArrayBase, {
 		...props,
-		autoSave: autoSave ?? false,
+		autoSave,
 		transformActions,
 		onAdd: handleAdd,
 		onRemove,
@@ -57,10 +61,10 @@ const ArrayDialogBase = (0, __formily_react.observer)((props) => {
 		})]
 	});
 });
-const ArrayItemsCollapseComponent = (rest) => {
+const ArrayItemsComponent = (rest) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_component_context.ArrayComponentProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayDialogBase, { ...rest }) });
 };
-const ArrayDialog = ArrayItemsCollapseComponent;
+const ArrayDialog = ArrayItemsComponent;
 ArrayDialog.displayName = "ArrayDialog";
 require_array_base.ArrayBase.mixin(ArrayDialog);
 

package/dist/components/array-dialog/ArrayDialog.js

@@ -1,3 +1,5 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import "../../hooks/index.js";
 import { ArrayBase } from "../array-base/array-base.js";
 import { ArrayComponentProvider, useArrayComponents } from "../array-base/component-context.js";
 import "../array-base/index.js";
@@ -21,7 +23,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ArrayDialogBase = observer((props) => {
 	const schema = useFieldSchema();
 	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, transformActions, dialogProps } = props;
-	const { autoSave } = props;
+	const { settings = {} } = useFormContext();
+	const { autoSave: globalAutoSave } = settings.dialog || {};
+	const autoSave = props.autoSave ?? globalAutoSave ?? false;
 	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleLiveChange, handleCancelClick } = useArrayEditor({
 		onAdd,
 		onEdit,
@@ -31,7 +35,7 @@ const ArrayDialogBase = observer((props) => {
 	const items = useArrayItemSchema();
 	return /* @__PURE__ */ jsxs(ArrayBase, {
 		...props,
-		autoSave: autoSave ?? false,
+		autoSave,
 		transformActions,
 		onAdd: handleAdd,
 		onRemove,
@@ -53,10 +57,10 @@ const ArrayDialogBase = observer((props) => {
 		})]
 	});
 });
-const ArrayItemsCollapseComponent = (rest) => {
+const ArrayItemsComponent = (rest) => {
 	return /* @__PURE__ */ jsx(ArrayComponentProvider, { children: /* @__PURE__ */ jsx(ArrayDialogBase, { ...rest }) });
 };
-const ArrayDialog = ArrayItemsCollapseComponent;
+const ArrayDialog = ArrayItemsComponent;
 ArrayDialog.displayName = "ArrayDialog";
 ArrayBase.mixin(ArrayDialog);
 

package/dist/components/array-dialog/EditDialog.cjs

@@ -19,29 +19,75 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Renders form fields based on the array item schema
 * RecursionField inherits component registry from parent SchemaField context (preserved through Radix Portal)
 */
-const EditDialog = (0, __formily_react.observer)(({ schema, onSave, onAutoSave, onCancel, activeItemManager, autoSave, className,...rest }) => {
-	const { activeIndex: itemIndex, open, normalizedAutoSave, draftForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = require_use_array_item_edit_state.useArrayItemEditState({
+const EditDialog = (0, __formily_react.observer)(({ schema, onSave, onAutoSave: _onAutoSave, onCancel, activeItemManager, autoSave,...rest }) => {
+	const { arrayField, activeIndex: itemIndex, isNewItem, open, normalizedAutoSave, draftForm, basePath, validationPath, isolatedForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = require_use_array_item_edit_state.useArrayItemEditState({
 		schema,
 		activeItemManager,
 		onSave,
 		onCancel,
-		onAutoSave,
 		autoSave
 	});
+	/**
+	* Validate the current item's fields before allowing the dialog to close.
+	* In non-autoSave mode a dirty (modified but unsaved) form shakes instead.
+	* In autoSave mode the parent form fields are validated directly.
+	*/
+	const validateAndClose = react.default.useCallback(() => {
+		if (isDirty) {
+			triggerShake();
+			return;
+		}
+		Promise.resolve(draftForm.validate(validationPath)).then(() => {
+			handleCancel();
+		}).catch(() => {
+			triggerShake();
+		});
+	}, [
+		draftForm,
+		handleCancel,
+		isDirty,
+		triggerShake,
+		validationPath
+	]);
+	/**
+	* In autoSave mode, newly-added items are inserted into the parent array
+	* immediately. Discard removes the item so the user can abandon it.
+	*/
+	const handleDiscard = react.default.useCallback(() => {
+		if (itemIndex !== void 0 && normalizedAutoSave && isNewItem) arrayField.remove?.(itemIndex).catch(console.error);
+		handleCancel();
+	}, [
+		arrayField,
+		handleCancel,
+		isNewItem,
+		itemIndex,
+		normalizedAutoSave
+	]);
 	const { settings = {} } = require_use_form_context.useFormContext();
+	const { autoSave: _globalAutoSave,...dialogSettings } = settings.dialog || {};
+	const dialogContentProps = {
+		...dialogSettings,
+		...rest
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Dialog, {
 		open,
 		onOpenChange: (isOpen) => {
-			if (!isOpen) handleCancel();
+			if (!isOpen) validateAndClose();
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogContent, {
-			...settings.dialog,
-			...rest,
-			className: (0, __pixpilot_shadcn_ui.cn)("sm:max-w-[525px]", shouldShake && "pp-shake", className),
+			...dialogContentProps,
+			className: (0, __pixpilot_shadcn_ui.cn)("sm:max-w-[525px]", shouldShake && "pp-shake", dialogContentProps.className),
 			onInteractOutside: (event) => {
-				if (!isDirty) return;
+				dialogContentProps.onInteractOutside?.(event);
+				if (event.defaultPrevented) return;
 				event.preventDefault();
-				triggerShake();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				dialogContentProps.onEscapeKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
 			},
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShakeStyles.ShakeStyles, {}),
@@ -50,6 +96,8 @@ const EditDialog = (0, __formily_react.observer)(({ schema, onSave, onAutoSave,
 					as: __pixpilot_shadcn_ui.DialogBody,
 					schema,
 					form: draftForm,
+					basePath,
+					isolated: isolatedForm,
 					className: (0, __pixpilot_shadcn_ui.cn)("grid gap-4 py-4")
 				}),
 				!normalizedAutoSave && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
@@ -61,6 +109,16 @@ const EditDialog = (0, __formily_react.observer)(({ schema, onSave, onAutoSave,
 					type: "button",
 					onClick: handleSave,
 					children: "Save Changes"
+				})] }),
+				normalizedAutoSave && isNewItem && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleDiscard,
+					children: "Discard"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					onClick: validateAndClose,
+					children: "Done"
 				})] })
 			]
 		})

package/dist/components/array-dialog/EditDialog.js

@@ -14,29 +14,75 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Renders form fields based on the array item schema
 * RecursionField inherits component registry from parent SchemaField context (preserved through Radix Portal)
 */
-const EditDialog = observer(({ schema, onSave, onAutoSave, onCancel, activeItemManager, autoSave, className,...rest }) => {
-	const { activeIndex: itemIndex, open, normalizedAutoSave, draftForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = useArrayItemEditState({
+const EditDialog = observer(({ schema, onSave, onAutoSave: _onAutoSave, onCancel, activeItemManager, autoSave,...rest }) => {
+	const { arrayField, activeIndex: itemIndex, isNewItem, open, normalizedAutoSave, draftForm, basePath, validationPath, isolatedForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = useArrayItemEditState({
 		schema,
 		activeItemManager,
 		onSave,
 		onCancel,
-		onAutoSave,
 		autoSave
 	});
+	/**
+	* Validate the current item's fields before allowing the dialog to close.
+	* In non-autoSave mode a dirty (modified but unsaved) form shakes instead.
+	* In autoSave mode the parent form fields are validated directly.
+	*/
+	const validateAndClose = React.useCallback(() => {
+		if (isDirty) {
+			triggerShake();
+			return;
+		}
+		Promise.resolve(draftForm.validate(validationPath)).then(() => {
+			handleCancel();
+		}).catch(() => {
+			triggerShake();
+		});
+	}, [
+		draftForm,
+		handleCancel,
+		isDirty,
+		triggerShake,
+		validationPath
+	]);
+	/**
+	* In autoSave mode, newly-added items are inserted into the parent array
+	* immediately. Discard removes the item so the user can abandon it.
+	*/
+	const handleDiscard = React.useCallback(() => {
+		if (itemIndex !== void 0 && normalizedAutoSave && isNewItem) arrayField.remove?.(itemIndex).catch(console.error);
+		handleCancel();
+	}, [
+		arrayField,
+		handleCancel,
+		isNewItem,
+		itemIndex,
+		normalizedAutoSave
+	]);
 	const { settings = {} } = useFormContext();
+	const { autoSave: _globalAutoSave,...dialogSettings } = settings.dialog || {};
+	const dialogContentProps = {
+		...dialogSettings,
+		...rest
+	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange: (isOpen) => {
-			if (!isOpen) handleCancel();
+			if (!isOpen) validateAndClose();
 		},
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			...settings.dialog,
-			...rest,
-			className: cn("sm:max-w-[525px]", shouldShake && "pp-shake", className),
+			...dialogContentProps,
+			className: cn("sm:max-w-[525px]", shouldShake && "pp-shake", dialogContentProps.className),
 			onInteractOutside: (event) => {
-				if (!isDirty) return;
+				dialogContentProps.onInteractOutside?.(event);
+				if (event.defaultPrevented) return;
 				event.preventDefault();
-				triggerShake();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				dialogContentProps.onEscapeKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
 			},
 			children: [
 				/* @__PURE__ */ jsx(ShakeStyles, {}),
@@ -45,6 +91,8 @@ const EditDialog = observer(({ schema, onSave, onAutoSave, onCancel, activeItemM
 					as: DialogBody,
 					schema,
 					form: draftForm,
+					basePath,
+					isolated: isolatedForm,
 					className: cn("grid gap-4 py-4")
 				}),
 				!normalizedAutoSave && /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
@@ -56,6 +104,16 @@ const EditDialog = observer(({ schema, onSave, onAutoSave, onCancel, activeItemM
 					type: "button",
 					onClick: handleSave,
 					children: "Save Changes"
+				})] }),
+				normalizedAutoSave && isNewItem && /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleDiscard,
+					children: "Discard"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: validateAndClose,
+					children: "Done"
 				})] })
 			]
 		})

package/dist/components/array-popover/ArrayPopover.cjs

@@ -1,4 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+require('../../hooks/index.cjs');
 const require_array_base = require('../array-base/array-base.cjs');
 const require_component_context = require('../array-base/component-context.cjs');
 require('../array-base/index.cjs');
@@ -19,7 +21,9 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 //#region src/components/array-popover/ArrayPopover.tsx
 const ArrayPopoverBase = (0, __formily_react.observer)((props) => {
 	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, autoSave: autoSaveProp, className, children, transformActions, popoverProps,...rest } = props;
-	const autoSave = autoSaveProp === true;
+	const { settings = {} } = require_use_form_context.useFormContext();
+	const { autoSave: globalAutoSave } = settings.popover || {};
+	const autoSave = autoSaveProp ?? globalAutoSave ?? true;
 	const { activeItemManager, handleAdd, isNewItem, handleEdit, handleSaveClick, handleLiveChange, handleCancelClick } = require_use_array_editor.useArrayEditor({
 		onAdd,
 		onEdit,
@@ -35,22 +39,35 @@ const ArrayPopoverBase = (0, __formily_react.observer)((props) => {
 		onMoveUp,
 		onMoveDown,
 		onEdit: handleEdit,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			...rest,
-			className: (0, __pixpilot_shadcn.cn)("space-y-2", className),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemsList.ArrayItemsList, { isNewItem }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "pt-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.ArrayItemsEditPopover, {
-					activeItemManager,
-					onCancel: handleCancelClick,
-					onAutoSave: handleLiveChange,
-					autoSave,
-					schema,
-					onSave: handleSaveClick,
-					...popoverProps,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Addition, {})
-				})
-			})]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Popover, {
+			open: activeItemManager.activeItem !== void 0,
+			modal: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...rest,
+				className: (0, __pixpilot_shadcn.cn)("space-y-2", className),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemsList.ArrayItemsList, {
+						isNewItem,
+						activeIndex: activeItemManager.activeItem
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pt-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Addition, {})
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.ArrayItemsEditPopover, {
+						activeItemManager,
+						onCancel: handleCancelClick,
+						onAutoSave: handleLiveChange,
+						autoSave,
+						schema,
+						onSave: handleSaveClick,
+						...popoverProps
+					})
+				]
+			})
 		})
 	});
 });