@pixpilot/formily-shadcn 0.8.0 → 0.8.1

package/dist/components/array-common/list-item.js

@@ -1 +1,48 @@
-import{ArrayBase as e}from"../array-base/array-base.js";import{useArrayComponents as t}from"../array-base/component-context.js";import"../array-base/index.js";import{ItemWrapper as n}from"./item-wrapper.js";import{useField as r,useFieldSchema as i}from"@formily/react";import a from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{cn as c}from"@pixpilot/shadcn";const l=a.memo(({itemKey:a,index:l,record:u,isNew:d})=>{let f=i(),p=r(),{OperationComponents:m,ItemLabel:h}=t(),g=p.address.toString(),_=d;return o(e.Item,{index:l,record:u,children:s(n,{className:c(`flex px-3 pl-4 py-2`,_&&`hidden`),index:l,children:[o(`div`,{className:`text-foreground flex-1 font-medium`,children:o(h,{schema:f,basePath:g,index:l})}),o(`div`,{className:`flex items-center gap-1`,children:o(m,{schema:f,basePath:g,index:l})})]})},a)});l.displayName=`ListItem`;export{l as ListItem};
+import { ArrayBase } from "../array-base/array-base.js";
+import { useArrayComponents } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { ItemWrapper } from "./item-wrapper.js";
+import { useField, useFieldSchema } from "@formily/react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/array-common/list-item.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 schema = useFieldSchema();
+	const field = useField();
+	const { OperationComponents, ItemLabel } = useArrayComponents();
+	const fieldAddress = field.address.toString();
+	const isNewItem = isNew;
+	return /* @__PURE__ */ jsx(ArrayBase.Item, {
+		index,
+		record,
+		children: /* @__PURE__ */ jsxs(ItemWrapper, {
+			className: cn("flex px-3 pl-4 py-2", isNewItem && "hidden"),
+			index,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-foreground flex-1 font-medium",
+				children: /* @__PURE__ */ jsx(ItemLabel, {
+					schema,
+					basePath: fieldAddress,
+					index
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ jsx(OperationComponents, {
+					schema,
+					basePath: fieldAddress,
+					index
+				})
+			})]
+		})
+	}, itemKey);
+});
+ListItem.displayName = "ListItem";
+
+//#endregion
+export { ListItem };

package/dist/components/array-common/use-array-editor.cjs

