@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

package/dist/ListBox.js

@@ -3,11 +3,12 @@ import { SharedElementTransition } from "./SharedElementTransition.js";
 import { SelectionIndicatorContext } from "./SelectionIndicator.js";
 import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
 import { r as useVirtualizerContext } from "./Virtualizer2.js";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { useAutocompleteCollection } from "./Autocomplete.js";
+import { DropIndicatorContext, getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
 import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, mergeProps as mergeProps$2, useLocale } from "@proyecto-viviana/solidaria";
-import { createListState } from "@proyecto-viviana/solid-stately";
+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$2, moveVirtualFocus, registerDropItem, useLocale } from "@proyecto-viviana/solidaria";
+import { createFilteredListState, createListState } from "@proyecto-viviana/solid-stately";
 //#region src/ListBox.tsx
 /**
 * ListBox component for solidaria-components
@@ -15,7 +16,7 @@ import { createListState } from "@proyecto-viviana/solid-stately";
 * A pre-wired headless listbox that combines state + aria hooks.
 * Port of react-aria-components/src/ListBox.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<ul><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<li role=option data-empty-state style=display:contents>`), _tmpl$4 = /*#__PURE__*/ template(`<ul role=group>`), _tmpl$5 = /*#__PURE__*/ template(`<li role=presentation data-section-wrapper>`), _tmpl$6 = /*#__PURE__*/ template(`<li role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$7 = /*#__PURE__*/ template(`<li role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$8 = /*#__PURE__*/ template(`<li>`), _tmpl$9 = /*#__PURE__*/ template(`<li inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$0 = /*#__PURE__*/ template(`<li role=option tabindex=0>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div role=option class=solidaria-DropIndicator tabindex=-1>`), _tmpl$2 = /*#__PURE__*/ template(`<span>`), _tmpl$3 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=option data-empty-state style=display:contents>`), _tmpl$5 = /*#__PURE__*/ template(`<div role=group>`), _tmpl$6 = /*#__PURE__*/ template(`<div role=presentation data-section-wrapper>`), _tmpl$7 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$8 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$9 = /*#__PURE__*/ template(`<div>`), _tmpl$0 = /*#__PURE__*/ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$1 = /*#__PURE__*/ template(`<div role=option tabindex=0>`);
 function assignRef(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
@@ -60,7 +61,7 @@ function ListBox(props) {
 		return flattenCollectionEntries(stateProps.items);
 	});
 	const hasSections = createMemo(() => stateProps.items.some((item) => isCollectionSection(item)));
-	const state = createListState({
+	const baseState = createListState({
 		get items() {
 			return flatItems();
 		},
@@ -95,14 +96,32 @@ function ListBox(props) {
 			return stateProps.onSelectionChange;
 		}
 	});
+	const autocompleteCtx = useAutocompleteCollection();
+	const state = autocompleteCtx ? createFilteredListState(baseState, () => autocompleteCtx.filter) : baseState;
 	const resolveDisabled = () => {
 		const disabled = ariaProps.isDisabled;
 		if (typeof disabled === "function") return disabled();
 		return !!disabled;
 	};
 	const locale = useLocale();
+	const parentCollectionRenderer = useCollectionRenderer();
 	const listBoxAria = createListBox({
 		...ariaProps,
+		get isVirtualized() {
+			return parentCollectionRenderer?.isVirtualized ?? ariaProps.isVirtualized;
+		},
+		get id() {
+			return autocompleteCtx?.collectionProps.id ?? ariaProps.id;
+		},
+		get "aria-label"() {
+			return autocompleteCtx?.collectionProps["aria-label"] ?? ariaProps["aria-label"];
+		},
+		get shouldUseVirtualFocus() {
+			return autocompleteCtx?.collectionProps.shouldUseVirtualFocus ?? ariaProps.shouldUseVirtualFocus;
+		},
+		get disallowTypeAhead() {
+			return autocompleteCtx?.collectionProps.disallowTypeAhead ?? ariaProps.disallowTypeAhead;
+		},
 		get isDisabled() {
 			return resolveDisabled();
 		},
@@ -146,8 +165,50 @@ function ListBox(props) {
 		isActive: () => state.isFocused(),
 		ref: () => listRef()
 	});
+	if (autocompleteCtx) {
+		let shouldVirtualFocusFirst = false;
+		createEffect(() => {
+			const list = listRef();
+			if (!list) return;
+			const onFocusEvent = (e) => {
+				const detail = e.detail;
+				e.stopPropagation();
+				state.setFocused(true);
+				if (detail?.focusStrategy === "first") shouldVirtualFocusFirst = true;
+			};
+			const onClearFocusEvent = (e) => {
+				e.stopPropagation();
+				state.setFocused(false);
+				if (e.detail?.clearFocusKey) state.setFocusedKey(null);
+			};
+			list.addEventListener(FOCUS_EVENT, onFocusEvent);
+			list.addEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
+			onCleanup(() => {
+				list.removeEventListener(FOCUS_EVENT, onFocusEvent);
+				list.removeEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
+			});
+		});
+		createEffect(on(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
+			if (!shouldVirtualFocusFirst) return;
+			if (firstKey == null) {
+				const list = listRef();
+				if (list) moveVirtualFocus(list);
+				if (size > 0) shouldVirtualFocusFirst = false;
+			} else {
+				state.setFocusedKey(firstKey);
+				shouldVirtualFocusFirst = false;
+			}
+		}, { defer: true }));
+		createEffect(() => {
+			const key = state.focusedKey();
+			const list = listRef();
+			if (!list || !state.isFocused()) return;
+			if (key == null) return;
+			const el = list.ownerDocument.getElementById(String(key));
+			if (el) moveVirtualFocus(el);
+		});
+	}
 	const isEmpty = () => stateProps.items.length === 0;
-	const parentCollectionRenderer = useCollectionRenderer();
 	const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === "item"));
 	const getDropTargetByIndex = (index, position) => {
 		const node = getItemNodes()[index];
@@ -208,7 +269,11 @@ function ListBox(props) {
 				getKeyAbove: (key) => state.collection().getKeyBefore(key),
 				getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
 				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
-			}
+			},
+			collection: state.collection(),
+			selectedKeys: state.selectionManager.selectedKeys,
+			setSelectedKeys: (keys) => state.selectionManager.setSelectedKeys(keys),
+			setFocusedKey: (key) => state.setFocusedKey(key)
 		}, activeDropState, () => listRef());
 	});
 	const isRootDropTarget = createMemo(() => {
@@ -220,6 +285,93 @@ 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 createComponent(Show, {
+			get when() {
+				return !isHidden();
+			},
+			get children() {
+				var _el$ = getNextElement(_tmpl$);
+				use((el) => {
+					setIndicatorRef(el);
+					onCleanup(() => setIndicatorRef(null));
+				}, _el$);
+				effect((_p$) => {
+					var _v$ = dndFormatter().format("dropIndicator"), _v$2 = dropIndicatorLabel(props.target), _v$3 = ariaHidden(), _v$4 = isDropTarget() || void 0;
+					_v$ !== _p$.e && setAttribute(_el$, "aria-roledescription", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+					_v$3 !== _p$.a && setAttribute(_el$, "aria-hidden", _p$.a = _v$3);
+					_v$4 !== _p$.o && setAttribute(_el$, "data-drop-target", _p$.o = _v$4);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				});
+				return _el$;
+			}
+		});
+	};
+	const dropIndicatorContextValue = { render: (p) => createComponent(ListBoxDropIndicator, { get target() {
+		return p.target;
+	} }) };
 	const virtualizer = useVirtualizerContext();
 	const persistedKeys = useDndPersistedKeys({ focusedKey: state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection());
 	const virtualRange = createMemo(() => {
@@ -314,146 +466,152 @@ function ListBox(props) {
 							return collectionRenderer();
 						},
 						get children() {
-							return [createComponent(Show, {
-								get when() {
-									return ariaProps.label;
-								},
+							return createComponent(DropIndicatorContext.Provider, {
+								value: dropIndicatorContextValue,
 								get children() {
-									var _el$ = getNextElement(_tmpl$);
-									spread(_el$, mergeProps(cleanLabelProps), false, true);
-									insert(_el$, () => ariaProps.label);
-									runHydrationEvents();
-									return _el$;
-								}
-							}), (() => {
-								var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
-								use((el) => {
-									setListRef(el);
-									assignRef(local.ref, el);
-								}, _el$2);
-								spread(_el$2, mergeProps(() => mergeProps$2(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
-									get ["class"]() {
-										return renderProps.class();
-									},
-									get style() {
-										return renderProps.style();
-									},
-									get ["data-focused"]() {
-										return state.isFocused() || void 0;
-									},
-									get ["data-focus-visible"]() {
-										return isFocusVisible() || void 0;
-									},
-									get ["data-disabled"]() {
-										return resolveDisabled() || void 0;
-									},
-									get ["data-empty"]() {
-										return isEmpty() || void 0;
-									},
-									get ["data-layout"]() {
-										return stateProps.layout;
-									},
-									get ["data-orientation"]() {
-										return stateProps.orientation;
-									},
-									get ["data-drop-target"]() {
-										return isRootDropTarget() || void 0;
-									},
-									get slot() {
-										return local.slot;
-									}
-								}), false, true);
-								insert(_el$2, createComponent(SharedElementTransition, { get children() {
-									return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
-										var _el$7 = getNextElement(_tmpl$3);
-										insert(_el$7, () => local.renderEmptyState());
-										return _el$7;
-									})() : memo(() => !!hasSections())() ? createComponent(For, {
-										get each() {
-											return sectionedRenderEntries();
+									return [createComponent(Show, {
+										get when() {
+											return ariaProps.label;
 										},
-										children: (entry) => entry.type === "section" ? (() => {
-											var _el$8 = getNextElement(_tmpl$5);
-											insert(_el$8, createComponent(Section, {
-												"class": "solidaria-ListBox-section",
-												get children() {
-													return [memo(() => memo(() => entry.section.title != null)() && createComponent(Header, {
-														"class": "solidaria-ListBox-sectionHeader",
-														get children() {
-															return entry.section.title;
-														}
-													})), createComponent(Group, {
-														"class": "solidaria-ListBox-sectionGroup",
+										get children() {
+											var _el$2 = getNextElement(_tmpl$2);
+											spread(_el$2, mergeProps(cleanLabelProps), false, true);
+											insert(_el$2, () => ariaProps.label);
+											runHydrationEvents();
+											return _el$2;
+										}
+									}), (() => {
+										var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling);
+										use((el) => {
+											setListRef(el);
+											assignRef(local.ref, el);
+											autocompleteCtx?.collectionRef(el);
+										}, _el$3);
+										spread(_el$3, mergeProps(() => mergeProps$2(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
+											get ["class"]() {
+												return renderProps.class();
+											},
+											get style() {
+												return renderProps.style();
+											},
+											get ["data-focused"]() {
+												return state.isFocused() || void 0;
+											},
+											get ["data-focus-visible"]() {
+												return isFocusVisible() || void 0;
+											},
+											get ["data-disabled"]() {
+												return resolveDisabled() || void 0;
+											},
+											get ["data-empty"]() {
+												return isEmpty() || void 0;
+											},
+											get ["data-layout"]() {
+												return stateProps.layout;
+											},
+											get ["data-orientation"]() {
+												return stateProps.orientation;
+											},
+											get ["data-drop-target"]() {
+												return isRootDropTarget() || void 0;
+											},
+											get slot() {
+												return local.slot;
+											}
+										}), false, true);
+										insert(_el$3, createComponent(SharedElementTransition, { get children() {
+											return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
+												var _el$8 = getNextElement(_tmpl$4);
+												insert(_el$8, () => local.renderEmptyState());
+												return _el$8;
+											})() : memo(() => !!hasSections())() ? createComponent(For, {
+												get each() {
+													return sectionedRenderEntries();
+												},
+												children: (entry) => entry.type === "section" ? (() => {
+													var _el$9 = getNextElement(_tmpl$6);
+													insert(_el$9, createComponent(Section, {
+														"class": "solidaria-ListBox-section",
 														get children() {
-															var _el$9 = getNextElement(_tmpl$4);
-															insert(_el$9, createComponent(For, {
-																get each() {
-																	return entry.items;
-																},
-																children: (indexedItem) => [
-																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")),
-																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")),
-																	memo(() => local.children(indexedItem.item)),
-																	memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "after"))
-																]
-															}));
-															effect(() => setAttribute(_el$9, "aria-label", entry.section["aria-label"]));
-															return _el$9;
+															return [memo(() => memo(() => entry.section.title != null)() && createComponent(Header, {
+																"class": "solidaria-ListBox-sectionHeader",
+																get children() {
+																	return entry.section.title;
+																}
+															})), createComponent(Group, {
+																"class": "solidaria-ListBox-sectionGroup",
+																get children() {
+																	var _el$0 = getNextElement(_tmpl$5);
+																	insert(_el$0, createComponent(For, {
+																		get each() {
+																			return entry.items;
+																		},
+																		children: (indexedItem) => [
+																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")),
+																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")),
+																			memo(() => local.children(indexedItem.item)),
+																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "after"))
+																		]
+																	}));
+																	effect(() => setAttribute(_el$0, "aria-label", entry.section["aria-label"]));
+																	return _el$0;
+																}
+															})];
 														}
-													})];
+													}));
+													return _el$9;
+												})() : [
+													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "before")),
+													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "on")),
+													memo(() => local.children(entry.item.item)),
+													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "after"))
+												]
+											}) : [
+												memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
+													var _el$1 = getNextElement(_tmpl$7);
+													effect((_$p) => style(_el$1, virtualSpacerStyle(virtualRange().offsetTop), _$p));
+													return _el$1;
+												})() : null),
+												createComponent(For, {
+													get each() {
+														return visibleItems();
+													},
+													children: (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 [
+															memo(beforeIndicator),
+															memo(onIndicator),
+															memo(() => local.children(item)),
+															memo(afterIndicator)
+														];
+													}
+												}),
+												memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+													var _el$10 = getNextElement(_tmpl$8);
+													effect((_$p) => style(_el$10, virtualSpacerStyle(virtualRange().offsetBottom), _$p));
+													return _el$10;
+												})() : null)
+											];
+										} }), _el$5, _co$);
+										insert(_el$3, (() => {
+											var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
+											return () => _c$() && createComponent(ListBoxLoadMoreItem, {
+												get onLoadMore() {
+													return local.onLoadMore;
+												},
+												get isLoading() {
+													return local.isLoading;
 												}
-											}));
-											return _el$8;
-										})() : [
-											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "before")),
-											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "on")),
-											memo(() => local.children(entry.item.item)),
-											memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "after"))
-										]
-									}) : [
-										memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-											var _el$0 = getNextElement(_tmpl$6);
-											effect((_$p) => style(_el$0, virtualSpacerStyle(virtualRange().offsetTop), _$p));
-											return _el$0;
-										})() : null),
-										createComponent(For, {
-											get each() {
-												return visibleItems();
-											},
-											children: (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 [
-													memo(beforeIndicator),
-													memo(onIndicator),
-													memo(() => local.children(item)),
-													memo(afterIndicator)
-												];
-											}
-										}),
-										memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-											var _el$1 = getNextElement(_tmpl$7);
-											effect((_$p) => style(_el$1, virtualSpacerStyle(virtualRange().offsetBottom), _$p));
-											return _el$1;
-										})() : null)
-									];
-								} }), _el$4, _co$);
-								insert(_el$2, (() => {
-									var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
-									return () => _c$() && createComponent(ListBoxLoadMoreItem, {
-										get onLoadMore() {
-											return local.onLoadMore;
-										},
-										get isLoading() {
-											return local.isLoading;
-										}
-									});
-								})(), _el$6, _co$2);
-								runHydrationEvents();
-								return _el$2;
-							})()];
+											});
+										})(), _el$7, _co$2);
+										runHydrationEvents();
+										return _el$3;
+									})()];
+								}
+							});
 						}
 					});
 				}
