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

package/dist/ListBox.jsx

@@ -1,21 +1,35 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
+/*
+* Copyright 2022 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/ListBox.tsx
+import { DEFAULT_SLOT, OptionContent, Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
 import { SharedElementTransition } from "./SharedElementTransition.jsx";
 import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
-import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.jsx";
-import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer, useCollectionRoot } from "./Collection.jsx";
+import { i as VirtualizerItem, o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.jsx";
 import { useAutocompleteCollection } from "./Autocomplete.jsx";
-import { DropIndicatorContext, getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
-import { For, Show, createContext, createEffect, createMemo, createSignal, on, onCleanup, splitProps, useContext } from "solid-js";
-import { CLEAR_FOCUS_EVENT, FOCUS_EVENT, createDragSession, createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, createStringFormatter, dndIntlStrings, getGlobalDraggingCollectionRef, getGlobalDraggingKeys, mergeProps as mergeProps$1, moveVirtualFocus, registerDropItem, useLocale } from "@proyecto-viviana/solidaria";
+import { DropIndicatorContext, getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, untrack, useContext } from "solid-js";
+import { CLEAR_FOCUS_EVENT, FOCUS_EVENT, createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, createStringFormatter, dndIntlStrings, mergeProps, moveVirtualFocus, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createFilteredListState, createListState } from "@proyecto-viviana/solid-stately";
 //#region src/ListBox.tsx
 /**
 * ListBox component for solidaria-components
 *
 * A pre-wired headless listbox that combines state + aria hooks.
-* Port of react-aria-components/src/ListBox.tsx
+* Solid adaptation of the pinned ListBox component.
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -23,12 +37,89 @@ function assignRef(ref, el) {
 const ListBoxContext = createContext(null);
 const ListBoxStateContext = createContext(null);
 const ListStateContext = ListBoxStateContext;
+function dropIndicatorLabel(target, collection, format) {
+	const getText = (key) => {
+		if (key == null) return "";
+		return collection.getTextValue(key) ?? collection.getItem(key)?.textValue ?? "";
+	};
+	if (target.dropPosition === "on") return format("dropOnItem", { itemText: getText(target.key) });
+	let before;
+	let after;
+	if (target.dropPosition === "before") {
+		const prevKey = collection.getKeyBefore(target.key);
+		const prevNode = prevKey != null ? collection.getItem(prevKey) : null;
+		before = prevNode?.type === "item" ? prevNode.key : null;
+	} else before = target.key;
+	if (target.dropPosition === "after") {
+		const nextKey = collection.getKeyAfter(target.key);
+		const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+		after = nextNode?.type === "item" ? nextNode.key : null;
+	} else after = target.key;
+	if (before != null && after != null) return format("insertBetween", {
+		beforeItemText: getText(before),
+		afterItemText: getText(after)
+	});
+	if (before != null) return format("insertAfter", { itemText: getText(before) });
+	if (after != null) return format("insertBefore", { itemText: getText(after) });
+	return "";
+}
+/**
+* RAC `ListBox.tsx:662-717` `ListBoxDropIndicatorWrapper` — a stable module-level
+* component so Solid does not remount (and unregister) the indicator on every
+* parent ListBox re-render. `useDropIndicator` owns register + focus
+* (`useDroppableItem.ts:49-88`).
+*/
+function ListBoxDropIndicatorWrapper(props) {
+	const listContext = useContext(ListBoxContext);
+	const listState = useContext(ListBoxStateContext);
+	const [el, setEl] = createSignal(null);
+	const dndFormatter = createStringFormatter(dndIntlStrings);
+	const dropState = listContext?.dropState;
+	const indicator = listContext?.dragAndDropHooks?.useDropIndicator?.({ target: props.target }, dropState, el);
+	return <Show when={indicator && !indicator.isHidden}>
+      <div {...indicator?.dropIndicatorProps} ref={setEl} role="option" class="solidaria-DropIndicator" aria-label={listState ? dropIndicatorLabel(props.target, listState.collection(), (key, args) => dndFormatter().format(key, args)) : void 0} data-drop-target={dataAttr(indicator?.isDropTarget)} />
+    </Show>;
+}
+/**
+* Owns only the collection item. Drop-indicator siblings live in their own
+* components so their tracking cannot remount this node.
+*
+* Comparison hyperscript children (`hc` thunks) are one-shot: if the fragment
+* insert that owns the option also tracks indicator `Show`, the effect
+* re-runs, disposes the option, and Chromium maps focus to
+* `listbox:Permissions`. RAC `ListBoxItem` stays mounted while Collection
+* inserts indicator siblings (`react-aria-components/src/ListBox.tsx`).
+*/
+function ListBoxRenderedItem(props) {
+	return untrack(() => {
+		const rendered = props.renderItem(props.item);
+		return typeof rendered === "function" ? rendered() : rendered;
+	});
+}
+function ListBoxDropIndicatorSlot(props) {
+	const itemIndex = () => typeof props.itemIndex === "function" ? props.itemIndex() : props.itemIndex;
+	return <>{props.renderDropIndicator?.(itemIndex(), props.position)}</>;
+}
+/**
+* Stable per-item row so drop-indicator mount does not remount the option.
+*/
+function ListBoxItemWithDropIndicators(props) {
+	const isLast = () => typeof props.isLastInLevel === "function" ? props.isLastInLevel() : props.isLastInLevel;
+	return <>
+      <ListBoxDropIndicatorSlot itemIndex={props.itemIndex} position="before" renderDropIndicator={props.renderDropIndicator} />
+      <ListBoxRenderedItem item={props.item} renderItem={props.renderItem} />
+      <Show when={isLast()}>
+        <ListBoxDropIndicatorSlot itemIndex={props.itemIndex} position="after" renderDropIndicator={props.renderDropIndicator} />
+      </Show>
+    </>;
+}
 /**
 * A listbox displays a list of options and allows a user to select one or more of them.
 */
 function ListBox(props) {
-	const contextSlotProps = useContext(ListBoxContext)?.slots?.[props.slot ?? "default"];
-	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$1(contextSlotProps, props) : props, [
+	const contextSlotProps = useContext(ListBoxContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedListBoxProps = contextSlotProps ? mergeProps(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedListBoxProps, [
 		"children",
 		"class",
 		"style",
@@ -103,8 +194,7 @@ function ListBox(props) {
 	};
 	const locale = useLocale();
 	const parentCollectionRenderer = useCollectionRenderer();
-	const listBoxAria = createListBox({
-		...ariaProps,
+	const listBoxAria = createListBox(mergeProps(ariaProps, {
 		get isVirtualized() {
 			return parentCollectionRenderer?.isVirtualized ?? ariaProps.isVirtualized;
 		},
@@ -129,10 +219,10 @@ function ListBox(props) {
 		get direction() {
 			return locale().direction;
 		}
-	}, state, () => listRef());
+	}), state, () => listRef());
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const renderValues = createMemo(() => ({
-		isFocused: state.isFocused() || isFocused(),
+		isFocused: isFocused(),
 		isFocusVisible: isFocusVisible(),
 		isDisabled: resolveDisabled(),
 		isEmpty: state.collection().size === 0
@@ -165,7 +255,8 @@ function ListBox(props) {
 	});
 	if (autocompleteCtx) {
 		let shouldVirtualFocusFirst = false;
-		createEffect(() => {
+		createTrackedEffect(() => {
+			const _s2Cleanups = [];
 			const list = listRef();
 			if (!list) return;
 			const onFocusEvent = (e) => {
@@ -181,12 +272,15 @@ function ListBox(props) {
 			};
 			list.addEventListener(FOCUS_EVENT, onFocusEvent);
 			list.addEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
-			onCleanup(() => {
+			_s2Cleanups.push(() => {
 				list.removeEventListener(FOCUS_EVENT, onFocusEvent);
 				list.removeEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
 			});
+			return () => {
+				for (const c of _s2Cleanups) c();
+			};
 		});
-		createEffect(on(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
+		createEffect(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
 			if (!shouldVirtualFocusFirst) return;
 			if (firstKey == null) {
 				const list = listRef();
@@ -196,18 +290,27 @@ function ListBox(props) {
 				state.setFocusedKey(firstKey);
 				shouldVirtualFocusFirst = false;
 			}
-		}, { defer: true }));
+		}, { defer: true });
 		createEffect(() => {
-			const key = state.focusedKey();
-			const list = listRef();
-			if (!list || !state.isFocused()) return;
+			return {
+				key: state.focusedKey(),
+				list: listRef(),
+				focused: state.isFocused()
+			};
+		}, ({ key, list, focused }) => {
+			if (!list || !focused) return;
 			if (key == null) return;
 			const el = list.ownerDocument.getElementById(String(key));
 			if (el) moveVirtualFocus(el);
 		});
 	}
-	const isEmpty = () => stateProps.items.length === 0;
 	const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === "item"));
+	const collectionItems = createMemo(() => getItemNodes().map((node) => node.value));
+	const isEmpty = () => state.collection().size === 0;
+	const isLastDropItem = (itemIndex) => {
+		const i = typeof itemIndex === "function" ? itemIndex() : itemIndex;
+		return getItemNodes().length > 0 && i === getItemNodes().length - 1;
+	};
 	const getDropTargetByIndex = (index, position) => {
 		const node = getItemNodes()[index];
 		if (!node) return null;
@@ -221,37 +324,27 @@ function ListBox(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const dropState = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
-	const hasDraggableDnd = createMemo(() => {
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection();
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	const dragStateValue = createMemo(() => {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: flatItems() });
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
-		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => listRef());
-	});
-	const droppableCollection = createMemo(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: flatItems(),
+		collection: state.collection(),
+		selectedKeys: state.selectionManager.selectedKeys,
+		isSelected: (key) => state.selectionManager.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => listRef());
+	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 resolveDirection = () => {
-			const el = listRef();
-			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
-			}
-			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-		};
+		const resolveDirection = () => locale().direction;
 		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection(), () => listRef(), {
 			layout: "stack",
 			orientation: "vertical",
@@ -268,12 +361,18 @@ function ListBox(props) {
 				getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
 				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
 			},
-			collection: state.collection(),
-			selectedKeys: state.selectionManager.selectedKeys,
+			get collection() {
+				return state.collection();
+			},
+			get selectedKeys() {
+				return state.selectionManager.selectedKeys;
+			},
 			setSelectedKeys: (keys) => state.selectionManager.setSelectedKeys(keys),
-			setFocusedKey: (key) => state.setFocusedKey(key)
+			setFocusedKey: (key) => state.setFocusedKey(key),
+			setFocused: (isFocused) => state.setFocused(isFocused)
 		}, activeDropState, () => listRef());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -283,93 +382,32 @@ function ListBox(props) {
 		if (!target || target.type !== "item") return void 0;
 		return dndRenderDropIndicator()?.(target);
 	};
-	const dndFormatter = createStringFormatter(dndIntlStrings);
-	const dragSession = createDragSession();
-	const dropIndicatorTargetsEqual = (a, b) => !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
-	const dropIndicatorLabel = (target) => {
-		const collection = state.collection();
-		const getText = (key) => {
-			if (key == null) return "";
-			return collection.getTextValue(key) ?? collection.getItem(key)?.textValue ?? "";
-		};
-		if (target.dropPosition === "on") return dndFormatter().format("dropOnItem", { itemText: getText(target.key) });
-		let before;
-		let after;
-		if (target.dropPosition === "before") {
-			const prevKey = collection.getKeyBefore(target.key);
-			const prevNode = prevKey != null ? collection.getItem(prevKey) : null;
-			before = prevNode?.type === "item" ? prevNode.key : null;
-		} else before = target.key;
-		if (target.dropPosition === "after") {
-			const nextKey = collection.getKeyAfter(target.key);
-			const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
-			after = nextNode?.type === "item" ? nextNode.key : null;
-		} else after = target.key;
-		if (before != null && after != null) return dndFormatter().format("insertBetween", {
-			beforeItemText: getText(before),
-			afterItemText: getText(after)
-		});
-		if (before != null) return dndFormatter().format("insertAfter", { itemText: getText(before) });
-		if (after != null) return dndFormatter().format("insertBefore", { itemText: getText(after) });
-		return "";
-	};
-	const wrapDropTypes = (types) => ({ has: (type) => {
-		if (typeof type === "string") return types.has(type);
-		if (Array.isArray(type)) return type.some((t) => typeof t === "string" && types.has(t));
-		return false;
-	} });
-	const ListBoxDropIndicator = (props) => {
-		const [indicatorRef, setIndicatorRef] = createSignal(null);
-		const isDropTarget = createMemo(() => dropIndicatorTargetsEqual(dropState()?.target, props.target));
-		const ariaHidden = createMemo(() => !dragSession() ? "true" : isDropTarget() ? void 0 : "true");
-		const isHidden = createMemo(() => !isDropTarget() && !!ariaHidden());
-		createEffect(() => {
-			const el = indicatorRef();
-			if (!el) return;
-			onCleanup(registerDropItem({
-				element: el,
-				target: props.target,
-				getDropOperation: (types, allowedOperations) => {
-					const st = dropState();
-					if (!st) return "cancel";
-					const isInternal = getGlobalDraggingCollectionRef() === listRef();
-					return st.getDropOperation(props.target, wrapDropTypes(types), allowedOperations, isInternal, getGlobalDraggingKeys());
-				}
-			}));
-			if (dragSession() && isDropTarget()) requestAnimationFrame(() => {
-				if (dragSession() && isDropTarget() && indicatorRef() === el) el.focus();
-			});
-		});
-		return <Show when={!isHidden()}>
-        <div ref={(el) => {
-			setIndicatorRef(el);
-			onCleanup(() => setIndicatorRef(null));
-		}} role="option" class="solidaria-DropIndicator" aria-roledescription={dndFormatter().format("dropIndicator")} aria-label={dropIndicatorLabel(props.target)} aria-hidden={ariaHidden()} tabindex={-1} data-drop-target={isDropTarget() || void 0} />
-      </Show>;
-	};
-	const dropIndicatorContextValue = { render: (p) => <ListBoxDropIndicator target={p.target} /> };
+	const renderItemDropIndicator = (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position);
+	const dropIndicatorContextValue = { render: (p) => <ListBoxDropIndicatorWrapper {...p} /> };
 	const virtualizer = useVirtualizerContext();
 	const persistedKeys = useDndPersistedKeys({ focusedKey: state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection());
 	const virtualRange = createMemo(() => {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
-		const baseRange = virtualizer.getVisibleRange(stateProps.items.length);
+		const itemCount = getItemNodes().length;
+		const baseRange = virtualizer.getVisibleRange(itemCount);
 		const itemNodes = getItemNodes();
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.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 ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
-		const forceIncludeIndexes = [
-			dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
-			normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
-			dropTarget?.type === "item" ? -1 : focusedIndex
-		].filter((index) => index >= 0);
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, stateProps.items.length, virtualizer, 80, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], itemCount, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		const getItemNodes = () => Array.from(state.collection()).filter((node) => node.type === "item");
 		virtualizer.setDropTargetItemCountResolver(() => getItemNodes().length);
@@ -385,44 +423,52 @@ function ListBox(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : 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 visibleItems = createMemo(() => {
 		const range = virtualRange();
-		if (!range) return stateProps.items;
-		return stateProps.items.slice(range.start, range.end);
+		const items = collectionItems();
+		if (!range) return items;
+		return items.slice(range.start, range.end);
 	});
-	const virtualSpacerStyle = (size) => virtualizer?.orientation === "horizontal" ? { width: `${size}px` } : { height: `${size}px` };
 	const sectionedRenderEntries = createMemo(() => {
+		const values = new Set(collectionItems());
 		let globalIndex = 0;
-		return stateProps.items.map((entry) => {
-			if (isCollectionSection(entry)) return {
+		const entries = [];
+		for (const entry of stateProps.items) if (isCollectionSection(entry)) {
+			const sectionItems = entry.items.filter((item) => values.has(item)).map((item) => ({
+				item,
+				index: globalIndex++
+			}));
+			if (sectionItems.length === 0) continue;
+			entries.push({
 				type: "section",
 				section: entry,
-				items: entry.items.map((item) => ({
-					item,
-					index: globalIndex++
-				}))
-			};
-			return {
-				type: "item",
-				item: {
-					item: entry,
-					index: globalIndex++
-				}
-			};
+				items: sectionItems
+			});
+		} else if (values.has(entry)) entries.push({
+			type: "item",
+			item: {
+				item: entry,
+				index: globalIndex++
+			}
 		});
+		return entries;
 	});
 	const collectionRenderer = createMemo(() => ({
 		...parentCollectionRenderer,
 		renderItem: (item) => local.children(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
-	return <ListBoxContext.Provider value={{
+	const CollectionRoot = useCollectionRoot();
+	return <ListBoxContext value={{
 		state,
 		isDisabled: resolveDisabled,
 		dragAndDropHooks: local.dragAndDropHooks,
@@ -430,77 +476,91 @@ function ListBox(props) {
 		dropState: dropState(),
 		slots: local.slots
 	}}>
-      <ListBoxStateContext.Provider value={state}>
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
-         <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
-          <>
-            <Show when={ariaProps.label}>
-              <span {...cleanLabelProps()}>{ariaProps.label}</span>
-            </Show>
-            <div {...mergeProps$1(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} ref={(el) => {
+      <ListBoxStateContext value={state}>
+        <CollectionRendererContext value={collectionRenderer()}>
+          <DropIndicatorContext value={dropIndicatorContextValue}>
+            <>
+              <Show when={ariaProps.label}>
+                <span {...cleanLabelProps()}>{ariaProps.label}</span>
+              </Show>
+              <div {...mergeProps(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {})} ref={(el) => {
 		setListRef(el);
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 		autocompleteCtx?.collectionRef(el);
-	}} class={renderProps.class()} style={renderProps.style()} data-focused={state.isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={resolveDisabled() || void 0} data-empty={isEmpty() || void 0} data-layout={stateProps.layout} data-orientation={stateProps.orientation} data-drop-target={isRootDropTarget() || void 0} slot={local.slot}>
-              <SharedElementTransition>
-                {isEmpty() && local.renderEmptyState ? <div role="option" style={{ display: "contents" }} data-empty-state>
-                    {local.renderEmptyState()}
-                  </div> : hasSections() ? <For each={sectionedRenderEntries()}>
-                    {(entry) => entry.type === "section" ? <div role="presentation" data-section-wrapper>
-                          <Section class="solidaria-ListBox-section">
-                            {entry.section.title != null && <Header class="solidaria-ListBox-sectionHeader">
-                                {entry.section.title}
-                              </Header>}
-                            <Group class="solidaria-ListBox-sectionGroup">
-                              <div role="group" aria-label={entry.section["aria-label"]}>
-                                <For each={entry.items}>
-                                  {(indexedItem) => <>
-                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")}
-                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")}
-                                      {local.children(indexedItem.item)}
-                                      {collectionRenderer().renderDropIndicator?.(indexedItem.index, "after")}
-                                    </>}
-                                </For>
-                              </div>
-                            </Group>
-                          </Section>
-                        </div> : <>
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
-                          {local.children(entry.item.item)}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
-                        </>}
-                  </For> : <>
-                    {virtualRange()?.offsetTop ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetTop)} data-virtualizer-spacer="top" /> : null}
-                    <For each={visibleItems()}>
-                      {(item, index) => {
-		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-		const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-		const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-		const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-		return <>
-                            {beforeIndicator()}
-                            {onIndicator()}
-                            {local.children(item)}
-                            {afterIndicator()}
-                          </>;
-	}}
-                    </For>
-                    {virtualRange()?.offsetBottom ? <div role="presentation" aria-hidden="true" style={virtualSpacerStyle(virtualRange().offsetBottom)} data-virtualizer-spacer="bottom" /> : null}
-                  </>}
-              </SharedElementTransition>
-              {local.hasMore && local.onLoadMore && <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />}
-            </div>
-          </>
-         </DropIndicatorContext.Provider>
-        </CollectionRendererContext.Provider>
-      </ListBoxStateContext.Provider>
-    </ListBoxContext.Provider>;
+	}} class={renderProps.class()} style={renderProps.style()} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(resolveDisabled())} data-empty={dataAttr(isEmpty())} data-layout={stateProps.layout || "stack"} data-orientation={stateProps.orientation || "vertical"} data-drop-target={dataAttr(isRootDropTarget())} slot={local.slot}>
+                <SharedElementTransition>
+                  {parentCollectionRenderer?.isVirtualized ? <>
+                      <CollectionRoot collection={virtualRange() ? collectionItems() : []} scrollRef={() => listRef()} persistedKeys={persistedKeys()}>
+                        {isEmpty() && local.renderEmptyState ? null : hasSections() ? <For each={sectionedRenderEntries()}>
+                            {(entry) => entry.type === "section" ? <div role="presentation" data-section-wrapper>
+                                  <Section class="solidaria-ListBox-section">
+                                    {entry.section.title != null && <Header class="solidaria-ListBox-sectionHeader">
+                                        {entry.section.title}
+                                      </Header>}
+                                    <Group class="solidaria-ListBox-sectionGroup">
+                                      <div role="group" aria-label={entry.section["aria-label"]}>
+                                        <For each={entry.items}>
+                                          {(indexedItem) => <VirtualizerItem index={indexedItem.index}>
+                                              <ListBoxItemWithDropIndicators item={indexedItem.item} itemIndex={indexedItem.index} isLastInLevel={() => isLastDropItem(indexedItem.index)} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />
+                                            </VirtualizerItem>}
+                                        </For>
+                                      </div>
+                                    </Group>
+                                  </Section>
+                                </div> : <VirtualizerItem index={entry.item.index}>
+                                  <ListBoxItemWithDropIndicators item={entry.item.item} itemIndex={entry.item.index} isLastInLevel={() => isLastDropItem(entry.item.index)} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />
+                                </VirtualizerItem>}
+                          </For> : <>
+                            <For each={visibleItems()}>
+                              {(item, index) => <VirtualizerItem index={() => (virtualRange()?.start ?? 0) + index()}>
+                                  <ListBoxItemWithDropIndicators item={item} itemIndex={() => (virtualRange()?.start ?? 0) + index()} isLastInLevel={() => isLastDropItem((virtualRange()?.start ?? 0) + index())} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />
+                                </VirtualizerItem>}
+                            </For>
+                            <For each={persistedOutsideIndexes()}>
+                              {(index) => <PersistedVirtualItem index={index}>
+                                  <ListBoxItemWithDropIndicators item={collectionItems()[index]} itemIndex={() => index} isLastInLevel={() => isLastDropItem(index)} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />
+                                </PersistedVirtualItem>}
+                            </For>
+                          </>}
+                      </CollectionRoot>
+                      {isEmpty() && local.renderEmptyState ? <div role="option" style={{ display: "contents" }} data-empty-state>
+                          {local.renderEmptyState()}
+                        </div> : null}
+                    </> : isEmpty() && local.renderEmptyState ? <div role="option" style={{ display: "contents" }} data-empty-state>
+                      {local.renderEmptyState()}
+                    </div> : hasSections() ? <For each={sectionedRenderEntries()}>
+                      {(entry) => entry.type === "section" ? <div role="presentation" data-section-wrapper>
+                            <Section class="solidaria-ListBox-section">
+                              {entry.section.title != null && <Header class="solidaria-ListBox-sectionHeader">
+                                  {entry.section.title}
+                                </Header>}
+                              <Group class="solidaria-ListBox-sectionGroup">
+                                <div role="group" aria-label={entry.section["aria-label"]}>
+                                  <For each={entry.items}>
+                                    {(indexedItem) => <ListBoxItemWithDropIndicators item={indexedItem.item} itemIndex={indexedItem.index} isLastInLevel={() => isLastDropItem(indexedItem.index)} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />}
+                                  </For>
+                                </div>
+                              </Group>
+                            </Section>
+                          </div> : <ListBoxItemWithDropIndicators item={entry.item.item} itemIndex={entry.item.index} isLastInLevel={() => isLastDropItem(entry.item.index)} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />}
+                    </For> : <>
+                      <For each={visibleItems()}>
+                        {(item, index) => <ListBoxItemWithDropIndicators item={item} itemIndex={() => (virtualRange()?.start ?? 0) + index()} isLastInLevel={() => isLastDropItem((virtualRange()?.start ?? 0) + index())} renderItem={local.children} renderDropIndicator={renderItemDropIndicator} />}
+                      </For>
+                    </>}
+                </SharedElementTransition>
+                {local.hasMore && local.onLoadMore && <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />}
+              </div>
+            </>
+          </DropIndicatorContext>
+        </CollectionRendererContext>
+      </ListBoxStateContext>
+    </ListBoxContext>;
 }
 /**
-* An option in a listbox.
+* An item in a listbox.
 */
-function ListBoxOption(props) {
+function ListBoxItem(props) {
 	const [local, ariaProps] = splitProps(props, [
 		"class",
 		"style",
@@ -511,7 +571,7 @@ function ListBoxOption(props) {
 		"ref"
 	]);
 	const context = useContext(ListBoxStateContext);
-	if (!context) throw new Error("ListBoxOption must be used within a ListBox");
+	if (!context) throw new Error("ListBoxItem must be used within a ListBox");
 	const state = context;
 	const listContext = useContext(ListBoxContext);
 	const [ref, setRef] = createSignal(null);
@@ -521,7 +581,7 @@ function ListBoxOption(props) {
 			return Boolean(ariaProps.isDisabled || listContext?.isDisabled());
 		},
 		get "aria-label"() {
-			return ariaProps["aria-label"] ?? local.textValue;
+			return ariaProps["aria-label"];
 		},
 		get shouldSelectOnPressUp() {
 			return ariaProps.shouldSelectOnPressUp;
@@ -555,9 +615,6 @@ function ListBoxOption(props) {
 		style: local.style,
 		defaultClassName: "solidaria-ListBox-option"
 	}, renderValues);
-	const hasPrimitiveLabel = () => {
-		return typeof props.children === "string" || typeof props.children === "number";
-	};
 	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
 	const draggableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return void 0;
@@ -571,26 +628,57 @@ function ListBoxOption(props) {
 		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref());
 	});
 	const cleanOptionProps = () => {
-		const { ref: _ref1, "aria-describedby": _ariaDescribedby, ...rest } = optionAria.optionProps;
-		if (!hasPrimitiveLabel() && rest["aria-label"] == null) delete rest["aria-labelledby"];
+		const { ref: _ref1, ...rest } = optionAria.optionProps;
 		return rest;
 	};
+	const optionTextSlots = { slots: {
+		get [DEFAULT_SLOT]() {
+			return optionAria.labelProps;
+		},
+		get label() {
+			return optionAria.labelProps;
+		},
+		get description() {
+			return optionAria.descriptionProps;
+		}
+	} };
+	createRenderEffect(() => ({
+		el: ref(),
+		labelId: optionAria.labelProps.id,
+		descriptionId: optionAria.descriptionProps.id
+	}), ({ el, labelId, descriptionId }) => {
+		if (!el) return;
+		if (labelId) {
+			const label = el.querySelector("[slot='label']");
+			if (label && !label.id) label.id = labelId;
+		}
+		if (descriptionId) {
+			const description = el.querySelector("[slot='description']");
+			if (description && !description.id) description.id = descriptionId;
+		}
+	});
 	const domProps = () => filterDOMProps(ariaProps, { global: true });
-	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+	const selectionMode = () => state.selectionMode();
+	return <SelectionIndicatorContext value={selectionIndicatorContext()}>
       <div ref={(el) => {
 		setRef(el);
-		assignRef(local.ref, el);
-	}} {...mergeProps$1(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-selected={optionAria.isSelected() || void 0} data-focused={optionAria.isFocused() || void 0} data-focus-visible={optionAria.isFocusVisible() || void 0} data-pressed={optionAria.isPressed() || void 0} data-hovered={optionAria.isHovered() || void 0} data-disabled={optionAria.isDisabled() || void 0} data-dragging={draggableItem()?.isDragging || void 0} data-drop-target={droppableItem()?.isDropTarget || void 0} slot={local.slot}>
-        {hasPrimitiveLabel() ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span> : renderProps.renderChildren()}
+		assignRef$1(local.ref, el);
+		const dragRef = (draggableItem()?.dragProps)?.ref;
+		if (typeof dragRef === "function") dragRef(el);
+	}} {...mergeProps(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} data-selected={dataAttr(optionAria.isSelected())} data-focused={dataAttr(optionAria.isFocused())} data-focus-visible={dataAttr(optionAria.isFocusVisible())} data-pressed={dataAttr(optionAria.isPressed())} data-hovered={dataAttr(optionAria.isHovered())} data-disabled={dataAttr(optionAria.isDisabled())} data-dragging={dataAttr(draggableItem()?.isDragging)} data-drop-target={dataAttr(droppableItem()?.isDropTarget)} data-selection-mode={selectionMode() === "none" ? void 0 : selectionMode()} slot={local.slot}>
+        <Provider values={[[TextContext, optionTextSlots]]}>
+          <OptionContent render={renderProps.renderChildrenStable} labelProps={optionAria.labelProps} />
+        </Provider>
       </div>
-    </SelectionIndicatorContext.Provider>;
+    </SelectionIndicatorContext>;
 }
 /**
 * Load more sentinel item for listbox collections.
 */
 function ListBoxLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
 	const triggerLoadMore = async () => {
 		if (isLoading()) return;
@@ -601,10 +689,21 @@ function ListBoxLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {});
+	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(current);
+		return () => observer.disconnect();
+	});
 	const renderProps = useRenderProps({
 		get children() {
-			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
+			return props.children;
 		},
 		class: props.class,
 		style: props.style,
@@ -617,17 +716,17 @@ function ListBoxLoadMoreItem(props) {
 		height: 0,
 		overflow: "hidden"
 	}} inert>
-        <div ref={sentinelRef} style={{
+        <div data-testid="loadMoreSentinel" ref={setSentinel} style={{
 		position: "absolute",
 		height: "1px",
 		width: "1px"
 	}} />
       </div>
-      <div role="option" aria-disabled={true} tabIndex={0} onFocus={() => {
-		triggerLoadMore();
-	}} class={renderProps.class()} style={renderProps.style()} data-loading={isLoading() || void 0}>
-        {renderProps.renderChildren()}
-      </div>
+      <Show when={isLoading() && props.children}>
+        <div role="option" tabindex={-1} class={renderProps.class()} style={renderProps.style()} data-loading>
+          {renderProps.renderChildren()}
+        </div>
+      </Show>
     </>;
 }
 /**
@@ -636,9 +735,13 @@ function ListBoxLoadMoreItem(props) {
 function ListBoxSection(props) {
 	return <Section {...props} />;
 }
-ListBox.Option = ListBoxOption;
+/**
+* @deprecated Use {@link ListBoxItem}. Removed in a future minor.
+*/
+const ListBoxOption = ListBoxItem;
+ListBox.Option = ListBoxItem;
 ListBox.LoadMoreItem = ListBoxLoadMoreItem;
 //#endregion
-export { ListBox, ListBoxContext, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
+export { ListBox, ListBoxContext, ListBoxItem, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
 
 //# sourceMappingURL=ListBox.jsx.map