@@ -1 +1,47 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../utils/validate-array-item-fields.cjs`);require(`../../utils/index.cjs`);const n=require(`./create-active-item-manager.cjs`);let r=require(`@formily/react`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);function a(e){let{onAdd:a,onEdit:o}=e,s=(0,r.useField)(),c=(0,r.useFieldSchema)(),l=i.default.useMemo(()=>n.createActiveItemManager(),[]),u=e=>{l.setActiveItem(e,!1),o?.(e)},d=e=>{l.setActiveItem(e,!0),a?.(e)},f=e=>{t.validateArrayItemFields(s,e).then(()=>{l.removeActiveItem(e)}).catch(console.error)},p=e=>{l.isNewItem(e)&&s.remove?.(e).catch(console.error),l.removeActiveItem(e)},m=i.default.useCallback(e=>l.activeItem===e&&l.isNew,[l]);return{activeItemManager:l,handleEdit:u,handleAdd:d,handleSaveClick:f,handleCancelClick:p,field:s,items:Array.isArray(c.items)?c.items[0]??c.items:c.items,isNewItem:m}}exports.useArrayEditor=a;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_validate_array_item_fields = require('../../utils/validate-array-item-fields.cjs');
+require('../../utils/index.cjs');
+const require_create_active_item_manager = require('./create-active-item-manager.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-editor.ts
+function useArrayEditor(props) {
+	const { onAdd, onEdit } = props;
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const activeItemManager = react.default.useMemo(() => require_create_active_item_manager.createActiveItemManager(), []);
+	const handleEdit = (index) => {
+		activeItemManager.setActiveItem(index, false);
+		onEdit?.(index);
+	};
+	const handleAdd = (index) => {
+		activeItemManager.setActiveItem(index, true);
+		onAdd?.(index);
+	};
+	const handleSaveClick = (itemIndex) => {
+		require_validate_array_item_fields.validateArrayItemFields(field, itemIndex).then(() => {
+			activeItemManager.removeActiveItem(itemIndex);
+		}).catch(console.error);
+	};
+	const handleCancelClick = (itemIndex) => {
+		if (activeItemManager.isNewItem(itemIndex)) field.remove?.(itemIndex).catch(console.error);
+		activeItemManager.removeActiveItem(itemIndex);
+	};
+	const isNewItem = react.default.useCallback((index) => activeItemManager.activeItem === index && activeItemManager.isNew, [activeItemManager]);
+	return {
+		activeItemManager,
+		handleEdit,
+		handleAdd,
+		handleSaveClick,
+		handleCancelClick,
+		field,
+		items: Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items,
+		isNewItem
+	};
+}
+
+//#endregion
+exports.useArrayEditor = useArrayEditor;

package/dist/components/array-common/use-array-editor.js

@@ -1 +1,44 @@
-import{validateArrayItemFields as e}from"../../utils/validate-array-item-fields.js";import"../../utils/index.js";import{createActiveItemManager as t}from"./create-active-item-manager.js";import{useField as n,useFieldSchema as r}from"@formily/react";import i from"react";function a(a){let{onAdd:o,onEdit:s}=a,c=n(),l=r(),u=i.useMemo(()=>t(),[]),d=e=>{u.setActiveItem(e,!1),s?.(e)},f=e=>{u.setActiveItem(e,!0),o?.(e)},p=t=>{e(c,t).then(()=>{u.removeActiveItem(t)}).catch(console.error)},m=e=>{u.isNewItem(e)&&c.remove?.(e).catch(console.error),u.removeActiveItem(e)},h=i.useCallback(e=>u.activeItem===e&&u.isNew,[u]);return{activeItemManager:u,handleEdit:d,handleAdd:f,handleSaveClick:p,handleCancelClick:m,field:c,items:Array.isArray(l.items)?l.items[0]??l.items:l.items,isNewItem:h}}export{a as useArrayEditor};
+import { validateArrayItemFields } from "../../utils/validate-array-item-fields.js";
+import "../../utils/index.js";
+import { createActiveItemManager } from "./create-active-item-manager.js";
+import { useField, useFieldSchema } from "@formily/react";
+import React from "react";
+
+//#region src/components/array-common/use-array-editor.ts
+function useArrayEditor(props) {
+	const { onAdd, onEdit } = props;
+	const field = useField();
+	const schema = useFieldSchema();
+	const activeItemManager = React.useMemo(() => createActiveItemManager(), []);
+	const handleEdit = (index) => {
+		activeItemManager.setActiveItem(index, false);
+		onEdit?.(index);
+	};
+	const handleAdd = (index) => {
+		activeItemManager.setActiveItem(index, true);
+		onAdd?.(index);
+	};
+	const handleSaveClick = (itemIndex) => {
+		validateArrayItemFields(field, itemIndex).then(() => {
+			activeItemManager.removeActiveItem(itemIndex);
+		}).catch(console.error);
+	};
+	const handleCancelClick = (itemIndex) => {
+		if (activeItemManager.isNewItem(itemIndex)) field.remove?.(itemIndex).catch(console.error);
+		activeItemManager.removeActiveItem(itemIndex);
+	};
+	const isNewItem = React.useCallback((index) => activeItemManager.activeItem === index && activeItemManager.isNew, [activeItemManager]);
+	return {
+		activeItemManager,
+		handleEdit,
+		handleAdd,
+		handleSaveClick,
+		handleCancelClick,
+		field,
+		items: Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items,
+		isNewItem
+	};
+}
+
+//#endregion
+export { useArrayEditor };

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

@@ -1 +1,66 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../array-base/array-base.cjs`),n=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const r=require(`../array-base/constants/index.cjs`),i=require(`../array-common/array-items-list.cjs`),a=require(`../array-common/use-array-editor.cjs`);require(`../array-common/index.cjs`);const o=require(`./edit-dialog.cjs`);let s=require(`@formily/react`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);const u=(0,s.observer)(e=>{let r=(0,s.useFieldSchema)(),{onAdd:c,onRemove:u,onMoveDown:d,onMoveUp:f,onEdit:p,className:m}=e,{activeItemManager:h,handleAdd:g,handleEdit:_,isNewItem:v,handleSaveClick:y,handleCancelClick:b,field:x}=a.useArrayEditor({onAdd:c,onEdit:p}),{AddButton:S}=n.useArrayComponents(),C=Array.isArray(r.items)?r.items[0]??r.items:r.items;return(0,l.jsxs)(t.ArrayBase,{onAdd:g,onRemove:u,onMoveUp:f,onMoveDown:d,onEdit:_,children:[(0,l.jsx)(i.ArrayItemsList,{className:m,isNewItem:v,children:(0,l.jsx)(S,{schema:r,basePath:x.address.toString()})}),(0,l.jsx)(o.EditDialog,{onSave:y,onCancel:b,activeItemManager:h,schema:C})]})}),d=({operations:e=r.DEFAULT_EDITABLE_OPERATIONS,...t})=>(0,l.jsx)(n.ArrayComponentProvider,{allowedOperationsComponentNames:e,children:(0,l.jsx)(u,{...t})}),f=d;f.displayName=`ArrayDialog`,t.ArrayBase.mixin(f),exports.ArrayDialog=f;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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');
+const require_index$1 = require('../array-base/constants/index.cjs');
+const require_array_items_list = require('../array-common/array-items-list.cjs');
+const require_use_array_editor = require('../array-common/use-array-editor.cjs');
+require('../array-common/index.cjs');
+const require_edit_dialog = require('./edit-dialog.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);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/array-dialog/array-dialog.tsx
+/**
+* ArrayItems component displays array items as a simple list with controls
+* Each item shows:
+* - Left: Move up/down buttons
+* - Center: Item label (Item 1, Item 2, etc.)
+* - Right: Edit and Remove buttons
+*/
+const ArrayDialogBase = (0, __formily_react.observer)((props) => {
+	const schema = (0, __formily_react.useFieldSchema)();
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className } = props;
+	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleCancelClick, field } = require_use_array_editor.useArrayEditor({
+		onAdd,
+		onEdit
+	});
+	const { AddButton } = require_component_context.useArrayComponents();
+	const items = Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_array_base.ArrayBase, {
+		onAdd: handleAdd,
+		onRemove,
+		onMoveUp,
+		onMoveDown,
+		onEdit: handleEdit,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_items_list.ArrayItemsList, {
+			className,
+			isNewItem,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddButton, {
+				schema,
+				basePath: field.address.toString()
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_edit_dialog.EditDialog, {
+			onSave: handleSaveClick,
+			onCancel: handleCancelClick,
+			activeItemManager,
+			schema: items
+		})]
+	});
+});
+const ArrayItemsCollapseComponent = ({ operations = require_index$1.DEFAULT_EDITABLE_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_component_context.ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayDialogBase, { ...rest })
+	});
+};
+const ArrayDialog = ArrayItemsCollapseComponent;
+ArrayDialog.displayName = "ArrayDialog";
+require_array_base.ArrayBase.mixin(ArrayDialog);
+
+//#endregion
+exports.ArrayDialog = ArrayDialog;

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

