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

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