@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Tree.jsx

@@ -0,0 +1,1172 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { SharedElementTransition } from "./SharedElementTransition.jsx";
+import { handleLinkClick, useLinkProps, useRouter } from "./RouterProvider.jsx";
+import { CollectionRendererContext, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.jsx";
+import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
+import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+import { GridListHeader, GridListHeaderContext, GridListHeaderInnerContext } from "./GridList.jsx";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createGridListSection, createHover, createTree, createTreeItem, createTreeSelectionCheckbox, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { createTreeCollection, createTreeState } from "@proyecto-viviana/solid-stately";
+//#region src/Tree.tsx
+/**
+* Tree component for solidaria-components
+*
+* A pre-wired headless tree that combines state + aria hooks.
+* Based on react-aria-components/src/Tree.tsx
+*
+* Tree displays hierarchical data with expandable/collapsible nodes,
+* supporting keyboard navigation and selection.
+*/
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const X_SWITCH_THRESHOLD = 10;
+const Y_SWITCH_THRESHOLD = 5;
+const EXPANSION_KEYS = {
+	expand: {
+		ltr: "ArrowRight",
+		rtl: "ArrowLeft"
+	},
+	collapse: {
+		ltr: "ArrowLeft",
+		rtl: "ArrowRight"
+	}
+};
+function resolveTreeDirection(element) {
+	if (element) {
+		const dir = element.closest("[dir]")?.getAttribute("dir");
+		if (dir === "rtl") return "rtl";
+		if (dir === "ltr") return "ltr";
+		if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+			const computedDirection = window.getComputedStyle(element).direction;
+			if (computedDirection === "rtl") return "rtl";
+			if (computedDirection === "ltr") return "ltr";
+		}
+	}
+	if (typeof document !== "undefined") return document.dir === "rtl" ? "rtl" : "ltr";
+	return "ltr";
+}
+function createTreeDropTargetDelegate(delegate, state, direction, baseKeyboardNav) {
+	const pointerTracking = {
+		lastY: 0,
+		lastX: 0,
+		yDirection: null,
+		xDirection: null,
+		boundaryContext: null
+	};
+	const getPotentialTargets = (originalTarget, isValidDropTarget) => {
+		if (originalTarget.dropPosition === "on") return [originalTarget];
+		const collection = state.collection;
+		const getNodeNextKey = (node) => {
+			if (!node) return null;
+			return node.nextKey ?? null;
+		};
+		const target = { ...originalTarget };
+		let currentItem = collection.getItem(target.key);
+		while (currentItem && currentItem.type !== "item") {
+			const nextKey = getNodeNextKey(currentItem);
+			if (nextKey == null) break;
+			target.key = nextKey;
+			currentItem = collection.getItem(nextKey);
+		}
+		const potentialTargets = [target];
+		if (currentItem && currentItem.hasChildNodes && state.expandedKeys.has(currentItem.key) && target.dropPosition === "after") {
+			let firstChildItemNode = null;
+			for (const child of collection.getChildren(currentItem.key)) if (child.type === "item") {
+				firstChildItemNode = child;
+				break;
+			}
+			if (firstChildItemNode) {
+				const beforeFirstChildTarget = {
+					type: "item",
+					key: firstChildItemNode.key,
+					dropPosition: "before"
+				};
+				if (isValidDropTarget(beforeFirstChildTarget)) return [beforeFirstChildTarget];
+				return [];
+			}
+		}
+		if (getNodeNextKey(currentItem) != null) return [originalTarget];
+		let parentKey = currentItem?.parentKey ?? null;
+		const ancestorTargets = [];
+		while (parentKey != null) {
+			const parentItem = collection.getItem(parentKey);
+			const nextKey = getNodeNextKey(parentItem);
+			const nextItem = nextKey != null ? collection.getItem(nextKey) : null;
+			if (!nextItem || nextItem.parentKey !== parentKey) {
+				const afterParentTarget = {
+					type: "item",
+					key: parentKey,
+					dropPosition: "after"
+				};
+				if (isValidDropTarget(afterParentTarget)) ancestorTargets.push(afterParentTarget);
+				if (nextItem) break;
+			}
+			parentKey = parentItem?.parentKey ?? null;
+		}
+		if (ancestorTargets.length > 0) potentialTargets.push(...ancestorTargets);
+		if (potentialTargets.length === 1) {
+			const nextKey = collection.getKeyAfter(target.key);
+			const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+			if (nextKey != null && nextNode && currentItem && nextNode.level != null && currentItem.level != null && nextNode.level > currentItem.level) {
+				const beforeTarget = {
+					type: "item",
+					key: nextKey,
+					dropPosition: "before"
+				};
+				if (isValidDropTarget(beforeTarget)) return [beforeTarget];
+			}
+		}
+		return potentialTargets.filter((candidate) => isValidDropTarget(candidate));
+	};
+	const selectTarget = (potentialTargets, originalTarget, x, y, currentYMovement, currentXMovement) => {
+		if (potentialTargets.length < 2) return potentialTargets[0];
+		const parentKey = state.collection.getItem(originalTarget.key)?.parentKey;
+		if (parentKey == null) return potentialTargets[0];
+		if (!pointerTracking.boundaryContext || pointerTracking.boundaryContext.parentKey !== parentKey) pointerTracking.boundaryContext = {
+			parentKey,
+			preferredTargetIndex: pointerTracking.yDirection === "up" ? potentialTargets.length - 1 : 0,
+			lastSwitchY: y,
+			lastSwitchX: x
+		};
+		const boundaryContext = pointerTracking.boundaryContext;
+		const distanceFromLastXSwitch = Math.abs(x - boundaryContext.lastSwitchX);
+		if (Math.abs(y - boundaryContext.lastSwitchY) > Y_SWITCH_THRESHOLD && currentYMovement) {
+			const currentIndex = boundaryContext.preferredTargetIndex ?? 0;
+			if (currentYMovement === "down" && currentIndex === 0) boundaryContext.preferredTargetIndex = potentialTargets.length - 1;
+			else if (currentYMovement === "up" && currentIndex === potentialTargets.length - 1) boundaryContext.preferredTargetIndex = 0;
+			pointerTracking.xDirection = null;
+		}
+		if (distanceFromLastXSwitch > X_SWITCH_THRESHOLD && currentXMovement) {
+			const currentTargetIndex = boundaryContext.preferredTargetIndex ?? 0;
+			if (currentXMovement === "left") {
+				if (direction === "ltr") {
+					if (currentTargetIndex < potentialTargets.length - 1) {
+						boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+						boundaryContext.lastSwitchX = x;
+					}
+				} else if (currentTargetIndex > 0) {
+					boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+					boundaryContext.lastSwitchX = x;
+				}
+			} else if (currentXMovement === "right") {
+				if (direction === "ltr") {
+					if (currentTargetIndex > 0) {
+						boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+						boundaryContext.lastSwitchX = x;
+					}
+				} else if (currentTargetIndex < potentialTargets.length - 1) {
+					boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+					boundaryContext.lastSwitchX = x;
+				}
+			}
+			pointerTracking.yDirection = null;
+		}
+		return potentialTargets[Math.max(0, Math.min(boundaryContext.preferredTargetIndex ?? 0, potentialTargets.length - 1))];
+	};
+	const getKeyboardNavigationTarget = (target, dir, isValidDropTarget) => {
+		const collection = state.collection;
+		if (target && target.type === "item") {
+			const node = collection.getItem(target.key);
+			if (!(node != null && node.rowIndex != null)) return baseKeyboardNav?.(target, dir, isValidDropTarget) ?? null;
+		}
+		const tryValid = (t) => isValidDropTarget(t) ? t : null;
+		const getNodeNextKey = (node) => {
+			if (!node) return null;
+			return node.nextKey ?? null;
+		};
+		const isExpanded = (key) => {
+			const node = collection.getItem(key);
+			if (!node || !node.hasChildNodes) return false;
+			return state.expandedKeys.has(key);
+		};
+		const getFirstChildItemKey = (key) => {
+			for (const child of collection.getChildren(key)) if (child.type === "item") return child.key;
+			return null;
+		};
+		const getLastChildItemKey = (key) => {
+			let lastKey = null;
+			for (const child of collection.getChildren(key)) if (child.type === "item") lastKey = child.key;
+			return lastKey;
+		};
+		const getDeepestLastChild = (key) => {
+			let current = key;
+			while (isExpanded(current)) {
+				const lastChild = getLastChildItemKey(current);
+				if (lastChild == null) break;
+				current = lastChild;
+			}
+			return current;
+		};
+		if (dir === "next") {
+			if (!target) return tryValid({ type: "root" });
+			if (target.type === "root") {
+				const firstKey = collection.getFirstKey();
+				if (firstKey != null) return tryValid({
+					type: "item",
+					key: firstKey,
+					dropPosition: "before"
+				});
+				return null;
+			}
+			if (target.type === "item") switch (target.dropPosition) {
+				case "before": return tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				}) ?? tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "after"
+				});
+				case "on": {
+					if (isExpanded(target.key)) {
+						const firstChild = getFirstChildItemKey(target.key);
+						if (firstChild != null) return tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "on"
+						});
+					}
+					const nextKey = collection.getKeyAfter(target.key);
+					const targetNode = collection.getItem(target.key);
+					const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+					if (targetNode && nextNode && nextNode.level != null && targetNode.level != null && nextNode.level >= targetNode.level) return tryValid({
+						type: "item",
+						key: nextNode.key,
+						dropPosition: "before"
+					}) ?? tryValid({
+						type: "item",
+						key: target.key,
+						dropPosition: "after"
+					});
+					return tryValid({
+						type: "item",
+						key: target.key,
+						dropPosition: "after"
+					});
+				}
+				case "after": {
+					if (isExpanded(target.key)) {
+						const firstChild = getFirstChildItemKey(target.key);
+						if (firstChild != null) return tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: firstChild,
+							dropPosition: "on"
+						});
+					}
+					const targetNode = collection.getItem(target.key);
+					const nextSiblingKey = getNodeNextKey(targetNode);
+					if (nextSiblingKey != null) {
+						const nextSibling = collection.getItem(nextSiblingKey);
+						if (nextSibling?.type === "item") return tryValid({
+							type: "item",
+							key: nextSibling.key,
+							dropPosition: "before"
+						}) ?? tryValid({
+							type: "item",
+							key: nextSibling.key,
+							dropPosition: "on"
+						});
+					}
+					if (targetNode?.parentKey != null) {
+						const parentNode = collection.getItem(targetNode.parentKey);
+						const parentNextKey = getNodeNextKey(parentNode);
+						const parentNextNode = parentNextKey != null ? collection.getItem(parentNextKey) : null;
+						if (parentNextNode?.type === "item") return tryValid({
+							type: "item",
+							key: parentNextNode.key,
+							dropPosition: "before"
+						});
+						if (parentNode?.type === "item") return tryValid({
+							type: "item",
+							key: parentNode.key,
+							dropPosition: "after"
+						});
+					}
+					const nextKey = collection.getKeyAfter(target.key);
+					if (nextKey != null) return tryValid({
+						type: "item",
+						key: nextKey,
+						dropPosition: "before"
+					}) ?? tryValid({
+						type: "item",
+						key: nextKey,
+						dropPosition: "on"
+					});
+					return tryValid({ type: "root" });
+				}
+			}
+			return null;
+		}
+		if (!target || target.type === "root") {
+			const lastKey = collection.getLastKey();
+			if (lastKey != null) {
+				let rootKey = lastKey;
+				let node = collection.getItem(lastKey);
+				while (node?.parentKey != null) {
+					rootKey = node.parentKey;
+					node = collection.getItem(rootKey);
+				}
+				return tryValid({
+					type: "item",
+					key: rootKey,
+					dropPosition: "after"
+				});
+			}
+			return null;
+		}
+		if (target.type === "item") switch (target.dropPosition) {
+			case "after": {
+				const deepest = getDeepestLastChild(target.key);
+				if (deepest !== target.key) return tryValid({
+					type: "item",
+					key: deepest,
+					dropPosition: "after"
+				}) ?? tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				});
+				return tryValid({
+					type: "item",
+					key: target.key,
+					dropPosition: "on"
+				});
+			}
+			case "on": return tryValid({
+				type: "item",
+				key: target.key,
+				dropPosition: "before"
+			});
+			case "before": {
+				const prevKey = collection.getKeyBefore(target.key);
+				if (prevKey != null) return tryValid({
+					type: "item",
+					key: getDeepestLastChild(prevKey),
+					dropPosition: "after"
+				}) ?? tryValid({
+					type: "item",
+					key: prevKey,
+					dropPosition: "on"
+				});
+				return tryValid({ type: "root" });
+			}
+		}
+		return null;
+	};
+	return {
+		getDropTargetFromPoint(x, y, isValidDropTarget) {
+			const baseTarget = delegate.getDropTargetFromPoint(x, y, isValidDropTarget);
+			if (!baseTarget || baseTarget.type === "root") return baseTarget;
+			const deltaY = y - pointerTracking.lastY;
+			const deltaX = x - pointerTracking.lastX;
+			let currentYMovement = pointerTracking.yDirection;
+			let currentXMovement = pointerTracking.xDirection;
+			if (Math.abs(deltaY) > Y_SWITCH_THRESHOLD) {
+				currentYMovement = deltaY > 0 ? "down" : "up";
+				pointerTracking.yDirection = currentYMovement;
+				pointerTracking.lastY = y;
+			}
+			if (Math.abs(deltaX) > X_SWITCH_THRESHOLD) {
+				currentXMovement = deltaX > 0 ? "right" : "left";
+				pointerTracking.xDirection = currentXMovement;
+				pointerTracking.lastX = x;
+			}
+			let target = baseTarget;
+			if (target.dropPosition === "before") {
+				const keyBefore = state.collection.getKeyBefore(target.key);
+				if (keyBefore != null) {
+					const normalized = {
+						type: "item",
+						key: keyBefore,
+						dropPosition: "after"
+					};
+					if (isValidDropTarget(normalized)) target = normalized;
+				}
+			}
+			const potentialTargets = getPotentialTargets(target, isValidDropTarget);
+			if (potentialTargets.length === 0) return { type: "root" };
+			if (potentialTargets.length > 1) return selectTarget(potentialTargets, target, x, y, currentYMovement, currentXMovement);
+			pointerTracking.boundaryContext = null;
+			return potentialTargets[0];
+		},
+		getKeyboardNavigationTarget,
+		getKeyboardPageNavigationTarget: delegate.getKeyboardPageNavigationTarget?.bind(delegate)
+	};
+}
+const TreeContext = createContext(null);
+const TreeStateContext = createContext(null);
+const TreeItemContext = createContext(null);
+const TreeItemContentContext = createContext(null);
+function isTreeItemRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function treeItemDataFromNode(node) {
+	const value = node.value;
+	const item = isTreeItemRecord(value) ? value : {};
+	return {
+		...item,
+		key: node.key,
+		id: item.id ?? node.key,
+		value: value ?? void 0,
+		textValue: node.textValue,
+		isDisabled: node.isDisabled,
+		hasChildItems: node.hasChildNodes,
+		children: node.childNodes.length > 0 ? node.childNodes.map((child) => treeItemDataFromNode(child)) : void 0
+	};
+}
+/**
+* A tree displays hierarchical data with expandable/collapsible nodes,
+* supporting keyboard navigation and selection.
+*/
+function Tree(props) {
+	const [local, stateProps, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"renderEmptyState",
+		"hasMore",
+		"isLoading",
+		"loadingState",
+		"onLoadMore",
+		"renderLoadMoreItem",
+		"loadMoreClass",
+		"loadMoreStyle",
+		"dragAndDropHooks",
+		"ref"
+	], [
+		"items",
+		"disabledKeys",
+		"disabledBehavior",
+		"selectionMode",
+		"selectionBehavior",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"expandedKeys",
+		"defaultExpandedKeys",
+		"onExpandedChange"
+	]);
+	const [ref, setRef] = createSignal(null);
+	const flatItems = createMemo(() => flattenCollectionEntries(stateProps.items ?? []));
+	const hasSections = createMemo(() => (stateProps.items ?? []).some((entry) => isCollectionSection(entry)));
+	const state = createTreeState(() => ({
+		collectionFactory: (expandedKeys) => createTreeCollection(flatItems(), expandedKeys),
+		disabledKeys: stateProps.disabledKeys,
+		disabledBehavior: stateProps.disabledBehavior,
+		selectionMode: stateProps.selectionMode,
+		selectionBehavior: stateProps.selectionBehavior,
+		selectedKeys: stateProps.selectedKeys,
+		defaultSelectedKeys: stateProps.defaultSelectedKeys,
+		onSelectionChange: stateProps.onSelectionChange,
+		expandedKeys: stateProps.expandedKeys,
+		defaultExpandedKeys: stateProps.defaultExpandedKeys,
+		onExpandedChange: stateProps.onExpandedChange
+	}));
+	const [lastExpandedKeys, setLastExpandedKeys] = createSignal(/* @__PURE__ */ new Set());
+	const [lastItemsLength, setLastItemsLength] = createSignal(flatItems().length);
+	const [collectionVersion, setCollectionVersion] = createSignal(0);
+	createEffect(() => {
+		const expanded = state.expandedKeys;
+		const items = flatItems();
+		if (!areSetsEqual(lastExpandedKeys(), expanded) || lastItemsLength() !== items.length) {
+			setLastExpandedKeys(new Set(expanded));
+			setLastItemsLength(items.length);
+			setCollectionVersion((v) => v + 1);
+		}
+	});
+	const treeDirection = createMemo(() => ariaProps.direction ?? resolveTreeDirection(ref()));
+	const { treeProps } = createTree(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		isVirtualized: ariaProps.isVirtualized,
+		onAction: ariaProps.onAction,
+		isDisabled: ariaProps.isDisabled,
+		keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
+		direction: treeDirection()
+	}), () => state, ref);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: ariaProps.isDisabled ?? false,
+		isEmpty: flatItems().length === 0
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Tree"
+	}, renderValues);
+	const domProps = createMemo(() => {
+		return filterDOMProps(ariaProps, { global: true });
+	});
+	const cleanTreeProps = () => {
+		const { ref: _ref1, ...rest } = treeProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref2, ...rest } = focusProps;
+		return rest;
+	};
+	const isEmpty = () => flatItems().length === 0;
+	const visibleRows = createMemo(() => {
+		collectionVersion();
+		return state.collection.rows;
+	});
+	const virtualizer = useVirtualizerContext();
+	const parentCollectionRenderer = useCollectionRenderer();
+	const getDropTargetByIndex = (index, position) => {
+		const node = visibleRows()[index];
+		if (!node) return null;
+		return {
+			type: "item",
+			key: node.key,
+			dropPosition: position
+		};
+	};
+	const hasDroppableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
+	});
+	const hasDraggableDnd = createMemo(() => {
+		const hooks = local.dragAndDropHooks;
+		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
+	});
+	const dragState = createMemo(() => {
+		if (!hasDraggableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: visibleRows().map((node) => node.value) });
+	});
+	const dropState = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
+	});
+	createEffect(() => {
+		const activeDropState = dropState();
+		if (!activeDropState) return;
+		const originalGetDropOperation = activeDropState.getDropOperation.bind(activeDropState);
+		activeDropState.getDropOperation = (target, types, allowedOperations) => {
+			const currentDraggingKeys = dragState()?.draggingKeys ?? /* @__PURE__ */ new Set();
+			if (target.type === "item" && currentDraggingKeys.size > 0) {
+				if (currentDraggingKeys.has(target.key) && target.dropPosition === "on") return "cancel";
+				let currentKey = target.key;
+				while (currentKey != null) {
+					const parentKey = state.collection.getItem(currentKey)?.parentKey;
+					if (parentKey != null && currentDraggingKeys.has(parentKey)) return "cancel";
+					currentKey = parentKey ?? null;
+				}
+			}
+			return originalGetDropOperation(target, types, allowedOperations);
+		};
+		onCleanup(() => {
+			activeDropState.getDropOperation = originalGetDropOperation;
+		});
+	});
+	createEffect(() => {
+		if (!hasDraggableDnd()) return;
+		const hooks = local.dragAndDropHooks;
+		const activeDragState = dragState();
+		if (!hooks?.useDraggableCollection || !activeDragState) return;
+		hooks.useDraggableCollection({}, activeDragState, () => ref());
+	});
+	const contextValue = createMemo(() => ({
+		state,
+		collection: state.collection,
+		isDisabled: ariaProps.isDisabled ?? false,
+		renderItem: props.children,
+		dragAndDropHooks: local.dragAndDropHooks,
+		dragState: dragState(),
+		dropState: dropState()
+	}));
+	const droppableCollection = createMemo(() => {
+		if (!hasDroppableDnd()) return void 0;
+		const hooks = local.dragAndDropHooks;
+		const activeDropState = dropState();
+		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
+		const direction = resolveTreeDirection(ref());
+		const baseDropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+			layout: "stack",
+			orientation: "vertical",
+			direction
+		}) : void 0);
+		if (!baseDropTargetDelegate) return void 0;
+		const dropTargetDelegate = createTreeDropTargetDelegate(baseDropTargetDelegate, state, direction, virtualizer?.getBaseKeyboardNavigationTarget);
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection.getFirstKey(),
+				getLastKey: () => state.collection.getLastKey(),
+				getKeyBelow: (key) => state.collection.getKeyAfter(key),
+				getKeyAbove: (key) => state.collection.getKeyBefore(key),
+				getKeyPageBelow: (key) => state.collection.getKeyAfter(key),
+				getKeyPageAbove: (key) => state.collection.getKeyBefore(key)
+			},
+			get collection() {
+				return state.collection;
+			},
+			get selectedKeys() {
+				return state.selectedKeys;
+			},
+			setSelectedKeys: (keys) => {
+				if (state.selectionMode === "none") return;
+				state.clearSelection();
+				for (const key of keys) state.toggleSelection(key);
+			},
+			setFocusedKey: (key) => state.setFocusedKey(key),
+			onDropActivate: (event) => {
+				if (event.target.type !== "item") return;
+				const key = event.target.key;
+				const item = state.collection.getItem(key);
+				const isExpanded = state.isExpanded(key);
+				if (item?.hasChildNodes && (!isExpanded || hooks.isVirtualDragging?.())) state.toggleKey(key);
+			},
+			onKeyDown: (event) => {
+				const target = activeDropState.target;
+				if (!target || target.type !== "item" || target.dropPosition !== "on") return;
+				if (!state.collection.getItem(target.key)?.hasChildNodes) return;
+				const currentDirection = ariaProps.direction ?? resolveTreeDirection(ref());
+				const expandKey = EXPANSION_KEYS.expand[currentDirection];
+				const collapseKey = EXPANSION_KEYS.collapse[currentDirection];
+				if (event.key === expandKey && !state.isExpanded(target.key)) state.toggleKey(target.key);
+				else if (event.key === collapseKey && state.isExpanded(target.key)) state.toggleKey(target.key);
+			}
+		}, activeDropState, () => ref());
+	});
+	const isRootDropTarget = createMemo(() => {
+		return Boolean(dropState()?.target?.type === "root");
+	});
+	const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
+	const dndDropIndicator = (index, position) => {
+		const target = getDropTargetByIndex(index, position);
+		if (!target || target.type !== "item") return void 0;
+		return dndRenderDropIndicator()?.(target);
+	};
+	const persistedKeys = useDndPersistedKeys({ focusedKey: () => state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection);
+	const virtualRange = createMemo(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
+		const rows = visibleRows();
+		const baseRange = virtualizer.getVisibleRange(rows.length);
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rows.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		const dropTarget = dropState()?.target;
+		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection);
+		const focusedKey = state.focusedKey;
+		const focusedIndex = focusedKey != null ? rows.findIndex((node) => node.key === focusedKey) : -1;
+		const forceIncludeIndexes = [
+			dropTarget?.type === "item" ? rows.findIndex((node) => node.key === dropTarget.key) : -1,
+			normalizedDropKey != null ? rows.findIndex((node) => node.key === normalizedDropKey) : -1,
+			dropTarget?.type === "item" ? -1 : focusedIndex
+		].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, rows.length, virtualizer, 80, {
+			forceIncludeIndexes,
+			forceIncludeMaxSpan: 320
+		});
+	});
+	const virtualizedVisibleRows = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return visibleRows();
+		return visibleRows().slice(range.start, range.end);
+	});
+	createEffect(() => {
+		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
+		virtualizer.setDropTargetItemCountResolver(() => visibleRows().length);
+		virtualizer.setDropTargetIndexResolver((key) => {
+			const index = visibleRows().findIndex((node) => node.key === key);
+			return index >= 0 ? index : null;
+		});
+		virtualizer.setDropTargetResolver((target) => {
+			const node = visibleRows()[target.index];
+			if (!node) return target;
+			return {
+				...target,
+				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0,
+				parentKey: typeof node.parentKey === "string" || typeof node.parentKey === "number" ? node.parentKey : node.parentKey == null ? null : void 0,
+				level: typeof node.level === "number" ? node.level : void 0
+			};
+		});
+		onCleanup(() => {
+			virtualizer.setDropTargetIndexResolver(void 0);
+			virtualizer.setDropTargetItemCountResolver(void 0);
+			virtualizer.setDropTargetResolver(void 0);
+		});
+	});
+	const rowIndexByKey = createMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const rows = visibleRows();
+		for (let i = 0; i < rows.length; i += 1) map.set(rows[i].key, i);
+		return map;
+	});
+	const getAfterIndicatorIndexes = (absoluteIndex, renderRange) => {
+		const rows = visibleRows();
+		const current = rows[absoluteIndex];
+		if (!current) return [];
+		const next = rows[absoluteIndex + 1];
+		if (next && next.level >= current.level) return [];
+		const result = [];
+		let cursorIndex = absoluteIndex;
+		while (cursorIndex != null) {
+			const cursor = rows[cursorIndex];
+			if (!cursor) break;
+			if (!(!next || cursor.parentKey !== next.parentKey && next.level < cursor.level)) break;
+			result.push(cursorIndex);
+			if (cursor.parentKey == null) break;
+			cursorIndex = rowIndexByKey().get(cursor.parentKey) ?? null;
+		}
+		if (!renderRange) return result;
+		return result.filter((index) => index >= renderRange.start && index < renderRange.end);
+	};
+	createEffect(() => {
+		if (!virtualizer) return;
+		const direction = resolveTreeDirection(ref());
+		const treeDelegate = createTreeDropTargetDelegate({
+			getDropTargetFromPoint: parentCollectionRenderer?.dropTargetDelegate?.getDropTargetFromPoint ?? ((_x, _y, _v) => null),
+			getKeyboardNavigationTarget: parentCollectionRenderer?.dropTargetDelegate?.getKeyboardNavigationTarget,
+			getKeyboardPageNavigationTarget: parentCollectionRenderer?.dropTargetDelegate?.getKeyboardPageNavigationTarget
+		}, state, direction, virtualizer.getBaseKeyboardNavigationTarget);
+		virtualizer.setKeyboardNavigationOverride(treeDelegate.getKeyboardNavigationTarget ? (target, dir, isValid) => treeDelegate.getKeyboardNavigationTarget(target, dir, isValid) : void 0);
+		onCleanup(() => {
+			virtualizer.setKeyboardNavigationOverride(void 0);
+		});
+	});
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => item,
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	const rootKeyByNodeKey = createMemo(() => {
+		const rootMap = /* @__PURE__ */ new Map();
+		for (const row of visibleRows()) {
+			let rootKey = row.key;
+			let parentKey = row.parentKey;
+			while (parentKey != null) {
+				rootKey = parentKey;
+				parentKey = state.collection.getParentKey(parentKey);
+			}
+			rootMap.set(row.key, rootKey);
+		}
+		return rootMap;
+	});
+	const renderRange = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return null;
+		return {
+			start: range.start,
+			end: range.end
+		};
+	});
+	const renderableRows = createMemo(() => {
+		const offset = renderRange()?.start ?? 0;
+		return virtualizedVisibleRows().map((node, index) => ({
+			node,
+			globalIndex: offset + index
+		}));
+	});
+	const sectionedRenderableRows = createMemo(() => {
+		if (!hasSections()) return null;
+		const rootMap = rootKeyByNodeKey();
+		const rows = renderableRows();
+		return (stateProps.items ?? []).map((entry) => {
+			if (!isCollectionSection(entry)) return {
+				type: "single",
+				item: entry,
+				rows: rows.filter((row) => rootMap.get(row.node.key) === entry.key)
+			};
+			const sectionRootKeys = new Set(entry.items.map((item) => item.key));
+			return {
+				type: "section",
+				section: entry,
+				rows: rows.filter((row) => {
+					const rootKey = rootMap.get(row.node.key);
+					return rootKey != null && sectionRootKeys.has(rootKey);
+				})
+			};
+		});
+	});
+	const renderTreeRow = (node, itemIndex) => {
+		const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "before");
+		const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex, "on");
+		const afterIndicatorIndexes = () => getAfterIndicatorIndexes(itemIndex, renderRange());
+		const itemData = treeItemDataFromNode(node);
+		const itemState = {
+			isExpanded: node.isExpanded ?? false,
+			isExpandable: node.isExpandable ?? false,
+			level: node.level
+		};
+		return <>
+        {beforeIndicator()}
+        {onIndicator()}
+        {props.children(itemData, itemState)}
+        <For each={afterIndicatorIndexes()}>
+          {(afterIndex) => collectionRenderer().renderDropIndicator?.(afterIndex, "after")}
+        </For>
+      </>;
+	};
+	return <TreeContext.Provider value={contextValue()}>
+      <TreeStateContext.Provider value={state}>
+        <CollectionRendererContext.Provider value={collectionRenderer()}>
+          <div ref={(element) => {
+		setRef(element);
+		assignRef(local.ref, element);
+	}} {...mergeProps$1(domProps(), cleanTreeProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={ariaProps.isDisabled || void 0} data-empty={isEmpty() || void 0} data-drop-target={isRootDropTarget() || void 0} data-selection-mode={stateProps.selectionMode !== "none" ? stateProps.selectionMode : void 0} data-allows-dragging={hasDraggableDnd() || void 0}>
+            <SharedElementTransition>
+              {isEmpty() && local.renderEmptyState ? <div role="row" aria-level={1} style={{ display: "contents" }}>
+                  <div role="gridcell" style={{ display: "contents" }}>
+                    {local.renderEmptyState()}
+                  </div>
+                </div> : <>
+                  {virtualRange()?.offsetTop ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange().offsetTop}px` }} data-virtualizer-spacer="top" /> : null}
+                  <Show when={hasSections()} fallback={<For each={renderableRows()}>
+                        {(row) => renderTreeRow(row.node, row.globalIndex)}
+                      </For>}>
+                    <For each={sectionedRenderableRows() ?? []}>
+                      {(entry) => <Show when={entry.rows.length > 0}>
+                          <Show when={entry.type === "section"} fallback={<For each={entry.rows}>
+                                {(row) => renderTreeRow(row.node, row.globalIndex)}
+                              </For>}>
+                            <TreeSection>
+                              {entry.type === "section" && entry.section.title ? <TreeHeader>{entry.section.title}</TreeHeader> : null}
+                              <For each={entry.rows}>
+                                {(row) => renderTreeRow(row.node, row.globalIndex)}
+                              </For>
+                            </TreeSection>
+                          </Show>
+                        </Show>}
+                    </For>
+                  </Show>
+                  {virtualRange()?.offsetBottom ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange().offsetBottom}px` }} data-virtualizer-spacer="bottom" /> : null}
+                </>}
+            </SharedElementTransition>
+            {local.hasMore && local.onLoadMore && <TreeLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} loadingState={local.loadingState} class={local.loadMoreClass} style={local.loadMoreStyle}>
+                {local.renderLoadMoreItem?.({ isLoading: !!local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore" })}
+              </TreeLoadMoreItem>}
+          </div>
+        </CollectionRendererContext.Provider>
+      </TreeStateContext.Provider>
+    </TreeContext.Provider>;
+}
+/**
+* An item in a tree.
+*/
+function TreeItem(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"onAction",
+		"hasChildItems",
+		"isDisabled",
+		"href",
+		"target",
+		"download",
+		"rel",
+		"hrefLang",
+		"ping",
+		"referrerPolicy",
+		"routerOptions",
+		"ref",
+		"children"
+	]);
+	const context = useContext(TreeStateContext);
+	if (!context) throw new Error("TreeItem must be used within a Tree");
+	const state = context;
+	const treeContext = useContext(TreeContext);
+	const router = useRouter();
+	const linkProps = createMemo(() => useLinkProps({
+		href: local.href,
+		target: local.target,
+		rel: local.rel,
+		download: local.download,
+		ping: local.ping,
+		referrerPolicy: local.referrerPolicy
+	}));
+	const [ref, setRef] = createSignal(null);
+	const setItemRef = (element) => {
+		setRef(element);
+		assignRef(local.ref, element);
+	};
+	const itemNode = createMemo(() => {
+		const node = state.collection.getItem(local.id);
+		if (!node) return {
+			type: "item",
+			key: local.id,
+			value: local.item?.value ?? null,
+			textValue: local.textValue ?? String(local.id),
+			level: 0,
+			index: 0,
+			hasChildNodes: !!local.hasChildItems,
+			childNodes: [],
+			isDisabled: local.isDisabled,
+			isExpandable: !!local.hasChildItems,
+			isExpanded: false
+		};
+		return node;
+	});
+	const treeItemAria = createTreeItem(() => ({
+		node: itemNode(),
+		selectionBehavior: state.selectionBehavior,
+		onAction: local.onAction,
+		isDisabled: local.isDisabled,
+		textValue: local.textValue
+	}), () => state, ref);
+	const isSelected = () => treeItemAria.isSelected;
+	const isDisabled = () => treeItemAria.isDisabled;
+	const isPressed = () => treeItemAria.isPressed;
+	const isExpanded = () => treeItemAria.isExpanded;
+	const isExpandable = () => treeItemAria.isExpandable;
+	const level = () => treeItemAria.level;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return isDisabled();
+	} });
+	const { isFocusVisible, focusProps } = createFocusRing();
+	const isFocused = createMemo(() => state.focusedKey === local.id);
+	const draggableItem = createMemo(() => {
+		if (!treeContext?.dragAndDropHooks?.useDraggableItem || !treeContext.dragState) return void 0;
+		return treeContext.dragAndDropHooks.useDraggableItem({ key: local.id }, treeContext.dragState);
+	});
+	const droppableItem = createMemo(() => {
+		if (!treeContext?.dragAndDropHooks?.useDroppableItem || !treeContext.dropState) return void 0;
+		return treeContext.dragAndDropHooks.useDroppableItem({ key: local.id }, treeContext.dropState, () => ref());
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible() && isFocused(),
+		isPressed: isPressed(),
+		isHovered: isHovered(),
+		isDisabled: isDisabled(),
+		isExpanded: isExpanded(),
+		isExpandable: isExpandable(),
+		level: level(),
+		selectionMode: state.selectionMode,
+		selectionBehavior: state.selectionBehavior
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Tree-item"
+	}, renderValues);
+	const cleanRowProps = () => {
+		const { ref: _ref1, ...rest } = treeItemAria.rowProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const itemContextValue = createMemo(() => ({
+		node: itemNode(),
+		isExpanded: isExpanded(),
+		isExpandable: isExpandable(),
+		level: level()
+	}));
+	const rowStyle = () => ({
+		"--tree-item-level": String(level()),
+		...typeof renderProps.style() === "object" ? renderProps.style() : {}
+	});
+	const rowContent = () => <TreeItemContentContext.Provider value={renderValues()}>
+      <div {...treeItemAria.gridCellProps} class="solidaria-Tree-item-content">
+        {renderProps.renderChildren()}
+      </div>
+    </TreeItemContentContext.Provider>;
+	const mergedRowProps = () => mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+	const onLinkedRowClick = (event) => {
+		const onClick = mergedRowProps().onClick;
+		onClick?.(event);
+		handleLinkClick(event, router, local.href, local.routerOptions);
+	};
+	const downloadAttr = () => {
+		const download = linkProps().download;
+		return typeof download === "boolean" ? download ? "" : void 0 : download;
+	};
+	const referrerPolicyAttr = () => linkProps().referrerPolicy || void 0;
+	const linkedRowDomProps = () => local.href ? {
+		onClick: onLinkedRowClick,
+		"data-href": linkProps().href,
+		"data-target": linkProps().target,
+		"data-download": downloadAttr(),
+		"data-rel": linkProps().rel,
+		"data-hreflang": local.hrefLang,
+		"data-ping": linkProps().ping,
+		"data-referrer-policy": referrerPolicyAttr()
+	} : {};
+	return <TreeItemContext.Provider value={itemContextValue()}>
+      <div ref={setItemRef} {...domProps} {...mergedRowProps()} {...linkedRowDomProps()} class={renderProps.class()} style={rowStyle()} data-selected={isSelected() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() && isFocused() || void 0} data-pressed={isPressed() || void 0} data-hovered={isHovered() || void 0} data-disabled={isDisabled() || void 0} data-expanded={isExpanded() || void 0} data-expandable={isExpandable() || void 0} data-has-child-items={isExpandable() || void 0} data-level={level()} data-selection-mode={treeContext?.state.selectionMode !== "none" ? treeContext?.state.selectionMode : void 0} data-dragging={draggableItem()?.isDragging || void 0} data-drop-target={droppableItem()?.isDropTarget || void 0}>
+        {rowContent()}
+      </div>
+    </TreeItemContext.Provider>;
+}
+/**
+* A button to expand/collapse a tree item.
+*/
+function TreeExpandButton(props) {
+	const itemContext = useContext(TreeItemContext);
+	if (!itemContext) throw new Error("TreeExpandButton must be used within a Tree");
+	const stateContext = useContext(TreeStateContext);
+	if (!stateContext) throw new Error("TreeExpandButton must be used within a Tree");
+	const state = stateContext;
+	const treeItemAria = createTreeItem(() => ({ node: itemContext.node }), () => state, () => null);
+	const cleanExpandProps = () => {
+		const { ref: _ref, ...rest } = treeItemAria.expandButtonProps;
+		return rest;
+	};
+	const dataProps = () => {
+		const result = {};
+		for (const key in props) if (key.startsWith("data-")) result[key] = props[key];
+		return result;
+	};
+	const isExpanded = createMemo(() => state.isExpanded(itemContext.node.key));
+	const renderChildren = () => {
+		if (typeof props.children === "function") return props.children({ isExpanded: isExpanded() });
+		return props.children;
+	};
+	return <Show when={itemContext.isExpandable}>
+      <button {...cleanExpandProps()} {...dataProps()} class={props.class ?? "solidaria-Tree-expand-button"} style={props.style} data-expanded={isExpanded() || void 0}>
+        {renderChildren()}
+      </button>
+    </Show>;
+}
+/**
+* A checkbox for item selection in a tree.
+*/
+function TreeSelectionCheckbox(props) {
+	const context = useContext(TreeStateContext);
+	if (!context) throw new Error("TreeSelectionCheckbox must be used within a Tree");
+	const state = context;
+	const treeSelectionCheckboxAria = createTreeSelectionCheckbox(() => ({ key: props.itemKey }), () => state);
+	return <input {...treeSelectionCheckboxAria.checkboxProps} class={props.class ?? "solidaria-Tree-checkbox"} style={props.style} tabIndex={props.excludeFromTabOrder ? -1 : void 0} aria-label={props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"]} />;
+}
+function TreeLoadMoreItem(props) {
+	let sentinelRef;
+	const [isPending, setIsPending] = createSignal(false);
+	const isLoading = () => !!props.isLoading || props.loadingState === "loading" || props.loadingState === "loadingMore" || isPending();
+	const triggerLoadMore = async () => {
+		if (isLoading()) return;
+		setIsPending(true);
+		try {
+			await props.onLoadMore();
+		} finally {
+			setIsPending(false);
+		}
+	};
+	createEffect(() => {});
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
+		},
+		class: props.class,
+		style: props.style,
+		defaultClassName: "solidaria-Tree-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return <>
+      <div style={{
+		position: "relative",
+		width: 0,
+		height: 0,
+		overflow: "hidden"
+	}} inert>
+        <div ref={sentinelRef} style={{
+		position: "absolute",
+		height: "1px",
+		width: "1px"
+	}} />
+      </div>
+      <div role="row" aria-level={props.level ?? 1} onFocus={() => {
+		triggerLoadMore();
+	}} onFocusIn={() => {
+		triggerLoadMore();
+	}} class={renderProps.class()} style={renderProps.style()} data-loading={isLoading() || void 0} data-level={props.level ?? 1}>
+        <div role="gridcell" onFocus={() => {
+		triggerLoadMore();
+	}}>
+          {renderProps.renderChildren()}
+        </div>
+      </div>
+    </>;
+}
+function TreeItemContent(props) {
+	const context = useContext(TreeItemContentContext);
+	if (!context) throw new Error("TreeItemContent must be used within a TreeItem");
+	const renderProps = useRenderProps({ get children() {
+		return props.children;
+	} }, () => context);
+	return <>{renderProps.renderChildren()}</>;
+}
+/**
+* A section within a Tree. Renders as `role="rowgroup"` and supplies its
+* optional {@link TreeHeader} with the row/rowheader props that wire up the
+* section's `aria-labelledby` (mirrors upstream `TreeSection`, which reuses
+* `useGridListSection`).
+*/
+function TreeSection(props) {
+	const [local, domProps] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const section = createGridListSection({ get "aria-label"() {
+		return domProps["aria-label"];
+	} });
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TreeSection"
+	}, () => ({ hasChildren: true }));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return <div ref={(el) => assignRef(local.ref, el)} {...filteredDomProps()} {...section.rowGroupProps} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-section>
+      <GridListHeaderContext.Provider value={section.rowProps}>
+        <GridListHeaderInnerContext.Provider value={section.rowHeaderProps}>
+          {local.children}
+        </GridListHeaderInnerContext.Provider>
+      </GridListHeaderContext.Provider>
+    </div>;
+}
+/**
+* The header of a {@link TreeSection}. Mirrors upstream `TreeHeader`, which is a
+* thin wrapper over `GridListHeader` with a Tree-specific class. The row and
+* rowheader semantics come from the enclosing section through context.
+*/
+function TreeHeader(props) {
+	return <GridListHeader class="solidaria-TreeHeader" {...props}>
+      {props.children}
+    </GridListHeader>;
+}
+Tree.Item = TreeItem;
+Tree.ExpandButton = TreeExpandButton;
+Tree.SelectionCheckbox = TreeSelectionCheckbox;
+Tree.LoadMoreItem = TreeLoadMoreItem;
+Tree.Section = TreeSection;
+Tree.Header = TreeHeader;
+function areSetsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const entry of a) if (!b.has(entry)) return false;
+	return true;
+}
+//#endregion
+export { Tree, TreeContext, TreeExpandButton, TreeHeader, TreeItem, TreeItemContent, TreeItemContext, TreeLoadMoreItem, TreeSection, TreeSelectionCheckbox, TreeStateContext };
+
+//# sourceMappingURL=Tree.jsx.map