haze-ui 1.29.0 → 1.30.0

package/dist/components/Tree/Tree.js

@@ -5,14 +5,14 @@ import { getDirection as t } from "../../utils/direction.js";
 import { useStrings as n } from "../LocaleProvider/useStrings.js";
 import r from "../VirtualList/VirtualList.js";
 import { filterTreeByQuery as i, findNodeByKey as a, flattenVisibleTree as o, getChildKeys as s, getParentKey as c, mergeLoadedChildren as l, pruneLoadedChildren as u } from "./utils.js";
-import d from "./TreeItem.js";
+import ee from "./TreeItem.js";
 /* empty css               */
-import { jsx as f, jsxs as ee } from "react/jsx-runtime";
-import { useCallback as p, useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { useControl as v } from "react-use-control";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as te } from "react/jsx-runtime";
+import { useControl as _ } from "react-use-control";
 //#region src/lib/components/Tree/Tree.tsx
-var te = "haze-Tree__base", ne = "haze-Tree__virtualTree", re = 320, ie = 32, ae = "haze-Tree__group", oe = "haze-Tree__emptyBlock";
-function se(e, t) {
+var ne = "haze-Tree__base", re = "haze-Tree__virtualTree", ie = 320, ae = 32, oe = "haze-Tree__group", se = "haze-Tree__emptyBlock";
+function v(e, t) {
 	if (!(t in e)) return e;
 	let n = {};
 	for (let [r, i] of Object.entries(e)) r !== t && (n[r] = i);
@@ -35,210 +35,214 @@ function ce(e, t, n) {
 		halfChecked: Array.from(i)
 	};
 }
-function y({ treeData: y, multiple: le = !1, checkable: b = !1, checkStrictly: x = !1, selectable: S = !0, disabled: C = !1, blockNode: ue = !1, showLine: de = !1, showIcon: fe = !1, switcherIcon: pe, loadingIcon: me, titleRender: he, iconRender: ge, virtualized: w, loadData: T, searchValue: E, expandedKeys: _e, selectedKeys: ve, checkedKeys: ye, className: D, onExpand: be, onSelect: xe, onCheck: Se }) {
-	let Ce = n("tree"), [O, we] = v(_e, []), [k, Te] = v(ve, []), [Ee, De] = v(ye, []), Oe = Ee, A = !!T, [j, ke] = _({}), [M, N] = _({}), P = g(/* @__PURE__ */ new Set()), F = h(() => u(j, y), [j, y]);
-	m(() => {
-		F !== j && ke(F);
-	}, [F, j]);
-	let I = h(() => l(y, F), [y, F]), L = p((e, t) => {
-		T && !P.current.has(e) && (P.current.add(e), N((t) => ({
+function y({ treeData: y, multiple: le = !1, checkable: b = !1, checkStrictly: x = !1, selectable: S = !0, disabled: C = !1, blockNode: ue = !1, showLine: de = !1, showIcon: fe = !1, switcherIcon: pe, loadingIcon: me, titleRender: he, iconRender: ge, virtualized: w, loadData: T, searchValue: E, rowWrap: D, keyboardNavigation: _e = !0, expandedKeys: ve, selectedKeys: ye, checkedKeys: be, className: O, onExpand: xe, onSelect: Se, onCheck: Ce }) {
+	let we = n("tree"), [k, Te] = _(ve, []), [A, Ee] = _(ye, []), [De, Oe] = _(be, []), ke = De, j = !!T, [M, Ae] = h({}), [N, P] = h({}), F = m(/* @__PURE__ */ new Set()), I = p(() => u(M, y), [M, y]);
+	f(() => {
+		I !== M && Ae(I);
+	}, [I, M]);
+	let L = p(() => l(y, I), [y, I]), R = d((e, t) => {
+		T && !F.current.has(e) && (F.current.add(e), P((t) => ({
 			...t,
 			[e]: "loading"
 		})), T(t).then((t) => {
-			P.current.delete(e), ke((n) => ({
+			F.current.delete(e), Ae((n) => ({
 				...n,
 				[e]: t
-			})), N((t) => se(t, e));
+			})), P((t) => v(t, e));
 		}).catch(() => {
-			P.current.delete(e), N((t) => ({
+			F.current.delete(e), P((t) => ({
 				...t,
 				[e]: "error"
 			}));
 		}));
 	}, [T]);
-	function Ae(e) {
-		let t = a(I, e);
-		t && L(e, t);
+	function je(e) {
+		let t = a(L, e);
+		t && R(e, t);
 	}
-	let R = h(() => i(I, E), [I, E]), je = R !== null, z = R ? R.tree : I, B = h(() => !R || R.ancestorKeys.length === 0 ? O : Array.from(/* @__PURE__ */ new Set([...O, ...R.ancestorKeys])), [O, R]);
-	m(() => {
-		if (T) for (let e of B) {
-			let t = a(I, e);
-			t && !t.children?.length && t.isLeaf !== !0 && F[e] === void 0 && M[e] === void 0 && L(e, t);
+	let z = p(() => i(L, E), [L, E]), Me = z !== null, B = z ? z.tree : L, V = p(() => !z || z.ancestorKeys.length === 0 ? k : Array.from(/* @__PURE__ */ new Set([...k, ...z.ancestorKeys])), [k, z]);
+	f(() => {
+		if (T) for (let e of V) {
+			let t = a(L, e);
+			t && !t.children?.length && t.isLeaf !== !0 && I[e] === void 0 && N[e] === void 0 && R(e, t);
 		}
 	}, [
 		T,
+		R,
 		L,
+		V,
 		I,
-		B,
-		F,
-		M
+		N
 	]);
-	let Me = h(() => ce(Oe, I, x), [
-		Oe,
-		I,
+	let Ne = p(() => ce(ke, L, x), [
+		ke,
+		L,
 		x
-	]), V = Me.checked, Ne = Me.halfChecked, Pe = w !== void 0 && w !== !1, H = typeof w == "object" ? w : void 0, [Fe, Ie] = _(null), [U, Le] = _(null), W = g(null), Re = g(null), G = h(() => o(z, B, C), [
-		z,
+	]), H = Ne.checked, Pe = Ne.halfChecked, Fe = w !== void 0 && w !== !1, U = typeof w == "object" ? w : void 0, [Ie, Le] = h(null), [W, Re] = h(null), G = m(null), ze = m(null), K = p(() => o(B, V, C), [
 		B,
+		V,
 		C
-	]), ze = (() => {
-		let e = G.find((e) => e.key === Fe && !e.disabled);
-		return e ? e.key : G.find((e) => !e.disabled)?.key ?? null;
+	]), Be = (() => {
+		let e = K.find((e) => e.key === Ie && !e.disabled);
+		return e ? e.key : K.find((e) => !e.disabled)?.key ?? null;
 	})();
-	function K(e) {
-		let t = G[e];
-		t && !t.disabled && (Pe && Re.current?.scrollToIndex(e, "auto"), Ie(t.key), Le(t.key));
+	function q(e) {
+		let t = K[e];
+		t && !t.disabled && (Fe && ze.current?.scrollToIndex(e, "auto"), Le(t.key), Re(t.key));
 	}
-	function q(e, t) {
-		for (let n = e + t; n >= 0 && n < G.length; n += t) {
-			let e = G[n];
+	function J(e, t) {
+		for (let n = e + t; n >= 0 && n < K.length; n += t) {
+			let e = K[n];
 			if (e && !e.disabled) return n;
 		}
 		return -1;
 	}
-	function J(e) {
+	function Y(e) {
 		let t = e.target;
 		if (t.getAttribute("role") !== "treeitem") return;
 		let n = t.dataset.treeKey;
-		n && Ie(n);
+		n && Le(n);
 	}
-	function Y(e) {
-		let n = G;
+	function X(e) {
+		if (!_e) return;
+		let n = K;
 		if (n.length === 0) return;
 		let r = e.target;
 		if (r.getAttribute("role") !== "treeitem") return;
 		let i = r.dataset.treeKey, a = i ? n.findIndex((e) => e.key === i) : -1, o = a >= 0 ? n[a] : void 0;
 		if (!o || o.disabled) return;
-		let s = o.node.isLeaf ?? (!o.node.children?.length && !A), c = t(e.currentTarget) === "rtl", l = c ? "ArrowLeft" : "ArrowRight", u = c ? "ArrowRight" : "ArrowLeft";
+		let s = o.node.isLeaf ?? (!o.node.children?.length && !j), c = t(e.currentTarget) === "rtl", l = c ? "ArrowLeft" : "ArrowRight", u = c ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), K(q(a, 1));
+				e.preventDefault(), q(J(a, 1));
 				return;
 			case "ArrowUp":
-				e.preventDefault(), K(q(a, -1));
+				e.preventDefault(), q(J(a, -1));
 				return;
 			case l:
 				if (e.preventDefault(), s) return;
-				B.includes(o.key) ? K(q(a, 1)) : X(o.key);
+				V.includes(o.key) ? q(J(a, 1)) : Z(o.key);
 				return;
 			case u: {
-				if (e.preventDefault(), !s && B.includes(o.key)) {
-					X(o.key);
+				if (e.preventDefault(), !s && V.includes(o.key)) {
+					Z(o.key);
 					return;
 				}
 				let t = o.parentKey === null ? -1 : n.findIndex((e) => e.key === o.parentKey);
-				t >= 0 && K(t);
+				t >= 0 && q(t);
 				return;
 			}
 			case "Home":
-				e.preventDefault(), K(q(-1, 1));
+				e.preventDefault(), q(J(-1, 1));
 				return;
 			case "End":
-				e.preventDefault(), K(q(n.length, -1));
+				e.preventDefault(), q(J(n.length, -1));
 				return;
 			case "Enter":
-				e.preventDefault(), Z(o.key);
+				e.preventDefault(), Q(o.key);
 				return;
 			case " ":
 			case "Space":
 				if (!b) return;
-				e.preventDefault(), Q(o.key);
+				e.preventDefault(), $(o.key);
 				return;
 		}
 	}
-	m(() => {
-		if (U === null) return;
-		let e = W.current;
+	f(() => {
+		if (W === null) return;
+		let e = G.current;
 		if (!e) return;
-		let t = Array.from(e.querySelectorAll("[role=\"treeitem\"]")).find((e) => e.dataset.treeKey === U);
-		t && (t.focus(), Le(null));
-	}, [U, G]);
-	function X(e) {
-		let t = O.includes(e), n = t ? O.filter((t) => t !== e) : [...O, e];
-		we(n), !t && M[e] === "error" && N((t) => se(t, e)), be?.(n, {
+		let t = Array.from(e.querySelectorAll("[role=\"treeitem\"]")).find((e) => e.dataset.treeKey === W);
+		t && (t.focus(), Re(null));
+	}, [W, K]);
+	function Z(e) {
+		let t = k.includes(e), n = t ? k.filter((t) => t !== e) : [...k, e];
+		Te(n), !t && N[e] === "error" && P((t) => v(t, e)), xe?.(n, {
 			expanded: !t,
-			node: a(I, e)
+			node: a(L, e)
 		});
 	}
-	function Z(e) {
-		let t = a(I, e);
+	function Q(e) {
+		let t = a(L, e);
 		if (!t?.selectable && t?.selectable !== void 0 || !S) return;
 		let n;
-		n = le ? k.indexOf(e) >= 0 ? k.filter((t) => t !== e) : [...k, e] : k.includes(e) ? [] : [e], Te(n), xe?.(n, {
+		n = le ? A.indexOf(e) >= 0 ? A.filter((t) => t !== e) : [...A, e] : A.includes(e) ? [] : [e], Ee(n), Se?.(n, {
 			selected: n.includes(e),
-			selectedNodes: n.map((e) => a(I, e)).filter(Boolean),
+			selectedNodes: n.map((e) => a(L, e)).filter(Boolean),
 			node: t
 		});
 	}
-	function Q(e) {
-		if (!b || a(I, e)?.disableCheckbox) return;
-		let t = V.includes(e), n;
-		if (x) n = t ? V.filter((t) => t !== e) : [...V, e];
+	function $(e) {
+		if (!b || a(L, e)?.disableCheckbox) return;
+		let t = H.includes(e), n;
+		if (x) n = t ? H.filter((t) => t !== e) : [...H, e];
 		else {
-			let r = s(I, e);
+			let r = s(L, e);
 			if (t) {
-				n = V.filter((t) => t !== e && !r.includes(t));
-				let t = c(I, e);
-				for (; t;) n = n.filter((e) => e !== t), t = c(I, t);
+				n = H.filter((t) => t !== e && !r.includes(t));
+				let t = c(L, e);
+				for (; t;) n = n.filter((e) => e !== t), t = c(L, t);
 			} else {
-				let t = [e, ...r].filter((e) => !V.includes(e));
-				n = [...V, ...t];
-				let i = c(I, e);
-				for (; i;) s(I, i).every((e) => n.includes(e)) && !n.includes(i) && n.push(i), i = c(I, i);
+				let t = [e, ...r].filter((e) => !H.includes(e));
+				n = [...H, ...t];
+				let i = c(L, e);
+				for (; i;) s(L, i).every((e) => n.includes(e)) && !n.includes(i) && n.push(i), i = c(L, i);
 			}
 		}
-		let r = ce(n, I, x);
-		De(x ? n : r.checked), Se?.(x ? n : r, {
+		let r = ce(n, L, x);
+		Oe(x ? n : r.checked), Ce?.(x ? n : r, {
 			checked: !t,
-			checkedNodes: n.map((e) => a(I, e)).filter(Boolean),
-			node: a(I, e),
+			checkedNodes: n.map((e) => a(L, e)).filter(Boolean),
+			node: a(L, e),
 			halfCheckedKeys: r.halfChecked
 		});
 	}
-	function $(t, n, r) {
+	function Ve(t, n, r) {
 		return t.map((i, a) => {
-			let o = !!i.children?.length, s = B.includes(i.key), c = k.includes(i.key), l = V.includes(i.key), u = Ne.includes(i.key), p = M[i.key], m = l ? "checked" : u ? "halfChecked" : "unchecked", h = a === t.length - 1, g = [...r, h];
-			return /* @__PURE__ */ ee("div", {
+			let o = !!i.children?.length, s = V.includes(i.key), c = A.includes(i.key), l = H.includes(i.key), u = Pe.includes(i.key), d = N[i.key], f = l ? "checked" : u ? "halfChecked" : "unchecked", p = a === t.length - 1, m = [...r, p], h = /* @__PURE__ */ g(ee, {
+				node: i,
+				level: n,
+				expanded: s,
+				selected: c,
+				checked: f,
+				disabled: C,
+				checkable: b,
+				selectable: S,
+				blockNode: ue,
+				showLine: de,
+				showIcon: fe,
+				switcherIcon: pe,
+				loadingIcon: me,
+				loading: d === "loading",
+				loadable: j,
+				loadFailed: d === "error",
+				searchValue: E,
+				titleRender: he,
+				iconRender: ge,
+				isLast: m,
+				tabIndex: i.key === Be ? 0 : -1,
+				onToggle: () => Z(i.key),
+				onSelect: () => Q(i.key),
+				onCheck: () => $(i.key),
+				onRetry: () => je(i.key)
+			});
+			return /* @__PURE__ */ te("div", {
 				role: "group",
-				className: e(ae),
-				children: [/* @__PURE__ */ f(d, {
-					node: i,
-					level: n,
-					expanded: s,
-					selected: c,
-					checked: m,
-					disabled: C,
-					checkable: b,
-					selectable: S,
-					blockNode: ue,
-					showLine: de,
-					showIcon: fe,
-					switcherIcon: pe,
-					loadingIcon: me,
-					loading: p === "loading",
-					loadable: A,
-					loadFailed: p === "error",
-					searchValue: E,
-					titleRender: he,
-					iconRender: ge,
-					isLast: g,
-					tabIndex: i.key === ze ? 0 : -1,
-					onToggle: () => X(i.key),
-					onSelect: () => Z(i.key),
-					onCheck: () => Q(i.key),
-					onRetry: () => Ae(i.key)
-				}), o && s && /* @__PURE__ */ f("div", { children: $(i.children, n + 1, g) })]
+				"data-slot": "group",
+				className: e(oe),
+				children: [D ? D(h, i) : h, o && s && /* @__PURE__ */ g("div", {
+					"data-slot": "list",
+					children: Ve(i.children, n + 1, m)
+				})]
 			}, i.key);
 		});
 	}
-	function Be(e) {
-		let t = V.includes(e.key), n = Ne.includes(e.key), r = M[e.key], i = t ? "checked" : n ? "halfChecked" : "unchecked";
-		return /* @__PURE__ */ f(d, {
+	function He(e) {
+		let t = H.includes(e.key), n = Pe.includes(e.key), r = N[e.key], i = t ? "checked" : n ? "halfChecked" : "unchecked", a = /* @__PURE__ */ g(ee, {
 			node: e.node,
 			level: e.level,
-			expanded: B.includes(e.key),
-			selected: k.includes(e.key),
+			expanded: V.includes(e.key),
+			selected: A.includes(e.key),
 			checked: i,
 			disabled: C,
 			checkable: b,
@@ -249,51 +253,56 @@ function y({ treeData: y, multiple: le = !1, checkable: b = !1, checkStrictly: x
 			switcherIcon: pe,
 			loadingIcon: me,
 			loading: r === "loading",
-			loadable: A,
+			loadable: j,
 			loadFailed: r === "error",
 			searchValue: E,
 			titleRender: he,
 			iconRender: ge,
 			isLast: e.isLast,
-			tabIndex: e.key === ze ? 0 : -1,
-			onToggle: () => X(e.key),
-			onSelect: () => Z(e.key),
-			onCheck: () => Q(e.key),
-			onRetry: () => Ae(e.key)
+			tabIndex: e.key === Be ? 0 : -1,
+			onToggle: () => Z(e.key),
+			onSelect: () => Q(e.key),
+			onCheck: () => $(e.key),
+			onRetry: () => je(e.key)
 		});
+		return D ? D(a, e.node) : a;
 	}
-	return je && z.length === 0 ? /* @__PURE__ */ f("div", {
+	return Me && B.length === 0 ? /* @__PURE__ */ g("div", {
 		role: "tree",
-		ref: W,
-		onKeyDown: Y,
-		onFocus: J,
-		className: e([te, D]),
-		children: f("div", {
-			className: e(oe),
-			children: Ce.noMatch
+		"data-slot": "tree",
+		ref: G,
+		onKeyDown: X,
+		onFocus: Y,
+		className: e([ne, O]),
+		children: g("div", {
+			"data-slot": "empty",
+			className: e(se),
+			children: we.noMatch
 		})
-	}) : Pe ? /* @__PURE__ */ f("div", {
+	}) : Fe ? /* @__PURE__ */ g("div", {
 		role: "tree",
-		ref: W,
-		onKeyDown: Y,
-		onFocus: J,
-		className: e([ne, D]),
-		children: f(r, {
-			ref: Re,
+		"data-slot": "tree",
+		ref: G,
+		onKeyDown: X,
+		onFocus: Y,
+		className: e([re, O]),
+		children: g(r, {
+			ref: ze,
 			"data-virtualized": !0,
-			items: G,
-			height: H?.height ?? re,
-			itemHeight: H?.itemHeight ?? ie,
-			overscan: H?.overscan,
-			renderItem: Be
+			items: K,
+			height: U?.height ?? ie,
+			itemHeight: U?.itemHeight ?? ae,
+			overscan: U?.overscan,
+			renderItem: He
 		})
-	}) : /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ g("div", {
 		role: "tree",
-		ref: W,
-		onKeyDown: Y,
-		onFocus: J,
-		className: e([te, D]),
-		children: $(z, 0, [])
+		"data-slot": "tree",
+		ref: G,
+		onKeyDown: X,
+		onFocus: Y,
+		className: e([ne, O]),
+		children: Ve(B, 0, [])
 	});
 }
 //#endregion

package/dist/components/Tree/TreeItem.js

@@ -4,78 +4,79 @@ import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { matchRanges as n } from "./utils.js";
 /* empty css                   */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useId as a } from "react";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/Tree/TreeItem.tsx
-var o = "haze-TreeItem__item", s = "haze-TreeItem__blockItem", c = "haze-TreeItem__selectedStyle", l = "haze-TreeItem__disabledStyle", u = "haze-TreeItem__switcher", d = "haze-TreeItem__switcherExpanded", f = "haze-TreeItem__checkbox", p = "haze-TreeItem__checkboxChecked", m = "haze-TreeItem__checkboxHalfChecked", h = "haze-TreeItem__nodeIcon", g = "haze-TreeItem__title", _ = "haze-TreeItem__loadingIcon", v = "haze-TreeItem__mark", y = "haze-TreeItem__loadFailedNote", b = "haze-TreeItem__indentLine", ee = "haze-TreeItem__indentLineWithBorder", te = () => /* @__PURE__ */ r("svg", {
+var o = "haze-TreeItem__item", s = "haze-TreeItem__blockItem", c = "haze-TreeItem__selectedStyle", l = "haze-TreeItem__disabledStyle", u = "haze-TreeItem__switcher", d = "haze-TreeItem__switcherExpanded", f = "haze-TreeItem__checkbox", p = "haze-TreeItem__checkboxChecked", m = "haze-TreeItem__checkboxHalfChecked", h = "haze-TreeItem__nodeIcon", g = "haze-TreeItem__title", _ = "haze-TreeItem__loadingIcon", v = "haze-TreeItem__mark", y = "haze-TreeItem__loadFailedNote", b = "haze-TreeItem__indentLine", ee = "haze-TreeItem__indentLineWithBorder", te = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: r("path", { d: "M4 2l4 4-4 4" })
-}), ne = () => /* @__PURE__ */ r("svg", {
+	children: i("path", { d: "M4 2l4 4-4 4" })
+}), ne = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: r("path", { d: "M2 6l3 3 5-5" })
-}), re = () => /* @__PURE__ */ r("svg", {
+	children: i("path", { d: "M2 6l3 3 5-5" })
+}), re = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
-	children: r("path", { d: "M2 6h8" })
-}), x = () => /* @__PURE__ */ r("svg", {
+	children: i("path", { d: "M2 6h8" })
+}), x = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: r("path", { d: "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9z" })
-}), S = () => /* @__PURE__ */ i("svg", {
+	children: i("path", { d: "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9z" })
+}), S = () => /* @__PURE__ */ a("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: [/* @__PURE__ */ r("path", { d: "M.5 5l.5-.5A.5.5 0 0 1 1.5 4H4l1-1h4.5a1.5 1.5 0 0 1 1.5 1.5v1H14a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5.5L.5 5z" }), /* @__PURE__ */ r("path", {
+	children: [/* @__PURE__ */ i("path", { d: "M.5 5l.5-.5A.5.5 0 0 1 1.5 4H4l1-1h4.5a1.5 1.5 0 0 1 1.5 1.5v1H14a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5.5L.5 5z" }), /* @__PURE__ */ i("path", {
 		d: "M1 6v6h14V6H1z",
 		opacity: "0.5"
 	})]
-}), C = () => /* @__PURE__ */ r("svg", {
+}), C = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: r("path", { d: "M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414a2 2 0 0 0-.586-1.414L10.586.172A2 2 0 0 0 9.172 0H4zm1 1a1 1 0 0 1 1-1h3.172a1 1 0 0 1 .707.293l2.121 2.121a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1z" })
-}), w = () => /* @__PURE__ */ i("svg", {
+	children: i("path", { d: "M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414a2 2 0 0 0-.586-1.414L10.586.172A2 2 0 0 0 9.172 0H4zm1 1a1 1 0 0 1 1-1h3.172a1 1 0 0 1 .707.293l2.121 2.121a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1z" })
+}), w = () => /* @__PURE__ */ a("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: [/* @__PURE__ */ r("path", {
+	children: [/* @__PURE__ */ i("path", {
 		d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 0 1 0 12V2z",
 		opacity: "0.3"
-	}), /* @__PURE__ */ r("path", { d: "M8 1a7 7 0 0 1 7 7h-2a5 5 0 0 0-5-5V1z" })]
-}), T = () => /* @__PURE__ */ i("svg", {
+	}), /* @__PURE__ */ i("path", { d: "M8 1a7 7 0 0 1 7 7h-2a5 5 0 0 0-5-5V1z" })]
+}), T = () => /* @__PURE__ */ a("svg", {
 	viewBox: "0 0 16 16",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: [/* @__PURE__ */ r("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.61-3.89" }), /* @__PURE__ */ r("path", { d: "M13.5 1.5v3h-3" })]
+	children: [/* @__PURE__ */ i("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.61-3.89" }), /* @__PURE__ */ i("path", { d: "M13.5 1.5v3h-3" })]
 });
 function E(e, t) {
-	let i = n(e, t);
-	if (i.length === 0) return e;
+	let r = n(e, t);
+	if (r.length === 0) return e;
 	let a = [], o = 0;
-	return i.forEach(([t, n], i) => {
-		t > o && a.push(e.slice(o, t)), a.push(/* @__PURE__ */ r("mark", {
+	return r.forEach(([t, n], r) => {
+		t > o && a.push(e.slice(o, t)), a.push(/* @__PURE__ */ i("mark", {
 			className: v,
 			children: e.slice(t, n)
-		}, i)), o = n;
+		}, r)), o = n;
 	}), o < e.length && a.push(e.slice(o)), a;
 }
 function D({ node: n, level: v, expanded: D, selected: O, checked: k, disabled: A, checkable: j, selectable: M, blockNode: N, showLine: P, showIcon: F, switcherIcon: I, loadingIcon: ie, loading: L, loadable: R, loadFailed: z, searchValue: B, titleRender: V, iconRender: H, isLast: U, tabIndex: W, onToggle: G, onSelect: K, onCheck: q, onRetry: J }) {
-	let Y = !!n.children?.length, X = n.isLeaf ?? (!Y && !R), Z = t("tree"), Q = `haze-tree-title-${a()}`, ae = Array.from({ length: v }, (e, t) => ({ showLine: P && !U[t] })), oe = V ? V(n) : typeof n.title == "string" && B ? E(n.title, B) : n.title, $ = H ? H(n) : n.icon;
-	return /* @__PURE__ */ r("div", { children: i("div", {
+	let Y = !!n.children?.length, X = n.isLeaf ?? (!Y && !R), Z = t("tree"), Q = `haze-tree-title-${r()}`, ae = Array.from({ length: v }, (e, t) => ({ showLine: P && !U[t] })), oe = V ? V(n) : typeof n.title == "string" && B ? E(n.title, B) : n.title, $ = H ? H(n) : n.icon;
+	return /* @__PURE__ */ i("div", { children: a("div", {
 		role: "treeitem",
+		"data-slot": "item",
 		tabIndex: W,
 		"data-tree-key": n.key,
 		"aria-selected": O,
@@ -92,22 +93,31 @@ function D({ node: n, level: v, expanded: D, selected: O, checked: k, disabled:
 			(A || n.disabled) && l
 		]),
 		children: [
-			ae.map((t, n) => /* @__PURE__ */ r("span", { className: e([b, t.showLine && ee]) }, n)),
-			!X && /* @__PURE__ */ r("span", {
+			ae.map((t, n) => /* @__PURE__ */ i("span", {
+				"data-slot": "indent",
+				className: e([b, t.showLine && ee])
+			}, n)),
+			!X && /* @__PURE__ */ i("span", {
 				role: "button",
+				"data-slot": "expand-button",
 				"aria-label": D ? Z.collapse : Z.expand,
 				onClick: (e) => {
 					e.stopPropagation(), G();
 				},
 				className: e([u, D && d]),
-				children: L ? /* @__PURE__ */ r("span", {
+				children: L ? /* @__PURE__ */ i("span", {
+					"data-slot": "spinner",
 					className: _,
-					children: ie ?? /* @__PURE__ */ r(w, {})
-				}) : I || /* @__PURE__ */ r(te, {})
+					children: ie ?? /* @__PURE__ */ i(w, {})
+				}) : I || /* @__PURE__ */ i(te, {})
 			}),
-			X && /* @__PURE__ */ r("span", { className: e(b) }),
-			j && /* @__PURE__ */ i("span", {
+			X && /* @__PURE__ */ i("span", {
+				"data-slot": "indent",
+				className: e(b)
+			}),
+			j && /* @__PURE__ */ a("span", {
 				role: "checkbox",
+				"data-slot": "checkbox",
 				"aria-checked": k === "halfChecked" ? "mixed" : k === "checked",
 				"aria-labelledby": Q,
 				onClick: (e) => {
@@ -119,25 +129,28 @@ function D({ node: n, level: v, expanded: D, selected: O, checked: k, disabled:
 					k === "halfChecked" && m,
 					n.disableCheckbox && l
 				]),
-				children: [k === "checked" && /* @__PURE__ */ r(ne, {}), k === "halfChecked" && /* @__PURE__ */ r(re, {})]
+				children: [k === "checked" && /* @__PURE__ */ i(ne, {}), k === "halfChecked" && /* @__PURE__ */ i(re, {})]
 			}),
-			(F || $) && /* @__PURE__ */ r("span", {
+			(F || $) && /* @__PURE__ */ i("span", {
+				"data-slot": "icon",
 				className: h,
-				children: $ ?? r(X ? C : D ? S : x, {})
+				children: $ ?? i(X ? C : D ? S : x, {})
 			}),
-			/* @__PURE__ */ r("span", {
+			/* @__PURE__ */ i("span", {
+				"data-slot": "title",
 				className: g,
 				id: Q,
 				children: oe
 			}),
-			z && /* @__PURE__ */ i("span", {
+			z && /* @__PURE__ */ a("span", {
 				role: "button",
+				"data-slot": "retry-button",
 				onClick: (e) => {
 					e.stopPropagation(), J?.();
 				},
 				className: e(y),
 				children: [
-					/* @__PURE__ */ r(T, {}),
+					/* @__PURE__ */ i(T, {}),
 					Z.loadError,
 					" · ",
 					Z.retry

package/dist/components/Tree/index.js

@@ -1,3 +1,4 @@
 "use client";
 import e from "./Tree.js";
-export { e as Tree };
+import t from "./SortableTree.js";
+export { t as SortableTree, e as Tree };

package/dist/components/Tree/sortable-tree-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                               */
+//#region src/lib/components/Tree/sortable-tree-styles.ts
+var e = "haze-sortable-tree-styles__row", t = "haze-sortable-tree-styles__rowDraggable", n = "haze-sortable-tree-styles__rowDragging", r = "haze-sortable-tree-styles__rowInSubtree", i = "haze-sortable-tree-styles__grip";
+//#endregion
+export { i as grip, e as row, t as rowDraggable, n as rowDragging, r as rowInSubtree };