@@ -502,7 +660,7 @@ function ListBoxOption(props) {
 		get onHoverChange() {
 			return ariaProps.onHoverChange;
 		}
-	}, state);
+	}, state, ref);
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
 		isFocused: optionAria.isFocused(),
@@ -525,7 +683,10 @@ function ListBoxOption(props) {
 	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
 	const draggableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return void 0;
-		return listContext.dragAndDropHooks.useDraggableItem({ key: local.id }, listContext.dragState);
+		return listContext.dragAndDropHooks.useDraggableItem({
+			key: local.id,
+			selectionMode: state.selectionManager.selectionMode
+		}, listContext.dragState);
 	});
 	const droppableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return void 0;
@@ -542,12 +703,12 @@ function ListBoxOption(props) {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			var _el$10 = getNextElement(_tmpl$8);
+			var _el$11 = getNextElement(_tmpl$9);
 			use((el) => {
 				setRef(el);
 				assignRef(local.ref, el);
-			}, _el$10);
-			spread(_el$10, mergeProps(() => mergeProps$2(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
+			}, _el$11);
+			spread(_el$11, mergeProps(() => mergeProps$2(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
 				get ["class"]() {
 					return renderProps.class();
 				},
@@ -582,18 +743,18 @@ function ListBoxOption(props) {
 					return local.slot;
 				}
 			}), false, true);
-			insert(_el$10, (() => {
+			insert(_el$11, (() => {
 				var _c$2 = memo(() => !!hasPrimitiveLabel());
 				return () => _c$2() ? (() => {
-					var _el$11 = getNextElement(_tmpl$);
-					spread(_el$11, mergeProps(() => optionAria.labelProps), false, true);
-					insert(_el$11, () => renderProps.renderChildren());
+					var _el$12 = getNextElement(_tmpl$2);
+					spread(_el$12, mergeProps(() => optionAria.labelProps), false, true);
+					insert(_el$12, () => renderProps.renderChildren());
 					runHydrationEvents();
-					return _el$11;
+					return _el$12;
 				})() : renderProps.renderChildren();
 			})());
 			runHydrationEvents();
-			return _el$10;
+			return _el$11;
 		}
 	});
 }
@@ -631,29 +792,29 @@ function ListBoxLoadMoreItem(props) {
 		defaultClassName: "solidaria-ListBox-loadMore"
 	}, () => ({ isLoading: isLoading() }));
 	return [(() => {
-		var _el$12 = getNextElement(_tmpl$9), _el$13 = _el$12.firstChild;
+		var _el$13 = getNextElement(_tmpl$0), _el$14 = _el$13.firstChild;
 		var _ref$ = sentinelRef;
-		typeof _ref$ === "function" ? use(_ref$, _el$13) : sentinelRef = _el$13;
-		return _el$12;
+		typeof _ref$ === "function" ? use(_ref$, _el$14) : sentinelRef = _el$14;
+		return _el$13;
 	})(), (() => {
-		var _el$14 = getNextElement(_tmpl$0);
-		_el$14.addEventListener("focus", () => {
+		var _el$15 = getNextElement(_tmpl$1);
+		_el$15.addEventListener("focus", () => {
 			triggerLoadMore();
 		});
-		setAttribute(_el$14, "aria-disabled", true);
-		insert(_el$14, () => renderProps.renderChildren());
+		setAttribute(_el$15, "aria-disabled", true);
+		insert(_el$15, () => renderProps.renderChildren());
 		effect((_p$) => {
-			var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = isLoading() || void 0;
-			_v$ !== _p$.e && className(_el$14, _p$.e = _v$);
-			_p$.t = style(_el$14, _v$2, _p$.t);
-			_v$3 !== _p$.a && setAttribute(_el$14, "data-loading", _p$.a = _v$3);
+			var _v$5 = renderProps.class(), _v$6 = renderProps.style(), _v$7 = isLoading() || void 0;
+			_v$5 !== _p$.e && className(_el$15, _p$.e = _v$5);
+			_p$.t = style(_el$15, _v$6, _p$.t);
+			_v$7 !== _p$.a && setAttribute(_el$15, "data-loading", _p$.a = _v$7);
 			return _p$;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0
 		});
-		return _el$14;
+		return _el$15;
 	})()];
 }
 /**