wimui 0.1.0

package/dist/components/data-display/TreeView/TreeView.d.ts

@@ -0,0 +1,95 @@
+import { default as React } from 'react';
+/**
+ * データ駆動モードで使用するノード型。
+ */
+export type TreeViewNode = {
+    value: string;
+    label: React.ReactNode;
+    children?: TreeViewNode[];
+    disabled?: boolean;
+    icon?: React.ReactNode;
+};
+export type TreeViewLabels = {
+    searchPlaceholder?: string;
+    searchAriaLabel?: string;
+    expandLabel?: (label: string) => string;
+    collapseLabel?: (label: string) => string;
+    treeAriaLabel?: string;
+};
+export type TreeViewProps = {
+    /** JSX-based items (children API). Use this when not using `nodes`. */
+    children?: React.ReactNode;
+    /** Node array for data-driven mode. */
+    nodes?: TreeViewNode[];
+    /** Additional class names */
+    className?: string;
+    /** Whether multiple nodes can be selected */
+    multiSelect?: boolean;
+    /** Whether nodes show checkboxes */
+    checkable?: boolean;
+    /**
+     * Check selection behavior.
+     * - cascade: checking a parent selects all children; partially checked children make the parent indeterminate
+     * - exclusive: parent and children are mutually exclusive
+     */
+    checkStrategy?: "cascade" | "exclusive";
+    /** Whether to show a search input for filtering nodes */
+    searchable?: boolean;
+    /** Values of the nodes expanded initially */
+    defaultExpandedValues?: string[];
+    /** Values of the nodes selected initially */
+    defaultSelectedValues?: string[];
+    /** Values of the nodes checked initially */
+    defaultCheckedValues?: string[];
+    /** Callback when the checked values change */
+    onCheckedChange?: (checked: string[]) => void;
+    /** Callback when the selected values change */
+    onSelectedChange?: (selected: string[]) => void;
+    /** Width of the tree (CSS value or number in px) */
+    width?: string | number;
+    /** Node count threshold at which virtualization kicks in. */
+    virtualThreshold?: number;
+    /** Labels for internationalization */
+    labels?: TreeViewLabels;
+    /** Accessibility label ID */
+    labelId?: string;
+    /** Custom styles for internal parts */
+    styles?: {
+        root?: string;
+        item?: string;
+        search?: string;
+        searchInput?: string;
+        labelContainer?: string;
+        iconWrapper?: string;
+        expandBtn?: string;
+        checkbox?: string;
+        icon?: string;
+    };
+};
+declare const TreeView: {
+    ({ children, nodes, className, multiSelect, checkable, checkStrategy, searchable, defaultExpandedValues, defaultSelectedValues, defaultCheckedValues, onCheckedChange, onSelectedChange, width, virtualThreshold, labels, labelId, styles: stylesProp, }: TreeViewProps): React.JSX.Element;
+    displayName: string;
+};
+type TreeViewItemProps = {
+    /** Unique value identifying the node */
+    value: string;
+    /** Label content of the node */
+    label: React.ReactNode;
+    /** Icon displayed next to the label */
+    icon?: React.ReactNode;
+    /** Child nodes */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+};
+export declare const TreeViewItem: {
+    ({ value, label, icon, children, className, disabled, }: TreeViewItemProps): React.JSX.Element | null;
+    displayName: string;
+};
+declare const TreeViewComponent: typeof TreeView & {
+    Item: typeof TreeViewItem;
+};
+export { TreeViewComponent as TreeView };
+export default TreeViewComponent;

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

