@object-ui/plugin-tree 7.0.0

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# @object-ui/plugin-tree
+
+## 7.0.0
+
+### Minor Changes
+
+- 4eb9cb6: feat(plugin-tree): add a `tree` / tree-grid object view type
+
+  Renders a self-referencing object as an indented, expand/collapse tree-grid —
+  the right view for arbitrary-depth hierarchies (business unit / org chart,
+  category trees, BOMs, nested comments) that fixed-depth grouping can't express.
+  New `@object-ui/plugin-tree` package (`object-tree`/`tree`), `tree` added to the
+  `ViewType` union, and dispatch wired through plugin-list `ListView` +
+  app-shell `ObjectView` (the console path).
+
+### Patch Changes
+
+- Updated dependencies [5976ba3]
+- Updated dependencies [a00e16d]
+- Updated dependencies [eaccefd]
+- Updated dependencies [f7f325d]
+- Updated dependencies [c12986e]
+- Updated dependencies [71d7ce0]
+- Updated dependencies [053c948]
+- Updated dependencies [ddbe4a2]
+- Updated dependencies [2d47e94]
+- Updated dependencies [9049bbe]
+- Updated dependencies [6c0c92c]
+- Updated dependencies [cb2fdb1]
+- Updated dependencies [c3749eb]
+- Updated dependencies [6cfa330]
+- Updated dependencies [ad8ade6]
+- Updated dependencies [d54346c]
+- Updated dependencies [3870c20]
+- Updated dependencies [2eb3096]
+- Updated dependencies [b88c560]
+- Updated dependencies [d16566f]
+- Updated dependencies [90acb7f]
+- Updated dependencies [7913390]
+- Updated dependencies [1394e34]
+- Updated dependencies [e95cc25]
+- Updated dependencies [abe8ebc]
+- Updated dependencies [300d755]
+- Updated dependencies [bd8b054]
+- Updated dependencies [4eb9cb6]
+- Updated dependencies [7c239fd]
+- Updated dependencies [858ad94]
+- Updated dependencies [2270239]
+- Updated dependencies [8d1195d]
+  - @object-ui/core@7.0.0
+  - @object-ui/components@7.0.0
+  - @object-ui/react@7.0.0
+  - @object-ui/types@7.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @object-ui/plugin-tree
+
+Tree / tree-grid view plugin for Object UI.
+
+Renders a **self-referencing object** as an indented, expand/collapse tree-grid —
+the right view for hierarchies of unbounded depth such as **business unit /
+org chart**, category trees, menu trees, BOMs, or nested comments. (Grouping
+handles *fixed-depth* hierarchies; a tree handles arbitrary depth.)
+
+It registers two component types via the `ComponentRegistry`:
+
+- `object-tree` — the object-bound renderer
+- `tree` — the view-type alias used by `ObjectView` / `ViewSwitcher`
+
+## Usage
+
+```ts
+// As a view inside an ObjectView
+{
+  type: 'object-view',
+  objectName: 'business_unit',
+  views: [
+    {
+      type: 'tree',
+      tree: {
+        parentField: 'parent',        // single-parent pointer (auto-detected if omitted)
+        labelField: 'name',           // indented first column
+        fields: ['name', 'manager'],  // additional flat columns
+        defaultExpandedDepth: 1,      // 0 = roots only; omit = expand all
+      },
+    },
+  ],
+}
+```
+
+### Config
+
+| Key | Default | Description |
+| --- | --- | --- |
+| `parentField` | auto-detected | Field holding the parent reference. When omitted, the renderer picks the object's `tree` field (or a lookup/master_detail that references the same object). |
+| `labelField` | `name` | Field rendered indented in the first column. |
+| `fields` | `[]` | Additional fields rendered as flat columns. |
+| `defaultExpandedDepth` | _unset_ | Initial expansion depth. `0` = roots only; unset = expand everything. |
+
+Records whose parent is missing (or points outside the result set) are kept as
+roots, so nothing is silently dropped.

