@pibit.ai/cure-design-system 0.6.21 → 0.6.23

package/dist/patterns/tree-view/indented-tree.js

@@ -0,0 +1,232 @@
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import { useRef as I, useMemo as $ } from "react";
+import { ChevronRight as P } from "@untitledui/icons";
+import { motion as A } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence as D } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+const _ = ({
+  tree: s,
+  onToggle: p,
+  CustomNode: x,
+  onNodeClick: c,
+  selectedNodeId: v,
+  keyboardNavigation: e,
+  canSelectNode: d,
+  "aria-label": m
+}) => {
+  const f = I(null), l = $(() => {
+    const t = [];
+    function i(a, r = "", h) {
+      a.forEach((u, g) => {
+        const O = r ? `${r}-${g}` : String(g);
+        t.push({ node: u, path: O, parentId: h }), u.isOpen && i(u.children, O, u.id);
+      });
+    }
+    return i(s), t;
+  }, [s]);
+  function o(t) {
+    var a;
+    const i = (a = f.current) == null ? void 0 : a.querySelector(
+      `[data-tree-node-id="${CSS.escape(t)}"]`
+    );
+    i == null || i.focus({ preventScroll: !0 }), i == null || i.scrollIntoView({ block: "nearest", behavior: "instant" });
+  }
+  function w(t) {
+    if (!e || t.nativeEvent.isComposing) return;
+    const i = t.target.closest(
+      "[data-tree-node-id]"
+    ), a = l.findIndex(
+      ({ node: g }) => g.id === (i == null ? void 0 : i.dataset.treeNodeId)
+    );
+    if (a < 0) return;
+    const { node: r, path: h, parentId: u } = l[a];
+    if ([
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowLeft",
+      "Home",
+      "End",
+      "Enter",
+      " "
+    ].includes(t.key) && !((t.key === "Enter" || t.key === " ") && t.target.closest("button")))
+      switch (t.preventDefault(), t.stopPropagation(), t.key) {
+        case "ArrowDown":
+          o(l[(a + 1) % l.length].node.id);
+          break;
+        case "ArrowUp":
+          o(
+            l[(a - 1 + l.length) % l.length].node.id
+          );
+          break;
+        case "Home":
+          o(l[0].node.id);
+          break;
+        case "End":
+          o(l[l.length - 1].node.id);
+          break;
+        case "ArrowRight":
+          r.children.length && !r.isOpen ? p(h) : r.children.length && o(r.children[0].id);
+          break;
+        case "ArrowLeft":
+          r.children.length && r.isOpen ? p(h) : u && o(u);
+          break;
+        default:
+          (!d || d(r)) && (c == null || c(r));
+      }
+  }
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: f,
+      role: e ? "tree" : void 0,
+      "aria-label": e ? m : void 0,
+      onKeyDown: w,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: s.map((t, i) => /* @__PURE__ */ n(
+        E,
+        {
+          node: t,
+          path: String(i),
+          onToggle: p,
+          onNodeClick: c,
+          CustomNode: x,
+          keyboardNavigation: e,
+          selectedNodeId: v,
+          canSelectNode: d,
+          level: 1,
+          position: i + 1,
+          siblingCount: s.length
+        },
+        t.id || i
+      )) })
+    }
+  );
+}, E = ({
+  node: s,
+  path: p,
+  onToggle: x,
+  onNodeClick: c,
+  CustomNode: v,
+  keyboardNavigation: e,
+  selectedNodeId: d,
+  canSelectNode: m,
+  level: f,
+  position: l,
+  siblingCount: o
+}) => {
+  const w = s.children.length > 0, t = d != null && s.id === d, i = (r) => {
+    r.stopPropagation(), x(p);
+  }, a = (r) => {
+    r.stopPropagation(), c == null || c(s);
+  };
+  return /* @__PURE__ */ b("div", { className: "relative", children: [
+    /* @__PURE__ */ b(
+      "div",
+      {
+        className: `flex items-center gap-2 py-0.5 ${e ? "rounded-md outline-none hover:bg-primary_hover focus:bg-primary_hover" : ""}`,
+        "data-tree-node-id": s.id,
+        role: e ? "treeitem" : void 0,
+        tabIndex: e ? f === 1 && l === 1 ? 0 : -1 : void 0,
+        "aria-label": e ? s.label : void 0,
+        "aria-level": e ? f : void 0,
+        "aria-posinset": e ? l : void 0,
+        "aria-setsize": e ? o : void 0,
+        "aria-expanded": e && w ? !!s.isOpen : void 0,
+        "aria-selected": e && (!m || m(s)) ? t : void 0,
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: "w-4 h-4 flex-shrink-0",
+              onClick: (r) => r.stopPropagation(),
+              children: w && /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: e ? -1 : void 0,
+                  onClick: i,
+                  className: "cursor-pointer hover:bg-secondary_subtle rounded p-0.5 transition-colors flex items-center justify-center",
+                  "aria-label": s.isOpen ? "Collapse" : "Expand",
+                  children: /* @__PURE__ */ n(
+                    A.div,
+                    {
+                      initial: !1,
+                      animate: { rotate: s.isOpen ? 90 : 0 },
+                      transition: { duration: 0.2, ease: "easeOut" },
+                      children: /* @__PURE__ */ n(P, { className: "w-4 h-4 text-[var(--color-gray-400)]" })
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              onClick: a,
+              className: "flex-1 min-w-0 cursor-pointer",
+              children: /* @__PURE__ */ n(v, { node: s, isSelected: t })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(D, { initial: !1, children: w && s.isOpen && /* @__PURE__ */ n(
+      A.div,
+      {
+        initial: e ? !1 : { opacity: 0, height: 0 },
+        animate: {
+          opacity: 1,
+          height: "auto",
+          transition: {
+            height: {
+              duration: e ? 0 : 0.1,
+              ease: "easeOut"
+            },
+            opacity: {
+              duration: e ? 0 : 0.1,
+              ease: "easeOut"
+            }
+          }
+        },
+        exit: {
+          opacity: 0,
+          height: 0,
+          transition: {
+            height: {
+              duration: e ? 0 : 0.3,
+              ease: "easeIn"
+            },
+            opacity: {
+              duration: e ? 0 : 0.2,
+              ease: "easeIn"
+            }
+          }
+        },
+        style: { overflow: "clip" },
+        children: /* @__PURE__ */ b("div", { className: "ml-6 relative", children: [
+          /* @__PURE__ */ n("div", { className: "absolute left-[-17px] top-[-6px] bottom-0 w-px bg-[var(--color-gray-200)]" }),
+          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: s.children.map((r, h) => /* @__PURE__ */ n(
+            E,
+            {
+              node: r,
+              path: `${p}-${h}`,
+              onToggle: x,
+              onNodeClick: c,
+              CustomNode: v,
+              keyboardNavigation: e,
+              selectedNodeId: d,
+              canSelectNode: m,
+              level: f + 1,
+              position: h + 1,
+              siblingCount: s.children.length
+            },
+            r.id || `${p}-${h}`
+          )) })
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  _ as IndentedTree
+};

package/dist/patterns/tree-view/tree-view.d.ts

@@ -7,17 +7,14 @@ export interface TreeViewNode {
     isOpen?: boolean;
     [key: string]: any;
 }
-export interface TreeViewProps {
-    /** Raw data array. The component converts it internally using `config`. */
-    data: Record<string, any>[];
-    /** Config that tells the component how to read your raw data. */
-    config: TreeViewBuildConfig;
+interface TreeViewBaseProps {
     /** Component to render the content area of each row (icon, label, etc.) */
     CustomNode: React.FC<{
         node: TreeViewNode;
         isSelected: boolean;
     }>;
-    /** Called when a parent row (with children) is clicked */
+    /** Called when a parent row (with children) is clicked, or a leaf that `isLeafClickable` allows.
+     *  In the `indented` variant it fires for any row's content. */
     onNodeClick?: (node: TreeViewNode) => void;
     /** ID of the currently selected node */
     selectedNodeId?: string | null;
@@ -32,7 +29,39 @@ export interface TreeViewProps {
     /** When true, every node starts expanded. Per-node `isOpen` on the
      *  source data, if present, still wins. Default false. */
     defaultExpanded?: boolean;
+    /** Built node ids (paths such as `"doc.field"`) that start expanded; every other node starts
+     *  collapsed. Wins over `defaultExpanded`; per-node `isOpen` on the source data still wins. */
+    defaultExpandedIds?: Iterable<string>;
+    /** Rebuild the tree when `data`, `config`, `nodes` or `defaultExpandedIds` change, which
+     *  resets expansion to those inputs. Off by default: the tree is built once on mount.
+     *  Pass stable (memoised) inputs when this is on. */
+    syncWithData?: boolean;
+    /** `nested` (default): 28px rows with a guide line per ancestor; a parent row click toggles it.
+     *  `indented`: spaced rows, 24px indent and animated chevrons; the chevron toggles and a row's
+     *  content selects. Search (`showSearch`) is only available in `nested`. */
+    variant?: "nested" | "indented";
+    /** `nested` variant: leaf rows for which this returns true are clickable and fire `onNodeClick`. */
+    isLeafClickable?: (node: TreeViewNode) => boolean;
+    /** `indented` variant: arrow/Home/End navigation, Enter/Space to select, and tree/treeitem roles. */
+    keyboardNavigation?: boolean;
+    /** `indented` variant: rows for which this returns false are not selected by Enter/Space and get
+     *  no `aria-selected`. Mouse clicks still reach `onNodeClick`, so check it there as well. */
+    canSelectNode?: (node: TreeViewNode) => boolean;
+    /** Accessible name of the tree; used with `keyboardNavigation`. */
+    "aria-label"?: string;
 }
+export type TreeViewProps = TreeViewBaseProps & ({
+    /** Raw data array. The component converts it internally using `config`. */
+    data: Record<string, any>[];
+    /** Config that tells the component how to read your raw data. */
+    config: TreeViewBuildConfig;
+    nodes?: never;
+} | {
+    /** Already-built nodes, used as they are (ids, `isOpen` and extra keys kept). */
+    nodes: TreeViewNode[];
+    data?: never;
+    config?: never;
+});
 /**
  * Config for building TreeViewNode[] from arbitrary data.
  * Tells the build function which keys to use for label, children, and where to store the original node data.
@@ -53,6 +82,9 @@ export interface TreeViewBuildConfig {
     /** When true, every built node starts with `isOpen: true`. Per-node
      *  `isOpen` on source data overrides this (source data always wins). */
     defaultExpanded?: boolean;
+    /** Built node ids that start expanded; every other node starts collapsed. Wins over
+     *  `defaultExpanded`; per-node `isOpen` on source data still wins. */
+    expandedIds?: ReadonlySet<string>;
 }
 /**
  * Converts any array of items into TreeViewNode[] using the given config.
@@ -61,7 +93,8 @@ export interface TreeViewBuildConfig {
  */
 export declare function buildTreeViewNodes<T extends Record<string, any>>(data: T[], config: TreeViewBuildConfig, parentPath?: string): TreeViewNode[];
 export declare const TreeView: {
-    ({ data, config, CustomNode, onNodeClick, selectedNodeId, showSearch, searchPlaceholder, searchClassName, searchInputClassName, defaultExpanded, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ data, config, nodes, CustomNode, onNodeClick, selectedNodeId, showSearch, searchPlaceholder, searchClassName, searchInputClassName, defaultExpanded, defaultExpandedIds, syncWithData, variant, isLeafClickable, keyboardNavigation, canSelectNode, "aria-label": ariaLabel, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};
 //# sourceMappingURL=tree-view.d.ts.map

package/dist/patterns/tree-view/tree-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/tree-view.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,iEAAiE;IACjE,MAAM,EAAE,mBAAmB,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;8DAC0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;4EACwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5D,IAAI,EAAE,CAAC,EAAE,EACT,MAAM,EAAE,mBAAmB,EAC3B,UAAU,GAAE,MAAW,GACxB,YAAY,EAAE,CAwChB;AAqBD,eAAO,MAAM,QAAQ;wJAWlB,aAAa;;CAuDf,CAAC"}
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/tree-view.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/tree-view/tree-view.js

@@ -1,168 +1,203 @@
-import { jsxs as A, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { useState as $ } from "react";
-import { SearchSm as T, ChevronDown as K, ChevronRight as V } from "@untitledui/icons";
-import { cn as k } from "../../utils/cn.js";
-import { Input as _ } from "../../primitives/input/input.js";
-const N = 10;
-function C(e, l, s = "") {
+import { jsx as s, jsxs as N, Fragment as D } from "react/jsx-runtime";
+import { useMemo as P, useState as V, useRef as Q, useEffect as U } from "react";
+import { SearchSm as z, ChevronDown as B, ChevronRight as F } from "@untitledui/icons";
+import { cn as H } from "../../utils/cn.js";
+import { IndentedTree as X } from "./indented-tree.js";
+import { Input as Z } from "../../primitives/input/input.js";
+const T = 10;
+function K(e, t) {
+  const r = (i, [n, ...a]) => i.map((l, c) => c !== n ? l : a.length ? { ...l, children: r(l.children, a) } : { ...l, isOpen: !l.isOpen });
+  return r(e, t.split("-").map(Number));
+}
+function E(e, t, r = "") {
   const {
-    labelKey: m,
+    labelKey: i,
     childrenKey: n,
-    dataKey: f = "metadata",
-    typeKey: x = "type",
-    idKey: h,
-    maxDepth: i,
-    defaultExpanded: g
-  } = l, v = s ? s.split(".").length : 0;
-  return i != null && v >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((t, w) => {
-    const b = h != null ? t[h] : void 0, a = String(b ?? w), d = s ? `${s}.${a}` : a, c = t[n], o = Array.isArray(c) ? c : c != null ? Object.values(c) : [];
+    dataKey: a = "metadata",
+    typeKey: l = "type",
+    idKey: c,
+    maxDepth: o,
+    defaultExpanded: u,
+    expandedIds: f
+  } = t, y = r ? r.split(".").length : 0;
+  return o != null && y >= o ? [] : (Array.isArray(e) ? e : Object.values(e)).map((h, S) => {
+    const b = c != null ? h[c] : void 0, A = String(b ?? S), x = r ? `${r}.${A}` : A, d = h[n], g = Array.isArray(d) ? d : d != null ? Object.values(d) : [];
     return {
-      id: d,
-      label: t[m] ?? "Untitled",
-      type: t[x] ?? "Untitled",
-      isOpen: t.isOpen ?? g ?? !1,
-      children: o.length > 0 ? C(o, l, d) : [],
-      [f]: t
+      id: x,
+      label: h[i] ?? "Untitled",
+      type: h[l] ?? "Untitled",
+      isOpen: h.isOpen ?? (f ? f.has(x) : u) ?? !1,
+      children: g.length > 0 ? E(g, t, x) : [],
+      [a]: h
     };
   });
 }
-function O(e, l) {
-  const s = e.label ?? "", m = Array.isArray(e.children) ? e.children : [];
-  return s.toLowerCase().includes(l.toLowerCase()) ? !0 : m.some((n) => O(n, l));
+function I(e, t) {
+  const r = e.label ?? "", i = Array.isArray(e.children) ? e.children : [];
+  return r.toLowerCase().includes(t.toLowerCase()) ? !0 : i.some((n) => I(n, t));
 }
-const D = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ r("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ r(
+const G = () => /* @__PURE__ */ s("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ s("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ s(
   "div",
   {
     className: "absolute inset-y-0 bg-(--color-border-secondary)",
     style: { left: "-0.5px", width: 1 }
   }
-) }) }), I = ({
+) }) }), J = ({
   data: e,
-  config: l,
-  CustomNode: s,
-  onNodeClick: m,
-  selectedNodeId: n,
-  showSearch: f = !1,
-  searchPlaceholder: x = "Search...",
-  searchClassName: h,
-  searchInputClassName: i,
-  defaultExpanded: g
+  config: t,
+  nodes: r,
+  CustomNode: i,
+  onNodeClick: n,
+  selectedNodeId: a,
+  showSearch: l = !1,
+  searchPlaceholder: c = "Search...",
+  searchClassName: o,
+  searchInputClassName: u,
+  defaultExpanded: f,
+  defaultExpandedIds: y,
+  syncWithData: p = !1,
+  variant: h = "nested",
+  isLeafClickable: S,
+  keyboardNavigation: b = !1,
+  canSelectNode: A,
+  "aria-label": x
 }) => {
-  const [v, y] = $(
-    () => C(e, {
-      ...l,
-      defaultExpanded: g ?? l.defaultExpanded
-    })
-  ), [t, w] = $("");
-  function b(a, d) {
-    const c = structuredClone(v), o = d.split("-"), p = Number(o[0]);
-    o.shift();
-    let u = c[p];
-    o.length > 0 && (u = o.reduce((L, j) => L.children[Number(j)], c[p])), u.isOpen = !u.isOpen, y(c);
+  const d = P(
+    () => y == null ? void 0 : new Set(y),
+    [y]
+  ), g = () => r ?? E(e, {
+    ...t,
+    defaultExpanded: f ?? t.defaultExpanded,
+    expandedIds: d ?? t.expandedIds
+  }), [$, m] = V(g), [w, _] = V(""), j = Q(!1);
+  U(() => {
+    p && (j.current && m(g()), j.current = !0);
+  }, [p, e, t, r, d, f]);
+  function L(v, O) {
+    m((M) => K(M, O));
   }
-  return /* @__PURE__ */ A("div", { className: "min-w-max", children: [
-    f && /* @__PURE__ */ r("div", { className: k("mb-2", h), children: /* @__PURE__ */ r(
-      _,
+  return h === "indented" ? /* @__PURE__ */ s(
+    X,
+    {
+      tree: $,
+      onToggle: (v) => m((O) => K(O, v)),
+      CustomNode: i,
+      onNodeClick: n,
+      selectedNodeId: a,
+      keyboardNavigation: b,
+      canSelectNode: A,
+      "aria-label": x
+    }
+  ) : /* @__PURE__ */ N("div", { className: "min-w-max", children: [
+    l && /* @__PURE__ */ s("div", { className: H("mb-2", o), children: /* @__PURE__ */ s(
+      Z,
       {
         type: "search",
-        placeholder: x,
-        value: t,
-        onChange: (a) => w(a),
+        placeholder: c,
+        value: w,
+        onChange: (v) => _(v),
         size: "sm",
-        className: i,
-        icon: T
+        className: u,
+        icon: z
       }
     ) }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col", children: v.map((a, d) => /* @__PURE__ */ r(
-      S,
+    /* @__PURE__ */ s("div", { className: "flex flex-col", children: $.map((v, O) => /* @__PURE__ */ s(
+      R,
       {
-        node: a,
-        parentId: String(d),
+        node: v,
+        parentId: String(O),
         depth: 0,
-        handleToggle: b,
-        onNodeClick: m,
-        selectedNodeId: n,
-        CustomNode: s,
-        query: t
+        handleToggle: L,
+        onNodeClick: n,
+        selectedNodeId: a,
+        CustomNode: i,
+        query: w,
+        isLeafClickable: S
       },
-      a.id || d
+      v.id || O
     )) })
   ] });
 };
-I.displayName = "TreeView";
-const S = ({
+J.displayName = "TreeView";
+const R = ({
   node: e,
-  parentId: l,
-  depth: s = 0,
-  handleToggle: m,
+  parentId: t,
+  depth: r = 0,
+  handleToggle: i,
   onNodeClick: n,
-  selectedNodeId: f,
-  CustomNode: x,
-  query: h
+  selectedNodeId: a,
+  CustomNode: l,
+  query: c,
+  isLeafClickable: o
 }) => {
-  const i = h.length > 0, g = Array.isArray(e.children) ? e.children : [], v = e.label ?? "";
-  if (i && !O(e, h))
+  const u = c.length > 0, f = Array.isArray(e.children) ? e.children : [], y = e.label ?? "";
+  if (u && !I(e, c))
     return null;
-  const y = g.length > 0, t = f != null && e.id === f, w = y && (i || (e.isOpen ?? !1)), b = (p) => {
-    p.stopPropagation(), y && (i || m(e, l), n == null || n(e));
-  }, a = s === 0 ? "pl-[6px]" : "", d = s === 0 ? "pl-[2px]" : "pl-[8px]", c = i && v.toLowerCase().includes(h.toLowerCase()), o = i ? !0 : e.isOpen;
-  return /* @__PURE__ */ A("div", { className: "relative", children: [
-    /* @__PURE__ */ A(
+  const p = f.length > 0, h = a != null && e.id === a, S = p && (u || (e.isOpen ?? !1)), b = !p && !!(o != null && o(e)), A = (m) => {
+    if (m.stopPropagation(), b) {
+      n == null || n(e);
+      return;
+    }
+    p && (u || i(e, t), n == null || n(e));
+  }, x = r === 0 ? "pl-[6px]" : "", d = r === 0 ? "pl-[2px]" : "pl-[8px]", g = u && y.toLowerCase().includes(c.toLowerCase()), $ = u ? !0 : e.isOpen;
+  return /* @__PURE__ */ N("div", { className: "relative", children: [
+    /* @__PURE__ */ N(
       "div",
       {
-        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${a} ${c ? "bg-(--color-bg-secondary)" : ""} ${y ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
-        onClick: b,
+        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${x} ${g ? "bg-(--color-bg-secondary)" : ""} ${p ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""} ${b ? "cursor-pointer" : ""}`,
+        onClick: A,
         children: [
-          s > 0 && Array.from({ length: s }).map((p, u) => /* @__PURE__ */ r(D, {}, u)),
-          y ? /* @__PURE__ */ r(
+          r > 0 && Array.from({ length: r }).map((m, w) => /* @__PURE__ */ s(G, {}, w)),
+          p ? /* @__PURE__ */ s(
             "div",
             {
-              className: `flex flex-col h-full items-center shrink-0 ${d} ${o ? "justify-end" : "justify-center"}`,
-              children: o ? /* @__PURE__ */ A(E, { children: [
-                /* @__PURE__ */ r(
-                  K,
+              className: `flex flex-col h-full items-center shrink-0 ${d} ${$ ? "justify-end" : "justify-center"}`,
+              children: $ ? /* @__PURE__ */ N(D, { children: [
+                /* @__PURE__ */ s(
+                  B,
                   {
                     className: "shrink-0 text-(--color-gray-400)",
-                    style: { width: N, height: N }
+                    style: { width: T, height: T }
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ r(
+                /* @__PURE__ */ s("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ s(
                   "div",
                   {
                     className: "absolute inset-y-0 bg-(--color-border-secondary)",
                     style: { left: "-0.5px", width: 1 }
                   }
                 ) })
-              ] }) : /* @__PURE__ */ r(
-                V,
+              ] }) : /* @__PURE__ */ s(
+                F,
                 {
                   className: "shrink-0 text-(--color-gray-400)",
-                  style: { width: N, height: N }
+                  style: { width: T, height: T }
                 }
               )
             }
-          ) : s > 0 ? /* @__PURE__ */ r("div", { className: "h-full w-[6px] shrink-0" }) : null,
-          /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(x, { node: e, isSelected: t }) })
+          ) : r > 0 ? /* @__PURE__ */ s("div", { className: "h-full w-[6px] shrink-0" }) : null,
+          /* @__PURE__ */ s("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ s(l, { node: e, isSelected: h }) })
         ]
       }
     ),
-    w && /* @__PURE__ */ r("div", { className: "relative", children: g.map((p, u) => /* @__PURE__ */ r(
-      S,
+    S && /* @__PURE__ */ s("div", { className: "relative", children: f.map((m, w) => /* @__PURE__ */ s(
+      R,
       {
-        node: p,
-        parentId: `${l}-${u}`,
-        depth: s + 1,
-        handleToggle: m,
+        node: m,
+        parentId: `${t}-${w}`,
+        depth: r + 1,
+        handleToggle: i,
         onNodeClick: n,
-        selectedNodeId: f,
-        CustomNode: x,
-        query: h
+        selectedNodeId: a,
+        CustomNode: l,
+        query: c,
+        isLeafClickable: o
       },
-      p.id || `${l}-${u}`
+      m.id || `${t}-${w}`
     )) })
   ] });
 };
 export {
-  I as TreeView,
-  C as buildTreeViewNodes
+  J as TreeView,
+  E as buildTreeViewNodes
 };