@px-ui/ui 1.0.11 → 1.1.0

package/dist/components/tree-select.d.ts

@@ -0,0 +1,192 @@
+import * as react_jsx_runtime297 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/tree-select.d.ts
+/**
+ * A single node in the tree passed to {@link TreeSelect}.
+ */
+interface TreeSelectNode {
+  /** Stable, unique identifier. Used as the selection key in `value`. */
+  id: string;
+  /** Human-readable label rendered on the row. */
+  label: React$1.ReactNode;
+  /** Plain-text label used for search matching. Falls back to `label` when it is a string. */
+  searchText?: string;
+  /** Optional child nodes. Presence of a non-empty array makes the row expandable. */
+  children?: TreeSelectNode[];
+  /** Disables the row's checkbox (and excludes it from parent propagation). */
+  disabled?: boolean;
+}
+/** Tri-state checked status for a node, per the active `selectionMode`. */
+type TreeSelectCheckedState = "checked" | "unchecked" | "indeterminate";
+/** How selecting a node affects the others. See {@link TreeSelectProps.selectionMode}. */
+type TreeSelectSelectionMode = "cascade" | "leaf" | "independent";
+/** Per-row context passed to {@link TreeSelectProps.renderNode}. */
+interface TreeSelectNodeMeta {
+  /** Tri-state of this row under the active `selectionMode`. */
+  state: TreeSelectCheckedState;
+  /** 0-based depth (root rows are depth 0). */
+  depth: number;
+  /** Whether this (expandable) row is currently open. Always false for leaves. */
+  expanded: boolean;
+  /** Whether the row is disabled (the node itself, or the whole control). */
+  disabled: boolean;
+  /** Put this on your label text (`id={meta.labelId}`) to name the checkbox. */
+  labelId: string;
+  /** Toggle this row's selection; omit `next` to flip from the current state. */
+  toggle: (next?: boolean) => void;
+}
+interface TreeSelectProps extends Omit<React$1.ComponentProps<"div">, "onChange" | "defaultValue"> {
+  /** The tree of nodes to render. */
+  nodes: TreeSelectNode[];
+  /** Controlled selection — array of selected node `id`s. Pair with `onValueChange`. */
+  value?: string[];
+  /** Initial selection for the uncontrolled case. @default [] */
+  defaultValue?: string[];
+  /** Called whenever the selection changes, with the next array of selected `id`s. */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Render a search box that filters the tree. Matching nodes and their
+   * ancestors are kept; non-matching branches are hidden.
+   * @default false
+   */
+  searchable?: boolean;
+  /** Placeholder for the search input. @default "Search…" */
+  searchPlaceholder?: string;
+  /** Controlled search query. Pair with `onSearchChange`. */
+  search?: string;
+  /** Default search query for the uncontrolled case. @default "" */
+  defaultSearch?: string;
+  /** Called when the internal search query changes. */
+  onSearchChange?: (search: string) => void;
+  /**
+   * Maximum depth to render, 0-based (root nodes are depth 0). Nodes deeper
+   * than this are not rendered and are excluded from propagation/counts.
+   * Omit for unlimited depth.
+   */
+  maxDepth?: number;
+  /**
+   * How selecting a node affects the others.
+   * - `"cascade"` (default): selecting a parent selects all of its enabled
+   *   descendants; a branch with a mix shows the indeterminate state. The
+   *   selection includes both parent ids and leaf ids.
+   * - `"leaf"`: only leaf rows are selectable. A parent checkbox toggles its
+   *   enabled leaves and reflects their tri-state, but parent ids never enter
+   *   `value`, and counts are based on leaves.
+   * - `"independent"`: each node toggles only itself — no cascade and no
+   *   indeterminate roll-up.
+   * @default "cascade"
+   */
+  selectionMode?: TreeSelectSelectionMode;
+  /**
+   * Show a summary line above the tree with the selected count.
+   * @default true
+   */
+  showSummary?: boolean;
+  /**
+   * Render a custom summary given the selected ids and the total selectable
+   * count. Overrides the default count text.
+   */
+  renderSummary?: (selectedCount: number, total: number) => React$1.ReactNode;
+  /**
+   * Render the row body (everything after the checkbox) yourself. You own the
+   * label markup — including click-to-toggle (call `meta.toggle()`) and naming
+   * the managed checkbox (put `id={meta.labelId}` on your label text, or rely
+   * on a string `label`/`searchText` as the fallback name). The chevron,
+   * checkbox, indentation, and expansion stay managed by the component.
+   */
+  renderNode?: (node: TreeSelectNode, meta: TreeSelectNodeMeta) => React$1.ReactNode;
+  /** Message shown when the tree has no nodes at all. @default "No items." */
+  emptyMessage?: React$1.ReactNode;
+  /** Message shown when a search query yields no matches. @default "No results found." */
+  noResultsMessage?: React$1.ReactNode;
+  /** Disable the entire control. */
+  disabled?: boolean;
+  /**
+   * Whether all branches start expanded (uncontrolled). Ignored when
+   * `expandedIds` or `defaultExpandedIds` is provided. @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Controlled set of expanded branch `id`s. Pair with `onExpandedChange`.
+   * Driving this lets a consumer implement expand-all / collapse-all or
+   * persist which branches are open.
+   */
+  expandedIds?: string[];
+  /** Initial expanded branch `id`s for the uncontrolled case. */
+  defaultExpandedIds?: string[];
+  /** Called when the set of expanded branch `id`s changes. */
+  onExpandedChange?: (expandedIds: string[]) => void;
+  /** Max height of the scroll viewport (any CSS length). @default "16rem" */
+  scrollHeight?: string | number;
+  /** Extra className for the scroll viewport wrapper. */
+  scrollClassName?: string;
+}
+/**
+ * A hierarchical, searchable tree multi-select with tri-state checkboxes.
+ *
+ * Selecting a parent selects all of its (enabled) descendants; clearing a
+ * parent clears them. A branch with a mix of selected and unselected
+ * descendants shows the indeterminate state. The selection is a flat array of
+ * node ids and works controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`). Expansion is likewise controllable (`expandedIds` +
+ * `onExpandedChange`) so consumers can implement expand-all / collapse-all.
+ *
+ * @example
+ * ```tsx
+ * const nodes = [
+ *   {
+ *     id: "fe",
+ *     label: "Frontend",
+ *     children: [
+ *       { id: "react", label: "React" },
+ *       { id: "vue", label: "Vue" },
+ *     ],
+ *   },
+ *   { id: "be", label: "Backend", children: [{ id: "rails", label: "Rails" }] },
+ * ]
+ *
+ * function Example() {
+ *   const [value, setValue] = React.useState<string[]>(["react"])
+ *   return (
+ *     <TreeSelect
+ *       nodes={nodes}
+ *       value={value}
+ *       onValueChange={setValue}
+ *       searchable
+ *       maxDepth={1}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function TreeSelect({
+  nodes,
+  value,
+  defaultValue,
+  onValueChange,
+  searchable,
+  searchPlaceholder,
+  search,
+  defaultSearch,
+  onSearchChange,
+  maxDepth,
+  selectionMode,
+  showSummary,
+  renderSummary,
+  renderNode,
+  emptyMessage,
+  noResultsMessage,
+  disabled,
+  defaultExpanded,
+  expandedIds,
+  defaultExpandedIds,
+  onExpandedChange,
+  scrollHeight,
+  scrollClassName,
+  className,
+  ...props
+}: TreeSelectProps): react_jsx_runtime297.JSX.Element;
+//#endregion
+export { TreeSelect, TreeSelectCheckedState, TreeSelectNode, TreeSelectNodeMeta, TreeSelectProps, TreeSelectSelectionMode };
+//# sourceMappingURL=tree-select.d.ts.map

package/dist/components/tree-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-select.d.ts","names":[],"sources":["../../src/components/tree-select.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAiCiB,UAAA,cAAA,CAAc;EAcnB;EAIA,EAAA,EAAA,MAAA;EAGK;EAeA,KAAA,EAhCR,OAAA,CAAM,SAiCb;EAAa;EAEN,UAAA,CAAA,EAAA,MAAA;EAuCS;EAU0C,QAAM,CAAA,EAhFrD,cAgFqD,EAAA;EAQ5C;EAAsB,QAAA,CAAA,EAAA,OAAA;;;AAIvB,KAtFT,sBAAA,GAsFe,SAAA,GAAA,WAAA,GAAA,eAAA;;AA/Db,KAnBF,uBAAA,GAmBE,SAAA,GAAA,MAAA,GAAA,aAAA;AAohBd;AACE,UAriBe,kBAAA,CAqiBf;EACA;EACA,KAAA,EAriBO,sBAqiBP;EACA;EACA,KAAA,EAAA,MAAA;EACA;EACA,QAAA,EAAA,OAAA;EACA;EACA,QAAA,EAAA,OAAA;EACA;EACA,OAAA,EAAA,MAAA;EACA;EACA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,OAAA,EAAA,GAAA,IAAA;;AAEA,UApiBe,eAAA,SACP,IAmiBR,CAniBa,OAAA,CAAM,cAmiBnB,CAAA,KAAA,CAAA,EAAA,UAAA,GAAA,cAAA,CAAA,CAAA;EACA;EACA,KAAA,EAniBO,cAmiBP,EAAA;EACA;EACA,KAAA,CAAA,EAAA,MAAA,EAAA;EACA;EACA,YAAA,CAAA,EAAA,MAAA,EAAA;EACA;EACA,aAAA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,IAAA;EACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAngBgB;;;;;;;;;;4DAU0C,OAAA,CAAM;;;;;;;;sBAQ5C,sBAAsB,uBAAuB,OAAA,CAAM;;iBAExD,OAAA,CAAM;;qBAEF,OAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqdX,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0Bb,kBAAe,oBAAA,CAAA,GAAA,CAAA"}

package/dist/components/tree-select.js

@@ -0,0 +1,421 @@
+"use client";
+
+import { t as cn } from "../utils-DUlptRpf.js";
+import { t as Button } from "../button-DnHwqwy0.js";
+import { t as Checkbox } from "../checkbox-CwkX29tL.js";
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "../collapsible-DsrYXIW5.js";
+import "../input-jIoNIdLQ.js";
+import "../textarea-hZg0gA8u.js";
+import { i as InputGroupInput, n as InputGroupAddon, t as InputGroup } from "../input-group-B5PMRYld.js";
+import { i as EmptyHeader, o as EmptyTitle, t as Empty } from "../empty-U4zrLmFU.js";
+import { t as ScrollArea } from "../scroll-area-mNVMQ0Of.js";
+import { ChevronRightIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/tree-select.tsx
+/** Walk the tree honoring `maxDepth`, invoking `visit` with node + depth. */
+function walk(nodes, maxDepth, visit, depth = 0) {
+	if (maxDepth !== void 0 && depth > maxDepth) return;
+	for (const node of nodes) {
+		visit(node, depth);
+		if (node.children?.length) walk(node.children, maxDepth, visit, depth + 1);
+	}
+}
+/** True when a node renders an expand/collapse affordance at the given depth. */
+function isExpandable(node, depth, maxDepth) {
+	return Boolean(node.children?.length) && (maxDepth === void 0 || depth < maxDepth);
+}
+/**
+* Returns the set of selectable (enabled) ids within the depth budget. In
+* `"leaf"` mode only rendered-leaf rows are selectable; otherwise every enabled
+* node is.
+*/
+function collectSelectableIds(nodes, maxDepth, mode) {
+	const ids = /* @__PURE__ */ new Set();
+	walk(nodes, maxDepth, (node, depth) => {
+		if (node.disabled) return;
+		if (mode === "leaf" && isExpandable(node, depth, maxDepth)) return;
+		ids.add(node.id);
+	});
+	return ids;
+}
+/** Enabled rendered-leaf descendant ids of a node within the depth budget. */
+function descendantLeafIds(node, depth, maxDepth) {
+	const out = [];
+	if (node.children?.length) walk(node.children, maxDepth, (n, d) => {
+		if (!n.disabled && !isExpandable(n, d, maxDepth)) out.push(n.id);
+	}, depth + 1);
+	return out;
+}
+/** Returns the ids of every expandable branch within the depth budget. */
+function collectBranchIds(nodes, maxDepth) {
+	const ids = [];
+	walk(nodes, maxDepth, (node, depth) => {
+		if (isExpandable(node, depth, maxDepth)) ids.push(node.id);
+	});
+	return ids;
+}
+/** Enabled descendant ids of a node (excluding itself) within the depth budget. */
+function descendantIds(node, depth, maxDepth) {
+	const out = [];
+	if (node.children?.length) walk(node.children, maxDepth, (n) => {
+		if (!n.disabled) out.push(n.id);
+	}, depth + 1);
+	return out;
+}
+function buildNodeIndex(nodes, maxDepth) {
+	const index = /* @__PURE__ */ new Map();
+	walk(nodes, maxDepth, (node, depth) => {
+		index.set(node.id, {
+			node,
+			depth
+		});
+	});
+	return index;
+}
+/**
+* Compute the tri-state of every node in ONE bottom-up pass over the ORIGINAL
+* (unfiltered) tree, keyed by id. Rows then look up their state in O(1), so a
+* large tree no longer re-walks each branch's subtree on every render.
+*
+* Semantics depend on `mode`:
+* - `"cascade"`: a branch is `checked` when every enabled descendant is
+*   selected (and the branch itself, when selectable, is selected),
+*   `unchecked` when none are, `indeterminate` otherwise. Disabled descendants
+*   are ignored, so a branch whose only unselected children are disabled still
+*   reads as checked.
+* - `"leaf"`: a branch's state rolls up from its enabled leaf descendants only;
+*   the branch's own id is never considered selected.
+* - `"independent"`: every node simply reflects its own selected state.
+*/
+function buildCheckedStates(nodes, maxDepth, selected, mode) {
+	const states = /* @__PURE__ */ new Map();
+	const visit = (node, depth) => {
+		const selfIsLeaf = !isExpandable(node, depth, maxDepth);
+		let descEnabled = 0;
+		let descSelected = 0;
+		let descLeafEnabled = 0;
+		let descLeafSelected = 0;
+		if ((maxDepth === void 0 || depth < maxDepth) && node.children?.length) for (const child of node.children) {
+			const a = visit(child, depth + 1);
+			descEnabled += a.selfEnabled + a.descEnabled;
+			descSelected += a.selfSelected + a.descSelected;
+			descLeafEnabled += (a.selfIsLeaf ? a.selfEnabled : 0) + a.descLeafEnabled;
+			descLeafSelected += (a.selfIsLeaf ? a.selfSelected : 0) + a.descLeafSelected;
+		}
+		let state;
+		if (mode === "independent") state = selected.has(node.id) ? "checked" : "unchecked";
+		else if (mode === "leaf") if (selfIsLeaf) state = selected.has(node.id) ? "checked" : "unchecked";
+		else if (descLeafEnabled === 0 || descLeafSelected === 0) state = "unchecked";
+		else if (descLeafSelected === descLeafEnabled) state = "checked";
+		else state = "indeterminate";
+		else if (descEnabled === 0) state = selected.has(node.id) ? "checked" : "unchecked";
+		else {
+			const selfChecked = node.disabled ? true : selected.has(node.id);
+			if (descSelected === descEnabled && selfChecked) state = "checked";
+			else if (descSelected === 0 && !selected.has(node.id)) state = "unchecked";
+			else state = "indeterminate";
+		}
+		states.set(node.id, state);
+		return {
+			selfEnabled: node.disabled ? 0 : 1,
+			selfSelected: !node.disabled && selected.has(node.id) ? 1 : 0,
+			selfIsLeaf,
+			descEnabled,
+			descSelected,
+			descLeafEnabled,
+			descLeafSelected
+		};
+	};
+	for (const root of nodes) visit(root, 0);
+	return states;
+}
+function nodeSearchText(node) {
+	if (node.searchText) return node.searchText;
+	if (typeof node.label === "string") return node.label;
+	return "";
+}
+/**
+* Filter the tree to nodes matching `query` plus their ancestors. A node is
+* kept when it matches directly (in which case its original children are kept)
+* or when any descendant matches.
+*/
+function filterTree(nodes, query) {
+	if (!query.trim()) return nodes;
+	const q = query.trim().toLowerCase();
+	const recurse = (list) => {
+		const result = [];
+		for (const node of list) {
+			const selfMatch = nodeSearchText(node).toLowerCase().includes(q);
+			const keptChildren = node.children?.length ? recurse(node.children) : [];
+			if (selfMatch || keptChildren.length) result.push({
+				...node,
+				children: keptChildren.length ? keptChildren : node.children
+			});
+		}
+		return result;
+	};
+	return recurse(nodes);
+}
+/** Shared row layout for both leaf and branch rows. */
+const treeSelectRowVariants = cva("flex items-center gap-2 rounded-md py-1.5 pe-2 hover:bg-muted/50");
+function TreeSelectRow({ node, depth, maxDepth, checkedStates, expanded, forceExpanded, disabled, onToggle, onExpandToggle, renderNode }) {
+	const labelId = React$1.useId();
+	const expandable = isExpandable(node, depth, maxDepth);
+	const state = checkedStates.get(node.id) ?? "unchecked";
+	const rowDisabled = disabled || Boolean(node.disabled);
+	const isOpen = expandable && (forceExpanded || expanded.has(node.id));
+	const accessibleName = nodeSearchText(node);
+	const meta = {
+		state,
+		depth,
+		expanded: isOpen,
+		disabled: rowDisabled,
+		labelId,
+		toggle: (next) => onToggle(node.id, next ?? state !== "checked")
+	};
+	const checkbox = /* @__PURE__ */ jsx(Checkbox, {
+		"data-slot": "tree-select-checkbox",
+		checked: state === "checked",
+		indeterminate: state === "indeterminate",
+		disabled: rowDisabled,
+		"aria-labelledby": labelId,
+		"aria-label": renderNode && accessibleName ? accessibleName : void 0,
+		onCheckedChange: (checked) => onToggle(node.id, checked)
+	});
+	const body = renderNode ? /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-1 items-center gap-2",
+		children: renderNode(node, meta)
+	}) : /* @__PURE__ */ jsx("span", {
+		id: labelId,
+		className: cn("min-w-0 flex-1 truncate text-sm", rowDisabled ? "opacity-50" : "cursor-pointer"),
+		onClick: rowDisabled ? void 0 : () => onToggle(node.id, state !== "checked"),
+		children: node.label
+	});
+	if (!expandable) return /* @__PURE__ */ jsxs("div", {
+		role: "treeitem",
+		"aria-selected": state === "checked",
+		"data-slot": "tree-select-item",
+		className: treeSelectRowVariants(),
+		style: { paddingInlineStart: `calc(${depth} * 1.5rem + 1.5rem)` },
+		children: [checkbox, body]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open: isOpen,
+		onOpenChange: (open) => onExpandToggle(node.id, open),
+		"data-slot": "tree-select-branch",
+		render: /* @__PURE__ */ jsx("div", {
+			role: "treeitem",
+			"aria-selected": state === "checked",
+			"aria-expanded": isOpen
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: treeSelectRowVariants(),
+			style: { paddingInlineStart: `calc(${depth} * 1.5rem)` },
+			children: [
+				/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					"data-slot": "tree-select-trigger",
+					disabled: forceExpanded,
+					"aria-label": "Toggle",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						className: "group size-6 shrink-0 text-muted-foreground"
+					}),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "transition-transform duration-200 group-data-panel-open:rotate-90" })
+				}),
+				checkbox,
+				body
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			role: "group",
+			children: node.children.map((child) => /* @__PURE__ */ jsx(TreeSelectRow, {
+				node: child,
+				depth: depth + 1,
+				maxDepth,
+				checkedStates,
+				expanded,
+				forceExpanded,
+				disabled,
+				onToggle,
+				onExpandToggle,
+				renderNode
+			}, child.id))
+		})]
+	});
+}
+/**
+* A hierarchical, searchable tree multi-select with tri-state checkboxes.
+*
+* Selecting a parent selects all of its (enabled) descendants; clearing a
+* parent clears them. A branch with a mix of selected and unselected
+* descendants shows the indeterminate state. The selection is a flat array of
+* node ids and works controlled (`value` + `onValueChange`) or uncontrolled
+* (`defaultValue`). Expansion is likewise controllable (`expandedIds` +
+* `onExpandedChange`) so consumers can implement expand-all / collapse-all.
+*
+* @example
+* ```tsx
+* const nodes = [
+*   {
+*     id: "fe",
+*     label: "Frontend",
+*     children: [
+*       { id: "react", label: "React" },
+*       { id: "vue", label: "Vue" },
+*     ],
+*   },
+*   { id: "be", label: "Backend", children: [{ id: "rails", label: "Rails" }] },
+* ]
+*
+* function Example() {
+*   const [value, setValue] = React.useState<string[]>(["react"])
+*   return (
+*     <TreeSelect
+*       nodes={nodes}
+*       value={value}
+*       onValueChange={setValue}
+*       searchable
+*       maxDepth={1}
+*     />
+*   )
+* }
+* ```
+*/
+function TreeSelect({ nodes, value, defaultValue = [], onValueChange, searchable = false, searchPlaceholder = "Search…", search, defaultSearch = "", onSearchChange, maxDepth, selectionMode = "cascade", showSummary = true, renderSummary, renderNode, emptyMessage = "No items.", noResultsMessage = "No results found.", disabled = false, defaultExpanded = false, expandedIds, defaultExpandedIds, onExpandedChange, scrollHeight = "16rem", scrollClassName, className, ...props }) {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
+	const currentValue = isControlled ? value : internalValue;
+	const selected = React$1.useMemo(() => new Set(currentValue), [currentValue]);
+	const setValue = React$1.useCallback((next) => {
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const searchControlled = search !== void 0;
+	const [internalSearch, setInternalSearch] = React$1.useState(defaultSearch);
+	const currentSearch = searchControlled ? search : internalSearch;
+	const setSearch = React$1.useCallback((next) => {
+		if (!searchControlled) setInternalSearch(next);
+		onSearchChange?.(next);
+	}, [searchControlled, onSearchChange]);
+	const expansionControlled = expandedIds !== void 0;
+	const [internalExpanded, setInternalExpanded] = React$1.useState(() => {
+		if (defaultExpandedIds) return defaultExpandedIds;
+		if (defaultExpanded) return collectBranchIds(nodes, maxDepth);
+		return [];
+	});
+	const currentExpanded = expansionControlled ? expandedIds : internalExpanded;
+	const expanded = React$1.useMemo(() => new Set(currentExpanded), [currentExpanded]);
+	const setExpanded = React$1.useCallback((next) => {
+		if (!expansionControlled) setInternalExpanded(next);
+		onExpandedChange?.(next);
+	}, [expansionControlled, onExpandedChange]);
+	const handleExpandToggle = React$1.useCallback((id, open) => {
+		const next = new Set(expanded);
+		if (open) next.add(id);
+		else next.delete(id);
+		setExpanded(Array.from(next));
+	}, [expanded, setExpanded]);
+	const selectableIds = React$1.useMemo(() => collectSelectableIds(nodes, maxDepth, selectionMode), [
+		nodes,
+		maxDepth,
+		selectionMode
+	]);
+	const nodeIndex = React$1.useMemo(() => buildNodeIndex(nodes, maxDepth), [nodes, maxDepth]);
+	const checkedStates = React$1.useMemo(() => buildCheckedStates(nodes, maxDepth, selected, selectionMode), [
+		nodes,
+		maxDepth,
+		selected,
+		selectionMode
+	]);
+	const selectedCount = React$1.useMemo(() => currentValue.filter((id) => selectableIds.has(id)).length, [currentValue, selectableIds]);
+	const filteredNodes = React$1.useMemo(() => searchable ? filterTree(nodes, currentSearch) : nodes, [
+		searchable,
+		nodes,
+		currentSearch
+	]);
+	const hasQuery = searchable && currentSearch.trim().length > 0;
+	const handleToggle = React$1.useCallback((id, next) => {
+		const ids = new Set(selected);
+		const entry = nodeIndex.get(id);
+		let affected;
+		if (!entry || selectionMode === "independent") affected = [id];
+		else if (selectionMode === "leaf") affected = isExpandable(entry.node, entry.depth, maxDepth) ? descendantLeafIds(entry.node, entry.depth, maxDepth) : [entry.node.id];
+		else affected = [entry.node.id, ...descendantIds(entry.node, entry.depth, maxDepth)];
+		for (const target of affected) {
+			if (!selectableIds.has(target)) continue;
+			if (next) ids.add(target);
+			else ids.delete(target);
+		}
+		setValue(Array.from(ids));
+	}, [
+		selected,
+		maxDepth,
+		selectableIds,
+		nodeIndex,
+		setValue,
+		selectionMode
+	]);
+	const summaryNode = showSummary ? renderSummary ? renderSummary(selectedCount, selectableIds.size) : `${selectedCount} of ${selectableIds.size} selected` : null;
+	const isEmpty = filteredNodes.length === 0;
+	const emptyText = hasQuery ? noResultsMessage : emptyMessage;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tree-select",
+		"data-disabled": disabled || void 0,
+		className: cn("flex flex-col gap-2", disabled && "pointer-events-none opacity-60", className),
+		...props,
+		children: [
+			searchable && /* @__PURE__ */ jsxs(InputGroup, {
+				"data-slot": "tree-select-search",
+				children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { "data-icon": "inline-start" }) }), /* @__PURE__ */ jsx(InputGroupInput, {
+					type: "search",
+					value: currentSearch,
+					disabled,
+					placeholder: searchPlaceholder,
+					"aria-label": searchPlaceholder,
+					onChange: (event) => setSearch(event.target.value)
+				})]
+			}),
+			summaryNode != null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "tree-select-summary",
+				className: "text-xs text-muted-foreground",
+				children: summaryNode
+			}),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				"data-slot": "tree-select-scroll",
+				className: cn("rounded-md border border-input", scrollClassName),
+				viewportProps: { style: { maxHeight: scrollHeight } },
+				children: /* @__PURE__ */ jsx("div", {
+					role: "tree",
+					"aria-multiselectable": true,
+					className: "p-1",
+					children: isEmpty ? /* @__PURE__ */ jsx(Empty, {
+						"data-slot": "tree-select-empty",
+						className: "border-0 p-6",
+						children: /* @__PURE__ */ jsx(EmptyHeader, { children: /* @__PURE__ */ jsx(EmptyTitle, {
+							className: "text-sm font-normal text-muted-foreground",
+							children: emptyText
+						}) })
+					}) : filteredNodes.map((node) => /* @__PURE__ */ jsx(TreeSelectRow, {
+						node,
+						depth: 0,
+						maxDepth,
+						checkedStates,
+						expanded,
+						forceExpanded: hasQuery,
+						disabled,
+						onToggle: handleToggle,
+						onExpandToggle: handleExpandToggle,
+						renderNode
+					}, node.id))
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { TreeSelect };
+//# sourceMappingURL=tree-select.js.map