@@ -1 +1,62 @@
-import{ArrayBase as e}from"../array-base/array-base.js";import{ArrayComponentProvider as t,useArrayComponents as n}from"../array-base/component-context.js";import"../array-base/index.js";import{DEFAULT_EDITABLE_OPERATIONS as r}from"../array-base/constants/index.js";import{ArrayItemsList as i}from"../array-common/array-items-list.js";import{useArrayEditor as a}from"../array-common/use-array-editor.js";import"../array-common/index.js";import{EditDialog as o}from"./edit-dialog.js";import{observer as s,useFieldSchema as c}from"@formily/react";import l from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=s(t=>{let r=c(),{onAdd:s,onRemove:l,onMoveDown:f,onMoveUp:p,onEdit:m,className:h}=t,{activeItemManager:g,handleAdd:_,handleEdit:v,isNewItem:y,handleSaveClick:b,handleCancelClick:x,field:S}=a({onAdd:s,onEdit:m}),{AddButton:C}=n(),w=Array.isArray(r.items)?r.items[0]??r.items:r.items;return d(e,{onAdd:_,onRemove:l,onMoveUp:p,onMoveDown:f,onEdit:v,children:[u(i,{className:h,isNewItem:y,children:u(C,{schema:r,basePath:S.address.toString()})}),u(o,{onSave:b,onCancel:x,activeItemManager:g,schema:w})]})}),p=({operations:e=r,...n})=>u(t,{allowedOperationsComponentNames:e,children:u(f,{...n})});p.displayName=`ArrayDialog`,e.mixin(p);export{p as ArrayDialog};
+import { ArrayBase } from "../array-base/array-base.js";
+import { ArrayComponentProvider, useArrayComponents } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { DEFAULT_EDITABLE_OPERATIONS } from "../array-base/constants/index.js";
+import { ArrayItemsList } from "../array-common/array-items-list.js";
+import { useArrayEditor } from "../array-common/use-array-editor.js";
+import "../array-common/index.js";
+import { EditDialog } from "./edit-dialog.js";
+import { observer, useFieldSchema } from "@formily/react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/array-dialog/array-dialog.tsx
+/**
+* ArrayItems component displays array items as a simple list with controls
+* Each item shows:
+* - Left: Move up/down buttons
+* - Center: Item label (Item 1, Item 2, etc.)
+* - Right: Edit and Remove buttons
+*/
+const ArrayDialogBase = observer((props) => {
+	const schema = useFieldSchema();
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className } = props;
+	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleCancelClick, field } = useArrayEditor({
+		onAdd,
+		onEdit
+	});
+	const { AddButton } = useArrayComponents();
+	const items = Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items;
+	return /* @__PURE__ */ jsxs(ArrayBase, {
+		onAdd: handleAdd,
+		onRemove,
+		onMoveUp,
+		onMoveDown,
+		onEdit: handleEdit,
+		children: [/* @__PURE__ */ jsx(ArrayItemsList, {
+			className,
+			isNewItem,
+			children: /* @__PURE__ */ jsx(AddButton, {
+				schema,
+				basePath: field.address.toString()
+			})
+		}), /* @__PURE__ */ jsx(EditDialog, {
+			onSave: handleSaveClick,
+			onCancel: handleCancelClick,
+			activeItemManager,
+			schema: items
+		})]
+	});
+});
+const ArrayItemsCollapseComponent = ({ operations = DEFAULT_EDITABLE_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ jsx(ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ jsx(ArrayDialogBase, { ...rest })
+	});
+};
+const ArrayDialog = ArrayItemsCollapseComponent;
+ArrayDialog.displayName = "ArrayDialog";
+ArrayBase.mixin(ArrayDialog);
+
+//#endregion
+export { ArrayDialog };

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

