@pibit.ai/cure-design-system 0.6.22 → 0.6.24

package/dist/patterns/sub-sidebar/sub-sidebar.js

@@ -102,7 +102,7 @@ const T = ({
               /* @__PURE__ */ r("nav", { className: "flex-1 pb-4 pr-2 overflow-y-auto overflow-x-hidden", children: i.sections.map((a) => /* @__PURE__ */ r(u, { children: h(
                 (a == null ? void 0 : a.permissions) || [],
                 /* @__PURE__ */ o("div", { className: n("mb-6"), children: [
-                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-[10px] text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
+                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-3xs text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
                   /* @__PURE__ */ r("ul", { className: "space-y-1", children: a.items.map((e) => {
                     const t = e.href || e.label, l = E.has(t), N = e.items && e.items.length > 0, p = v(e);
                     return N ? /* @__PURE__ */ r(u, { children: h(
@@ -255,7 +255,7 @@ const T = ({
                   }) })
                 ] }),
                 a.showDisabled ? /* @__PURE__ */ o("div", { className: n("mb-6"), children: [
-                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-[10px] text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
+                  /* @__PURE__ */ r("div", { className: "py-0.5 px-2", children: /* @__PURE__ */ r("p", { className: "font-medium text-3xs text-[var(--color-text-tertiary)] uppercase tracking-[1.3px] whitespace-nowrap", children: a.label }) }),
                   /* @__PURE__ */ r("ul", { className: "", children: a.items.map((e) => {
                     const t = e.href || e.label, l = v(e);
                     return /* @__PURE__ */ r(

package/dist/patterns/table/toolbar/ColumnHeaderMenu.js

@@ -4,10 +4,10 @@ import { AlignLeft as Z, AlignCenter as B, AlignRight as G, ChevronDown as K, Ey
 import { Button as j } from "react-aria-components";
 import { cx as m } from "../../../utils/cn.js";
 import { Dropdown as N } from "../../../primitives/dropdown/dropdown.js";
-const a = ({
+const s = ({
   icon: o,
   label: c,
-  danger: s,
+  danger: a,
   submenu: f,
   selected: p,
   disabled: r,
@@ -25,7 +25,7 @@ const a = ({
       "flex items-center gap-2 rounded-md px-2 py-2 text-xs font-medium transition-colors w-full text-left",
       r ? "cursor-not-allowed text-disabled" : m(
         "cursor-pointer",
-        s ? "text-error-primary hover:bg-error-primary" : p ? "bg-utility-brand-25 text-secondary" : "text-secondary hover:bg-primary_hover"
+        a ? "text-error-primary hover:bg-error-primary" : p ? "bg-utility-brand-25 text-secondary" : "text-secondary hover:bg-primary_hover"
       )
     ),
     children: [
@@ -35,7 +35,7 @@ const a = ({
           size: 16,
           className: m(
             "shrink-0",
-            r ? "text-fg-disabled" : s ? "text-error-primary" : "text-fg-quaternary"
+            r ? "text-fg-disabled" : a ? "text-error-primary" : "text-fg-quaternary"
           )
         }
       ),
@@ -44,7 +44,7 @@ const a = ({
       f && /* @__PURE__ */ e(E, { size: 14, className: "shrink-0 text-fg-quaternary" })
     ]
   }
-), i = () => /* @__PURE__ */ e("div", { className: "my-1 h-px w-full bg-secondary" }), M = ({ children: o }) => /* @__PURE__ */ e("span", { className: "text-[10px] font-medium uppercase tracking-wider text-tertiary", children: o }), le = ({ label: o, suffix: c }) => /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-secondary bg-primary px-1.5 py-0.5", children: [
+), i = () => /* @__PURE__ */ e("div", { className: "my-1 h-px w-full bg-secondary" }), M = ({ children: o }) => /* @__PURE__ */ e("span", { className: "text-3xs font-medium uppercase tracking-wider text-tertiary", children: o }), le = ({ label: o, suffix: c }) => /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-secondary bg-primary px-1.5 py-0.5", children: [
   /* @__PURE__ */ e("span", { className: "flex h-4 w-4 items-center justify-center rounded-sm border border-secondary text-[9px] font-semibold text-tertiary", children: "T" }),
   /* @__PURE__ */ e("span", { className: "text-xs font-semibold text-primary", children: o }),
   c && /* @__PURE__ */ e("span", { className: "text-xs text-tertiary", children: c })
@@ -55,7 +55,7 @@ const a = ({
 ], pe = ({
   column: o,
   columnLabel: c,
-  fieldDef: s,
+  fieldDef: a,
   currentAlignment: f,
   textWrapped: p = !1,
   capabilities: r,
@@ -66,7 +66,7 @@ const a = ({
   isHeaderHovered: H = !1
 }) => {
   var _, q;
-  const F = (s == null ? void 0 : s.data_type) ?? o.dataType, y = F === "LOOKUP" || o.variant === "lookup", L = F === "DERIVED" || o.variant === "derived", I = y ? "Hide field" : "Hide column", x = (r == null ? void 0 : r.sort) ?? !0, v = (r == null ? void 0 : r.align) ?? !0, k = (r == null ? void 0 : r.textWrap) ?? !1, w = (r == null ? void 0 : r.filter) ?? !0, b = (r == null ? void 0 : r.hide) ?? !0, [P, R] = z(!1), [U, A] = z(!1), V = !T || P || H, l = (t) => {
+  const F = (a == null ? void 0 : a.data_type) ?? o.dataType, y = F === "LOOKUP" || o.variant === "lookup", L = F === "DERIVED" || o.variant === "derived", I = y ? "Hide field" : "Hide column", x = (r == null ? void 0 : r.sort) ?? !0, v = (r == null ? void 0 : r.align) ?? !0, k = (r == null ? void 0 : r.textWrap) ?? !1, w = (r == null ? void 0 : r.filter) ?? !0, b = (r == null ? void 0 : r.hide) ?? !0, [P, R] = z(!1), [U, A] = z(!1), V = !T || P || H, l = (t) => {
     u(t), A(!1), R(!1);
   }, S = O.find((t) => t.id === f) ?? O[0], W = S.icon, C = h == null ? void 0 : h(o);
   return /* @__PURE__ */ n(
@@ -104,11 +104,11 @@ const a = ({
                   /* @__PURE__ */ e(le, { label: c, suffix: "Object name" })
                 ] }),
                 /* @__PURE__ */ e(i, {}),
-                /* @__PURE__ */ e(a, { icon: $, label: "View Field", onClick: () => l({ type: "lookup-view" }) }),
-                /* @__PURE__ */ e(a, { icon: J, label: "Edit field", onClick: () => l({ type: "lookup-edit" }) }),
+                /* @__PURE__ */ e(s, { icon: $, label: "View Field", onClick: () => l({ type: "lookup-view" }) }),
+                /* @__PURE__ */ e(s, { icon: J, label: "Edit field", onClick: () => l({ type: "lookup-edit" }) }),
                 /* @__PURE__ */ e(i, {}),
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: Q,
                     label: "Add field to right",
@@ -116,7 +116,7 @@ const a = ({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: X,
                     label: "Add field to left",
@@ -128,7 +128,7 @@ const a = ({
               L && /* @__PURE__ */ n(d, { children: [
                 /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5 px-2 py-2", children: [
                   /* @__PURE__ */ e(M, { children: "Formula" }),
-                  /* @__PURE__ */ e("div", { className: "text-xs font-medium text-secondary break-words", children: ((_ = s == null ? void 0 : s.formula) == null ? void 0 : _.trim()) || ((q = o.formula) == null ? void 0 : q.trim()) || c })
+                  /* @__PURE__ */ e("div", { className: "text-xs font-medium text-secondary break-words", children: ((_ = a == null ? void 0 : a.formula) == null ? void 0 : _.trim()) || ((q = o.formula) == null ? void 0 : q.trim()) || c })
                 ] }),
                 /* @__PURE__ */ e(i, {})
               ] }),
@@ -139,7 +139,7 @@ const a = ({
               C && (x || v || k || w || b) && /* @__PURE__ */ e(i, {}),
               x && /* @__PURE__ */ n(d, { children: [
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: Y,
                     label: "Sort A to Z",
@@ -147,7 +147,7 @@ const a = ({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: D,
                     label: "Sort Z to A",
@@ -180,7 +180,7 @@ const a = ({
                       placement: "right top",
                       className: "w-44",
                       children: /* @__PURE__ */ e("div", { className: "flex flex-col py-1 px-1.5", children: O.map((t) => /* @__PURE__ */ e(
-                        a,
+                        s,
                         {
                           icon: t.icon,
                           label: t.label,
@@ -196,7 +196,7 @@ const a = ({
               k && /* @__PURE__ */ n(d, { children: [
                 (x || v) && /* @__PURE__ */ e(i, {}),
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: ee,
                     label: "Text wrap",
@@ -207,9 +207,9 @@ const a = ({
               ] }),
               (w || b) && /* @__PURE__ */ n(d, { children: [
                 (x || v) && !k && /* @__PURE__ */ e(i, {}),
-                w && /* @__PURE__ */ e(a, { icon: re, label: "Filter by", onClick: () => l({ type: "filter" }) }),
+                w && /* @__PURE__ */ e(s, { icon: re, label: "Filter by", onClick: () => l({ type: "filter" }) }),
                 b && /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: te,
                     label: I,
@@ -222,7 +222,7 @@ const a = ({
               y && /* @__PURE__ */ n(d, { children: [
                 /* @__PURE__ */ e(i, {}),
                 /* @__PURE__ */ e(
-                  a,
+                  s,
                   {
                     icon: ne,
                     label: "Delete fields",

package/dist/patterns/table/toolbar/TableViewsDropdown.js

@@ -180,7 +180,7 @@ const L = ({ config: e, isDisabled: r }) => {
         o.id
       )),
       d.length > 0 && /* @__PURE__ */ s(f, { children: [
-        /* @__PURE__ */ t("div", { className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold tracking-wide text-tertiary uppercase", children: "Shared with me" }),
+        /* @__PURE__ */ t("div", { className: "px-2.5 pb-1 pt-2 text-3xs font-semibold tracking-wide text-tertiary uppercase", children: "Shared with me" }),
         d.map((o) => /* @__PURE__ */ t(
           h,
           {

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

@@ -0,0 +1,23 @@
+import { TreeViewNode } from './tree-view';
+type CustomNode = React.FC<{
+    node: TreeViewNode;
+    isSelected: boolean;
+}>;
+export interface IndentedTreeProps {
+    tree: TreeViewNode[];
+    onToggle: (path: string) => void;
+    CustomNode: CustomNode;
+    onNodeClick?: (node: TreeViewNode) => void;
+    selectedNodeId?: string | null;
+    keyboardNavigation: boolean;
+    canSelectNode?: (node: TreeViewNode) => boolean;
+    "aria-label"?: string;
+}
+/**
+ * The `indented` TreeView variant: spaced rows, a 24px indent with one guide line per level, an
+ * animated chevron and children. The chevron only expands/collapses; clicking a row's content
+ * selects it, for parents and leaves alike.
+ */
+export declare const IndentedTree: ({ tree, onToggle, CustomNode, onNodeClick, selectedNodeId, keyboardNavigation, canSelectNode, "aria-label": ariaLabel, }: IndentedTreeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=indented-tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indented-tree.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/indented-tree.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,0HAS1B,iBAAiB,4CA8GnB,CAAC"}

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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"}