@pixpilot/formily-shadcn 1.4.4 → 1.5.0

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/EditDialog.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_ArrayItemDraftFields = require('../array-common/ArrayItemDraftFields.cjs');
 const require_ShakeStyles = require('../array-common/ShakeStyles.cjs');
 const require_use_array_item_edit_state = require('../array-common/use-array-item-edit-state.cjs');
@@ -17,27 +19,67 @@ 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, className,...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();
 	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),
 			onInteractOutside: (event) => {
-				if (!isDirty) return;
 				event.preventDefault();
-				triggerShake();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				event.preventDefault();
+				validateAndClose();
 			},
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShakeStyles.ShakeStyles, {}),
@@ -46,6 +88,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, {
@@ -57,6 +101,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

@@ -1,3 +1,5 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import "../../hooks/index.js";
 import { ArrayItemDraftFields } from "../array-common/ArrayItemDraftFields.js";
 import { ShakeStyles } from "../array-common/ShakeStyles.js";
 import { useArrayItemEditState } from "../array-common/use-array-item-edit-state.js";
@@ -12,27 +14,67 @@ 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, className,...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();
 	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),
 			onInteractOutside: (event) => {
-				if (!isDirty) return;
 				event.preventDefault();
-				triggerShake();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				event.preventDefault();
+				validateAndClose();
 			},
 			children: [
 				/* @__PURE__ */ jsx(ShakeStyles, {}),
@@ -41,6 +83,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, {
@@ -52,6 +96,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

@@ -35,22 +35,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
+					})
+				]
+			})
 		})
 	});
 });

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

@@ -9,7 +9,7 @@ import { ArrayItemsEditPopover } from "./Popover.js";
 import { observer } from "@formily/react";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@pixpilot/shadcn";
+import { Popover, PopoverTrigger, cn } from "@pixpilot/shadcn";
 
 //#region src/components/array-popover/ArrayPopover.tsx
 const ArrayPopoverBase = observer((props) => {
@@ -30,22 +30,35 @@ const ArrayPopoverBase = observer((props) => {
 		onMoveUp,
 		onMoveDown,
 		onEdit: handleEdit,
-		children: /* @__PURE__ */ jsxs("div", {
-			...rest,
-			className: cn("space-y-2", className),
-			children: [/* @__PURE__ */ jsx(ArrayItemsList, { isNewItem }), /* @__PURE__ */ jsx("div", {
-				className: "pt-2",
-				children: /* @__PURE__ */ jsx(ArrayItemsEditPopover, {
-					activeItemManager,
-					onCancel: handleCancelClick,
-					onAutoSave: handleLiveChange,
-					autoSave,
-					schema,
-					onSave: handleSaveClick,
-					...popoverProps,
-					children: /* @__PURE__ */ jsx(ArrayBase.Addition, {})
-				})
-			})]
+		children: /* @__PURE__ */ jsx(Popover, {
+			open: activeItemManager.activeItem !== void 0,
+			modal: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				...rest,
+				className: cn("space-y-2", className),
+				children: [
+					/* @__PURE__ */ jsx(ArrayItemsList, {
+						isNewItem,
+						activeIndex: activeItemManager.activeItem
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "pt-2",
+						children: /* @__PURE__ */ jsx(PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(ArrayBase.Addition, {})
+						})
+					}),
+					/* @__PURE__ */ jsx(ArrayItemsEditPopover, {
+						activeItemManager,
+						onCancel: handleCancelClick,
+						onAutoSave: handleLiveChange,
+						autoSave,
+						schema,
+						onSave: handleSaveClick,
+						...popoverProps
+					})
+				]
+			})
 		})
 	});
 });