@multiplatform.one/frappe-ui 6.0.0

package/dist/cjs/FrappeTable.stories.native.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeTable_stories_exports = {};
+__export(FrappeTable_stories_exports, {
+  Default: () => Default,
+  ServerSide: () => ServerSide,
+  WithPagination: () => WithPagination,
+  WithSavedFilters: () => WithSavedFilters,
+  default: () => FrappeTable_stories_default
+});
+module.exports = __toCommonJS(FrappeTable_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_frappe = require("@multiplatform.one/frappe");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_tamagui = require("tamagui");
+var import_FrappeTable = require("./FrappeTable.native.js");
+var import_FrappeProvider = require("./FrappeProvider.native.js");
+var FrappeTable_stories_default = {
+  title: "FrappeUI/FrappeTable",
+  component: import_FrappeTable.FrappeTable,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A data table component connected to Frappe Live data with real-time updates, sorting, filtering, and pagination."
+      }
+    }
+  }
+};
+var customerFixtures = [{
+  name: "CUST-001",
+  doctype: "Customer",
+  customer_name: "Acme Corp",
+  customer_type: "Company",
+  territory: "United States",
+  status: "Active",
+  creation: "2025-01-15"
+}, {
+  name: "CUST-002",
+  doctype: "Customer",
+  customer_name: "Global Tech",
+  customer_type: "Company",
+  territory: "Europe",
+  status: "Active",
+  creation: "2025-02-20"
+}, {
+  name: "CUST-003",
+  doctype: "Customer",
+  customer_name: "John Smith",
+  customer_type: "Individual",
+  territory: "United States",
+  status: "Active",
+  creation: "2025-03-10"
+}, {
+  name: "CUST-004",
+  doctype: "Customer",
+  customer_name: "Jane Doe",
+  customer_type: "Individual",
+  territory: "Asia Pacific",
+  status: "Inactive",
+  creation: "2024-12-05"
+}, {
+  name: "CUST-005",
+  doctype: "Customer",
+  customer_name: "Tech Solutions",
+  customer_type: "Company",
+  territory: "Europe",
+  status: "Lead",
+  creation: "2025-04-01"
+}, {
+  name: "CUST-006",
+  doctype: "Customer",
+  customer_name: "Startup Inc",
+  customer_type: "Company",
+  territory: "United States",
+  status: "Active",
+  creation: "2025-05-15"
+}, {
+  name: "CUST-007",
+  doctype: "Customer",
+  customer_name: "Bob Wilson",
+  customer_type: "Individual",
+  territory: "Europe",
+  status: "Active",
+  creation: "2025-06-20"
+}, {
+  name: "CUST-008",
+  doctype: "Customer",
+  customer_name: "Enterprise Ltd",
+  customer_type: "Company",
+  territory: "Asia Pacific",
+  status: "Inactive",
+  creation: "2024-11-30"
+}];
+var customerColumns = [{
+  id: "name",
+  header: "ID",
+  accessorKey: "name"
+}, {
+  id: "customer_name",
+  header: "Customer Name",
+  accessorKey: "customer_name"
+}, {
+  id: "customer_type",
+  header: "Type",
+  accessorKey: "customer_type"
+}, {
+  id: "territory",
+  header: "Territory",
+  accessorKey: "territory"
+}, {
+  id: "status",
+  header: "Status",
+  accessorKey: "status",
+  cell: function cell(param) {
+    var {
+      getValue
+    } = param;
+    var status = getValue();
+    var colors = {
+      Active: "#10B981",
+      Inactive: "#EF4444",
+      Lead: "#F59E0B"
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      color: colors[status] || "$gray11",
+      fontWeight: "500",
+      children: status
+    });
+  }
+}, {
+  id: "creation",
+  header: "Created",
+  accessorKey: "creation"
+}];
+var Default = function Default2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeProvider.FrappeProvider, {
+    baseURL: "https://demo.frappe.cloud",
+    fixtures: new import_frappe.InMemoryFixtureProvider({
+      Customer: customerFixtures
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeTable.FrappeTable, {
+      doctype: "Customer",
+      columns: customerColumns,
+      onRowClick: (0, import_storybook.action)("onRowClick")
+    })
+  });
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: "Basic data table connected to a Frappe Customer doctype."
+    }
+  }
+};
+Default.storyName = "Main";
+var WithPagination = function WithPagination2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeProvider.FrappeProvider, {
+    baseURL: "https://demo.frappe.cloud",
+    fixtures: new import_frappe.InMemoryFixtureProvider({
+      Customer: customerFixtures
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeTable.FrappeTable, {
+      doctype: "Customer",
+      columns: customerColumns,
+      enablePagination: true,
+      onRowClick: (0, import_storybook.action)("onRowClick")
+    })
+  });
+};
+WithPagination.parameters = {
+  docs: {
+    description: {
+      story: "Table with pagination controls for large datasets."
+    }
+  }
+};
+var WithSavedFilters = function WithSavedFilters2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeProvider.FrappeProvider, {
+    baseURL: "https://demo.frappe.cloud",
+    fixtures: new import_frappe.InMemoryFixtureProvider({
+      Customer: customerFixtures
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeTable.FrappeTable, {
+      doctype: "Customer",
+      columns: customerColumns,
+      savedFilters: true,
+      canCreateGlobalFilters: true,
+      userId: "admin@example.com",
+      onRowClick: (0, import_storybook.action)("onRowClick")
+    })
+  });
+};
+WithSavedFilters.parameters = {
+  docs: {
+    description: {
+      story: "Table with saved filters feature for saving and loading filter presets."
+    }
+  }
+};
+var ServerSide = function ServerSide2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeProvider.FrappeProvider, {
+    baseURL: "https://demo.frappe.cloud",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeTable.FrappeTable, {
+      doctype: "Customer",
+      columns: customerColumns,
+      fields: ["name", "customer_name", "customer_type", "territory", "status", "creation"],
+      serverSide: true,
+      onStateChange: (0, import_storybook.action)("onStateChange")
+    })
+  });
+};
+ServerSide.parameters = {
+  docs: {
+    description: {
+      story: "Server-side filtering, sorting, and pagination. Uses Frappe REST API (limit_start, limit_page_length, order_by, filters). Requires a running Frappe backend."
+    }
+  }
+};
+//# sourceMappingURL=FrappeTable.stories.native.js.map