@@ -0,0 +1,436 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/chevron-right.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+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";
+//#region src/components/data-display/TreeView/TreeView.tsx
+var g = c(null), _ = () => {
+	let e = u(g);
+	if (!e) throw Error("TreeView components must be used within a TreeView");
+	return e;
+}, v = 40, ee = 100;
+function y(e) {
+	return typeof e == "string" ? e : typeof e == "number" ? String(e) : "";
+}
+function b(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;
+		if (n && !o && !s) continue;
+		i.push({
+			...a,
+			depth: r,
+			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));
+	}
+	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) {
+	for (let n of e) {
+		if (n.value === t) {
+			let e = [], t = (n) => {
+				for (let r of n) e.push(r.value), r.children && t(r.children);
+			};
+			return n.children && t(n.children), e;
+		}
+		if (n.children) {
+			let e = S(n.children, t);
+			if (e !== null) return e;
+		}
+	}
+	return null;
+}
+function C(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]);
+			if (e !== null) return e;
+		}
+	}
+	return null;
+}
+function w(e, t) {
+	let n = [], r = new Set(t);
+	function i(e) {
+		if (!e.children?.length) return r.has(e.value) ? "checked" : "unchecked";
+		let t = e.children.map(i), a = t.every((e) => e === "checked"), o = t.some((e) => e !== "unchecked");
+		return a ? (r.add(e.value), "checked") : o ? (n.push(e.value), "indeterminate") : "unchecked";
+	}
+	for (let t of e) i(t);
+	return {
+		indeterminateValues: n,
+		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" ? {
+		indeterminateValues: [],
+		effectiveCheckedSet: new Set(W)
+	} : w(c, new Set(W)), [
+		c,
+		T,
+		W
+	]), X = l((e) => {
+		H((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, []), Z = l((e) => {
+		if (_) ne((t) => {
+			let n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
+			return j?.(n), n;
+		});
+		else {
+			let t = [e];
+			ne(t), j?.(t);
+		}
+	}, [_, j]), Q = l((e) => {
+		re((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) ?? []];
+				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)));
+			} 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]);
+					n = [...t.filter((e) => !a.has(e)), e];
+				}
+				A?.(n);
+			}
+			return n;
+		});
+	}, [
+		T,
+		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,
+		labels: {
+			expandLabel: z,
+			collapseLabel: B
+		}
+	}), [
+		V,
+		U,
+		W,
+		Y,
+		K,
+		X,
+		Z,
+		Q,
+		_,
+		x,
+		T,
+		G,
+		z,
+		B
+	]), $ = d(() => c ? b(c, V, G) : [], [
+		c,
+		V,
+		G
+	]), se = !!c && $.length >= te, ce = l((e, t, n) => {
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault(), Z(t.value), x && Q(t.value);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), n < $.length - 1 && q($[n + 1].value);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n > 0 && q($[n - 1].value);
+				break;
+			case "Home":
+				e.preventDefault(), $.length > 0 && q($[0].value);
+				break;
+			case "End":
+				e.preventDefault(), $.length > 0 && 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);
+				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);
+					break;
+				}
+				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),
+			role: "treeitem",
+			"aria-expanded": e.hasChildren ? l : void 0,
+			"aria-selected": o,
+			"aria-disabled": e.disabled,
+			"aria-setsize": $.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));
+			},
+			onKeyDown: (t) => {
+				t.stopPropagation(), ce(t, e, i);
+			},
+			onFocus: (t) => {
+				t.stopPropagation(), q(e.value);
+			},
+			style: { paddingLeft: e.depth * 20 },
+			children: /* @__PURE__ */ m(r, {
+				className: p(a.labelContainer, F?.labelContainer),
+				active: o,
+				disabled: e.disabled,
+				icon: /* @__PURE__ */ h("div", {
+					className: p(a.iconWrapper, F?.iconWrapper),
+					children: [
+						e.hasChildren ? /* @__PURE__ */ m("button", {
+							type: "button",
+							className: p(a.expandBtn, l && a.expanded, F?.expandBtn),
+							onClick: (t) => {
+								t.stopPropagation(), e.disabled || X(e.value);
+							},
+							disabled: e.disabled,
+							"aria-label": l ? B(d) : z(d),
+							tabIndex: -1,
+							children: /* @__PURE__ */ m(n, {
+								component: t,
+								size: "sm"
+							})
+						}) : /* @__PURE__ */ m("span", { className: a.spacer }),
+						x && /* @__PURE__ */ m("input", {
+							type: "checkbox",
+							className: p(a.checkbox, F?.checkbox),
+							checked: s && !c,
+							ref: (e) => {
+								e && (e.indeterminate = c);
+							},
+							onChange: (t) => {
+								t.stopPropagation(), e.disabled || Q(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),
+							children: e.icon
+						})
+					]
+				}),
+				children: e.label
+			})
+		}, e.value);
+	}, [
+		U,
+		ae,
+		Y,
+		V,
+		K,
+		$.length,
+		_,
+		x,
+		Z,
+		Q,
+		X,
+		ce,
+		z,
+		B,
+		F
+	]);
+	return /* @__PURE__ */ m(g.Provider, {
+		value: oe,
+		children: /* @__PURE__ */ h("div", {
+			ref: J,
+			"data-testid": "tree-view-root",
+			className: p("wim-tree-view", a.root, !!c && a.dataDriven, u, F?.root),
+			role: "tree",
+			"aria-label": N.treeAriaLabel,
+			"aria-labelledby": N.treeAriaLabel ? void 0 : P,
+			style: {
+				width: M,
+				maxWidth: "100%"
+			},
+			tabIndex: K ? -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());
+			},
+			children: [E && /* @__PURE__ */ m("div", {
+				className: p(a.search, F?.search),
+				children: /* @__PURE__ */ m("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
+				})
+			}), c ? se ? /* @__PURE__ */ m(i, {
+				items: $,
+				itemHeight: v,
+				height: 400,
+				renderItem: le,
+				itemRole: "none",
+				role: "presentation"
+			}) : $.map((e, t) => le(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(() => {
+		if (!k || !l) return !1;
+		let e = (t) => s.Children.toArray(t).some((t) => {
+			if (!s.isValidElement(t) || t.type !== E) return !1;
+			let n = t.props, r = n.label;
+			return y(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),
+		role: "treeitem",
+		"aria-expanded": B ? I : void 0,
+		"aria-selected": L,
+		"aria-disabled": d,
+		"data-value": e,
+		onClick: (t) => {
+			t.stopPropagation(), w(e), d || (D && O ? C(e) : S(e));
+		},
+		onKeyDown: (t) => {
+			if (d) return;
+			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":
+				case " ":
+					t.preventDefault(), S(e), O && C(e);
+					break;
+				case "ArrowDown":
+					t.preventDefault(), r < n.length - 1 && n[r + 1].focus();
+					break;
+				case "ArrowUp":
+					t.preventDefault(), r > 0 && n[r - 1].focus();
+					break;
+				case "Home":
+					t.preventDefault(), n.length > 0 && n[0].focus();
+					break;
+				case "End":
+					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)));
+					break;
+				case "ArrowLeft":
+					if (B && I) t.preventDefault(), x(e);
+					else {
+						t.preventDefault();
+						let e = t.currentTarget.parentElement?.closest("[role=\"treeitem\"]");
+						e && e.focus();
+					}
+					break;
+			}
+		},
+		onFocus: (t) => {
+			t.stopPropagation(), w(e);
+		},
+		tabIndex: b === e ? 0 : -1,
+		children: [/* @__PURE__ */ m(r, {
+			id: M,
+			className: a.labelContainer,
+			active: L,
+			disabled: d,
+			icon: /* @__PURE__ */ h("div", {
+				className: a.iconWrapper,
+				children: [
+					B && /* @__PURE__ */ m("button", {
+						type: "button",
+						className: p(a.expandBtn, I && a.expanded),
+						onClick: (t) => {
+							t.stopPropagation(), !d && B && x(e);
+						},
+						disabled: d,
+						"aria-label": I ? `Collapse ${typeof i == "string" ? i : ""}` : `Expand ${typeof i == "string" ? i : ""}`,
+						tabIndex: -1,
+						children: /* @__PURE__ */ m(n, {
+							component: t,
+							size: "sm"
+						})
+					}),
+					!B && /* @__PURE__ */ m("span", { className: a.spacer }),
+					O && /* @__PURE__ */ m("input", {
+						id: j,
+						type: "checkbox",
+						className: a.checkbox,
+						checked: R && !z,
+						ref: (e) => {
+							e && (e.indeterminate = z);
+						},
+						onChange: (t) => {
+							t.stopPropagation(), d || C(e);
+						},
+						disabled: d,
+						onClick: (e) => e.stopPropagation(),
+						"aria-labelledby": M,
+						tabIndex: -1
+					}),
+					c && /* @__PURE__ */ m("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", {
+				className: a.childrenInner,
+				role: "group",
+				children: l
+			})
+		})]
+	});
+};
+T.displayName = "TreeView", E.displayName = "TreeView.Item";
+var D = T;
+D.Item = E;
+//#endregion
+export { D as TreeView, D as default, E as TreeViewItem };

package/dist/components/data-display/TreeView/tree-view.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_16kgg_3`,t=`_item_16kgg_19`,n=`_enter_16kgg_1`,r=`_search_16kgg_22`,i=`_searchInput_16kgg_25`,a=`_selected_16kgg_60`,o=`_labelContainer_16kgg_60`,s=`_expandBtn_16kgg_67`,c=`_disabled_16kgg_70`,l=`_iconWrapper_16kgg_90`,u=`_expanded_16kgg_121`,d=`_spacer_16kgg_127`,f=`_checkbox_16kgg_131`,p=`_icon_16kgg_90`,m=`_label_16kgg_60`,h=`_children_16kgg_155`,g=`_childrenInner_16kgg_164`,_={root:e,"data-driven":`_data-driven_16kgg_19`,item:t,enter:n,search:r,searchInput:i,selected:a,labelContainer:o,expandBtn:s,disabled:c,iconWrapper:l,expanded:u,spacer:d,checkbox:f,icon:p,label:m,children:h,childrenInner:g};exports.checkbox=f,exports.children=h,exports.childrenInner=g,exports.default=_,exports.disabled=c,exports.enter=n,exports.expandBtn=s,exports.expanded=u,exports.icon=p,exports.iconWrapper=l,exports.item=t,exports.label=m,exports.labelContainer=o,exports.root=e,exports.search=r,exports.searchInput=i,exports.selected=a,exports.spacer=d;

package/dist/components/data-display/TreeView/tree-view.module.js

@@ -0,0 +1,24 @@
+"use client";
+//#region src/components/data-display/TreeView/tree-view.module.scss
+var e = "_root_16kgg_3", t = "_item_16kgg_19", n = "_enter_16kgg_1", r = "_search_16kgg_22", i = "_searchInput_16kgg_25", a = "_selected_16kgg_60", o = "_labelContainer_16kgg_60", s = "_expandBtn_16kgg_67", c = "_disabled_16kgg_70", l = "_iconWrapper_16kgg_90", u = "_expanded_16kgg_121", d = "_spacer_16kgg_127", f = "_checkbox_16kgg_131", p = "_icon_16kgg_90", m = "_label_16kgg_60", h = "_children_16kgg_155", g = "_childrenInner_16kgg_164", _ = {
+	root: e,
+	"data-driven": "_data-driven_16kgg_19",
+	item: t,
+	enter: n,
+	search: r,
+	searchInput: i,
+	selected: a,
+	labelContainer: o,
+	expandBtn: s,
+	disabled: c,
+	iconWrapper: l,
+	expanded: u,
+	spacer: d,
+	checkbox: f,
+	icon: p,
+	label: m,
+	children: h,
+	childrenInner: g
+};
+//#endregion
+export { f as checkbox, h as children, g as childrenInner, _ as default, c as disabled, n as enter, s as expandBtn, u as expanded, p as icon, l as iconWrapper, t as item, m as label, o as labelContainer, e as root, r as search, i as searchInput, a as selected, d as spacer };

package/dist/components/data-display/TreeView/useTreeViewItemExpansion.cjs

@@ -0,0 +1,2 @@
+"use client";
+let e=require("react");function t(t){let[,n]=(0,e.useState)(!1),[r,i]=(0,e.useState)(t),[a,o]=(0,e.useState)(t);return(0,e.useEffect)(()=>{if(t){i(!0);let e=setTimeout(()=>{o(!0)},10);return()=>clearTimeout(e)}else o(!1),n(!0)},[t]),{shouldRender:r,isVisualExpanded:a,handleTransitionEnd:e=>{e.propertyName===`grid-template-rows`&&!t&&(i(!1),n(!1))}}}exports.useTreeViewItemExpansion=t;

package/dist/components/data-display/TreeView/useTreeViewItemExpansion.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+/**
+ * Manages expand/collapse animation state for a TreeViewItem.
+ * Uses CSS grid-template-rows trick for smooth height transition.
+ */
+export declare function useTreeViewItemExpansion(isExpanded: boolean): {
+    shouldRender: boolean;
+    isVisualExpanded: boolean;
+    handleTransitionEnd: (e: React.TransitionEvent) => void;
+};

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

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/components/data-display/TreeView/useTreeViewItemExpansion.ts
+function n(n) {
+	let [, r] = t(!1), [i, a] = t(n), [o, s] = t(n);
+	return e(() => {
+		if (n) {
+			a(!0);
+			let e = setTimeout(() => {
+				s(!0);
+			}, 10);
+			return () => clearTimeout(e);
+		} else s(!1), r(!0);
+	}, [n]), {
+		shouldRender: i,
+		isVisualExpanded: o,
+		handleTransitionEnd: (e) => {
+			e.propertyName === "grid-template-rows" && !n && (a(!1), r(!1));
+		}
+	};
+}
+//#endregion
+export { n as useTreeViewItemExpansion };

package/dist/components/data-display/VirtualList/VirtualList.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./virtual-list.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=n.default.forwardRef(({items:e,itemHeight:a,height:o,renderItem:s,overscan:c=3,className:l,itemRole:u=`listitem`,role:d=`list`,"aria-label":f,"aria-labelledby":p},m)=>{let h=(0,n.useRef)(null),g=m||h,[_,v]=(0,n.useState)(0),y=typeof o==`number`?o:0;(0,n.useEffect)(()=>{let e=e=>{v(e.target.scrollTop)},t=g.current;return t&&t.addEventListener(`scroll`,e),()=>{t&&t.removeEventListener(`scroll`,e)}},[g]);let b=(0,n.useMemo)(()=>{let t=Math.max(0,Math.floor(_/a)-c),n=y>0?Math.ceil(y/a)+c*2:20;return{startNode:t,endNode:Math.min(e.length,t+n)}},[_,a,y,e.length,c]),x=e.slice(b.startNode,b.endNode),S=e.length*a;return(0,i.jsx)(`div`,{ref:g,className:(0,r.default)(`wim-virtual-list`,t.default.root,l),style:{height:o},role:d,tabIndex:0,"aria-label":f,"aria-labelledby":p,children:(0,i.jsx)(`div`,{className:t.default.viewport,style:{height:S},children:x.map((n,r)=>{let o=b.startNode+r;return(0,i.jsx)(`div`,{className:t.default.item,style:{height:a,transform:`translateY(${o*a}px)`},role:u,"aria-setsize":e.length,"aria-posinset":o+1,children:s(n,o)},o)})})})});exports.VirtualList=a;

package/dist/components/data-display/VirtualList/VirtualList.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface VirtualListProps<T> {
+    /** Array of items to display */
+    items: T[];
+    /** Height of each row (px) */
+    itemHeight: number;
+    /** Total height of the list (px) */
+    height: number | string;
+    /** Render function for each item */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** Number of extra items to render outside the visible range */
+    overscan?: number;
+    /** Additional class names */
+    className?: string;
+    /** Role of the element wrapping each item (for accessibility) */
+    itemRole?: string;
+    /** Role of the whole list (for accessibility) */
+    role?: string;
+    /** Accessible label */
+    "aria-label"?: string;
+    /** ID of the element that labels the list */
+    "aria-labelledby"?: string;
+}
+export declare const VirtualList: <T>(props: VirtualListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

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

@@ -0,0 +1,58 @@
+"use client";
+import e from "./virtual-list.module.js";
+import t, { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import o from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+var c = t.forwardRef(({ items: t, itemHeight: c, height: l, renderItem: u, overscan: d = 3, className: f, itemRole: p = "listitem", role: m = "list", "aria-label": h, "aria-labelledby": g }, _) => {
+	let v = i(null), y = _ || v, [b, x] = a(0), S = typeof l == "number" ? l : 0;
+	n(() => {
+		let e = (e) => {
+			x(e.target.scrollTop);
+		}, t = y.current;
+		return t && t.addEventListener("scroll", e), () => {
+			t && t.removeEventListener("scroll", e);
+		};
+	}, [y]);
+	let C = r(() => {
+		let e = Math.max(0, Math.floor(b / c) - d), n = S > 0 ? Math.ceil(S / c) + d * 2 : 20;
+		return {
+			startNode: e,
+			endNode: Math.min(t.length, e + n)
+		};
+	}, [
+		b,
+		c,
+		S,
+		t.length,
+		d
+	]), w = t.slice(C.startNode, C.endNode), T = t.length * c;
+	return /* @__PURE__ */ s("div", {
+		ref: y,
+		className: o("wim-virtual-list", e.root, f),
+		style: { height: l },
+		role: m,
+		tabIndex: 0,
+		"aria-label": h,
+		"aria-labelledby": g,
+		children: /* @__PURE__ */ s("div", {
+			className: e.viewport,
+			style: { height: T },
+			children: w.map((n, r) => {
+				let i = C.startNode + r;
+				return /* @__PURE__ */ s("div", {
+					className: e.item,
+					style: {
+						height: c,
+						transform: `translateY(${i * c}px)`
+					},
+					role: p,
+					"aria-setsize": t.length,
+					"aria-posinset": i + 1,
+					children: u(n, i)
+				}, i);
+			})
+		})
+	});
+});
+//#endregion
+export { c as VirtualList };