@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/selection.jsx

@@ -0,0 +1,679 @@
+import { i as access, o as mergeProps } from "./env.jsx";
+import { S as scrollIntoViewport, c as isCtrlKeyPressed, x as scrollIntoView } from "./utils.jsx";
+import { a as getEventTarget, b as openLink, f as isFocusWithin, g as isTabbable, h as isScrollable, i as getActiveElement, n as focusWithoutScrolling, o as getFocusableTreeWalker, t as focusSafely, y as nodeContains } from "./focus.jsx";
+import { o as getInteractionModality } from "./createInteractionModality.jsx";
+import { a as useLocale, t as createCollator } from "./createCollator.jsx";
+import { t as createTypeSelect } from "./createTypeSelect.jsx";
+import { a as isNonContiguousSelectionModifier, i as getItemElement, o as registerCollectionId } from "./createSelectableItem.jsx";
+import { createEffect, createMemo, on, onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
+//#region src/selection/createScrollIntoViewOnFocus.ts
+/**
+* Reveals the virtually-focused collection item when the focused key changes via
+* keyboard navigation.
+*
+* Mirrors the focused-key scroll effect in @react-aria/selection's
+* `useSelectableCollection`. Activedescendant collections (ListBox / Menu /
+* ComboBox) keep real DOM focus on the container and point at the active item
+* with `aria-activedescendant`, so the browser never natively scrolls the
+* focused option into view the way a roving-tabindex collection would. This
+* effect restores that behavior through our `scrollIntoViewport` util.
+*/
+function createScrollIntoViewOnFocus(options) {
+	if (isServer) return;
+	const getItemElement = options.getItemElement ?? ((root, key) => root.querySelector(`[data-key="${key}"]`));
+	createEffect(() => {
+		const key = options.focusedKey();
+		if (key == null) return;
+		if (options.isActive && !options.isActive()) return;
+		if (getInteractionModality() === "pointer") return;
+		const root = options.ref();
+		if (!root) return;
+		queueMicrotask(() => {
+			const element = getItemElement(root, key);
+			if (element) scrollIntoViewport(element, { containingElement: root });
+		});
+	});
+}
+//#endregion
+//#region src/selection/constants.ts
+/**
+* Custom DOM event names used to drive virtual focus into a selectable
+* collection from an outside controller (e.g. an Autocomplete input). Mirrors
+* @react-aria/selection's `utils/constants` (`FOCUS_EVENT` / `CLEAR_FOCUS_EVENT`).
+*
+* Canonical home is here, in the selection layer, because the collection is the
+* consumer that listens for them. A controller that wants to move virtual focus
+* (the deferred autocomplete-collection bridge) dispatches these onto the
+* collection ref.
+*/
+/** Dispatched onto a collection to focus it (optionally its first item). */
+const FOCUS_EVENT = "react-aria-focus";
+/** Dispatched onto a collection to blur it (optionally clearing the focused key). */
+const CLEAR_FOCUS_EVENT = "react-aria-clear-focus";
+//#endregion
+//#region src/selection/DOMLayoutDelegate.ts
+/**
+* A {@link LayoutDelegate} that measures items via the DOM.
+*/
+var DOMLayoutDelegate = class {
+	ref;
+	constructor(ref) {
+		this.ref = ref;
+	}
+	getItemRect(key) {
+		const container = this.ref();
+		if (!container) return null;
+		const item = key != null ? getItemElement(this.ref, key) : null;
+		if (!item) return null;
+		const containerRect = container.getBoundingClientRect();
+		const itemRect = item.getBoundingClientRect();
+		return {
+			x: itemRect.left - containerRect.left - container.clientLeft + container.scrollLeft,
+			y: itemRect.top - containerRect.top - container.clientTop + container.scrollTop,
+			width: itemRect.width,
+			height: itemRect.height
+		};
+	}
+	getContentSize() {
+		const container = this.ref();
+		return {
+			width: container?.scrollWidth ?? 0,
+			height: container?.scrollHeight ?? 0
+		};
+	}
+	getVisibleRect() {
+		const container = this.ref();
+		return {
+			x: container?.scrollLeft ?? 0,
+			y: container?.scrollTop ?? 0,
+			width: container?.clientWidth ?? 0,
+			height: container?.clientHeight ?? 0
+		};
+	}
+};
+//#endregion
+//#region src/selection/ListKeyboardDelegate.ts
+/**
+* A keyboard delegate that handles navigation within a list/stack collection.
+*/
+var ListKeyboardDelegate = class {
+	collection;
+	disabledKeys;
+	disabledBehavior;
+	ref;
+	collator;
+	layout;
+	orientation;
+	direction;
+	layoutDelegate;
+	/** Present unless this is a vertical stack (mirrors upstream's method deletion). */
+	getKeyLeftOf;
+	/** Present unless this is a vertical stack (mirrors upstream's method deletion). */
+	getKeyRightOf;
+	constructor(options) {
+		this.collection = options.collection;
+		this.ref = options.ref;
+		this.collator = options.collator;
+		this.disabledKeys = options.disabledKeys ?? /* @__PURE__ */ new Set();
+		this.disabledBehavior = options.disabledBehavior ?? "all";
+		this.orientation = options.orientation ?? "vertical";
+		this.direction = options.direction;
+		this.layout = options.layout ?? "stack";
+		this.layoutDelegate = options.layoutDelegate ?? new DOMLayoutDelegate(options.ref);
+		if (!(this.layout === "stack" && this.orientation === "vertical")) {
+			this.getKeyLeftOf = (key, opts) => this.computeKeyLeftOf(key, opts);
+			this.getKeyRightOf = (key, opts) => this.computeKeyRightOf(key, opts);
+		}
+	}
+	isDisabled(item) {
+		return this.disabledBehavior === "all" && (item.props?.isDisabled === true || item.isDisabled === true || this.disabledKeys.has(item.key)) && item.props?.disabledBehavior !== "selection";
+	}
+	findNextNonDisabled(key, getNext, includeDisabled = false) {
+		let nextKey = key;
+		while (nextKey != null) {
+			const item = this.collection.getItem(nextKey);
+			if (item?.type === "item" && (includeDisabled || !this.isDisabled(item))) return nextKey;
+			nextKey = getNext(nextKey);
+		}
+		return null;
+	}
+	getNextKey(key, options) {
+		let nextKey = key;
+		nextKey = this.collection.getKeyAfter(nextKey);
+		return this.findNextNonDisabled(nextKey, (k) => this.collection.getKeyAfter(k), options?.includeDisabled);
+	}
+	getPreviousKey(key, options) {
+		let nextKey = key;
+		nextKey = this.collection.getKeyBefore(nextKey);
+		return this.findNextNonDisabled(nextKey, (k) => this.collection.getKeyBefore(k), options?.includeDisabled);
+	}
+	findKey(key, nextKey, shouldSkip) {
+		let tempKey = key;
+		let itemRect = this.layoutDelegate.getItemRect(tempKey);
+		if (!itemRect || tempKey == null) return null;
+		const prevRect = itemRect;
+		do {
+			tempKey = nextKey(tempKey);
+			if (tempKey == null) break;
+			itemRect = this.layoutDelegate.getItemRect(tempKey);
+		} while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
+		return tempKey;
+	}
+	isSameRow(prevRect, itemRect) {
+		return prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
+	}
+	isSameColumn(prevRect, itemRect) {
+		return prevRect.x === itemRect.x || prevRect.y !== itemRect.y;
+	}
+	isReversed(key) {
+		const nextKey = this.getNextKey(key);
+		const currentEl = getItemElement(this.ref, key);
+		if (nextKey != null) {
+			const nextEl = getItemElement(this.ref, nextKey);
+			if (!currentEl || !nextEl) return false;
+			return currentEl.getBoundingClientRect().top > nextEl.getBoundingClientRect().top;
+		}
+		const prevKey = this.getPreviousKey(key);
+		if (prevKey != null) {
+			const prevEl = getItemElement(this.ref, prevKey);
+			if (!currentEl || !prevEl) return false;
+			return prevEl.getBoundingClientRect().top > currentEl.getBoundingClientRect().top;
+		}
+		return false;
+	}
+	getKeyBelow(key, options) {
+		if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (k) => this.getNextKey(k, options), this.isSameRow);
+		else if (this.orientation === "vertical") return this.isReversed(key) ? this.getPreviousKey(key, options) : this.getNextKey(key, options);
+		else return this.getNextKey(key, options);
+	}
+	getKeyAbove(key, options) {
+		if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (k) => this.getPreviousKey(k, options), this.isSameRow);
+		else if (this.orientation === "vertical") return this.isReversed(key) ? this.getNextKey(key, options) : this.getPreviousKey(key, options);
+		else return this.getPreviousKey(key, options);
+	}
+	getNextColumn(key, right, options) {
+		return right ? this.getPreviousKey(key, options) : this.getNextKey(key, options);
+	}
+	computeKeyRightOf(key, options) {
+		const method = this.direction === "ltr" ? "getKeyRightOf" : "getKeyLeftOf";
+		const layoutMethod = this.layoutDelegate[method];
+		if (layoutMethod) {
+			const next = layoutMethod.call(this.layoutDelegate, key);
+			return this.findNextNonDisabled(next, (k) => this.layoutDelegate[method]?.call(this.layoutDelegate, k) ?? null, options?.includeDisabled);
+		}
+		if (this.layout === "grid") if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "rtl", options);
+		else return this.findKey(key, (k) => this.getNextColumn(k, this.direction === "rtl", options), this.isSameColumn);
+		else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "rtl", options);
+		return null;
+	}
+	computeKeyLeftOf(key, options) {
+		const method = this.direction === "ltr" ? "getKeyLeftOf" : "getKeyRightOf";
+		const layoutMethod = this.layoutDelegate[method];
+		if (layoutMethod) {
+			const next = layoutMethod.call(this.layoutDelegate, key);
+			return this.findNextNonDisabled(next, (k) => this.layoutDelegate[method]?.call(this.layoutDelegate, k) ?? null, options?.includeDisabled);
+		}
+		if (this.layout === "grid") if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "ltr", options);
+		else return this.findKey(key, (k) => this.getNextColumn(k, this.direction === "ltr", options), this.isSameColumn);
+		else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "ltr", options);
+		return null;
+	}
+	getFirstKey() {
+		const key = this.collection.getFirstKey();
+		return this.findNextNonDisabled(key, (k) => this.collection.getKeyAfter(k));
+	}
+	getLastKey() {
+		const key = this.collection.getLastKey();
+		return this.findNextNonDisabled(key, (k) => this.collection.getKeyBefore(k));
+	}
+	getKeyPageAbove(key) {
+		const menu = this.ref();
+		let itemRect = this.layoutDelegate.getItemRect(key);
+		if (!itemRect) return null;
+		const reversed = this.isReversed(key);
+		if (menu && !isScrollable(menu)) return this.getFirstKey();
+		let nextKey = key;
+		if (this.orientation === "horizontal") {
+			const pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
+			while (itemRect && itemRect.x > pageX && nextKey != null) {
+				nextKey = this.getKeyAbove(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		} else {
+			const visibleRect = this.layoutDelegate.getVisibleRect();
+			const pageY = reversed ? itemRect.y - visibleRect.height : Math.max(0, itemRect.y + itemRect.height - visibleRect.height);
+			while (itemRect && itemRect.y > pageY && nextKey != null) {
+				nextKey = this.getKeyAbove(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		}
+		return nextKey ?? (reversed ? this.getLastKey() : this.getFirstKey());
+	}
+	getKeyPageBelow(key) {
+		const menu = this.ref();
+		let itemRect = this.layoutDelegate.getItemRect(key);
+		if (!itemRect) return null;
+		const reversed = this.isReversed(key);
+		if (menu && !isScrollable(menu)) return this.getLastKey();
+		let nextKey = key;
+		if (this.orientation === "horizontal") {
+			const pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.x - itemRect.width + this.layoutDelegate.getVisibleRect().width);
+			while (itemRect && itemRect.x < pageX && nextKey != null) {
+				nextKey = this.getKeyBelow(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		} else {
+			const pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
+			while (itemRect && itemRect.y < pageY && nextKey != null) {
+				nextKey = this.getKeyBelow(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		}
+		return nextKey ?? (reversed ? this.getFirstKey() : this.getLastKey());
+	}
+	getKeyForSearch(search, fromKey) {
+		if (!this.collator) return null;
+		const collection = this.collection;
+		let key = fromKey ?? this.getFirstKey();
+		while (key != null) {
+			const item = collection.getItem(key);
+			if (!item) return null;
+			const substring = item.textValue.slice(0, search.length);
+			if (item.textValue && this.collator.compare(substring, search) === 0) return key;
+			key = this.getNextKey(key);
+		}
+		return null;
+	}
+};
+//#endregion
+//#region src/selection/createSelectableCollection.ts
+/**
+* createSelectableCollection - keyboard, focus, and selection interactions for a
+* selectable collection. Based on @react-aria/selection's
+* `useSelectableCollection`.
+*
+* React → Solid adaptations (faithful to upstream behavior):
+*  - `ref` / `scrollRef` are Solid accessors; `keyboardDelegate` may be an
+*    accessor so a recreated delegate stays current.
+*  - Per-render React effects become `createEffect`s that read the manager's
+*    reactive getters: the autofocus and scroll-into-view effects track
+*    `isFocused` / `focusedKey` / `collection.size` and run when those change.
+*    `useUpdateLayoutEffect` (skip-first) maps to `on(..., { defer: true })`.
+*  - Plain closure variables replace `useRef` (a Solid component body runs once).
+*  - React's bubbling `onFocus` / `onBlur` are `onFocusIn` / `onFocusOut`
+*    (the native bubbling focus events) here.
+*  - The link branch opens the anchor directly (we have no router abstraction)
+*    and needs no `flushSync` — `setFocusedKey` is synchronous and the keyed
+*    item element already exists in the DOM.
+*  - Virtual-focus cursor movement (`moveVirtualFocus` / `dispatchVirtualFocus`)
+*    is not yet modeled — a documented gap, consistent with createSelectableItem.
+*    The focused-key bookkeeping around it is preserved.
+*/
+/**
+* Handles interactions with selectable collections.
+*/
+function createSelectableCollection(options) {
+	const manager = options.selectionManager;
+	const delegate = () => access(options.keyboardDelegate);
+	const ref = options.ref;
+	const scrollRef = options.scrollRef ?? ref;
+	const autoFocus = options.autoFocus ?? false;
+	const shouldFocusWrap = options.shouldFocusWrap ?? false;
+	const disallowEmptySelection = options.disallowEmptySelection ?? false;
+	const disallowSelectAll = options.disallowSelectAll ?? false;
+	const escapeKeyBehavior = options.escapeKeyBehavior ?? "clearSelection";
+	const disallowTypeAhead = options.disallowTypeAhead ?? false;
+	const shouldUseVirtualFocus = options.shouldUseVirtualFocus ?? false;
+	const allowsTabNavigation = options.allowsTabNavigation ?? false;
+	const linkBehavior = options.linkBehavior ?? "action";
+	const focusOnEntry = options.UNSTABLE_focusOnEntry;
+	const selectOnFocus = () => options.selectOnFocus ?? manager.selectionBehavior === "replace";
+	const locale = useLocale();
+	const direction = () => locale().direction;
+	const onKeyDown = (e) => {
+		const d = delegate();
+		if (e.altKey && e.key === "Tab") e.preventDefault();
+		const root = ref();
+		if (!root || !nodeContains(root, getEventTarget(e))) return;
+		const navigateToKey = (key, childFocus) => {
+			if (key == null) return;
+			if (manager.isLink(key) && linkBehavior === "selection" && selectOnFocus() && !isNonContiguousSelectionModifier(e)) {
+				manager.setFocusedKey(key, childFocus);
+				const item = getItemElement(ref, key);
+				if (item instanceof HTMLAnchorElement) openLink(item, e);
+				return;
+			}
+			manager.setFocusedKey(key, childFocus);
+			if (manager.isLink(key) && linkBehavior === "override") return;
+			if (e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(key);
+			else if (selectOnFocus() && !isNonContiguousSelectionModifier(e)) manager.replaceSelection(key);
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				if (d.getKeyBelow) {
+					let nextKey = manager.focusedKey != null ? d.getKeyBelow(manager.focusedKey) : d.getFirstKey?.();
+					if (nextKey == null && shouldFocusWrap) nextKey = d.getFirstKey?.(manager.focusedKey ?? void 0);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey);
+					}
+				}
+				break;
+			case "ArrowUp":
+				if (d.getKeyAbove) {
+					let nextKey = manager.focusedKey != null ? d.getKeyAbove(manager.focusedKey) : d.getLastKey?.();
+					if (nextKey == null && shouldFocusWrap) nextKey = d.getLastKey?.(manager.focusedKey ?? void 0);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey);
+					}
+				}
+				break;
+			case "ArrowLeft":
+				if (d.getKeyLeftOf) {
+					let nextKey = manager.focusedKey != null ? d.getKeyLeftOf(manager.focusedKey) : d.getFirstKey?.();
+					if (nextKey == null && shouldFocusWrap) nextKey = direction() === "rtl" ? d.getFirstKey?.(manager.focusedKey ?? void 0) : d.getLastKey?.(manager.focusedKey ?? void 0);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey, direction() === "rtl" ? "first" : "last");
+					}
+				}
+				break;
+			case "ArrowRight":
+				if (d.getKeyRightOf) {
+					let nextKey = manager.focusedKey != null ? d.getKeyRightOf(manager.focusedKey) : d.getFirstKey?.();
+					if (nextKey == null && shouldFocusWrap) nextKey = direction() === "rtl" ? d.getLastKey?.(manager.focusedKey ?? void 0) : d.getFirstKey?.(manager.focusedKey ?? void 0);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey, direction() === "rtl" ? "last" : "first");
+					}
+				}
+				break;
+			case "Home":
+				if (d.getFirstKey) {
+					if (manager.focusedKey == null && e.shiftKey) return;
+					e.preventDefault();
+					const firstKey = d.getFirstKey(manager.focusedKey ?? void 0, isCtrlKeyPressed(e));
+					manager.setFocusedKey(firstKey);
+					if (firstKey != null) {
+						if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(firstKey);
+						else if (selectOnFocus()) manager.replaceSelection(firstKey);
+					}
+				}
+				break;
+			case "End":
+				if (d.getLastKey) {
+					if (manager.focusedKey == null && e.shiftKey) return;
+					e.preventDefault();
+					const lastKey = d.getLastKey(manager.focusedKey ?? void 0, isCtrlKeyPressed(e));
+					manager.setFocusedKey(lastKey);
+					if (lastKey != null) {
+						if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === "multiple") manager.extendSelection(lastKey);
+						else if (selectOnFocus()) manager.replaceSelection(lastKey);
+					}
+				}
+				break;
+			case "PageDown":
+				if (d.getKeyPageBelow && manager.focusedKey != null) {
+					const nextKey = d.getKeyPageBelow(manager.focusedKey);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey);
+					}
+				}
+				break;
+			case "PageUp":
+				if (d.getKeyPageAbove && manager.focusedKey != null) {
+					const nextKey = d.getKeyPageAbove(manager.focusedKey);
+					if (nextKey != null) {
+						e.preventDefault();
+						navigateToKey(nextKey);
+					}
+				}
+				break;
+			case "a":
+				if (isCtrlKeyPressed(e) && manager.selectionMode === "multiple" && disallowSelectAll !== true) {
+					e.preventDefault();
+					manager.selectAll();
+				}
+				break;
+			case "Escape":
+				if (escapeKeyBehavior === "clearSelection" && !disallowEmptySelection && manager.selectedKeys.size !== 0) {
+					e.stopPropagation();
+					e.preventDefault();
+					manager.clearSelection();
+				}
+				break;
+			case "Tab": if (!allowsTabNavigation) {
+				if (e.shiftKey) root.focus();
+				else {
+					const walker = getFocusableTreeWalker(root, { tabbable: true });
+					let next;
+					let last;
+					do {
+						last = walker.lastChild();
+						if (last) next = last;
+					} while (last);
+					const activeElement = getActiveElement();
+					if (next && (!isFocusWithin(next) || activeElement && !isTabbable(activeElement))) focusWithoutScrolling(next);
+				}
+				break;
+			}
+		}
+	};
+	const scrollPos = {
+		top: 0,
+		left: 0
+	};
+	addRefListener(scrollRef, "scroll", () => {
+		const sr = scrollRef();
+		scrollPos.top = sr?.scrollTop ?? 0;
+		scrollPos.left = sr?.scrollLeft ?? 0;
+	});
+	const onFocusIn = (e) => {
+		const currentTarget = e.currentTarget;
+		if (manager.isFocused) {
+			if (!nodeContains(currentTarget, getEventTarget(e))) manager.setFocused(false);
+			return;
+		}
+		if (!nodeContains(currentTarget, getEventTarget(e))) return;
+		const modality = getInteractionModality();
+		manager.setFocused(true);
+		const navigate = (key) => {
+			if (key != null) {
+				manager.setFocusedKey(key);
+				if (selectOnFocus() && !manager.isSelected(key)) manager.replaceSelection(key);
+			}
+		};
+		if (focusOnEntry && (modality === "keyboard" || modality === "virtual")) navigate(focusOnEntry === "first" ? delegate().getFirstKey?.() : delegate().getLastKey?.());
+		else if (manager.focusedKey == null) {
+			const relatedTarget = e.relatedTarget;
+			if (relatedTarget && currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigate(manager.lastSelectedKey ?? delegate().getLastKey?.());
+			else navigate(manager.firstSelectedKey ?? delegate().getFirstKey?.());
+		} else if (scrollRef()) {
+			const sr = scrollRef();
+			sr.scrollTop = scrollPos.top;
+			sr.scrollLeft = scrollPos.left;
+		}
+		if (manager.focusedKey != null && scrollRef()) {
+			const element = getItemElement(ref, manager.focusedKey);
+			if (element instanceof HTMLElement) {
+				if (!isFocusWithin(element) && !shouldUseVirtualFocus) focusWithoutScrolling(element);
+				if (modality === "keyboard" || focusOnEntry && modality === "virtual") scrollIntoViewport(element, { containingElement: ref() });
+			}
+		}
+	};
+	const onFocusOut = (e) => {
+		const currentTarget = e.currentTarget;
+		if (!nodeContains(currentTarget, e.relatedTarget)) manager.setFocused(false);
+	};
+	let shouldVirtualFocusFirst = false;
+	if (shouldUseVirtualFocus) {
+		addRefListener(ref, FOCUS_EVENT, (e) => {
+			const detail = e.detail;
+			e.stopPropagation();
+			manager.setFocused(true);
+			if (detail?.focusStrategy === "first") shouldVirtualFocusFirst = true;
+		});
+		addRefListener(ref, CLEAR_FOCUS_EVENT, (e) => {
+			e.stopPropagation();
+			manager.setFocused(false);
+			if (e.detail?.clearFocusKey) manager.setFocusedKey(null);
+		});
+	}
+	createEffect(on(() => [delegate().getFirstKey?.() ?? null, manager.collection.size], ([firstKey]) => {
+		if (!shouldVirtualFocusFirst) return;
+		if (firstKey == null) {
+			if (manager.collection.size > 0) shouldVirtualFocusFirst = false;
+		} else {
+			manager.setFocusedKey(firstKey);
+			shouldVirtualFocusFirst = false;
+		}
+	}, { defer: true }));
+	createEffect(on(() => manager.focusedKey, () => {
+		if (manager.collection.size > 0) shouldVirtualFocusFirst = false;
+	}, { defer: true }));
+	let autoFocusActive = autoFocus !== false;
+	let didAutoFocus = false;
+	createEffect(() => {
+		const size = manager.collection.size;
+		const selectedKeys = manager.selectedKeys;
+		if (!autoFocusActive) return;
+		let focusedKey = null;
+		if (autoFocus === "first") focusedKey = delegate().getFirstKey?.() ?? null;
+		if (autoFocus === "last") focusedKey = delegate().getLastKey?.() ?? null;
+		if (selectedKeys.size) {
+			for (const key of selectedKeys) if (manager.canSelectItem(key)) {
+				focusedKey = key;
+				break;
+			}
+		}
+		manager.setFocused(true);
+		manager.setFocusedKey(focusedKey);
+		const root = ref();
+		if (focusedKey == null && !shouldUseVirtualFocus && root) focusSafely(root);
+		if (size > 0) {
+			autoFocusActive = false;
+			didAutoFocus = true;
+		}
+	});
+	let lastFocusedKey = manager.focusedKey;
+	let raf = null;
+	createEffect(() => {
+		const isFocused = manager.isFocused;
+		const focusedKey = manager.focusedKey;
+		const root = ref();
+		const sr = scrollRef();
+		if (isFocused && focusedKey != null && (focusedKey !== lastFocusedKey || didAutoFocus) && sr && root) {
+			const modality = getInteractionModality();
+			const element = getItemElement(ref, focusedKey);
+			if (!(element instanceof HTMLElement)) return;
+			if (modality === "keyboard" || didAutoFocus) {
+				if (raf != null) cancelAnimationFrame(raf);
+				raf = requestAnimationFrame(() => {
+					const scrollEl = scrollRef();
+					if (scrollEl) {
+						scrollIntoView(scrollEl, element);
+						if (modality !== "virtual") scrollIntoViewport(element, { containingElement: ref() });
+					}
+				});
+			}
+		}
+		if (!shouldUseVirtualFocus && isFocused && focusedKey == null && lastFocusedKey != null && root) focusSafely(root);
+		lastFocusedKey = focusedKey;
+		didAutoFocus = false;
+	});
+	onCleanup(() => {
+		if (raf != null) cancelAnimationFrame(raf);
+	});
+	addRefListener(ref, "react-aria-focus-scope-restore", (e) => {
+		e.preventDefault();
+		manager.setFocused(true);
+	});
+	const onMouseDown = (e) => {
+		if (scrollRef() === getEventTarget(e)) e.preventDefault();
+	};
+	const { typeSelectProps } = createTypeSelect({
+		collection: () => manager.collection,
+		focusedKey: () => manager.focusedKey,
+		onFocusedKeyChange: (key) => manager.setFocusedKey(key),
+		isKeyDisabled: (key) => manager.isDisabled(key)
+	});
+	const collectionId = registerCollectionId(manager);
+	return { get collectionProps() {
+		let tabIndex;
+		if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
+		let handlers = {
+			onKeyDown,
+			onFocusIn,
+			onFocusOut,
+			onMouseDown
+		};
+		if (!disallowTypeAhead) handlers = mergeProps(typeSelectProps, handlers);
+		return mergeProps(handlers, {
+			tabIndex,
+			"data-collection": collectionId
+		});
+	} };
+}
+/** Attaches `type` to the element from `ref`, re-binding when the element changes. */
+function addRefListener(ref, type, handler) {
+	createEffect(() => {
+		const el = ref();
+		if (!el) return;
+		el.addEventListener(type, handler);
+		onCleanup(() => el.removeEventListener(type, handler));
+	});
+}
+//#endregion
+//#region src/selection/createSelectableList.ts
+/**
+* createSelectableList - keyboard navigation and selection for a list collection.
+* Based on @react-aria/selection's `useSelectableList`.
+*
+* React → Solid adaptations (faithful to upstream behavior):
+*  - `ref` / `scrollRef` are Solid accessors.
+*  - The default `ListKeyboardDelegate` is built inside a `createMemo` so it is
+*    recreated whenever the collection, disabled keys, disabled behavior, or
+*    collator change (the house convention — the delegate stores those as plain
+*    values; see {@link ListKeyboardDelegate}). This is the Solid equivalent of
+*    upstream's `useMemo` keyed on the same inputs.
+*  - Upstream takes `collection` and `disabledKeys` as separate props; our
+*    SelectionManager already exposes them as reactive getters
+*    (`manager.collection`, `manager.disabledKeys`, `manager.disabledBehavior`),
+*    so the delegate is derived from the manager — a single source of truth.
+*    A `layoutDelegate` may still be supplied for virtualized collections.
+*/
+/**
+* Handles interactions with a selectable list collection.
+*/
+function createSelectableList(options) {
+	const manager = options.selectionManager;
+	const collator = createCollator({
+		usage: "search",
+		sensitivity: "base"
+	});
+	const keyboardDelegate = createMemo(() => {
+		if (options.keyboardDelegate != null) return access(options.keyboardDelegate);
+		return new ListKeyboardDelegate({
+			collection: manager.collection,
+			disabledKeys: manager.disabledKeys,
+			disabledBehavior: manager.disabledBehavior,
+			ref: options.ref,
+			collator: collator(),
+			layoutDelegate: options.layoutDelegate
+		});
+	});
+	const collection = createSelectableCollection({
+		...options,
+		keyboardDelegate
+	});
+	return { get listProps() {
+		return collection.collectionProps;
+	} };
+}
+//#endregion
+export { CLEAR_FOCUS_EVENT as a, DOMLayoutDelegate as i, createSelectableCollection as n, FOCUS_EVENT as o, ListKeyboardDelegate as r, createScrollIntoViewOnFocus as s, createSelectableList as t };
+
+//# sourceMappingURL=selection.jsx.map