package/dist/cjs/FrappeTable.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FrappeTable_stories_exports","__export","Default","ServerSide","WithPagination","WithSavedFilters","default","FrappeTable_stories_default","module","exports","import_jsx_runtime","require","import_frappe","import_storybook","import_tamagui","import_FrappeTable","import_FrappeProvider","title","component","FrappeTable","parameters","status","type","docs","description","customerFixtures","name","doctype","customer_name","customer_type","territory","creation","customerColumns","id","header","accessorKey","cell","param","getValue","colors","Active","Inactive","Lead","jsx","Text","color","fontWeight","children","Default2","FrappeProvider","baseURL","fixtures","InMemoryFixtureProvider","Customer","columns","onRowClick","action","story","storyName","WithPagination2","enablePagination","WithSavedFilters2","savedFilters","canCreateGlobalFilters","userId"],"sources":["../../src/FrappeTable.stories.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,UAAA,EAAAA,CAAA,KAAAA,UAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAC;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAd,YAAwC,CAAAK,2BAAA;AACxC,IAAAU,kBAAA,GAAuBC,OAAA;AAEvB,IAAAC,aAAA,GAAAD,OAAqB;AACrB,IAAAE,gBAAA,GAAAF,OAA4B;AAC5B,IAAAG,cAAA,GAAAH,OAA+B;AAsHvB,IAAAI,kBAAA,GAAAJ,OAAA;AApHR,IAAOK,qBAAA,GAAAL,OAAQ;AAAA,IACbJ,2BAAO;EACPU,KAAA,wBAAW;EACXC,SAAA,EAAAH,kBAAY,CAAAI,WAAA;EAAAC,UACF,EAAE;IACVC,MAAM;MACJC,IAAA;IAAa;IAETC,IACJ;MACFC,WAAA;QACFN,SAAA;MACF;IAYA;EACE;AAAA;AACQ,IACNO,gBAAS;EAETC,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACAT,MAAA;EACEU,QAAM;AAAA,GACG;EAETL,IAAA,YAAe;EACfC,OAAA,YAAW;EACXC,aAAQ;EACRC,aAAU;EACZC,SAAA;EACFT,MAAA;EAEAU,QAAM;AACJ,EAAgD;AAC6B,IAC3EC,eAAI,IACN;EACAC,EAAA;EACEC,MAAI;EACJC,WAAQ;AAAA,GACK;EAEXF,EAAA,iBAAe;EACfC,MAAA,EAAM,eAAiC;EAAAC,WACrC,EAAQ;AAAA,GACE;EACJF,EACR;EACAC,MAAA,QACE;EAIJC,WAAA;AACF,GACA;EACFF,EAAA;EAEOC,MAAM,aACX;EAACC,WAAA;AAAA;EAECF,EAAA,UAAU;EAEVC,MAAA;EAAAC,WAAC;EAAAC,IAAA,WAAAA,KAAAC,KAAA;IAAA,IACC;MAAAC;IAAQ,IAAAD,KAAA;IAAA,IACRhB,MAAA,GAASiB,QAAA;IAAA,IACTC,MAAA;MAA+BC,MAAA;MACjCC,QAAA;MAAAC,IAAA;IACF;IAEF,OAAQ,eAAa,IAAAhC,kBAAA,CAAAiC,GAAA,EAAA7B,cAAA,CAAA8B,IAAA;MACbC,KAAA,EAAAN,MAAA,CAAAlB,MAAA;MACJyB,UAAa;MACXC,QAAO,EAAA1B;IACT;EACF;AACF,GAEA;EACOY,EAAM;EACVC,MAAA;EAAAC,WAAA;AAAA,EACS;AAC4D,IAEpEjC,OAAA,YAAA8C,SAAA;EAAA,OAAC,mBAAAtC,kBAAA,CAAAiC,GAAA,EAAA3B,qBAAA,CAAAiC,cAAA;IAAAC,OAAA;IAAAC,QACC,MAAQvC,aAAA,CAAAwC,uBAAA;MAAAC,QACR,EAAA5B;IAAS;IACOsB,QAChB,iBAAY,IAAArC,kBAAO,CAAAiC,GAAA,EAAA5B,kBAAY,CAAAI,WAAA;MAAAQ,OAAA;MACjC2B,OAAA,EAAAtB,eAAA;MAAAuB,UAAA,MAAA1C,gBAAA,CAAA2C,MAAA;IACF;EAEF;AAA4B;AACpBtD,OACJ,CAAAkB,UAAa;EAAAG,IACX;IACFC,WAAA;MACFiC,KAAA;IACF;EAEO;AACL;AAACvD,OAAA,CAAAwD,SAAA;AAAA,IACCtD,cAAQ,YAAAuD,gBAAA;EAAA,OACR,eAAc,IAAAjD,kBAAA,CAAAiC,GAAA,EAAA3B,qBAAoC,CAAAiC,cAAkB;IAEpEC,OAAA;IAAAC,QAAC,MAAAvC,aAAA,CAAAwC,uBAAA;MAAAC,QAAA,EAAA5B;IAAA;IACSsB,QACR,iBAAS,IAAArC,kBAAA,CAAAiC,GAAA,EAAA5B,kBAAA,CAAAI,WAAA;MAAAQ,OACT,YAAY;MAAA2B,OACZ,EAAAtB,eAAA;MAAsB4B,gBACf;MAAAL,UACP,MAAA1C,gBAAY,CAAA2C,MAAA,cAAO;IAAY;EAAA,EACjC;AAAA;AACFpD,cAAA,CAAAgB,UAAA;EAEFG,IAAA;IACEC,WAAM;MACJiC,KAAA;IAAa;EACJ;AACT;AAEJ,IAAApD,gBAAA,YAAAwD,kBAAA;EAMO,OAAM,eACX,IAAAnD,kBAAA,CAAAiC,GAAA,EAAA3B,qBAAC,CAAAiC,cAAA;IACEC,OAAA;IAAAC,QAAA,MAAAvC,aAAA,CAAAwC,uBAAA;MACCC,QAAQ,EAAA5B;IACR;IACAsB,QAAQ,EAAC,eAAQ,IAAArC,kBAAiB,CAAAiC,GAAiB,EAAA5B,kBAAa,CAAAI,WAAoB;MACpFQ,OAAA,YAAU;MACV2B,OAAA,EAAAtB,eAAe;MAAsB8B,YAAA;MAEzCC,sBAAA;MAEFC,MAAW,qBAAa;MACtBT,UAAM,MAAA1C,gBAAA,CAAA2C,MAAA;IACJ;EAAa;AAET;AACJnD,gBACF,CAAAe,UAAA;EACFG,IAAA","ignoreList":[]}

