wimui 0.50.4 → 0.51.1

package/dist/components/data-display/TreeView/TreeView.js

@@ -6,22 +6,22 @@ import { BaseListItem as r } from "../../_internal/BaseListItem/BaseListItem.js"
 import { VirtualList as i } from "../VirtualList/VirtualList.js";
 import a from "./tree-view.module.js";
 import { useTreeViewItemExpansion as o } from "./useTreeViewItemExpansion.js";
-import s, { createContext as c, useCallback as l, useContext as u, useMemo as d, useState as f } from "react";
-import p from "classnames";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import s, { createContext as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useState as p } from "react";
+import m from "classnames";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/data-display/TreeView/TreeView.tsx
-var g = c(null), _ = () => {
-	let e = u(g);
+var _ = c(null), v = () => {
+	let e = u(_);
 	if (!e) throw Error("TreeView components must be used within a TreeView");
 	return e;
-}, v = 40, ee = 100;
-function y(e) {
+}, ee = 40, y = 100;
+function b(e) {
 	return typeof e == "string" ? e : typeof e == "number" ? String(e) : "";
 }
-function b(e, t, n, r = 0) {
+function x(e, t, n, r = 0) {
 	let i = [];
 	for (let a of e) {
-		let e = y(a.label), o = !n || e.toLowerCase().includes(n.toLowerCase()), s = n && a.children ? x(a.children, n) : !1;
+		let e = b(a.label), o = !n || e.toLowerCase().includes(n.toLowerCase()), s = n && a.children ? S(a.children, n) : !1;
 		if (n && !o && !s) continue;
 		i.push({
 			...a,
@@ -29,14 +29,14 @@ function b(e, t, n, r = 0) {
 			hasChildren: !!(a.children && a.children.length > 0)
 		});
 		let c = t.includes(a.value) || !!n && s;
-		a.children && a.children.length > 0 && c && i.push(...b(a.children, t, n, r + 1));
+		a.children && a.children.length > 0 && c && i.push(...x(a.children, t, n, r + 1));
 	}
 	return i;
 }
-function x(e, t) {
-	return e.some((e) => y(e.label).toLowerCase().includes(t.toLowerCase()) || (e.children ? x(e.children, t) : !1));
-}
 function S(e, t) {
+	return e.some((e) => b(e.label).toLowerCase().includes(t.toLowerCase()) || (e.children ? S(e.children, t) : !1));
+}
+function C(e, t) {
 	for (let n of e) {
 		if (n.value === t) {
 			let e = [], t = (n) => {
@@ -45,23 +45,23 @@ function S(e, t) {
 			return n.children && t(n.children), e;
 		}
 		if (n.children) {
-			let e = S(n.children, t);
+			let e = C(n.children, t);
 			if (e !== null) return e;
 		}
 	}
 	return null;
 }
-function C(e, t, n = []) {
+function w(e, t, n = []) {
 	for (let r of e) {
 		if (r.value === t) return n;
 		if (r.children) {
-			let e = C(r.children, t, [...n, r.value]);
+			let e = w(r.children, t, [...n, r.value]);
 			if (e !== null) return e;
 		}
 	}
 	return null;
 }
-function w(e, t) {
+function T(e, t) {
 	let n = [], r = new Set(t);
 	function i(e) {
 		if (!e.children?.length) return r.has(e.value) ? "checked" : "unchecked";
@@ -74,181 +74,196 @@ function w(e, t) {
 		effectiveCheckedSet: r
 	};
 }
-var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable: x = !1, checkStrategy: T = "cascade", searchable: E = !1, defaultExpandedValues: D = [], defaultSelectedValues: O = [], defaultCheckedValues: k = [], onCheckedChange: A, onSelectedChange: j, width: M, virtualThreshold: te = ee, labels: N = {}, labelId: P, styles: F }) => {
-	let { t: I } = e("components"), { searchPlaceholder: L, searchAriaLabel: R = I("treeview.search_aria"), expandLabel: z = (e) => I("treeview.expand", { label: e }), collapseLabel: B = (e) => I("treeview.collapse", { label: e }) } = N, [V, H] = f(D), [U, ne] = f(O), [W, re] = f(k), [G, ie] = f(""), [K, q] = f(O[0] || null), J = s.useRef(null), { indeterminateValues: Y, effectiveCheckedSet: ae } = d(() => !c || T !== "cascade" ? {
+var E = ({ children: o, nodes: c, className: u, multiSelect: v = !1, checkable: S = !1, checkStrategy: E = "cascade", searchable: D = !1, defaultExpandedValues: O = [], defaultSelectedValues: k = [], defaultCheckedValues: A = [], onCheckedChange: j, onSelectedChange: M, width: te, virtualThreshold: ne = y, labels: N = {}, labelId: re, styles: P }) => {
+	let { t: F } = e("components"), { searchPlaceholder: I, searchAriaLabel: L = F("treeview.search_aria"), expandLabel: R = (e) => F("treeview.expand", { label: e }), collapseLabel: z = (e) => F("treeview.collapse", { label: e }) } = N, [B, V] = p(O), [H, ie] = p(k), [U, ae] = p(A), [W, oe] = p(""), [G, K] = p(k[0] || null), q = s.useRef(null), { indeterminateValues: J, effectiveCheckedSet: se } = f(() => !c || E !== "cascade" ? {
 		indeterminateValues: [],
-		effectiveCheckedSet: new Set(W)
-	} : w(c, new Set(W)), [
+		effectiveCheckedSet: new Set(U)
+	} : T(c, new Set(U)), [
 		c,
-		T,
-		W
-	]), X = l((e) => {
-		H((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, []), Z = l((e) => {
-		if (_) ne((t) => {
+		E,
+		U
+	]), Y = l((e) => {
+		V((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, []), X = l((e) => {
+		if (v) ie((t) => {
 			let n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
-			return j?.(n), n;
+			return M?.(n), n;
 		});
 		else {
 			let t = [e];
-			ne(t), j?.(t);
+			ie(t), M?.(t);
 		}
-	}, [_, j]), Q = l((e) => {
-		re((t) => {
+	}, [v, M]), Z = l((e) => {
+		ae((t) => {
 			let n;
-			if (!c) return n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], A?.(n), n;
-			if (T === "cascade") {
-				let { indeterminateValues: r } = w(c, new Set(t)), i = t.includes(e) && !r.includes(e), a = [e, ...S(c, e) ?? []];
+			if (!c) return n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], j?.(n), n;
+			if (E === "cascade") {
+				let { indeterminateValues: r } = T(c, new Set(t)), i = t.includes(e) && !r.includes(e), a = [e, ...C(c, e) ?? []];
 				n = i ? t.filter((e) => !a.includes(e)) : [...t, ...a.filter((e) => !t.includes(e))];
-				let { indeterminateValues: o, effectiveCheckedSet: s } = w(c, new Set(n));
-				A?.([...s].filter((e) => !o.includes(e)));
+				let { indeterminateValues: o, effectiveCheckedSet: s } = T(c, new Set(n));
+				j?.([...s].filter((e) => !o.includes(e)));
 			} else {
 				if (t.includes(e)) n = t.filter((t) => t !== e);
 				else {
-					let r = C(c, e) ?? [], i = S(c, e) ?? [], a = /* @__PURE__ */ new Set([...r, ...i]);
+					let r = w(c, e) ?? [], i = C(c, e) ?? [], a = /* @__PURE__ */ new Set([...r, ...i]);
 					n = [...t.filter((e) => !a.has(e)), e];
 				}
-				A?.(n);
+				j?.(n);
 			}
 			return n;
 		});
 	}, [
-		T,
+		E,
 		c,
-		A
-	]), oe = d(() => ({
-		expandedValues: V,
-		selectedValues: U,
-		checkedValues: W,
-		indeterminateValues: Y,
-		focusedValue: K,
-		toggleExpand: X,
-		select: Z,
-		toggleCheck: Q,
-		setFocusedValue: q,
-		containerRef: J,
-		multiSelect: _,
-		checkable: x,
-		checkStrategy: T,
-		searchQuery: G,
+		j
+	]), ce = f(() => ({
+		expandedValues: B,
+		selectedValues: H,
+		checkedValues: U,
+		indeterminateValues: J,
+		focusedValue: G,
+		toggleExpand: Y,
+		select: X,
+		toggleCheck: Z,
+		setFocusedValue: K,
+		containerRef: q,
+		multiSelect: v,
+		checkable: S,
+		checkStrategy: E,
+		searchQuery: W,
 		labels: {
-			expandLabel: z,
-			collapseLabel: B
+			expandLabel: R,
+			collapseLabel: z
 		}
 	}), [
-		V,
+		B,
+		H,
 		U,
-		W,
+		J,
+		G,
 		Y,
-		K,
 		X,
 		Z,
-		Q,
-		_,
-		x,
-		T,
-		G,
-		z,
-		B
-	]), $ = d(() => c ? b(c, V, G) : [], [
+		v,
+		S,
+		E,
+		W,
+		R,
+		z
+	]), Q = f(() => c ? x(c, B, W) : [], [
 		c,
-		V,
-		G
-	]), se = !!c && $.length >= te, ce = l((e, t, n) => {
+		B,
+		W
+	]), le = !!c && Q.length >= ne, $ = l((e) => {
+		let t = q.current;
+		if (!t || !e) return;
+		let n = Array.from(t.querySelectorAll("[role=\"treeitem\"]")).find((t) => t.getAttribute("data-value") === e);
+		n && n !== document.activeElement && n.focus();
+	}, []);
+	d(() => {
+		if (!c || !G) return;
+		let e = q.current, t = document.activeElement;
+		e && t && e.contains(t) && (t instanceof HTMLInputElement || $(G));
+	}, [
+		c,
+		G,
+		$
+	]);
+	let ue = l((e, t, n) => {
 		switch (e.key) {
 			case "Enter":
 			case " ":
-				e.preventDefault(), Z(t.value), x && Q(t.value);
+				e.preventDefault(), X(t.value), S && Z(t.value);
 				break;
 			case "ArrowDown":
-				e.preventDefault(), n < $.length - 1 && q($[n + 1].value);
+				e.preventDefault(), n < Q.length - 1 && K(Q[n + 1].value);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), n > 0 && q($[n - 1].value);
+				e.preventDefault(), n > 0 && K(Q[n - 1].value);
 				break;
 			case "Home":
-				e.preventDefault(), $.length > 0 && q($[0].value);
+				e.preventDefault(), Q.length > 0 && K(Q[0].value);
 				break;
 			case "End":
-				e.preventDefault(), $.length > 0 && q($[$.length - 1].value);
+				e.preventDefault(), Q.length > 0 && K(Q[Q.length - 1].value);
 				break;
 			case "ArrowRight":
-				e.preventDefault(), t.hasChildren && !V.includes(t.value) ? X(t.value) : t.hasChildren && n < $.length - 1 && q($[n + 1].value);
+				e.preventDefault(), t.hasChildren && !B.includes(t.value) ? Y(t.value) : t.hasChildren && n < Q.length - 1 && K(Q[n + 1].value);
 				break;
-			case "ArrowLeft": if (e.preventDefault(), t.hasChildren && V.includes(t.value)) X(t.value);
-			else for (let e = n - 1; e >= 0; e--) if ($[e].depth < t.depth) {
-				q($[e].value);
+			case "ArrowLeft": if (e.preventDefault(), t.hasChildren && B.includes(t.value)) Y(t.value);
+			else for (let e = n - 1; e >= 0; e--) if (Q[e].depth < t.depth) {
+				K(Q[e].value);
 				break;
 			}
 		}
 	}, [
-		$,
-		V,
-		Z,
-		x,
 		Q,
-		X
-	]), le = l((e, i) => {
-		let o = U.includes(e.value), s = ae.has(e.value), c = Y.includes(e.value), l = V.includes(e.value), u = K === e.value, d = y(e.label);
-		return /* @__PURE__ */ m("div", {
-			className: p(a.item, o && a.selected, e.disabled && a.disabled, F?.item),
+		B,
+		X,
+		S,
+		Z,
+		Y
+	]), de = l((e, i) => {
+		let o = H.includes(e.value), s = se.has(e.value), c = J.includes(e.value), l = B.includes(e.value), u = G === e.value, d = b(e.label);
+		return /* @__PURE__ */ h("div", {
+			className: m(a.item, o && a.selected, e.disabled && a.disabled, P?.item),
 			role: "treeitem",
 			"aria-expanded": e.hasChildren ? l : void 0,
 			"aria-selected": o,
 			"aria-disabled": e.disabled,
-			"aria-setsize": $.length,
+			"aria-setsize": Q.length,
 			"aria-posinset": i + 1,
 			"aria-level": e.depth + 1,
 			"data-value": e.value,
 			tabIndex: u ? 0 : -1,
 			onClick: (t) => {
-				t.stopPropagation(), q(e.value), e.disabled || (_ && x ? Q(e.value) : Z(e.value));
+				t.stopPropagation(), K(e.value), e.disabled || (v && S ? Z(e.value) : X(e.value));
 			},
 			onKeyDown: (t) => {
-				t.key !== "Tab" && t.stopPropagation(), ce(t, e, i);
+				t.key !== "Tab" && t.key !== "Escape" && t.stopPropagation(), ue(t, e, i);
 			},
 			onFocus: (t) => {
-				t.stopPropagation(), q(e.value);
+				t.stopPropagation(), K(e.value);
 			},
 			style: { paddingLeft: e.depth * 20 },
-			children: /* @__PURE__ */ m(r, {
-				className: p(a.labelContainer, F?.labelContainer),
+			children: /* @__PURE__ */ h(r, {
+				className: m(a.labelContainer, P?.labelContainer),
 				active: o,
 				disabled: e.disabled,
-				icon: /* @__PURE__ */ h("div", {
-					className: p(a.iconWrapper, F?.iconWrapper),
+				icon: /* @__PURE__ */ g("div", {
+					className: m(a.iconWrapper, P?.iconWrapper),
 					children: [
-						e.hasChildren ? /* @__PURE__ */ m("button", {
+						e.hasChildren ? /* @__PURE__ */ h("button", {
 							type: "button",
-							className: p(a.expandBtn, l && a.expanded, F?.expandBtn),
+							className: m(a.expandBtn, l && a.expanded, P?.expandBtn),
 							onClick: (t) => {
-								t.stopPropagation(), e.disabled || X(e.value);
+								t.stopPropagation(), e.disabled || Y(e.value);
 							},
 							disabled: e.disabled,
-							"aria-label": l ? B(d) : z(d),
+							"aria-label": l ? z(d) : R(d),
 							tabIndex: -1,
-							children: /* @__PURE__ */ m(n, {
+							children: /* @__PURE__ */ h(n, {
 								component: t,
 								size: "sm"
 							})
-						}) : /* @__PURE__ */ m("span", { className: a.spacer }),
-						x && /* @__PURE__ */ m("input", {
+						}) : /* @__PURE__ */ h("span", { className: a.spacer }),
+						S && /* @__PURE__ */ h("input", {
 							type: "checkbox",
-							className: p(a.checkbox, F?.checkbox),
+							className: m(a.checkbox, P?.checkbox),
 							checked: s && !c,
 							ref: (e) => {
 								e && (e.indeterminate = c);
 							},
 							onChange: (t) => {
-								t.stopPropagation(), e.disabled || Q(e.value);
+								t.stopPropagation(), e.disabled || Z(e.value);
 							},
 							disabled: e.disabled,
 							onClick: (e) => e.stopPropagation(),
 							"aria-label": d,
 							tabIndex: -1
 						}),
-						e.icon && /* @__PURE__ */ m("span", {
-							className: p(a.icon, F?.icon),
+						e.icon && /* @__PURE__ */ h("span", {
+							className: m(a.icon, P?.icon),
 							children: e.icon
 						})
 					]
@@ -257,83 +272,83 @@ var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable:
 			})
 		}, e.value);
 	}, [
-		U,
-		ae,
-		Y,
-		V,
-		K,
-		$.length,
-		_,
-		x,
-		Z,
-		Q,
+		H,
+		se,
+		J,
+		B,
+		G,
+		Q.length,
+		v,
+		S,
 		X,
-		ce,
+		Z,
+		Y,
+		ue,
+		R,
 		z,
-		B,
-		F
+		P
 	]);
-	return /* @__PURE__ */ m(g.Provider, {
-		value: oe,
-		children: /* @__PURE__ */ h("div", {
-			ref: J,
+	return /* @__PURE__ */ h(_.Provider, {
+		value: ce,
+		children: /* @__PURE__ */ g("div", {
+			ref: q,
 			"data-testid": "tree-view-root",
-			className: p("wim-tree-view", a.root, !!c && a.dataDriven, u, F?.root),
+			className: m("wim-tree-view", a.root, !!c && a.dataDriven, u, P?.root),
 			role: "tree",
 			"aria-label": N.treeAriaLabel,
-			"aria-labelledby": N.treeAriaLabel ? void 0 : P,
+			"aria-labelledby": N.treeAriaLabel ? void 0 : re,
 			style: {
-				width: M,
+				width: te,
 				maxWidth: "100%"
 			},
-			tabIndex: K ? -1 : 0,
+			tabIndex: G ? -1 : 0,
 			onFocus: (e) => {
-				e.target === J.current && (c ? K ? q(K) : $.length > 0 && q($[0].value) : K ? (J.current?.querySelector(`[role="treeitem"][data-value="${K}"]`))?.focus() : (J.current?.querySelector("[role=\"treeitem\"]"))?.focus());
+				e.target === q.current && (c ? G ? $(G) : Q.length > 0 && (K(Q[0].value), $(Q[0].value)) : G ? (q.current?.querySelector(`[role="treeitem"][data-value="${G}"]`))?.focus() : (q.current?.querySelector("[role=\"treeitem\"]"))?.focus());
 			},
-			children: [E && /* @__PURE__ */ m("div", {
-				className: p(a.search, F?.search),
-				children: /* @__PURE__ */ m("input", {
+			children: [D && /* @__PURE__ */ h("div", {
+				className: m(a.search, P?.search),
+				children: /* @__PURE__ */ h("input", {
 					type: "text",
 					"data-testid": "tree-view-search-input",
-					className: p(a.searchInput, F?.searchInput),
-					placeholder: L,
-					value: G,
-					onChange: (e) => ie(e.target.value),
-					"aria-label": R
+					className: m(a.searchInput, P?.searchInput),
+					placeholder: I,
+					value: W,
+					onChange: (e) => oe(e.target.value),
+					"aria-label": L
 				})
-			}), c ? se ? /* @__PURE__ */ m(i, {
-				items: $,
-				itemHeight: v,
+			}), c ? le ? /* @__PURE__ */ h(i, {
+				items: Q,
+				itemHeight: ee,
 				height: 400,
-				renderItem: le,
+				renderItem: de,
 				itemRole: "none",
 				role: "presentation"
-			}) : $.map((e, t) => le(e, t)) : o]
+			}) : Q.map((e, t) => de(e, t)) : o]
 		})
 	});
-}, E = ({ value: e, label: i, icon: c, children: l, className: u, disabled: d = !1 }) => {
-	let { expandedValues: f, selectedValues: g, checkedValues: v, indeterminateValues: ee, focusedValue: b, toggleExpand: x, select: S, toggleCheck: C, setFocusedValue: w, containerRef: T, multiSelect: D, checkable: O, searchQuery: k } = _(), A = s.useId(), j = `wim-tree-view-item-checkbox-${A}`, M = `wim-tree-view-item-label-${A}`, te = y(i), N = !k || te.toLowerCase().includes(k.toLowerCase()), P = s.useMemo(() => {
+}, D = ({ value: e, label: i, icon: c, children: l, className: u, disabled: d = !1 }) => {
+	let { expandedValues: f, selectedValues: p, checkedValues: _, indeterminateValues: ee, focusedValue: y, toggleExpand: x, select: S, toggleCheck: C, setFocusedValue: w, containerRef: T, multiSelect: E, checkable: O, searchQuery: k } = v(), A = s.useId(), j = `wim-tree-view-item-checkbox-${A}`, M = `wim-tree-view-item-label-${A}`, te = b(i), ne = !k || te.toLowerCase().includes(k.toLowerCase()), N = s.useMemo(() => {
 		if (!k || !l) return !1;
 		let e = (t) => s.Children.toArray(t).some((t) => {
-			if (!s.isValidElement(t) || t.type !== E) return !1;
+			if (!s.isValidElement(t) || t.type !== D) return !1;
 			let n = t.props, r = n.label;
-			return y(r).toLowerCase().includes(k.toLowerCase()) ? !0 : n.children ? e(n.children) : !1;
+			return b(r).toLowerCase().includes(k.toLowerCase()) ? !0 : n.children ? e(n.children) : !1;
 		});
 		return e(l);
-	}, [l, k]), F = !!k && P, I = f.includes(e) || F, L = g.includes(e), R = v.includes(e), z = ee.includes(e), B = !!s.Children.count(l), { shouldRender: V, isVisualExpanded: H, handleTransitionEnd: U } = o(I);
-	return k && !N && !P ? null : /* @__PURE__ */ h("div", {
-		className: p(a.item, L && a.selected, d && a.disabled, u),
+	}, [l, k]), re = !!k && N, P = f.includes(e) || re, F = p.includes(e), I = _.includes(e), L = ee.includes(e), R = !!s.Children.count(l), { shouldRender: z, isVisualExpanded: B, handleTransitionEnd: V } = o(P);
+	return k && !ne && !N ? null : /* @__PURE__ */ g("div", {
+		className: m(a.item, F && a.selected, d && a.disabled, u),
 		role: "treeitem",
-		"aria-expanded": B ? I : void 0,
-		"aria-selected": L,
+		"aria-expanded": R ? P : void 0,
+		"aria-selected": F,
 		"aria-disabled": d,
 		"data-value": e,
 		onClick: (t) => {
-			t.stopPropagation(), w(e), d || (D && O ? C(e) : S(e));
+			t.stopPropagation(), w(e), d || (E && O ? C(e) : S(e));
 		},
 		onKeyDown: (t) => {
 			if (d) return;
-			t.key !== "Tab" && t.stopPropagation();
+			t.key !== "Tab" && t.key !== "Escape" && t.stopPropagation();
 			let n = Array.from(T.current?.querySelectorAll("[role=\"treeitem\"]:not([aria-disabled=\"true\"])") || []), r = n.indexOf(t.currentTarget);
 			switch (t.key) {
 				case "Enter":
@@ -353,9 +368,9 @@ var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable:
 					t.preventDefault(), n.length > 0 && n[n.length - 1].focus();
 					break;
 				case "ArrowRight":
-					B && (I ? (t.preventDefault(), r < n.length - 1 && n[r + 1].focus()) : (t.preventDefault(), x(e)));
+					R && (P ? (t.preventDefault(), r < n.length - 1 && n[r + 1].focus()) : (t.preventDefault(), x(e)));
 					break;
-				case "ArrowLeft": if (B && I) t.preventDefault(), x(e);
+				case "ArrowLeft": if (R && P) t.preventDefault(), x(e);
 				else {
 					t.preventDefault();
 					let e = t.currentTarget.parentElement?.closest("[role=\"treeitem\"]");
@@ -366,37 +381,37 @@ var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable:
 		onFocus: (t) => {
 			t.stopPropagation(), w(e);
 		},
-		tabIndex: b === e ? 0 : -1,
-		children: [/* @__PURE__ */ m(r, {
+		tabIndex: y === e ? 0 : -1,
+		children: [/* @__PURE__ */ h(r, {
 			id: M,
 			className: a.labelContainer,
-			active: L,
+			active: F,
 			disabled: d,
-			icon: /* @__PURE__ */ h("div", {
+			icon: /* @__PURE__ */ g("div", {
 				className: a.iconWrapper,
 				children: [
-					B && /* @__PURE__ */ m("button", {
+					R && /* @__PURE__ */ h("button", {
 						type: "button",
-						className: p(a.expandBtn, I && a.expanded),
+						className: m(a.expandBtn, P && a.expanded),
 						onClick: (t) => {
-							t.stopPropagation(), !d && B && x(e);
+							t.stopPropagation(), !d && R && x(e);
 						},
 						disabled: d,
-						"aria-label": I ? `Collapse ${typeof i == "string" ? i : ""}` : `Expand ${typeof i == "string" ? i : ""}`,
+						"aria-label": P ? `Collapse ${typeof i == "string" ? i : ""}` : `Expand ${typeof i == "string" ? i : ""}`,
 						tabIndex: -1,
-						children: /* @__PURE__ */ m(n, {
+						children: /* @__PURE__ */ h(n, {
 							component: t,
 							size: "sm"
 						})
 					}),
-					!B && /* @__PURE__ */ m("span", { className: a.spacer }),
-					O && /* @__PURE__ */ m("input", {
+					!R && /* @__PURE__ */ h("span", { className: a.spacer }),
+					O && /* @__PURE__ */ h("input", {
 						id: j,
 						type: "checkbox",
 						className: a.checkbox,
-						checked: R && !z,
+						checked: I && !L,
 						ref: (e) => {
-							e && (e.indeterminate = z);
+							e && (e.indeterminate = L);
 						},
 						onChange: (t) => {
 							t.stopPropagation(), d || C(e);
@@ -406,18 +421,18 @@ var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable:
 						"aria-labelledby": M,
 						tabIndex: -1
 					}),
-					c && /* @__PURE__ */ m("span", {
+					c && /* @__PURE__ */ h("span", {
 						className: a.icon,
 						children: c
 					})
 				]
 			}),
 			children: i
-		}), B && V && /* @__PURE__ */ m("div", {
-			className: p(a.children, H && a.expanded),
-			onTransitionEnd: U,
-			style: { gridTemplateRows: H ? "1fr" : "0fr" },
-			children: /* @__PURE__ */ m("div", {
+		}), R && z && /* @__PURE__ */ h("div", {
+			className: m(a.children, B && a.expanded),
+			onTransitionEnd: V,
+			style: { gridTemplateRows: B ? "1fr" : "0fr" },
+			children: /* @__PURE__ */ h("div", {
 				className: a.childrenInner,
 				role: "group",
 				children: l
@@ -425,8 +440,8 @@ var T = ({ children: o, nodes: c, className: u, multiSelect: _ = !1, checkable:
 		})]
 	});
 };
-T.displayName = "TreeView", E.displayName = "TreeView.Item";
-var D = T;
-D.Item = E;
+E.displayName = "TreeView", D.displayName = "TreeView.Item";
+var O = E;
+O.Item = D;
 //#endregion
-export { D as TreeView, D as default, E as TreeViewItem };
+export { O as TreeView, O as default, D as TreeViewItem };

package/dist/components/form/Combobox/Combobox.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/BaseListItem/BaseListItem.cjs"),n=require("../InputBase/InputBase.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./combobox.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({options:e=[],onChange:c,placeholder:l,showSearchIcon:u=!0,allowClear:d=!0,defaultValue:f=``,className:p,disabled:m=!1,label:h,error:g,required:_,layout:v,fullWidth:y=!1,id:b,labels:x={},...S})=>{let{noResults:C=`No results found`}=x,[w,T]=(0,a.useState)(!1),[E,D]=(0,a.useState)(f),[O,k]=(0,a.useState)(-1),[A,j]=(0,a.useState)(!1),M=(0,a.useRef)(null),N=(0,a.useId)(),P=b||`wim-combobox-${N}`,F=`${P}-list`,I=h?`${P}-label`:void 0,L=g?`${P}-error`:void 0,R=(0,a.useMemo)(()=>{let t=(E||``).toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))},[e,E]);(0,a.useEffect)(()=>{let e=e=>{M.current&&!M.current.contains(e.target)&&T(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let z=e=>{let t=e.target.value;D(t),T(!0),k(-1)},B=e=>{D(e.label),T(!1),c&&c(e)};return(0,s.jsx)(r.FieldTemplate,{label:h,error:g,required:_,layout:v,labelId:I,htmlFor:P,errorId:L,className:p,children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-combobox`,i.default.root,y&&i.default.fullWidth),ref:M,onMouseMove:()=>j(!1),"data-keyboard-nav":A,children:[(0,s.jsx)(n.InputBase,{disabled:m,allowClear:d,hasValue:!!E,onClear:()=>D(``),intent:g?`danger`:`default`,leftIcon:u?`SearchIcon`:void 0,fullWidth:y,rightIcons:[{name:`ChevronDownIcon`,rotated:w,onClick:()=>T(!w)}],children:(0,s.jsx)(`input`,{id:P,className:i.default.input,placeholder:l,value:E,onChange:z,onKeyDown:e=>{if(j(!0),!w&&e.key===`ArrowDown`){T(!0);return}switch(e.key){case`ArrowDown`:k(e=>e<R.length-1?e+1:0);break;case`ArrowUp`:k(e=>e<=0?R.length-1:e-1);break;case`Enter`:O>=0&&O<R.length&&B(R[O]);break;case`Escape`:T(!1);break;case`Tab`:T(!1)}},onFocus:()=>T(!0),disabled:m,autoComplete:`off`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":w,"aria-controls":w?F:void 0,"aria-labelledby":I,"aria-describedby":L,required:_,"aria-invalid":!!g,"aria-activedescendant":w&&O>=0?`${F}-option-${O}`:void 0,...S})}),w&&R.length>0&&(0,s.jsx)(`div`,{className:i.default.dropdown,children:(0,s.jsx)(`ul`,{id:F,className:i.default.list,role:`listbox`,"aria-labelledby":I,children:R.map((e,n)=>(0,s.jsx)(t.BaseListItem,{asChild:!0,id:`${F}-option-${n}`,className:(0,o.default)(i.default.option,n===O&&i.default.selected),active:n===O,onClick:()=>B(e),onMouseEnter:()=>k(n),role:`option`,"aria-selected":n===O,children:(0,s.jsx)(`li`,{children:e.label})},e.value))})}),w&&R.length===0&&(0,s.jsx)(`div`,{className:i.default.dropdown,children:(0,s.jsx)(`div`,{className:i.default.empty,role:`region`,"aria-live":`polite`,children:C})})]})})};c.displayName=`Combobox`,exports.Combobox=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/BaseListItem/BaseListItem.cjs"),n=require("../InputBase/InputBase.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./combobox.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({options:e=[],onChange:c,placeholder:l,showSearchIcon:u=!0,allowClear:d=!0,defaultValue:f=``,className:p,disabled:m=!1,label:h,error:g,required:_,layout:v,fullWidth:y=!1,id:b,labels:x={},...S})=>{let{noResults:C=`No results found`}=x,[w,T]=(0,a.useState)(!1),[E,D]=(0,a.useState)(f),[O,k]=(0,a.useState)(-1),[A,j]=(0,a.useState)(!1),M=(0,a.useRef)(null),N=(0,a.useId)(),P=b||`wim-combobox-${N}`,F=`${P}-list`,I=h?`${P}-label`:void 0,L=g?`${P}-error`:void 0,R=(0,a.useMemo)(()=>{let t=(E||``).toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))},[e,E]);(0,a.useEffect)(()=>{let e=e=>{M.current&&!M.current.contains(e.target)&&T(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let z=e=>{let t=e.target.value;D(t),T(!0),k(-1)},B=e=>{D(e.label),T(!1),c&&c(e)};return(0,s.jsx)(r.FieldTemplate,{label:h,error:g,required:_,layout:v,labelId:I,htmlFor:P,errorId:L,className:p,children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-combobox`,i.default.root,y&&i.default.fullWidth),ref:M,onMouseMove:()=>j(!1),"data-keyboard-nav":A,children:[(0,s.jsx)(n.InputBase,{disabled:m,allowClear:d,hasValue:!!E,onClear:()=>D(``),intent:g?`danger`:`default`,leftIcon:u?`SearchIcon`:void 0,fullWidth:y,rightIcons:[{name:`ChevronDownIcon`,rotated:w,onClick:()=>T(!w),decorative:!0}],children:(0,s.jsx)(`input`,{id:P,className:i.default.input,placeholder:l,value:E,onChange:z,onKeyDown:e=>{if(j(!0),!w&&e.key===`ArrowDown`){T(!0);return}switch(e.key){case`ArrowDown`:k(e=>e<R.length-1?e+1:0);break;case`ArrowUp`:k(e=>e<=0?R.length-1:e-1);break;case`Enter`:O>=0&&O<R.length&&B(R[O]);break;case`Escape`:T(!1);break;case`Tab`:T(!1)}},onFocus:()=>T(!0),disabled:m,autoComplete:`off`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":w,"aria-controls":w?F:void 0,"aria-labelledby":I,"aria-describedby":L,required:_,"aria-invalid":!!g,"aria-activedescendant":w&&O>=0?`${F}-option-${O}`:void 0,...S})}),w&&R.length>0&&(0,s.jsx)(`div`,{className:i.default.dropdown,children:(0,s.jsx)(`ul`,{id:F,className:i.default.list,role:`listbox`,"aria-labelledby":I,children:R.map((e,n)=>(0,s.jsx)(t.BaseListItem,{asChild:!0,id:`${F}-option-${n}`,className:(0,o.default)(i.default.option,n===O&&i.default.selected),active:n===O,onClick:()=>B(e),onMouseEnter:()=>k(n),role:`option`,"aria-selected":n===O,children:(0,s.jsx)(`li`,{children:e.label})},e.value))})}),w&&R.length===0&&(0,s.jsx)(`div`,{className:i.default.dropdown,children:(0,s.jsx)(`div`,{className:i.default.empty,role:`region`,"aria-live":`polite`,children:C})})]})})};c.displayName=`Combobox`,exports.Combobox=c;

package/dist/components/form/Combobox/Combobox.js

@@ -50,7 +50,8 @@ var f = ({ options: f = [], onChange: p, placeholder: m, showSearchIcon: h = !0,
 					rightIcons: [{
 						name: "ChevronDownIcon",
 						rotated: k,
-						onClick: () => A(!k)
+						onClick: () => A(!k),
+						decorative: !0
 					}],
 					children: /* @__PURE__ */ u("input", {
 						id: z,

package/dist/components/form/DatePicker/DatePicker.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../Input/input.module.cjs"),c=require("../../data-display/Calendar/Calendar.cjs"),l=require("../../_internal/mergeRefs.cjs"),u=require("./date-picker.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=(0,d.forwardRef)(({intent:e=`default`,variant:m=`outline`,fullWidth:h=!1,className:g,disabled:_,value:v,defaultValue:y,onChange:b,format:x=`YYYY-MM-DD`,clearable:S=!0,placeholder:C,minDate:ee,maxDate:te,disabledDates:ne,label:w,error:T,required:E,layout:D,id:re,labels:O,width:k,asChild:A=!1,children:j,...M},N)=>{let[P,F]=(0,d.useState)(!1),[I,L]=(0,d.useState)(y||null),R=(0,d.useRef)(null),z=(0,d.useRef)(null),B=l.mergeRefs(R,N),{t:V}=n.useWimTranslation(`components`),H=(0,d.useId)(),U=re||`wim-datepicker-${H}`,W=`${U}-dropdown`,G=w?`${U}-label`:void 0,K=T?`${U}-error`:void 0,q=v!==void 0,J=q?v:I,Y=C??O?.placeholder,X=_,Z=T?`danger`:e;(0,d.useEffect)(()=>{let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,d.useEffect)(()=>{let e=e=>{e.key===`Escape`&&P&&(F(!1),z.current?.focus())};return P&&document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[P]);let Q=e=>{if(!e)return``;let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,`0`),r=String(e.getDate()).padStart(2,`0`);return x.replace(`YYYY`,String(t)).replace(`MM`,n).replace(`DD`,r)},ie=e=>{q||L(e),b?.(e),F(!1),z.current?.focus()},ae=e=>{e?.stopPropagation(),X||(q||L(null),b?.(null))},$=()=>{X||F(!P)};return(0,d.useEffect)(()=>{if(P){let e=setTimeout(()=>{let e=R.current?.querySelector(`[data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus`);e?e.focus():R.current?.querySelector(`[data-calendar-day]:not([data-other-month]):not(:disabled)`)?.focus()},50);return()=>clearTimeout(e)}},[P]),(0,p.jsx)(o.FieldTemplate,{label:w,error:T,required:E,layout:D,labelId:G,htmlFor:U,errorId:K,className:g,children:(0,p.jsxs)(A?t.Root:`div`,{ref:B,className:(0,f.default)(`wim-date-picker`,u.default.root,h&&u.default.fullWidth),children:[(0,p.jsxs)(t.Slottable,{children:[(0,p.jsx)(a.InputBase,{intent:Z,variant:m,width:k,fullWidth:h,disabled:X,allowClear:S,hasValue:!!J,onClear:ae,rightIcons:[{name:`ChevronDownIcon`,rotated:P,onClick:$}],children:(0,p.jsx)(`input`,{id:U,ref:z,type:`text`,readOnly:!0,role:`combobox`,className:(0,f.default)(s.default.root,u.default.input),value:Q(J),placeholder:Y,disabled:X,onClick:$,onKeyDown:e=>{X||(e.key===`Escape`?(F(!1),z.current?.focus()):(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&(e.altKey||!P))&&(e.preventDefault(),F(!P)))},"aria-haspopup":`dialog`,"aria-expanded":P,"aria-controls":P?W:void 0,"aria-invalid":Z===`danger`,"aria-describedby":K,"aria-labelledby":G,"aria-required":E,...M})}),(0,p.jsx)(r.Transition,{show:P&&!_,preset:`fade`,id:W,className:u.default.dropdown,children:(0,p.jsx)(i.FocusTrap,{active:P,initialFocus:!1,children:(0,p.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":G,"aria-label":G?void 0:M[`aria-label`]??V(`datepicker.dialog`),children:(0,p.jsx)(c.Calendar,{value:J??void 0,onChange:ie})})})})]}),j]})})});m.displayName=`DatePicker`,exports.DatePicker=m,exports.default=m;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../Input/input.module.cjs"),c=require("../../data-display/Calendar/Calendar.cjs"),l=require("../../_internal/mergeRefs.cjs"),u=require("./date-picker.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=(0,d.forwardRef)(({intent:e=`default`,variant:m=`outline`,fullWidth:h=!1,className:g,disabled:_,value:v,defaultValue:y,onChange:b,format:x=`YYYY-MM-DD`,clearable:S=!0,placeholder:C,minDate:ee,maxDate:te,disabledDates:ne,label:w,error:T,required:E,layout:D,id:re,labels:O,width:k,asChild:A=!1,children:j,...M},N)=>{let[P,F]=(0,d.useState)(!1),[I,L]=(0,d.useState)(y||null),R=(0,d.useRef)(null),z=(0,d.useRef)(null),B=l.mergeRefs(R,N),{t:V}=n.useWimTranslation(`components`),H=(0,d.useId)(),U=re||`wim-datepicker-${H}`,W=`${U}-dropdown`,G=w?`${U}-label`:void 0,K=T?`${U}-error`:void 0,q=v!==void 0,J=q?v:I,Y=C??O?.placeholder,X=_,Z=T?`danger`:e;(0,d.useEffect)(()=>{let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,d.useEffect)(()=>{let e=e=>{e.key===`Escape`&&P&&(F(!1),z.current?.focus())};return P&&document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[P]);let Q=e=>{if(!e)return``;let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,`0`),r=String(e.getDate()).padStart(2,`0`);return x.replace(`YYYY`,String(t)).replace(`MM`,n).replace(`DD`,r)},ie=e=>{q||L(e),b?.(e),F(!1),z.current?.focus()},ae=e=>{e?.stopPropagation(),X||(q||L(null),b?.(null))},$=()=>{X||F(!P)};return(0,d.useEffect)(()=>{if(P){let e=setTimeout(()=>{let e=R.current?.querySelector(`[data-calendar-day][tabindex="0"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus`);e?e.focus():R.current?.querySelector(`[data-calendar-day]:not([data-other-month]):not(:disabled)`)?.focus()},50);return()=>clearTimeout(e)}},[P]),(0,p.jsx)(o.FieldTemplate,{label:w,error:T,required:E,layout:D,labelId:G,htmlFor:U,errorId:K,className:g,children:(0,p.jsxs)(A?t.Root:`div`,{ref:B,className:(0,f.default)(`wim-date-picker`,u.default.root,h&&u.default.fullWidth),children:[(0,p.jsxs)(t.Slottable,{children:[(0,p.jsx)(a.InputBase,{intent:Z,variant:m,width:k,fullWidth:h,disabled:X,allowClear:S,hasValue:!!J,onClear:ae,rightIcons:[{name:`ChevronDownIcon`,rotated:P,onClick:$,decorative:!0}],children:(0,p.jsx)(`input`,{id:U,ref:z,type:`text`,readOnly:!0,role:`combobox`,className:(0,f.default)(s.default.root,u.default.input),value:Q(J),placeholder:Y,disabled:X,onClick:$,onKeyDown:e=>{X||(e.key===`Escape`?(F(!1),z.current?.focus()):(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&(e.altKey||!P))&&(e.preventDefault(),F(!P)))},"aria-haspopup":`dialog`,"aria-expanded":P,"aria-controls":P?W:void 0,"aria-invalid":Z===`danger`,"aria-describedby":K,"aria-labelledby":G,"aria-required":E,...M})}),(0,p.jsx)(r.Transition,{show:P&&!_,preset:`fade`,id:W,className:u.default.dropdown,children:(0,p.jsx)(i.FocusTrap,{active:P,initialFocus:!1,children:(0,p.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":G,"aria-label":G?void 0:M[`aria-label`]??V(`datepicker.dialog`),children:(0,p.jsx)(c.Calendar,{value:J??void 0,onChange:ie})})})})]}),j]})})});m.displayName=`DatePicker`,exports.DatePicker=m,exports.default=m;