@@ -1 +1,61 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`);let t=require(`@formily/react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@pixpilot/shadcn`);r=e.__toESM(r);const i=(0,t.observer)(({schema:e,onSave:i,onCancel:a,activeItemManager:o})=>{let s=(0,t.useField)(),c=o.activeItem,{isNew:l}=o,u=c!==void 0,d=()=>{c!==void 0&&i(c)},f=()=>{c!==void 0&&a(c)};return(0,n.jsx)(r.Dialog,{open:u,onOpenChange:e=>{e||f()},children:(0,n.jsxs)(r.DialogContent,{className:`sm:max-w-[525px]`,children:[(0,n.jsxs)(r.DialogHeader,{children:[(0,n.jsx)(r.DialogTitle,{children:l?`Add New Item`:`Edit Item #${(c??0)+1}`}),(0,n.jsx)(r.DialogDescription,{children:l?`Fill in the details for the new item. Click save when you're done.`:`Make changes to the item. Click save when you're done.`})]}),(0,n.jsx)(`div`,{className:`grid gap-4 py-4`,children:c!=null&&(0,n.jsx)(t.RecursionField,{basePath:s.address.concat(c),schema:e,onlyRenderProperties:!0})}),(0,n.jsxs)(r.DialogFooter,{children:[(0,n.jsx)(r.Button,{type:`button`,variant:`outline`,onClick:f,children:`Cancel`}),(0,n.jsx)(r.Button,{type:`button`,onClick:d,children:`Save Changes`})]})]})})});exports.EditDialog=i;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/array-dialog/edit-dialog.tsx
+/**
+* Dialog for editing array items
+* 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, onCancel, activeItemManager }) => {
+	const arrayField = (0, __formily_react.useField)();
+	const itemIndex = activeItemManager.activeItem;
+	const { isNew } = activeItemManager;
+	const open = itemIndex !== void 0;
+	const handleSaveClick = () => {
+		if (itemIndex === void 0) return;
+		onSave(itemIndex);
+	};
+	const handleCancelClick = () => {
+		if (itemIndex === void 0) return;
+		onCancel(itemIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) handleCancelClick();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
+			className: "sm:max-w-[525px]",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: isNew ? "Add New Item" : `Edit Item #${(itemIndex ?? 0) + 1}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: isNew ? "Fill in the details for the new item. Click save when you're done." : "Make changes to the item. Click save when you're done." })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid gap-4 py-4",
+					children: itemIndex != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+						basePath: arrayField.address.concat(itemIndex),
+						schema,
+						onlyRenderProperties: true
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleCancelClick,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+					type: "button",
+					onClick: handleSaveClick,
+					children: "Save Changes"
+				})] })
+			]
+		})
+	});
+});
+
+//#endregion
+exports.EditDialog = EditDialog;

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

@@ -1 +1,57 @@
-import{RecursionField as e,observer as t,useField as n}from"@formily/react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Button as a,Dialog as o,DialogContent as s,DialogDescription as c,DialogFooter as l,DialogHeader as u,DialogTitle as d}from"@pixpilot/shadcn";const f=t(({schema:t,onSave:f,onCancel:p,activeItemManager:m})=>{let h=n(),g=m.activeItem,{isNew:_}=m,v=g!==void 0,y=()=>{g!==void 0&&f(g)},b=()=>{g!==void 0&&p(g)};return r(o,{open:v,onOpenChange:e=>{e||b()},children:i(s,{className:`sm:max-w-[525px]`,children:[i(u,{children:[r(d,{children:_?`Add New Item`:`Edit Item #${(g??0)+1}`}),r(c,{children:_?`Fill in the details for the new item. Click save when you're done.`:`Make changes to the item. Click save when you're done.`})]}),r(`div`,{className:`grid gap-4 py-4`,children:g!=null&&r(e,{basePath:h.address.concat(g),schema:t,onlyRenderProperties:!0})}),i(l,{children:[r(a,{type:`button`,variant:`outline`,onClick:b,children:`Cancel`}),r(a,{type:`button`,onClick:y,children:`Save Changes`})]})]})})});export{f as EditDialog};
+import { RecursionField, observer, useField } from "@formily/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@pixpilot/shadcn";
+
+//#region src/components/array-dialog/edit-dialog.tsx
+/**
+* Dialog for editing array items
+* 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, onCancel, activeItemManager }) => {
+	const arrayField = useField();
+	const itemIndex = activeItemManager.activeItem;
+	const { isNew } = activeItemManager;
+	const open = itemIndex !== void 0;
+	const handleSaveClick = () => {
+		if (itemIndex === void 0) return;
+		onSave(itemIndex);
+	};
+	const handleCancelClick = () => {
+		if (itemIndex === void 0) return;
+		onCancel(itemIndex);
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) handleCancelClick();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-[525px]",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: isNew ? "Add New Item" : `Edit Item #${(itemIndex ?? 0) + 1}` }), /* @__PURE__ */ jsx(DialogDescription, { children: isNew ? "Fill in the details for the new item. Click save when you're done." : "Make changes to the item. Click save when you're done." })] }),
+				/* @__PURE__ */ jsx("div", {
+					className: "grid gap-4 py-4",
+					children: itemIndex != null && /* @__PURE__ */ jsx(RecursionField, {
+						basePath: arrayField.address.concat(itemIndex),
+						schema,
+						onlyRenderProperties: true
+					})
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleCancelClick,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: handleSaveClick,
+					children: "Save Changes"
+				})] })
+			]
+		})
+	});
+});
+
+//#endregion
+export { EditDialog };

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