package/dist/ObjectTree.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { DataSource } from '@object-ui/types';
+export interface ObjectTreeProps {
+    schema: any;
+    dataSource?: DataSource;
+    className?: string;
+    onRowClick?: (record: any) => void;
+    /** Inline data (passed by ListView/ObjectView for non-grid views). */
+    data?: any[];
+    loading?: boolean;
+}
+export declare const ObjectTree: React.FC<ObjectTreeProps>;
+export default ObjectTree;
+//# sourceMappingURL=ObjectTree.d.ts.map

package/dist/ObjectTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectTree.d.ts","sourceRoot":"","sources":["../src/ObjectTree.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAM7D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8JD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8PhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ObjectTree, ObjectTreeProps } from './ObjectTree';
+export { ObjectTree };
+export type { ObjectTreeProps };
+export declare const ObjectTreeRenderer: React.FC<any>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC;AAIhC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAG5C,CAAC"}

package/dist/index.js

@@ -0,0 +1,263 @@
+import { useEffect as e, useMemo as t, useState as n } from "react";
+import { ComponentRegistry as r, buildExpandFields as i, extractRecords as a } from "@object-ui/core";
+import { useNavigationOverlay as o, useSchemaContext as s } from "@object-ui/react";
+import { NavigationOverlay as c, cn as l } from "@object-ui/components";
+import { ChevronDown as u, ChevronRight as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/ObjectTree.tsx
+function m(e) {
+	return e.data ? e.data : e.staticData ? {
+		provider: "value",
+		items: e.staticData
+	} : e.objectName ? {
+		provider: "object",
+		object: e.objectName
+	} : null;
+}
+function h(e) {
+	let t = e.tree || e.filter?.tree || {};
+	return {
+		parentField: e.parentField ?? t.parentField,
+		labelField: e.labelField ?? t.labelField ?? e.titleField ?? "name",
+		fields: Array.isArray(e.fields) ? e.fields : Array.isArray(t.fields) ? t.fields : [],
+		defaultExpandedDepth: e.defaultExpandedDepth ?? t.defaultExpandedDepth
+	};
+}
+function g(e, t) {
+	let n = e?.fields;
+	if (!n || typeof n != "object") return;
+	let r;
+	for (let [e, i] of Object.entries(n)) {
+		if (i?.type === "tree") return e;
+		let n = i?.reference || i?.reference_to || i?.referenceTo;
+		!r && (i?.type === "lookup" || i?.type === "master_detail") && n && t && n === t && (r = e);
+	}
+	return r;
+}
+function _(e) {
+	let t = e?.id ?? e?._id;
+	return t == null ? void 0 : String(t);
+}
+function v(e, t) {
+	if (!t) return;
+	let n = e?.[t];
+	if (n != null) {
+		if (typeof n == "object") {
+			let e = n.id ?? n._id;
+			return e == null ? void 0 : String(e);
+		}
+		return String(n);
+	}
+}
+function y(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = [];
+	for (let t of e) {
+		let e = _(t);
+		e != null && (n.set(e, {
+			id: e,
+			record: t,
+			depth: 0,
+			children: []
+		}), r.push(e));
+	}
+	let i = [];
+	for (let e of r) {
+		let r = n.get(e), a = v(r.record, t), o = a == null ? void 0 : n.get(a);
+		o && o !== r ? o.children.push(r) : i.push(r);
+	}
+	let a = (e, t) => {
+		for (let n of e) n.depth = t, a(n.children, t + 1);
+	};
+	return a(i, 0), i;
+}
+function b(e, t) {
+	let n = [], r = (e) => {
+		for (let i of e) n.push(i), i.children.length > 0 && t.has(i.id) && r(i.children);
+	};
+	return r(e), n;
+}
+function x(e, t) {
+	let n = /* @__PURE__ */ new Set(), r = (e) => {
+		for (let i of e) i.children.length !== 0 && (t == null || i.depth < t) && (n.add(i.id), r(i.children));
+	};
+	return r(e), n;
+}
+function S(e) {
+	return e == null ? "" : String(typeof e == "object" ? e.name ?? e.label ?? e.id ?? e._id ?? "" : e);
+}
+var C = ({ schema: r, dataSource: s, className: _, onRowClick: v, ...C }) => {
+	let [w, T] = n([]), [E, D] = n(!0), [O, k] = n(null), [A, j] = n(null), M = t(() => m(r), [r]), N = Array.isArray(C.data) || Array.isArray(r.data) || M?.provider === "value";
+	e(() => {
+		let e = !1;
+		return N || (async () => {
+			try {
+				if (!s || typeof s.getObjectSchema != "function") return;
+				let t = M?.provider === "object" ? M.object : r.objectName;
+				if (!t) return;
+				let n = await s.getObjectSchema(t);
+				e || j(n);
+			} catch (e) {
+				console.error("[ObjectTree] Failed to fetch object schema:", e);
+			}
+		})(), () => {
+			e = !0;
+		};
+	}, [
+		r.objectName,
+		s,
+		M,
+		N
+	]), e(() => {
+		let e = !1;
+		return (async () => {
+			try {
+				if (D(!0), k(null), M?.provider === "object" && s && typeof s.find == "function") {
+					let t = i(A?.fields), n = await s.find(M.object, {
+						$filter: r.filter,
+						...t.length > 0 ? { $expand: t } : {}
+					});
+					e || (T(a(n)), D(!1));
+					return;
+				}
+				let t = C.data ?? r.data;
+				if (Array.isArray(t)) {
+					e || (T(t), D(!1));
+					return;
+				}
+				if (M?.provider === "value") {
+					e || (T(M.items ?? []), D(!1));
+					return;
+				}
+				e || (T([]), D(!1));
+			} catch (t) {
+				e || (k(t), D(!1));
+			}
+		})(), () => {
+			e = !0;
+		};
+	}, [
+		M,
+		s,
+		r.filter,
+		A,
+		C.data
+	]);
+	let P = t(() => h(r), [r]), F = t(() => P.parentField ?? g(A, r.objectName), [
+		P.parentField,
+		A,
+		r.objectName
+	]), I = t(() => y(w, F), [w, F]), [L, R] = n(/* @__PURE__ */ new Set());
+	e(() => {
+		R(x(I, P.defaultExpandedDepth));
+	}, [I, P.defaultExpandedDepth]);
+	let z = (e) => R((t) => {
+		let n = new Set(t);
+		return n.has(e) ? n.delete(e) : n.add(e), n;
+	}), B = t(() => b(I, L), [I, L]), V = (e) => A?.fields?.[e]?.label || e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), H = o({
+		navigation: r.navigation,
+		objectName: r.objectName,
+		onRowClick: v
+	});
+	return O ? /* @__PURE__ */ f("div", {
+		className: l("flex items-center justify-center h-40 text-destructive", _),
+		children: /* @__PURE__ */ p("p", { children: ["Failed to load tree: ", O.message] })
+	}) : E ? /* @__PURE__ */ f("div", {
+		className: l("flex items-center justify-center h-40 text-muted-foreground", _),
+		children: /* @__PURE__ */ f("p", { children: "Loading…" })
+	}) : w.length === 0 ? /* @__PURE__ */ f("div", {
+		className: l("flex items-center justify-center h-40 text-muted-foreground", _),
+		children: /* @__PURE__ */ f("p", { children: "No records" })
+	}) : /* @__PURE__ */ p("div", {
+		className: l("w-full overflow-auto", _),
+		"data-testid": "object-tree",
+		children: [/* @__PURE__ */ p("table", {
+			className: "w-full border-collapse text-sm",
+			children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", {
+				className: "border-b text-left text-muted-foreground",
+				children: [/* @__PURE__ */ f("th", {
+					className: "px-3 py-2 font-medium",
+					children: V(P.labelField)
+				}), P.fields.filter((e) => e !== P.labelField).map((e) => /* @__PURE__ */ f("th", {
+					className: "px-3 py-2 font-medium",
+					children: V(e)
+				}, e))]
+			}) }), /* @__PURE__ */ f("tbody", { children: B.map((e) => {
+				let t = e.children.length > 0, n = L.has(e.id);
+				return /* @__PURE__ */ p("tr", {
+					className: "border-b hover:bg-accent/50 cursor-pointer",
+					"data-testid": "object-tree-row",
+					"data-depth": e.depth,
+					onClick: (t) => H.handleClick(e.record, t),
+					children: [/* @__PURE__ */ f("td", {
+						className: "px-3 py-2",
+						children: /* @__PURE__ */ p("div", {
+							className: "flex items-center gap-1",
+							style: { paddingLeft: `${e.depth * 20}px` },
+							children: [t ? /* @__PURE__ */ f("button", {
+								type: "button",
+								"aria-label": n ? "Collapse" : "Expand",
+								className: "flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted",
+								onClick: (t) => {
+									t.stopPropagation(), z(e.id);
+								},
+								children: f(n ? u : d, { className: "h-4 w-4" })
+							}) : /* @__PURE__ */ f("span", { className: "inline-block h-5 w-5" }), /* @__PURE__ */ f("span", {
+								className: "truncate",
+								children: S(e.record[P.labelField]) || "—"
+							})]
+						})
+					}), P.fields.filter((e) => e !== P.labelField).map((t) => /* @__PURE__ */ f("td", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: S(e.record[t])
+					}, t))]
+				}, e.id);
+			}) })]
+		}), H.isOverlay && /* @__PURE__ */ f(c, {
+			...H,
+			title: "Record Details",
+			children: (e) => /* @__PURE__ */ f("div", {
+				className: "space-y-3",
+				children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ p("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ f("span", {
+						className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+						children: e.replace(/_/g, " ")
+					}), /* @__PURE__ */ f("span", {
+						className: "text-sm",
+						children: S(t) || "—"
+					})]
+				}, e))
+			})
+		})]
+	});
+}, w = ({ schema: e, ...t }) => {
+	let { dataSource: n } = s() || {};
+	return /* @__PURE__ */ f(C, {
+		schema: e,
+		dataSource: n,
+		...t
+	});
+}, T = [{
+	name: "objectName",
+	type: "string",
+	label: "Object Name",
+	required: !0
+}, {
+	name: "tree",
+	type: "object",
+	label: "Tree Config",
+	description: "parentField, labelField, fields, defaultExpandedDepth"
+}];
+r.register("object-tree", w, {
+	namespace: "plugin-tree",
+	label: "Object Tree",
+	category: "view",
+	inputs: T
+}), r.register("tree", w, {
+	namespace: "view",
+	label: "Tree View",
+	category: "view",
+	inputs: T
+});
+//#endregion
+export { C as ObjectTree, w as ObjectTreeRenderer };

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/components"),require("lucide-react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/react`,`@object-ui/components`,`lucide-react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginTree={},e.React,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIComponents,e.LucideReact,e.react_jsx_runtime))})(this,function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=Object.create,c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=u(t),a=0,o=i.length,s;a<o;a++)s=i[a],!f.call(e,s)&&s!==n&&c(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=l(t,s))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:s(d(e)),p(t||!e||!e.__esModule?c(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);function m(e){return e.data?e.data:e.staticData?{provider:`value`,items:e.staticData}:e.objectName?{provider:`object`,object:e.objectName}:null}function h(e){let t=e.tree||e.filter?.tree||{};return{parentField:e.parentField??t.parentField,labelField:e.labelField??t.labelField??e.titleField??`name`,fields:Array.isArray(e.fields)?e.fields:Array.isArray(t.fields)?t.fields:[],defaultExpandedDepth:e.defaultExpandedDepth??t.defaultExpandedDepth}}function g(e,t){let n=e?.fields;if(!n||typeof n!=`object`)return;let r;for(let[e,i]of Object.entries(n)){if(i?.type===`tree`)return e;let n=i?.reference||i?.reference_to||i?.referenceTo;!r&&(i?.type===`lookup`||i?.type===`master_detail`)&&n&&t&&n===t&&(r=e)}return r}function _(e){let t=e?.id??e?._id;return t==null?void 0:String(t)}function v(e,t){if(!t)return;let n=e?.[t];if(n!=null){if(typeof n==`object`){let e=n.id??n._id;return e==null?void 0:String(e)}return String(n)}}function y(e,t){let n=new Map,r=[];for(let t of e){let e=_(t);e!=null&&(n.set(e,{id:e,record:t,depth:0,children:[]}),r.push(e))}let i=[];for(let e of r){let r=n.get(e),a=v(r.record,t),o=a==null?void 0:n.get(a);o&&o!==r?o.children.push(r):i.push(r)}let a=(e,t)=>{for(let n of e)n.depth=t,a(n.children,t+1)};return a(i,0),i}function b(e,t){let n=[],r=e=>{for(let i of e)n.push(i),i.children.length>0&&t.has(i.id)&&r(i.children)};return r(e),n}function x(e,t){let n=new Set,r=e=>{for(let i of e)i.children.length!==0&&(t==null||i.depth<t)&&(n.add(i.id),r(i.children))};return r(e),n}function S(e){return e==null?``:String(typeof e==`object`?e.name??e.label??e.id??e._id??``:e)}var C=({schema:e,dataSource:s,className:c,onRowClick:l,...u})=>{let[d,f]=(0,t.useState)([]),[p,_]=(0,t.useState)(!0),[v,C]=(0,t.useState)(null),[w,T]=(0,t.useState)(null),E=(0,t.useMemo)(()=>m(e),[e]),D=Array.isArray(u.data)||Array.isArray(e.data)||E?.provider===`value`;(0,t.useEffect)(()=>{let t=!1;return D||(async()=>{try{if(!s||typeof s.getObjectSchema!=`function`)return;let n=E?.provider===`object`?E.object:e.objectName;if(!n)return;let r=await s.getObjectSchema(n);t||T(r)}catch(e){console.error(`[ObjectTree] Failed to fetch object schema:`,e)}})(),()=>{t=!0}},[e.objectName,s,E,D]),(0,t.useEffect)(()=>{let t=!1;return(async()=>{try{if(_(!0),C(null),E?.provider===`object`&&s&&typeof s.find==`function`){let r=(0,n.buildExpandFields)(w?.fields),i=await s.find(E.object,{$filter:e.filter,...r.length>0?{$expand:r}:{}});t||(f((0,n.extractRecords)(i)),_(!1));return}let r=u.data??e.data;if(Array.isArray(r)){t||(f(r),_(!1));return}if(E?.provider===`value`){t||(f(E.items??[]),_(!1));return}t||(f([]),_(!1))}catch(e){t||(C(e),_(!1))}})(),()=>{t=!0}},[E,s,e.filter,w,u.data]);let O=(0,t.useMemo)(()=>h(e),[e]),k=(0,t.useMemo)(()=>O.parentField??g(w,e.objectName),[O.parentField,w,e.objectName]),A=(0,t.useMemo)(()=>y(d,k),[d,k]),[j,M]=(0,t.useState)(new Set);(0,t.useEffect)(()=>{M(x(A,O.defaultExpandedDepth))},[A,O.defaultExpandedDepth]);let N=e=>M(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),P=(0,t.useMemo)(()=>b(A,j),[A,j]),F=e=>w?.fields?.[e]?.label||e.replace(/_/g,` `).replace(/\b\w/g,e=>e.toUpperCase()),I=(0,r.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:l});return v?(0,o.jsx)(`div`,{className:(0,i.cn)(`flex items-center justify-center h-40 text-destructive`,c),children:(0,o.jsxs)(`p`,{children:[`Failed to load tree: `,v.message]})}):p?(0,o.jsx)(`div`,{className:(0,i.cn)(`flex items-center justify-center h-40 text-muted-foreground`,c),children:(0,o.jsx)(`p`,{children:`Loading…`})}):d.length===0?(0,o.jsx)(`div`,{className:(0,i.cn)(`flex items-center justify-center h-40 text-muted-foreground`,c),children:(0,o.jsx)(`p`,{children:`No records`})}):(0,o.jsxs)(`div`,{className:(0,i.cn)(`w-full overflow-auto`,c),"data-testid":`object-tree`,children:[(0,o.jsxs)(`table`,{className:`w-full border-collapse text-sm`,children:[(0,o.jsx)(`thead`,{children:(0,o.jsxs)(`tr`,{className:`border-b text-left text-muted-foreground`,children:[(0,o.jsx)(`th`,{className:`px-3 py-2 font-medium`,children:F(O.labelField)}),O.fields.filter(e=>e!==O.labelField).map(e=>(0,o.jsx)(`th`,{className:`px-3 py-2 font-medium`,children:F(e)},e))]})}),(0,o.jsx)(`tbody`,{children:P.map(e=>{let t=e.children.length>0,n=j.has(e.id);return(0,o.jsxs)(`tr`,{className:`border-b hover:bg-accent/50 cursor-pointer`,"data-testid":`object-tree-row`,"data-depth":e.depth,onClick:t=>I.handleClick(e.record,t),children:[(0,o.jsx)(`td`,{className:`px-3 py-2`,children:(0,o.jsxs)(`div`,{className:`flex items-center gap-1`,style:{paddingLeft:`${e.depth*20}px`},children:[t?(0,o.jsx)(`button`,{type:`button`,"aria-label":n?`Collapse`:`Expand`,className:`flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted`,onClick:t=>{t.stopPropagation(),N(e.id)},children:n?(0,o.jsx)(a.ChevronDown,{className:`h-4 w-4`}):(0,o.jsx)(a.ChevronRight,{className:`h-4 w-4`})}):(0,o.jsx)(`span`,{className:`inline-block h-5 w-5`}),(0,o.jsx)(`span`,{className:`truncate`,children:S(e.record[O.labelField])||`—`})]})}),O.fields.filter(e=>e!==O.labelField).map(t=>(0,o.jsx)(`td`,{className:`px-3 py-2 text-muted-foreground`,children:S(e.record[t])},t))]},e.id)})})]}),I.isOverlay&&(0,o.jsx)(i.NavigationOverlay,{...I,title:`Record Details`,children:e=>(0,o.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,o.jsxs)(`div`,{className:`flex flex-col`,children:[(0,o.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,o.jsx)(`span`,{className:`text-sm`,children:S(t)||`—`})]},e))})})]})},w=({schema:e,...t})=>{let{dataSource:n}=(0,r.useSchemaContext)()||{};return(0,o.jsx)(C,{schema:e,dataSource:n,...t})},T=[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`tree`,type:`object`,label:`Tree Config`,description:`parentField, labelField, fields, defaultExpandedDepth`}];n.ComponentRegistry.register(`object-tree`,w,{namespace:`plugin-tree`,label:`Object Tree`,category:`view`,inputs:T}),n.ComponentRegistry.register(`tree`,w,{namespace:`view`,label:`Tree View`,category:`view`,inputs:T}),e.ObjectTree=C,e.ObjectTreeRenderer=w});

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@object-ui/plugin-tree",
+  "version": "7.0.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Tree / tree-grid visualization plugin for Object UI",
+  "homepage": "https://www.objectui.org/docs/plugins/plugin-tree",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-tree"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "@objectstack/spec": "^10.0.0",
+    "lucide-react": "^1.21.0",
+    "@object-ui/components": "7.0.0",
+    "@object-ui/core": "7.0.0",
+    "@object-ui/react": "7.0.0",
+    "@object-ui/types": "7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
+  },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "plugin",
+    "tree",
+    "tree-grid",
+    "hierarchy"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}