@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/_chunks/tree-view.js

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