@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Tree.js

@@ -1,13 +1,26 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Tree.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { SharedElementTransition } from "./SharedElementTransition.js";
 import { handleLinkClick, useLinkProps, useRouter } from "./RouterProvider.js";
-import { CollectionRendererContext, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
-import { r as useVirtualizerContext } from "./Virtualizer2.js";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { CollectionRendererContext, flattenCollectionEntries, isCollectionSection, useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
 import { GridListHeader, GridListHeaderContext, GridListHeaderInnerContext } from "./GridList.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createFocusRing, createGridListSection, createHover, createTree, createTreeItem, createTreeSelectionCheckbox, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createFocusRing, createGridListSection, createHover, createTree, createTreeItem, createTreeSelectionCheckbox, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createTreeCollection, createTreeState } from "@proyecto-viviana/solid-stately";
 //#region src/Tree.tsx
 /**
@@ -19,8 +32,14 @@ import { createTreeCollection, createTreeState } from "@proyecto-viviana/solid-s
 * Tree displays hierarchical data with expandable/collapsible nodes,
 * supporting keyboard navigation and selection.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<div role=row aria-level=1 style=display:contents><div role=gridcell style=display:contents>`), _tmpl$3 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$5 = /*#__PURE__*/ template(`<div>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<input>`), _tmpl$8 = /*#__PURE__*/ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$9 = /*#__PURE__*/ template(`<div role=row><div role=gridcell>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div role=row aria-level=1 style=display:contents><div role=gridcell style=display:contents>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div role=row><div role=gridcell>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -37,20 +56,6 @@ const EXPANSION_KEYS = {
 		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,
@@ -99,12 +104,14 @@ function createTreeDropTargetDelegate(delegate, state, direction, baseKeyboardNa
 			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 (parentItem?.type === "item") {
+					const afterParentTarget = {
+						type: "item",
+						key: parentKey,
+						dropPosition: "after"
+					};
+					if (isValidDropTarget(afterParentTarget)) ancestorTargets.push(afterParentTarget);
+				}
 				if (nextItem) break;
 			}
 			parentKey = parentItem?.parentKey ?? null;
@@ -128,12 +135,15 @@ function createTreeDropTargetDelegate(delegate, state, direction, baseKeyboardNa
 		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
-		};
+		if (!pointerTracking.boundaryContext || pointerTracking.boundaryContext.parentKey !== parentKey) {
+			const initialTargetIndex = pointerTracking.yDirection === "up" ? potentialTargets.length - 1 : 0;
+			pointerTracking.boundaryContext = {
+				parentKey,
+				preferredTargetIndex: initialTargetIndex,
+				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) {
@@ -461,7 +471,9 @@ function Tree(props) {
 		"defaultExpandedKeys",
 		"onExpandedChange"
 	]);
-	const [ref, setRef] = createSignal(null);
+	const locale = useLocale();
+	const [ref$1, setRef] = createSignal(null);
+	const parentCollectionRenderer = useCollectionRenderer();
 	const flatItems = createMemo(() => flattenCollectionEntries(stateProps.items ?? []));
 	const hasSections = createMemo(() => (stateProps.items ?? []).some((entry) => isCollectionSection(entry)));
 	const state = createTreeState(() => ({
@@ -480,7 +492,7 @@ function Tree(props) {
 	const [lastExpandedKeys, setLastExpandedKeys] = createSignal(/* @__PURE__ */ new Set());
 	const [lastItemsLength, setLastItemsLength] = createSignal(flatItems().length);
 	const [collectionVersion, setCollectionVersion] = createSignal(0);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const expanded = state.expandedKeys;
 		const items = flatItems();
 		if (!areSetsEqual(lastExpandedKeys(), expanded) || lastItemsLength() !== items.length) {
@@ -489,18 +501,18 @@ function Tree(props) {
 			setCollectionVersion((v) => v + 1);
 		}
 	});
-	const treeDirection = createMemo(() => ariaProps.direction ?? resolveTreeDirection(ref()));
+	const treeDirection = createMemo(() => ariaProps.direction ?? locale().direction);
 	const treeAria = createTree(() => ({
 		id: ariaProps.id,
 		"aria-label": ariaProps["aria-label"],
 		"aria-labelledby": ariaProps["aria-labelledby"],
 		"aria-describedby": ariaProps["aria-describedby"],
-		isVirtualized: ariaProps.isVirtualized,
+		isVirtualized: ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized,
 		onAction: ariaProps.onAction,
 		isDisabled: ariaProps.isDisabled,
 		keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
 		direction: treeDirection()
-	}), () => state, ref);
+	}), () => state, ref$1);
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const renderValues = createMemo(() => ({
 		isFocused: state.isFocused || isFocused(),
@@ -530,7 +542,6 @@ function Tree(props) {
 		return state.collection.rows;
 	});
 	const virtualizer = useVirtualizerContext();
-	const parentCollectionRenderer = useCollectionRenderer();
 	const getDropTargetByIndex = (index, position) => {
 		const node = visibleRows()[index];
 		if (!node) return null;
@@ -548,16 +559,18 @@ function Tree(props) {
 		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();
+	const dragStateValue = hasDraggableDnd() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: visibleRows().map((node) => node.value),
+		collection: state.collection,
+		selectedKeys: state.selectedKeys,
+		isSelected: (key) => state.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection;
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	createEffect(() => dropState(), (activeDropState) => {
 		if (!activeDropState) return;
 		const originalGetDropOperation = activeDropState.getDropOperation.bind(activeDropState);
 		activeDropState.getDropOperation = (target, types, allowedOperations) => {
@@ -573,17 +586,11 @@ function Tree(props) {
 			}
 			return originalGetDropOperation(target, types, allowedOperations);
 		};
-		onCleanup(() => {
+		return () => {
 			activeDropState.getDropOperation = originalGetDropOperation;
-		});
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
-		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => ref());
+		};
 	});
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref$1());
 	const contextValue = createMemo(() => ({
 		state,
 		collection: state.collection,
@@ -593,13 +600,13 @@ function Tree(props) {
 		dragState: dragState(),
 		dropState: dropState()
 	}));
-	const droppableCollection = createMemo(() => {
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
 		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		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(), {
+		const direction = locale().direction;
+		const baseDropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref$1(), {
 			layout: "stack",
 			orientation: "vertical",
 			direction
@@ -639,14 +646,15 @@ function Tree(props) {
 				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 currentDirection = ariaProps.direction ?? locale().direction;
 				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());
-	});
+		}, activeDropState, () => ref$1());
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -661,27 +669,28 @@ function Tree(props) {
 		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, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? rows.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? rows.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], rows.length, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const rows = visibleRows();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rows.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
 	const virtualizedVisibleRows = createMemo(() => {
 		const range = virtualRange();
 		if (!range) return visibleRows();
 		return visibleRows().slice(range.start, range.end);
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		virtualizer.setDropTargetItemCountResolver(() => visibleRows().length);
 		virtualizer.setDropTargetIndexResolver((key) => {
@@ -698,11 +707,14 @@ function Tree(props) {
 				level: typeof node.level === "number" ? node.level : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const rowIndexByKey = createMemo(() => {
 		const map = /* @__PURE__ */ new Map();
@@ -729,24 +741,29 @@ function Tree(props) {
 		if (!renderRange) return result;
 		return result.filter((index) => index >= renderRange.start && index < renderRange.end);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer) return;
-		const direction = resolveTreeDirection(ref());
+		const direction = locale().direction;
 		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(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setKeyboardNavigationOverride(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const collectionRenderer = createMemo(() => ({
 		...parentCollectionRenderer,
 		renderItem: (item) => item,
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
+	const CollectionRoot = useCollectionRoot();
 	const rootKeyByNodeKey = createMemo(() => {
 		const rootMap = /* @__PURE__ */ new Map();
 		for (const row of visibleRows()) {
@@ -798,7 +815,6 @@ function Tree(props) {
 	});
 	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 = {
@@ -808,8 +824,9 @@ function Tree(props) {
 		};
 		return [
 			memo(beforeIndicator),
-			memo(onIndicator),
-			memo(() => props.children(itemData, itemState)),
+			memo(() => {
+				return props.children(itemData, itemState);
+			}),
 			createComponent(For, {
 				get each() {
 					return afterIndicatorIndexes();
@@ -818,146 +835,238 @@ function Tree(props) {
 			})
 		];
 	};
-	return createComponent(TreeContext.Provider, {
+	return createComponent(TreeContext, {
 		get value() {
 			return contextValue();
 		},
 		get children() {
-			return createComponent(TreeStateContext.Provider, {
+			return createComponent(TreeStateContext, {
 				value: state,
 				get children() {
-					return createComponent(CollectionRendererContext.Provider, {
+					return createComponent(CollectionRendererContext, {
 						get value() {
 							return collectionRenderer();
 						},
 						get children() {
-							var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, [_el$3, _co$] = getNextMarker(_el$2.nextSibling), _el$4 = _el$3.nextSibling, [_el$5, _co$2] = getNextMarker(_el$4.nextSibling);
-							use((element) => {
-								setRef(element);
-								assignRef(local.ref, element);
+							var _el$ = getNextElement(_tmpl$);
+							var _el$2 = _el$.firstChild;
+							var [_el$3, _el$4] = getNextMarker(_el$2.nextSibling);
+							var _el$5 = _el$3.nextSibling;
+							var [_el$6, _el$7] = getNextMarker(_el$5.nextSibling);
+							ref(() => {
+								return (element) => {
+									setRef(element);
+									assignRef$1(local.ref, element);
+								};
 							}, _el$);
-							spread(_el$, mergeProps(() => mergeProps$2(domProps(), cleanTreeProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
-								get ["class"]() {
+							spread(_el$, [() => {
+								return mergeProps$1(domProps(), cleanTreeProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {});
+							}, {
+								get "class"() {
 									return renderProps.class();
 								},
 								get style() {
 									return renderProps.style();
 								},
-								get ["data-focused"]() {
-									return state.isFocused || void 0;
+								get "data-focused"() {
+									return dataAttr(state.isFocused);
 								},
-								get ["data-focus-visible"]() {
-									return isFocusVisible() || void 0;
+								get "data-focus-visible"() {
+									return dataAttr(isFocusVisible());
 								},
-								get ["data-disabled"]() {
-									return ariaProps.isDisabled || void 0;
+								get "data-disabled"() {
+									return dataAttr(ariaProps.isDisabled);
 								},
-								get ["data-empty"]() {
-									return isEmpty() || void 0;
+								get "data-empty"() {
+									return dataAttr(isEmpty());
 								},
-								get ["data-drop-target"]() {
-									return isRootDropTarget() || void 0;
+								get "data-drop-target"() {
+									return dataAttr(isRootDropTarget());
 								},
-								get ["data-selection-mode"]() {
-									return memo(() => stateProps.selectionMode !== "none")() ? stateProps.selectionMode : void 0;
+								get "data-selection-mode"() {
+									return stateProps.selectionMode !== "none" ? stateProps.selectionMode : void 0;
 								},
-								get ["data-allows-dragging"]() {
-									return hasDraggableDnd() || void 0;
+								get "data-allows-dragging"() {
+									return dataAttr(hasDraggableDnd());
 								}
-							}), false, true);
+							}], true);
 							insert(_el$, createComponent(SharedElementTransition, { get children() {
-								return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
-									var _el$6 = getNextElement(_tmpl$2), _el$7 = _el$6.firstChild;
-									insert(_el$7, () => local.renderEmptyState());
-									return _el$6;
-								})() : [
-									memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-										var _el$8 = getNextElement(_tmpl$3);
-										effect((_$p) => setStyleProperty(_el$8, "height", `${virtualRange().offsetTop}px`));
-										return _el$8;
-									})() : null),
-									createComponent(Show, {
-										get when() {
-											return hasSections();
-										},
-										get fallback() {
-											return createComponent(For, {
-												get each() {
-													return renderableRows();
-												},
-												children: (row) => renderTreeRow(row.node, row.globalIndex)
-											});
-										},
-										get children() {
-											return createComponent(For, {
-												get each() {
-													return sectionedRenderableRows() ?? [];
-												},
-												children: (entry) => createComponent(Show, {
-													get when() {
-														return entry.rows.length > 0;
+								return memo(() => {
+									return !!(isEmpty() && local.renderEmptyState);
+								})() ? (() => {
+									var _el$8 = getNextElement(_tmpl$2);
+									var _el$9 = _el$8.firstChild;
+									insert(_el$9, scope(() => {
+										return local.renderEmptyState();
+									}));
+									return _el$8;
+								})() : memo(() => {
+									return !!parentCollectionRenderer?.isVirtualized;
+								})() ? createComponent(CollectionRoot, {
+									get collection() {
+										return memo(() => {
+											return !!virtualRange();
+										})() ? visibleRows() : [];
+									},
+									scrollRef: () => ref$1(),
+									get persistedKeys() {
+										return persistedKeys();
+									},
+									get children() {
+										return [createComponent(Show, {
+											get when() {
+												return hasSections();
+											},
+											get fallback() {
+												return createComponent(For, {
+													get each() {
+														return renderableRows();
 													},
-													get children() {
-														return createComponent(Show, {
-															get when() {
-																return entry.type === "section";
-															},
-															get fallback() {
-																return createComponent(For, {
-																	get each() {
-																		return entry.rows;
-																	},
-																	children: (row) => renderTreeRow(row.node, row.globalIndex)
-																});
-															},
-															get children() {
-																return createComponent(TreeSection, { get children() {
-																	return [memo(() => memo(() => !!(entry.type === "section" && entry.section.title))() ? createComponent(TreeHeader, { get children() {
-																		return entry.section.title;
-																	} }) : null), createComponent(For, {
+													children: (row) => renderTreeRow(row.node, row.globalIndex)
+												});
+											},
+											get children() {
+												return createComponent(For, {
+													get each() {
+														return sectionedRenderableRows() ?? [];
+													},
+													children: (entry) => createComponent(Show, {
+														get when() {
+															return entry.rows.length > 0;
+														},
+														get children() {
+															return createComponent(Show, {
+																get when() {
+																	return entry.type === "section";
+																},
+																get fallback() {
+																	return createComponent(For, {
 																		get each() {
 																			return entry.rows;
 																		},
 																		children: (row) => renderTreeRow(row.node, row.globalIndex)
-																	})];
-																} });
-															}
-														});
+																	});
+																},
+																get children() {
+																	return createComponent(TreeSection, { get children() {
+																		return [memo(() => {
+																			return memo(() => {
+																				return !!(entry.type === "section" && entry.section.title);
+																			})() ? createComponent(TreeHeader, { get children() {
+																				return entry.section.title;
+																			} }) : null;
+																		}), createComponent(For, {
+																			get each() {
+																				return entry.rows;
+																			},
+																			children: (row) => renderTreeRow(row.node, row.globalIndex)
+																		})];
+																	} });
+																}
+															});
+														}
+													})
+												});
+											}
+										}), createComponent(For, {
+											get each() {
+												return persistedOutsideIndexes();
+											},
+											children: (index) => {
+												const node = visibleRows()[index];
+												return node ? createComponent(PersistedVirtualItem, {
+													index,
+													get children() {
+														return renderTreeRow(node, index);
 													}
-												})
-											});
-										}
-									}),
-									memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-										var _el$9 = getNextElement(_tmpl$4);
-										effect((_$p) => setStyleProperty(_el$9, "height", `${virtualRange().offsetBottom}px`));
-										return _el$9;
-									})() : null)
-								];
-							} }), _el$3, _co$);
-							insert(_el$, (() => {
-								var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
-								return () => _c$() && createComponent(TreeLoadMoreItem, {
-									get onLoadMore() {
-										return local.onLoadMore;
-									},
-									get isLoading() {
-										return local.isLoading;
-									},
-									get loadingState() {
-										return local.loadingState;
-									},
-									get ["class"]() {
-										return local.loadMoreClass;
+												}) : null;
+											}
+										})];
+									}
+								}) : createComponent(Show, {
+									get when() {
+										return hasSections();
 									},
-									get style() {
-										return local.loadMoreStyle;
+									get fallback() {
+										return createComponent(For, {
+											get each() {
+												return renderableRows();
+											},
+											children: (row) => renderTreeRow(row.node, row.globalIndex)
+										});
 									},
 									get children() {
-										return local.renderLoadMoreItem?.({ isLoading: !!local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore" });
+										return createComponent(For, {
+											get each() {
+												return sectionedRenderableRows() ?? [];
+											},
+											children: (entry) => createComponent(Show, {
+												get when() {
+													return entry.rows.length > 0;
+												},
+												get children() {
+													return createComponent(Show, {
+														get when() {
+															return entry.type === "section";
+														},
+														get fallback() {
+															return createComponent(For, {
+																get each() {
+																	return entry.rows;
+																},
+																children: (row) => renderTreeRow(row.node, row.globalIndex)
+															});
+														},
+														get children() {
+															return createComponent(TreeSection, { get children() {
+																return [memo(() => {
+																	return memo(() => {
+																		return !!(entry.type === "section" && entry.section.title);
+																	})() ? createComponent(TreeHeader, { get children() {
+																		return entry.section.title;
+																	} }) : null;
+																}), createComponent(For, {
+																	get each() {
+																		return entry.rows;
+																	},
+																	children: (row) => renderTreeRow(row.node, row.globalIndex)
+																})];
+															} });
+														}
+													});
+												}
+											})
+										});
 									}
 								});
-							})(), _el$5, _co$2);
+							} }), _el$3, _el$4);
+							insert(_el$, scope((() => {
+								var _c$ = memo(() => {
+									return !!(local.hasMore && local.onLoadMore);
+								});
+								return () => {
+									return _c$() ? createComponent(TreeLoadMoreItem, {
+										get onLoadMore() {
+											return local.onLoadMore;
+										},
+										get isLoading() {
+											return local.isLoading;
+										},
+										get loadingState() {
+											return local.loadingState;
+										},
+										get "class"() {
+											return local.loadMoreClass;
+										},
+										get style() {
+											return local.loadMoreStyle;
+										},
+										get children() {
+											return local.renderLoadMoreItem?.({ isLoading: !!local.isLoading || local.loadingState === "loading" || local.loadingState === "loadingMore" });
+										}
+									}) : local.hasMore && local.onLoadMore;
+								};
+							})()), _el$6, _el$7);
 							runHydrationEvents();
 							return _el$;
 						}
@@ -1005,10 +1114,12 @@ function TreeItem(props) {
 		ping: local.ping,
 		referrerPolicy: local.referrerPolicy
 	}));
-	const [ref, setRef] = createSignal(null);
+	const [ref$2, setRef] = createSignal(null);
 	const setItemRef = (element) => {
 		setRef(element);
-		assignRef(local.ref, element);
+		assignRef$1(local.ref, element);
+		const dragRef = (draggableItem()?.dragProps)?.ref;
+		if (typeof dragRef === "function") dragRef(element);
 	};
 	const itemNode = createMemo(() => {
 		const node = state.collection.getItem(local.id);
@@ -1033,7 +1144,7 @@ function TreeItem(props) {
 		onAction: local.onAction,
 		isDisabled: local.isDisabled,
 		textValue: local.textValue
-	}), () => state, ref);
+	}), () => state, ref$2);
 	const isSelected = () => treeItemAria.isSelected;
 	const isDisabled = () => treeItemAria.isDisabled;
 	const isPressed = () => treeItemAria.isPressed;
@@ -1051,7 +1162,7 @@ function TreeItem(props) {
 	});
 	const droppableItem = createMemo(() => {
 		if (!treeContext?.dragAndDropHooks?.useDroppableItem || !treeContext.dropState) return void 0;
-		return treeContext.dragAndDropHooks.useDroppableItem({ key: local.id }, treeContext.dropState, () => ref());
+		return treeContext.dragAndDropHooks.useDroppableItem({ key: local.id }, treeContext.dropState, () => ref$2());
 	});
 	const renderValues = createMemo(() => ({
 		isSelected: isSelected(),
@@ -1096,19 +1207,23 @@ function TreeItem(props) {
 		"--tree-item-level": String(level()),
 		...typeof renderProps.style() === "object" ? renderProps.style() : {}
 	});
-	const rowContent = () => createComponent(TreeItemContentContext.Provider, {
+	const rowContent = () => createComponent(TreeItemContentContext, {
 		get value() {
 			return renderValues();
 		},
 		get children() {
-			var _el$0 = getNextElement(_tmpl$5);
-			spread(_el$0, mergeProps(() => treeItemAria.gridCellProps, { "class": "solidaria-Tree-item-content" }), false, true);
-			insert(_el$0, () => renderProps.renderChildren());
+			var _el$10 = getNextElement(_tmpl$3);
+			spread(_el$10, [() => {
+				return treeItemAria.gridCellProps;
+			}, { class: "solidaria-Tree-item-content" }], true);
+			insert(_el$10, scope(() => {
+				return renderProps.renderChildren();
+			}));
 			runHydrationEvents();
-			return _el$0;
+			return _el$10;
 		}
 	});
-	const mergedRowProps = () => mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+	const mergedRowProps = () => mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
 	const onLinkedRowClick = (event) => {
 		const onClick = mergedRowProps().onClick;
 		onClick?.(event);
@@ -1129,63 +1244,72 @@ function TreeItem(props) {
 		"data-ping": linkProps().ping,
 		"data-referrer-policy": referrerPolicyAttr()
 	} : {};
-	return createComponent(TreeItemContext.Provider, {
+	return createComponent(TreeItemContext, {
 		get value() {
 			return itemContextValue();
 		},
 		get children() {
-			var _el$1 = getNextElement(_tmpl$5);
-			use(setItemRef, _el$1);
-			spread(_el$1, mergeProps(domProps, mergedRowProps, linkedRowDomProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return rowStyle();
-				},
-				get ["data-selected"]() {
-					return isSelected() || void 0;
-				},
-				get ["data-focused"]() {
-					return isFocused() || void 0;
-				},
-				get ["data-focus-visible"]() {
-					return memo(() => !!isFocusVisible())() && isFocused() || void 0;
-				},
-				get ["data-pressed"]() {
-					return isPressed() || void 0;
-				},
-				get ["data-hovered"]() {
-					return isHovered() || void 0;
-				},
-				get ["data-disabled"]() {
-					return isDisabled() || void 0;
-				},
-				get ["data-expanded"]() {
-					return isExpanded() || void 0;
-				},
-				get ["data-expandable"]() {
-					return isExpandable() || void 0;
-				},
-				get ["data-has-child-items"]() {
-					return isExpandable() || void 0;
-				},
-				get ["data-level"]() {
-					return level();
-				},
-				get ["data-selection-mode"]() {
-					return memo(() => treeContext?.state.selectionMode !== "none")() ? treeContext?.state.selectionMode : void 0;
-				},
-				get ["data-dragging"]() {
-					return draggableItem()?.isDragging || void 0;
-				},
-				get ["data-drop-target"]() {
-					return droppableItem()?.isDropTarget || void 0;
+			var _el$11 = getNextElement(_tmpl$3);
+			ref(() => {
+				return setItemRef;
+			}, _el$11);
+			spread(_el$11, [
+				domProps,
+				mergedRowProps,
+				linkedRowDomProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return rowStyle();
+					},
+					get "data-selected"() {
+						return dataAttr(isSelected());
+					},
+					get "data-focused"() {
+						return dataAttr(isFocused());
+					},
+					get "data-focus-visible"() {
+						return dataAttr(isFocusVisible() && isFocused());
+					},
+					get "data-pressed"() {
+						return dataAttr(isPressed());
+					},
+					get "data-hovered"() {
+						return dataAttr(isHovered());
+					},
+					get "data-disabled"() {
+						return dataAttr(isDisabled());
+					},
+					get "data-expanded"() {
+						return dataAttr(isExpanded());
+					},
+					get "data-expandable"() {
+						return dataAttr(isExpandable());
+					},
+					get "data-has-child-items"() {
+						return dataAttr(isExpandable());
+					},
+					get "data-level"() {
+						return level();
+					},
+					get "data-selection-mode"() {
+						return treeContext?.state.selectionMode !== "none" ? treeContext?.state.selectionMode : void 0;
+					},
+					get "data-dragging"() {
+						return dataAttr(draggableItem()?.isDragging);
+					},
+					get "data-drop-target"() {
+						return dataAttr(droppableItem()?.isDropTarget);
+					}
 				}
-			}), false, true);
-			insert(_el$1, rowContent);
+			], true);
+			insert(_el$11, scope(() => {
+				return rowContent();
+			}));
 			runHydrationEvents();
-			return _el$1;
+			return _el$11;
 		}
 	});
 }
@@ -1218,21 +1342,27 @@ function TreeExpandButton(props) {
 			return itemContext.isExpandable;
 		},
 		get children() {
-			var _el$10 = getNextElement(_tmpl$6);
-			spread(_el$10, mergeProps(cleanExpandProps, dataProps, {
-				get ["class"]() {
-					return props.class ?? "solidaria-Tree-expand-button";
-				},
-				get style() {
-					return props.style;
-				},
-				get ["data-expanded"]() {
-					return isExpanded() || void 0;
+			var _el$12 = getNextElement(_tmpl$4);
+			spread(_el$12, [
+				cleanExpandProps,
+				dataProps,
+				{
+					get "class"() {
+						return props.class ?? "solidaria-Tree-expand-button";
+					},
+					get style() {
+						return props.style;
+					},
+					get "data-expanded"() {
+						return dataAttr(isExpanded());
+					}
 				}
-			}), false, true);
-			insert(_el$10, renderChildren);
+			], true);
+			insert(_el$12, scope(() => {
+				return renderChildren();
+			}));
 			runHydrationEvents();
-			return _el$10;
+			return _el$12;
 		}
 	});
 }
@@ -1244,29 +1374,30 @@ function TreeSelectionCheckbox(props) {
 	if (!context) throw new Error("TreeSelectionCheckbox must be used within a Tree");
 	const state = context;
 	const treeSelectionCheckboxAria = createTreeSelectionCheckbox(() => ({ key: props.itemKey }), () => state);
-	return (() => {
-		var _el$11 = getNextElement(_tmpl$7);
-		spread(_el$11, mergeProps(() => treeSelectionCheckboxAria.checkboxProps, {
-			get ["class"]() {
-				return props.class ?? "solidaria-Tree-checkbox";
-			},
-			get style() {
-				return props.style;
-			},
-			get tabIndex() {
-				return props.excludeFromTabOrder ? -1 : 0;
-			},
-			get ["aria-label"]() {
-				return props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"];
-			}
-		}), false, false);
-		runHydrationEvents();
-		return _el$11;
-	})();
+	var _el$13 = getNextElement(_tmpl$5);
+	spread(_el$13, [() => {
+		return treeSelectionCheckboxAria.checkboxProps;
+	}, {
+		get "class"() {
+			return props.class ?? "solidaria-Tree-checkbox";
+		},
+		get style() {
+			return props.style;
+		},
+		get tabindex() {
+			return props.excludeFromTabOrder ? -1 : 0;
+		},
+		get "aria-label"() {
+			return props["aria-label"] ?? treeSelectionCheckboxAria.checkboxProps["aria-label"];
+		}
+	}], false);
+	runHydrationEvents();
+	return _el$13;
 }
 function TreeLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || props.loadingState === "loading" || props.loadingState === "loadingMore" || isPending();
 	const triggerLoadMore = async () => {
 		if (isLoading()) return;
@@ -1277,13 +1408,16 @@ function TreeLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {
-		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries[0]?.isIntersecting) triggerLoadMore();
 		}, { rootMargin: margin });
-		observer.observe(sentinelRef);
+		observer.observe(current);
 		return () => observer.disconnect();
 	});
 	const renderProps = useRenderProps({
@@ -1295,39 +1429,44 @@ function TreeLoadMoreItem(props) {
 		defaultClassName: "solidaria-Tree-loadMore"
 	}, () => ({ isLoading: isLoading() }));
 	return [(() => {
-		var _el$12 = getNextElement(_tmpl$8), _el$13 = _el$12.firstChild;
-		var _ref$ = sentinelRef;
-		typeof _ref$ === "function" ? use(_ref$, _el$13) : sentinelRef = _el$13;
-		return _el$12;
+		var _el$14 = getNextElement(_tmpl$6);
+		var _el$15 = _el$14.firstChild;
+		ref(() => {
+			return setSentinel;
+		}, _el$15);
+		return _el$14;
 	})(), (() => {
-		var _el$14 = getNextElement(_tmpl$9), _el$15 = _el$14.firstChild;
-		_el$14.$$focusin = () => {
+		var _el$16 = getNextElement(_tmpl$7);
+		var _el$17 = _el$16.firstChild;
+		_el$16._$$focusin = () => {
 			triggerLoadMore();
 		};
-		_el$14.addEventListener("focus", () => {
+		_el$16.addEventListener("focus", () => {
 			triggerLoadMore();
 		});
-		_el$15.addEventListener("focus", () => {
+		_el$17.addEventListener("focus", () => {
 			triggerLoadMore();
 		});
-		insert(_el$15, () => renderProps.renderChildren());
-		effect((_p$) => {
-			var _v$ = props.level ?? 1, _v$2 = renderProps.class(), _v$3 = renderProps.style(), _v$4 = isLoading() || void 0, _v$5 = props.level ?? 1;
-			_v$ !== _p$.e && setAttribute(_el$14, "aria-level", _p$.e = _v$);
-			_v$2 !== _p$.t && className(_el$14, _p$.t = _v$2);
-			_p$.a = style(_el$14, _v$3, _p$.a);
-			_v$4 !== _p$.o && setAttribute(_el$14, "data-loading", _p$.o = _v$4);
-			_v$5 !== _p$.i && setAttribute(_el$14, "data-level", _p$.i = _v$5);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0
+		insert(_el$17, scope(() => {
+			return renderProps.renderChildren();
+		}));
+		effect(() => {
+			return {
+				e: props.level ?? 1,
+				t: readShallow(renderProps.class()),
+				a: readShallow(renderProps.style()),
+				o: dataAttr(isLoading()),
+				i: props.level ?? 1
+			};
+		}, ({ e, t, a, o, i }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$16, "aria-level", e);
+			className(_el$16, t, _p$?.t);
+			style(_el$16, a, _p$?.a);
+			o !== _p$?.o && setAttribute(_el$16, "data-loading", o);
+			i !== _p$?.i && setAttribute(_el$16, "data-level", i);
 		});
 		runHydrationEvents();
-		return _el$14;
+		return _el$16;
 	})()];
 }
 function TreeItemContent(props) {
@@ -1336,7 +1475,9 @@ function TreeItemContent(props) {
 	const renderProps = useRenderProps({ get children() {
 		return props.children;
 	} }, () => context);
-	return memo(() => renderProps.renderChildren());
+	return memo(() => {
+		return renderProps.renderChildren();
+	});
 }
 /**
 * A section within a Tree. Renders as `role="rowgroup"` and supplies its
@@ -1362,11 +1503,17 @@ function TreeSection(props) {
 		defaultClassName: "solidaria-TreeSection"
 	}, () => ({ hasChildren: true }));
 	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
-	return (() => {
-		var _el$16 = getNextElement(_tmpl$5);
-		use((el) => assignRef(local.ref, el), _el$16);
-		spread(_el$16, mergeProps(filteredDomProps, () => section.rowGroupProps, {
-			get ["class"]() {
+	var _el$18 = getNextElement(_tmpl$3);
+	ref(() => {
+		return (el) => assignRef$1(local.ref, el);
+	}, _el$18);
+	spread(_el$18, [
+		filteredDomProps,
+		() => {
+			return section.rowGroupProps;
+		},
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
@@ -1375,26 +1522,26 @@ function TreeSection(props) {
 			get slot() {
 				return local.slot;
 			},
-			"data-section": ""
-		}), false, true);
-		insert(_el$16, createComponent(GridListHeaderContext.Provider, {
-			get value() {
-				return section.rowProps;
-			},
-			get children() {
-				return createComponent(GridListHeaderInnerContext.Provider, {
-					get value() {
-						return section.rowHeaderProps;
-					},
-					get children() {
-						return local.children;
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$16;
-	})();
+			"data-section": true
+		}
+	], true);
+	insert(_el$18, createComponent(GridListHeaderContext, {
+		get value() {
+			return section.rowProps;
+		},
+		get children() {
+			return createComponent(GridListHeaderInnerContext, {
+				get value() {
+					return section.rowHeaderProps;
+				},
+				get children() {
+					return local.children;
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$18;
 }
 /**
 * The header of a {@link TreeSection}. Mirrors upstream `TreeHeader`, which is a
@@ -1402,7 +1549,7 @@ function TreeSection(props) {
 * rowheader semantics come from the enclosing section through context.
 */
 function TreeHeader(props) {
-	return createComponent(GridListHeader, mergeProps({ "class": "solidaria-TreeHeader" }, props, { get children() {
+	return createComponent(GridListHeader, mergeProps({ class: "solidaria-TreeHeader" }, props, { get children() {
 		return props.children;
 	} }));
 }
@@ -1419,6 +1566,6 @@ function areSetsEqual(a, b) {
 }
 delegateEvents(["focusin"]);
 //#endregion
-export { Tree, TreeContext, TreeExpandButton, TreeHeader, TreeItem, TreeItemContent, TreeItemContext, TreeLoadMoreItem, TreeSection, TreeSelectionCheckbox, TreeStateContext };
+export { Tree, TreeContext, TreeExpandButton, TreeHeader, TreeItem, TreeItemContent, TreeItemContext, TreeLoadMoreItem, TreeSection, TreeSelectionCheckbox, TreeStateContext, createTreeDropTargetDelegate };
 
 //# sourceMappingURL=Tree.js.map