@devalok/shilp-sutra 0.27.2 → 0.29.0

package/dist/_chunks/tree-view.js

@@ -1,105 +1,106 @@
 "use client";
-import { jsxs as V, jsx as l } from "react/jsx-runtime";
-import * as d from "react";
-import { useState as P, useCallback as K } from "react";
-import { cn as A } from "../ui/lib/utils.js";
-import { IconChevronRight as M } from "@tabler/icons-react";
-import { Checkbox as z } from "../ui/checkbox.js";
-function G(t = {}) {
-  const { defaultExpanded: h, defaultSelected: r, multiSelect: f, onSelect: g, onExpand: o } = t, [k, w] = P(
-    new Set(h ?? [])
-  ), [C, N] = P(
+import { jsxs as A, jsx as i } from "react/jsx-runtime";
+import * as l from "react";
+import { useState as D, useCallback as I } from "react";
+import { cn as E } from "../ui/lib/utils.js";
+import { IconChevronRight as K } from "@tabler/icons-react";
+import { Icon as j } from "../ui/icon.js";
+import { Checkbox as L } from "../ui/checkbox.js";
+function q(t = {}) {
+  const { defaultExpanded: x, defaultSelected: r, multiSelect: f, onSelect: v, onExpand: c } = t, [w, k] = D(
+    new Set(x ?? [])
+  ), [y, C] = D(
     new Set(r ?? [])
-  ), s = K(
+  ), s = I(
     (n) => {
-      w((c) => {
-        const p = new Set(c);
-        return p.has(n) ? p.delete(n) : p.add(n), o == null || o(Array.from(p)), p;
+      k((d) => {
+        const p = new Set(d);
+        return p.has(n) ? p.delete(n) : p.add(n), c?.(Array.from(p)), p;
       });
     },
-    [o]
-  ), i = K(
-    (n, c) => {
-      N((p) => {
+    [c]
+  ), o = I(
+    (n, d) => {
+      C((p) => {
         let m;
-        return f && (c != null && c.ctrlKey) ? (m = new Set(p), m.has(n) ? m.delete(n) : m.add(n)) : m = /* @__PURE__ */ new Set([n]), g == null || g(Array.from(m)), m;
+        return f && d?.ctrlKey ? (m = new Set(p), m.has(n) ? m.delete(n) : m.add(n)) : m = /* @__PURE__ */ new Set([n]), v?.(Array.from(m)), m;
       });
     },
-    [f, g]
+    [f, v]
   );
   return {
-    expanded: k,
-    selected: C,
+    expanded: w,
+    selected: y,
     toggle: s,
-    select: i,
-    isExpanded: (n) => k.has(n),
-    isSelected: (n) => C.has(n),
-    expandAll: (n) => w(new Set(n)),
-    collapseAll: () => w(/* @__PURE__ */ new Set())
+    select: o,
+    isExpanded: (n) => w.has(n),
+    isSelected: (n) => y.has(n),
+    expandAll: (n) => k(new Set(n)),
+    collapseAll: () => k(/* @__PURE__ */ new Set())
   };
 }
-const j = d.forwardRef(
+const R = l.forwardRef(
   ({
     itemId: t,
-    label: h,
+    label: x,
     icon: r,
     secondaryLabel: f,
-    actions: g,
-    disabled: o = !1,
-    children: k,
-    depth: w = 0,
-    className: C
-  }, N) => {
-    const s = H(), i = d.Children.count(k) > 0, n = s.tree.isExpanded(t), c = s.tree.isSelected(t), p = (e) => {
-      o || s.tree.select(t, e);
+    actions: v,
+    disabled: c = !1,
+    children: w,
+    depth: k = 0,
+    className: y
+  }, C) => {
+    const s = M(), o = l.Children.count(w) > 0, n = s.tree.isExpanded(t), d = s.tree.isSelected(t), p = (e) => {
+      c || s.tree.select(t, e);
     }, m = (e) => {
-      e.stopPropagation(), !o && s.tree.toggle(t);
-    }, D = (e) => {
-      o || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.tree.select(t)), e.key === "ArrowRight" && i && !n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)), e.key === "ArrowLeft" && i && n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)));
-    }, x = d.useMemo(() => {
-      if (!s.checkboxes || !i)
-        return { checked: c, indeterminate: !1 };
-      const e = [], u = (E) => {
-        d.Children.forEach(E, (v) => {
-          d.isValidElement(v) && v.props.itemId && (e.push(v.props.itemId), v.props.children && u(v.props.children));
+      e.stopPropagation(), !c && s.tree.toggle(t);
+    }, S = (e) => {
+      c || ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.tree.select(t)), e.key === "ArrowRight" && o && !n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)), e.key === "ArrowLeft" && o && n && (e.preventDefault(), e.stopPropagation(), s.tree.toggle(t)));
+    }, g = l.useMemo(() => {
+      if (!s.checkboxes || !o)
+        return { checked: d, indeterminate: !1 };
+      const e = [], u = (a) => {
+        l.Children.forEach(a, (h) => {
+          l.isValidElement(h) && h.props.itemId && (e.push(h.props.itemId), h.props.children && u(h.props.children));
         });
       };
-      u(k);
+      u(w);
       const b = e.filter(
-        (E) => s.tree.isSelected(E)
+        (a) => s.tree.isSelected(a)
       ).length;
-      return b === 0 && !c ? { checked: !1, indeterminate: !1 } : b === e.length ? { checked: !0, indeterminate: !1 } : { checked: !1, indeterminate: !0 };
-    }, [s.checkboxes, i, k, c, s.tree]);
-    return /* @__PURE__ */ V(
+      return b === 0 && !d ? { checked: !1, indeterminate: !1 } : b === e.length ? { checked: !0, indeterminate: !1 } : { checked: !1, indeterminate: !0 };
+    }, [s.checkboxes, o, w, d, s.tree]);
+    return /* @__PURE__ */ A(
       "li",
       {
-        ref: N,
+        ref: C,
         role: "treeitem",
-        "aria-expanded": i ? n : void 0,
-        "aria-selected": c,
-        "aria-level": w + 1,
-        "aria-disabled": o || void 0,
+        "aria-expanded": o ? n : void 0,
+        "aria-selected": d,
+        "aria-level": k + 1,
+        "aria-disabled": c || void 0,
         className: "list-none",
         children: [
-          /* @__PURE__ */ V(
+          /* @__PURE__ */ A(
             "div",
             {
               role: "presentation",
               "data-tree-item": t,
-              tabIndex: o ? -1 : 0,
+              tabIndex: c ? -1 : 0,
               onClick: p,
-              onKeyDown: D,
-              style: { paddingLeft: w * 20 + 8 },
-              className: A(
+              onKeyDown: S,
+              style: { paddingLeft: k * 20 + 8 },
+              className: E(
                 "flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-ds-md cursor-pointer transition-colors duration-fast-01",
                 "hover:bg-surface-raised",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
-                c && "bg-accent-3 text-accent-11",
-                o && "opacity-action-disabled cursor-not-allowed pointer-events-none",
-                C
+                d && "bg-accent-3 text-accent-11",
+                c && "opacity-action-disabled cursor-not-allowed pointer-events-none",
+                y
               ),
               children: [
-                i ? /* @__PURE__ */ l(
+                o ? /* @__PURE__ */ i(
                   "button",
                   {
                     type: "button",
@@ -107,57 +108,58 @@ const j = d.forwardRef(
                     "aria-hidden": "true",
                     onClick: m,
                     className: "flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer",
-                    children: /* @__PURE__ */ l(
-                      M,
+                    children: /* @__PURE__ */ i(
+                      j,
                       {
-                        size: 16,
-                        className: A(
+                        icon: K,
+                        size: "sm",
+                        className: E(
                           "transition-transform duration-moderate-02",
                           n && "rotate-90"
                         )
                       }
                     )
                   }
-                ) : /* @__PURE__ */ l("span", { className: "inline-block w-4 shrink-0", "aria-hidden": "true" }),
-                s.checkboxes && /* @__PURE__ */ l(
-                  z,
+                ) : /* @__PURE__ */ i("span", { className: "inline-block w-4 shrink-0", "aria-hidden": "true" }),
+                s.checkboxes && /* @__PURE__ */ i(
+                  L,
                   {
-                    checked: x.checked,
-                    indeterminate: x.indeterminate,
-                    disabled: o,
+                    checked: g.checked,
+                    indeterminate: g.indeterminate,
+                    disabled: c,
                     tabIndex: -1,
                     onClick: (e) => e.stopPropagation(),
                     onCheckedChange: () => {
-                      o || s.tree.select(t);
+                      c || s.tree.select(t);
                     },
                     className: "shrink-0"
                   }
                 ),
-                r && /* @__PURE__ */ l("span", { className: "flex shrink-0 items-center text-surface-fg-subtle", children: r }),
-                /* @__PURE__ */ l("span", { className: "truncate text-ds-sm", children: h }),
-                f && /* @__PURE__ */ l("span", { className: "ml-auto truncate text-ds-xs text-surface-fg-muted", children: f }),
-                g && /* @__PURE__ */ l(
+                r && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center text-surface-fg-subtle", children: r }),
+                /* @__PURE__ */ i("span", { className: "truncate text-ds-sm", children: x }),
+                f && /* @__PURE__ */ i("span", { className: "ml-auto truncate text-ds-xs text-surface-fg-muted", children: f }),
+                v && /* @__PURE__ */ i(
                   "span",
                   {
                     className: "ml-auto flex shrink-0 items-center gap-ds-01",
                     onClick: (e) => e.stopPropagation(),
                     role: "presentation",
-                    children: g
+                    children: v
                   }
                 )
               ]
             }
           ),
-          i && /* @__PURE__ */ l(
+          o && /* @__PURE__ */ i(
             "div",
             {
               role: "group",
-              className: A(
+              className: E(
                 "grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard",
                 n ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               ),
-              children: /* @__PURE__ */ l("ul", { role: "group", className: "overflow-hidden m-0 p-0", children: d.Children.map(k, (e) => d.isValidElement(e) ? d.cloneElement(e, {
-                depth: w + 1
+              children: /* @__PURE__ */ i("ul", { role: "group", className: "overflow-hidden m-0 p-0", children: l.Children.map(w, (e) => l.isValidElement(e) ? l.cloneElement(e, {
+                depth: k + 1
               }) : e) })
             }
           )
@@ -166,33 +168,33 @@ const j = d.forwardRef(
     );
   }
 );
-j.displayName = "TreeItem";
-const L = d.createContext(null);
-function H() {
-  const t = d.useContext(L);
+R.displayName = "TreeItem";
+const T = l.createContext(null);
+function M() {
+  const t = l.useContext(T);
   if (!t)
     throw new Error("TreeItem must be used within a <TreeView>");
   return t;
 }
-function q(t, h = 0) {
-  return t.map((r) => /* @__PURE__ */ l(
-    j,
+function V(t, x = 0) {
+  return t.map((r) => /* @__PURE__ */ i(
+    R,
     {
       itemId: r.id,
       label: r.label,
       icon: r.icon,
       disabled: r.disabled,
-      depth: h,
-      children: r.children && r.children.length > 0 ? q(r.children, h + 1) : void 0
+      depth: x,
+      children: r.children && r.children.length > 0 ? V(r.children, x + 1) : void 0
     },
     r.id
   ));
 }
-function U(t) {
+function z(t) {
   return Array.from(
     t.querySelectorAll("[data-tree-item]")
-  ).filter((h) => {
-    let r = h.parentElement;
+  ).filter((x) => {
+    let r = x.parentElement;
     for (; r && r !== t; ) {
       if (r.getAttribute("role") === "group") {
         const f = r.parentElement;
@@ -204,103 +206,90 @@ function U(t) {
     return !0;
   });
 }
-const B = d.forwardRef(
+const G = l.forwardRef(
   ({
     items: t,
-    defaultExpanded: h,
+    defaultExpanded: x,
     defaultSelected: r,
     multiSelect: f = !1,
-    checkboxes: g = !1,
-    onSelect: o,
-    onExpand: k,
-    className: w,
-    children: C,
-    ...N
+    checkboxes: v = !1,
+    onSelect: c,
+    onExpand: w,
+    className: k,
+    children: y,
+    ...C
   }, s) => {
-    const i = G({
-      defaultExpanded: h,
+    const o = q({
+      defaultExpanded: x,
       defaultSelected: r,
       multiSelect: f,
-      onSelect: o,
-      onExpand: k
-    }), n = d.useRef(null), c = s ?? n, p = (x) => {
-      var E, v, R;
-      const e = c.current;
+      onSelect: c,
+      onExpand: w
+    }), n = l.useRef(null), d = s ?? n, p = (g) => {
+      const e = d.current;
       if (!e) return;
-      const u = U(e), b = u.findIndex(
+      const u = z(e), b = u.findIndex(
         (a) => a === document.activeElement
       );
-      switch (x.key) {
+      switch (g.key) {
         case "ArrowDown": {
-          x.preventDefault();
-          const a = u[b + 1];
-          a == null || a.focus();
+          g.preventDefault(), u[b + 1]?.focus();
           break;
         }
         case "ArrowUp": {
-          x.preventDefault();
-          const a = u[b - 1];
-          a == null || a.focus();
+          g.preventDefault(), u[b - 1]?.focus();
           break;
         }
         case "ArrowRight": {
           const a = u[b];
           if (a) {
-            const S = a.getAttribute("data-tree-item");
-            if (S && i.isExpanded(S)) {
-              x.preventDefault();
-              const y = u[b + 1];
-              y == null || y.focus();
-            }
+            const h = a.getAttribute("data-tree-item");
+            h && o.isExpanded(h) && (g.preventDefault(), u[b + 1]?.focus());
           }
           break;
         }
         case "ArrowLeft": {
           const a = u[b];
           if (a) {
-            const S = a.getAttribute("data-tree-item"), y = a.closest('[role="treeitem"]'), I = (E = y == null ? void 0 : y.parentElement) == null ? void 0 : E.closest(
+            const h = a.getAttribute("data-tree-item"), N = a.closest('[role="treeitem"]')?.parentElement?.closest(
               '[role="treeitem"]'
             );
-            if (S && !i.isExpanded(S) && I) {
-              x.preventDefault();
-              const T = I.querySelector(
-                "[data-tree-item]"
-              );
-              T == null || T.focus();
-            }
+            h && !o.isExpanded(h) && N && (g.preventDefault(), N.querySelector(
+              "[data-tree-item]"
+            )?.focus());
           }
           break;
         }
         case "Home": {
-          x.preventDefault(), (v = u[0]) == null || v.focus();
+          g.preventDefault(), u[0]?.focus();
           break;
         }
         case "End": {
-          x.preventDefault(), (R = u[u.length - 1]) == null || R.focus();
+          g.preventDefault(), u[u.length - 1]?.focus();
           break;
         }
       }
-    }, m = d.useMemo(
-      () => ({ tree: i, checkboxes: g }),
-      [i, g]
-    ), D = t ? q(t) : C;
-    return /* @__PURE__ */ l(L.Provider, { value: m, children: /* @__PURE__ */ l(
+    }, m = l.useMemo(
+      () => ({ tree: o, checkboxes: v }),
+      [o, v]
+    ), S = t ? V(t) : y;
+    return /* @__PURE__ */ i(T.Provider, { value: m, children: /* @__PURE__ */ i(
       "ul",
       {
-        ref: c,
+        ref: d,
         role: "tree",
         "aria-multiselectable": f || void 0,
         onKeyDown: p,
-        className: A("m-0 list-none p-0", w),
-        ...N,
-        children: D
+        className: E("m-0 list-none p-0", k),
+        ...C,
+        children: S
       }
     ) });
   }
 );
-B.displayName = "TreeView";
+G.displayName = "TreeView";
 export {
-  j as T,
-  B as a,
-  G as u
+  R as T,
+  G as a,
+  q as u
 };