@@ -1 +1 @@
-const e=require(`./array-dialog.cjs`);
+const require_array_dialog = require('./array-dialog.cjs');

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

@@ -1 +1 @@
-import{ArrayDialog as e}from"./array-dialog.js";
+import { ArrayDialog } from "./array-dialog.js";

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

@@ -1 +1,58 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../array-base/array-base.cjs`),n=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const r=require(`../array-base/constants/index.cjs`),i=require(`../array-common/array-items-list.cjs`),a=require(`../array-common/use-array-editor.cjs`);require(`../array-common/index.cjs`);const o=require(`./popover.cjs`);let s=require(`@formily/react`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);let u=require(`@pixpilot/shadcn`);u=e.__toESM(u);const d=(0,s.observer)(e=>{let{onAdd:n,onRemove:r,onMoveDown:s,onMoveUp:c,onEdit:d,className:f,children:p,...m}=e,{activeItemManager:h,items:g,handleAdd:_,isNewItem:v,handleEdit:y,handleSaveClick:b,handleCancelClick:x}=a.useArrayEditor({onAdd:n,onEdit:d});return(0,l.jsx)(t.ArrayBase,{onAdd:_,onRemove:r,onMoveUp:c,onMoveDown:s,onEdit:y,children:(0,l.jsxs)(`div`,{...m,className:(0,u.cn)(`space-y-2`,f),children:[(0,l.jsx)(i.ArrayItemsList,{isNewItem:v}),(0,l.jsx)(`div`,{className:`pt-2`,children:(0,l.jsx)(o.ArrayItemsEditPopover,{activeItemManager:h,onCancel:x,schema:g,onSave:b,children:(0,l.jsx)(t.ArrayBase.Addition,{})})})]})})}),f=({operations:e=r.DEFAULT_EDITABLE_OPERATIONS,...t})=>(0,l.jsx)(n.ArrayComponentProvider,{allowedOperationsComponentNames:e,children:(0,l.jsx)(d,{...t})});f.displayName=`ArrayPopover`,t.ArrayBase.mixin(f),exports.ArrayPopover=f;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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');
+const require_index$1 = require('../array-base/constants/index.cjs');
+const require_array_items_list = require('../array-common/array-items-list.cjs');
+const require_use_array_editor = require('../array-common/use-array-editor.cjs');
+require('../array-common/index.cjs');
+const require_popover = require('./popover.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);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/array-popover/array-popover.tsx
+const ArrayPopoverBase = (0, __formily_react.observer)((props) => {
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, children,...rest } = props;
+	const { activeItemManager, items, handleAdd, isNewItem, handleEdit, handleSaveClick, handleCancelClick } = require_use_array_editor.useArrayEditor({
+		onAdd,
+		onEdit
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase, {
+		onAdd: handleAdd,
+		onRemove,
+		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_array_items_list.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,
+					schema: items,
+					onSave: handleSaveClick,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Addition, {})
+				})
+			})]
+		})
+	});
+});
+const ArrayPopover = ({ operations = require_index$1.DEFAULT_EDITABLE_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_component_context.ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayPopoverBase, { ...rest })
+	});
+};
+ArrayPopover.displayName = "ArrayPopover";
+require_array_base.ArrayBase.mixin(ArrayPopover);
+
+//#endregion
+exports.ArrayPopover = ArrayPopover;

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

@@ -1 +1,53 @@
-import{ArrayBase as e}from"../array-base/array-base.js";import{ArrayComponentProvider as t}from"../array-base/component-context.js";import"../array-base/index.js";import{DEFAULT_EDITABLE_OPERATIONS as n}from"../array-base/constants/index.js";import{ArrayItemsList as r}from"../array-common/array-items-list.js";import{useArrayEditor as i}from"../array-common/use-array-editor.js";import"../array-common/index.js";import{ArrayItemsEditPopover as a}from"./popover.js";import{observer as o}from"@formily/react";import s from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{cn as u}from"@pixpilot/shadcn";const d=o(t=>{let{onAdd:n,onRemove:o,onMoveDown:s,onMoveUp:d,onEdit:f,className:p,children:m,...h}=t,{activeItemManager:g,items:_,handleAdd:v,isNewItem:y,handleEdit:b,handleSaveClick:x,handleCancelClick:S}=i({onAdd:n,onEdit:f});return c(e,{onAdd:v,onRemove:o,onMoveUp:d,onMoveDown:s,onEdit:b,children:l(`div`,{...h,className:u(`space-y-2`,p),children:[c(r,{isNewItem:y}),c(`div`,{className:`pt-2`,children:c(a,{activeItemManager:g,onCancel:S,schema:_,onSave:x,children:c(e.Addition,{})})})]})})}),f=({operations:e=n,...r})=>c(t,{allowedOperationsComponentNames:e,children:c(d,{...r})});f.displayName=`ArrayPopover`,e.mixin(f);export{f as ArrayPopover};
+import { ArrayBase } from "../array-base/array-base.js";
+import { ArrayComponentProvider } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { DEFAULT_EDITABLE_OPERATIONS } from "../array-base/constants/index.js";
+import { ArrayItemsList } from "../array-common/array-items-list.js";
+import { useArrayEditor } from "../array-common/use-array-editor.js";
+import "../array-common/index.js";
+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";
+
+//#region src/components/array-popover/array-popover.tsx
+const ArrayPopoverBase = observer((props) => {
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, children,...rest } = props;
+	const { activeItemManager, items, handleAdd, isNewItem, handleEdit, handleSaveClick, handleCancelClick } = useArrayEditor({
+		onAdd,
+		onEdit
+	});
+	return /* @__PURE__ */ jsx(ArrayBase, {
+		onAdd: handleAdd,
+		onRemove,
+		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,
+					schema: items,
+					onSave: handleSaveClick,
+					children: /* @__PURE__ */ jsx(ArrayBase.Addition, {})
+				})
+			})]
+		})
+	});
+});
+const ArrayPopover = ({ operations = DEFAULT_EDITABLE_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ jsx(ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ jsx(ArrayPopoverBase, { ...rest })
+	});
+};
+ArrayPopover.displayName = "ArrayPopover";
+ArrayBase.mixin(ArrayPopover);
+
+//#endregion
+export { ArrayPopover };

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

@@ -1 +1 @@
-const e=require(`./array-popover.cjs`);
+const require_array_popover = require('./array-popover.cjs');

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

@@ -1 +1 @@
-import{ArrayPopover as e}from"./array-popover.js";
+import { ArrayPopover } from "./array-popover.js";

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

@@ -1 +1,75 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`);let t=require(`@formily/react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@pixpilot/shadcn`);r=e.__toESM(r);const i=(0,t.observer)(({schema:e,onSave:i,onCancel:a,children:o,activeItemManager:s})=>{let c=(0,t.useField)(),l=s.activeItem,u=s.isNew,d=l!==void 0;return(0,n.jsxs)(r.Popover,{open:d,onOpenChange:e=>{e||a(l)},children:[o!==void 0&&(0,n.jsx)(r.PopoverTrigger,{asChild:!0,children:o}),(0,n.jsx)(r.PopoverContent,{className:`w-96`,side:`top`,children:(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsxs)(`div`,{className:`space-y-2`,children:[(0,n.jsx)(`h4`,{className:`font-medium leading-none`,children:u?`Add New Item`:`Edit Item`}),(0,n.jsx)(`p`,{className:`text-muted-foreground text-sm`,children:u?`Fill in the details for the new item.`:`Make changes to the item.`})]}),l!=null&&(0,n.jsx)(`div`,{className:`space-y-4`,children:(0,n.jsx)(t.RecursionField,{basePath:c.address.concat(l),schema:e,onlyRenderProperties:!0})}),(0,n.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,n.jsx)(r.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:()=>{a(l)},children:`Cancel`}),(0,n.jsx)(r.Button,{type:`button`,size:`sm`,onClick:()=>{i(l)},children:`Save`})]})]})})]})});exports.ArrayItemsEditPopover=i;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/array-popover/popover.tsx
+const ArrayItemsEditPopover = (0, __formily_react.observer)(({ schema, onSave, onCancel, children, activeItemManager }) => {
+	const arrayField = (0, __formily_react.useField)();
+	const activeIndex = activeItemManager.activeItem;
+	const isNewItem = activeItemManager.isNew;
+	const open = activeIndex !== void 0;
+	const handleOpenChange = (isOpen) => {
+		if (!isOpen) onCancel(activeIndex);
+	};
+	const handleCancelClick = () => {
+		onCancel(activeIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [children !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+			className: "w-96",
+			side: "top",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+							className: "font-medium leading-none",
+							children: isNewItem ? "Add New Item" : `Edit Item`
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-muted-foreground text-sm",
+							children: isNewItem ? "Fill in the details for the new item." : "Make changes to the item."
+						})]
+					}),
+					activeIndex != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+							basePath: arrayField.address.concat(activeIndex),
+							schema,
+							onlyRenderProperties: true
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex justify-end gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: handleCancelClick,
+							children: "Cancel"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+							type: "button",
+							size: "sm",
+							onClick: () => {
+								onSave(activeIndex);
+							},
+							children: "Save"
+						})]
+					})
+				]
+			})
+		})]
+	});
+});
+
+//#endregion
+exports.ArrayItemsEditPopover = ArrayItemsEditPopover;