package/dist/cjs/FrappeTreeView.cjs

@@ -0,0 +1,277 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeTreeView_exports = {};
+__export(FrappeTreeView_exports, {
+  FrappeTreeView: () => FrappeTreeView
+});
+module.exports = __toCommonJS(FrappeTreeView_exports);
+var import_frappe = require("@multiplatform.one/frappe");
+var import_components = require("@multiplatform.one/components");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_theme = require("@multiplatform.one/theme");
+var import_FrappeProvider = require("./FrappeProvider.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FrappeTreeView({
+  doctype,
+  parentField: parentFieldProp,
+  titleField: titleFieldProp,
+  valueField,
+  onNodeClick,
+  enableDragDrop: _enableDragDrop = false,
+  baseURL,
+  auth,
+  syncOptions,
+  ...stackProps
+}) {
+  const config = (0, import_FrappeProvider.useFrappeConfig)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+  if (!finalBaseURL) {
+    throw new Error("FrappeTreeView requires baseURL prop or FrappeProvider with baseURL");
+  }
+  const appConfig = {
+    baseURL: finalBaseURL,
+    socketPort: config?.socketPort,
+    auth: finalAuth,
+    syncOptions: finalSyncOptions,
+    fixtures: config?.fixtures
+  };
+  const {
+    meta,
+    isLoading: isMetaLoading
+  } = (0, import_frappe.useDocTypeMeta)(appConfig, doctype);
+  const effectiveTitleField = titleFieldProp ?? meta?.title_field ?? "name";
+  const effectiveParentField = parentFieldProp ?? `parent_${doctype.toLowerCase().replace(/ /g, "_")}`;
+  const [nodeDataMap, setNodeDataMap] = (0, import_react2.useState)(/* @__PURE__ */new Map());
+  const [rootNodeNames, setRootNodeNames] = (0, import_react2.useState)([]);
+  const [isLoadingRoots, setIsLoadingRoots] = (0, import_react2.useState)(true);
+  const [expandedIds, setExpandedIds] = (0, import_react2.useState)(/* @__PURE__ */new Set());
+  const httpClientRef = (0, import_react2.useRef)(null);
+  if (!httpClientRef.current && finalBaseURL) {
+    const authConfig = finalAuth ? {
+      useToken: finalAuth.useToken,
+      token: finalAuth.token,
+      type: finalAuth.type
+    } : void 0;
+    httpClientRef.current = new import_frappe.HttpClient(finalBaseURL, authConfig);
+  }
+  (0, import_react2.useEffect)(() => {
+    if (!meta || !meta.is_tree) return;
+    const http = httpClientRef.current;
+    if (!http) return;
+    let cancelled = false;
+    setIsLoadingRoots(true);
+    (async () => {
+      try {
+        const params = new URLSearchParams();
+        params.set("doctype", doctype);
+        params.set("fields", JSON.stringify(["name", effectiveTitleField, effectiveParentField]));
+        params.set("filters", JSON.stringify([[effectiveParentField, "in", ["", null]]]));
+        params.set("limit_page_length", "0");
+        params.set("order_by", "name asc");
+        const response = await http.get(`/api/resource/${encodeURIComponent(doctype)}?${params.toString()}`);
+        if (cancelled) return;
+        const docs = response.payload?.data ?? [];
+        const newMap = /* @__PURE__ */new Map();
+        const rootNames = [];
+        for (const doc of docs) {
+          const name = String(doc.name);
+          rootNames.push(name);
+          newMap.set(name, {
+            name,
+            title: String(doc[effectiveTitleField] || doc.name),
+            data: doc,
+            children: [],
+            hasChildren: true
+          });
+        }
+        setNodeDataMap(newMap);
+        setRootNodeNames(rootNames);
+      } catch (err) {
+        console.error("Failed to fetch tree root nodes:", err);
+      } finally {
+        if (!cancelled) setIsLoadingRoots(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meta, doctype, effectiveTitleField, effectiveParentField]);
+  const loadChildren = (0, import_react2.useCallback)(async parentName => {
+    const http = httpClientRef.current;
+    if (!http) return;
+    try {
+      const params = new URLSearchParams();
+      params.set("doctype", doctype);
+      params.set("fields", JSON.stringify(["name", effectiveTitleField, effectiveParentField]));
+      params.set("filters", JSON.stringify([[effectiveParentField, "=", parentName]]));
+      params.set("limit_page_length", "0");
+      params.set("order_by", "name asc");
+      const response = await http.get(`/api/resource/${encodeURIComponent(doctype)}?${params.toString()}`);
+      const docs = response.payload?.data ?? [];
+      setNodeDataMap(prev => {
+        const next = new Map(prev);
+        const childNames = [];
+        for (const doc of docs) {
+          const name = String(doc.name);
+          childNames.push(name);
+          if (!next.has(name)) {
+            next.set(name, {
+              name,
+              title: String(doc[effectiveTitleField] || doc.name),
+              data: doc,
+              children: [],
+              hasChildren: true
+            });
+          }
+        }
+        const parentNode = next.get(parentName);
+        if (parentNode) {
+          next.set(parentName, {
+            ...parentNode,
+            children: childNames,
+            hasChildren: childNames.length > 0
+          });
+        }
+        return next;
+      });
+    } catch (err) {
+      console.error(`Failed to fetch children of ${parentName}:`, err);
+    }
+  }, [doctype, effectiveTitleField, effectiveParentField]);
+  const treeNodes = (0, import_react2.useMemo)(() => {
+    const buildNode = name => {
+      const nodeData = nodeDataMap.get(name);
+      if (!nodeData) return null;
+      const children = nodeData.children.map(buildNode).filter(Boolean);
+      return {
+        id: nodeData.name,
+        label: nodeData.title || nodeData.name,
+        children: children.length > 0 ? children : void 0,
+        data: nodeData.data
+      };
+    };
+    return rootNodeNames.map(buildNode).filter(Boolean);
+  }, [rootNodeNames, nodeDataMap]);
+  const handleNodeToggle = (0, import_react2.useCallback)(node => {
+    const nodeData = nodeDataMap.get(node.id);
+    if (!nodeData) return;
+    if (expandedIds.has(node.id)) {
+      setExpandedIds(prev => {
+        const next = new Set(prev);
+        next.delete(node.id);
+        return next;
+      });
+    } else {
+      if (nodeData.children.length === 0 && nodeData.hasChildren) {
+        loadChildren(node.id);
+      }
+      setExpandedIds(prev => {
+        const next = new Set(prev);
+        next.add(node.id);
+        return next;
+      });
+    }
+  }, [nodeDataMap, expandedIds, loadChildren]);
+  const handleNodeSelect = (0, import_react2.useCallback)(node => {
+    onNodeClick?.(node.data);
+  }, [onNodeClick]);
+  if (isMetaLoading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      justifyContent: "center",
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+        size: "large"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        marginTop: "$2",
+        children: t("Loading {{doctype}} schema...", {
+          doctype
+        })
+      })]
+    });
+  }
+  if (meta && !meta.is_tree) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...knobProps.gap,
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TreeStructureIcon, {
+        size: 48,
+        color: "$color8"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        children: t("This DocType does not support tree view")
+      })]
+    });
+  }
+  if (isLoadingRoots) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      justifyContent: "center",
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+        size: "large"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        marginTop: "$2",
+        children: t("Loading {{doctype}} tree...", {
+          doctype
+        })
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.TreeView, {
+    ...knobProps.borderRadius,
+    nodes: treeNodes,
+    renderNode: (node, _depth) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+      fontSize: knobProps.sizeToken,
+      paddingVertical: "$1",
+      children: [node.label, valueField && node.data && node.data[valueField] != null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        fontSize: "$2",
+        marginLeft: "$2",
+        children: String(node.data[valueField])
+      })]
+    }),
+    onNodeToggle: handleNodeToggle,
+    onNodeSelect: handleNodeSelect,
+    defaultExpandedIds: Array.from(expandedIds),
+    emptyMessage: t("No items found"),
+    ...stackProps
+  });
+}