@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/createSelectableList.jsx

@@ -0,0 +1,776 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/selection/DOMLayoutDelegate.ts
+/*
+* Copyright 2020 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/src/selection/ListKeyboardDelegate.ts
+/*
+* Copyright 2020 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/src/selection/useSelectableCollection.ts
+/*
+* Copyright 2020 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/src/selection/useSelectableList.ts
+import { t as mergeProps } from "./mergeProps.jsx";
+import { _ as scrollIntoViewport, c as isCtrlKeyPressed, g as scrollIntoView } from "./utils.jsx";
+import { t as onOwnedCleanup } from "./owner.jsx";
+import { t as access } from "./reactivity.jsx";
+import { N as getInteractionModality, T as focusWithoutScrolling, Z as isMac, d as isFocusWithin, h as isTabbable, i as getFocusableTreeWalker, m as isScrollable, n as getActiveElement, r as getEventTarget, v as nodeContains, w as focusSafely, y as openLink } from "./dom.jsx";
+import { t as createKeyboard } from "./createKeyboard.jsx";
+import { i as useLocale } from "./locale.jsx";
+import { t as createCollator } from "./createCollator.jsx";
+import { n as FOCUS_EVENT, t as CLEAR_FOCUS_EVENT } from "./constants.jsx";
+import { a as isNonContiguousSelectionModifier, i as getItemElement, o as registerCollectionId } from "./createSelectableItem.jsx";
+import { t as createTypeSelect } from "./createTypeSelect.jsx";
+import { r as isVirtualDragging } from "./DragManager.jsx";
+import { createEffect, createMemo, createTrackedEffect, flush } from "solid-js";
+//#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.
+*  - Ticket #100 tracks the missing virtual-focus cursor movement through
+*    `moveVirtualFocus` and `dispatchVirtualFocus`. 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 navigateToKey = (e, key, childFocus) => {
+		if (key != null) {
+			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;
+				}
+				return false;
+			}
+			manager.setFocusedKey(key, childFocus);
+			if (manager.isLink(key) && linkBehavior === "override") return false;
+			if (e.shiftKey && manager.selectionMode === "multiple") {
+				manager.extendSelection(key);
+				return;
+			} else if (selectOnFocus() && !isNonContiguousSelectionModifier(e)) {
+				manager.replaceSelection(key);
+				return;
+			}
+		}
+		return false;
+	};
+	const arrowDown = (e) => {
+		const d = delegate();
+		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) {
+				navigateToKey(e, nextKey);
+				return;
+			}
+		}
+		return false;
+	};
+	const arrowUp = (e) => {
+		const d = delegate();
+		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) {
+				navigateToKey(e, nextKey);
+				return;
+			}
+		}
+		return false;
+	};
+	const home = (e) => {
+		const d = delegate();
+		if (d.getFirstKey) {
+			if (manager.focusedKey == null && e.shiftKey) return false;
+			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);
+					return;
+				} else if (selectOnFocus()) {
+					manager.replaceSelection(firstKey);
+					return;
+				}
+			}
+		}
+		return false;
+	};
+	const arrowLeft = (e) => {
+		const d = delegate();
+		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) {
+				navigateToKey(e, nextKey, direction() === "rtl" ? "first" : "last");
+				return;
+			}
+		}
+		return false;
+	};
+	const arrowRight = (e) => {
+		const d = delegate();
+		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) {
+				navigateToKey(e, nextKey, direction() === "rtl" ? "last" : "first");
+				return;
+			}
+		}
+		return false;
+	};
+	const end = (e) => {
+		const d = delegate();
+		if (d.getLastKey) {
+			if (manager.focusedKey == null && e.shiftKey) return false;
+			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);
+					return;
+				} else if (selectOnFocus()) {
+					manager.replaceSelection(lastKey);
+					return;
+				}
+			}
+		}
+		return false;
+	};
+	const pageDown = (e) => {
+		const d = delegate();
+		if (d.getKeyPageBelow && manager.focusedKey != null) {
+			const nextKey = d.getKeyPageBelow(manager.focusedKey);
+			if (nextKey != null) return navigateToKey(e, nextKey);
+		}
+		return false;
+	};
+	const pageUp = (e) => {
+		const d = delegate();
+		if (d.getKeyPageAbove && manager.focusedKey != null) {
+			const nextKey = d.getKeyPageAbove(manager.focusedKey);
+			if (nextKey != null) return navigateToKey(e, nextKey);
+		}
+		return false;
+	};
+	const selectAll = () => {
+		if (manager.selectionMode === "multiple" && disallowSelectAll !== true) {
+			manager.selectAll();
+			return;
+		}
+		return false;
+	};
+	const escape = () => {
+		if (escapeKeyBehavior === "clearSelection" && !disallowEmptySelection && manager.selectedKeys.size !== 0) {
+			manager.clearSelection();
+			return;
+		}
+		return false;
+	};
+	const tab = () => {
+		const root = ref();
+		if (!allowsTabNavigation && root) {
+			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);
+		}
+		return {
+			shouldContinuePropagation: true,
+			shouldPreventDefault: false
+		};
+	};
+	const shiftTab = () => {
+		const root = ref();
+		if (!allowsTabNavigation && root) root.focus();
+		return {
+			shouldContinuePropagation: true,
+			shouldPreventDefault: false
+		};
+	};
+	const withShiftSelection = (key, callback) => ({
+		[isMac() ? `${key}+Shift+Alt` : `${key}+Shift+Control`]: callback,
+		[`${key}+Shift`]: callback,
+		[isMac() ? `${key}+Alt` : `${key}+Control`]: callback,
+		[key]: callback
+	});
+	const { keyboardProps: repeatKeyboardProps } = createKeyboard({
+		shortcuts: {
+			...withShiftSelection("ArrowDown", arrowDown),
+			...withShiftSelection("ArrowUp", arrowUp),
+			...withShiftSelection("ArrowLeft", arrowLeft),
+			...withShiftSelection("ArrowRight", arrowRight),
+			...withShiftSelection("PageDown", pageDown),
+			...withShiftSelection("PageUp", pageUp)
+		},
+		allowRepeats: true
+	});
+	const { keyboardProps } = createKeyboard({ shortcuts: {
+		...withShiftSelection("Home", home),
+		...withShiftSelection("End", end),
+		"Mod+A": selectAll,
+		Escape: escape,
+		Tab: tab,
+		"Tab+Shift": shiftTab
+	} });
+	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() });
+			}
+		}
+		try {
+			flush();
+		} catch {}
+	};
+	const onFocusOut = (e) => {
+		const currentTarget = e.currentTarget;
+		if (nodeContains(currentTarget, e.relatedTarget)) return;
+		const focusedKey = manager.focusedKey;
+		if (e.relatedTarget == null && focusedKey != null) {
+			if (isVirtualDragging()) return;
+			const lostTarget = e.target;
+			requestAnimationFrame(() => {
+				if (manager.focusedKey !== focusedKey) return;
+				const item = getItemElement(ref, focusedKey);
+				if (item instanceof HTMLElement && item !== lostTarget) {
+					manager.setFocused(true);
+					if (!shouldUseVirtualFocus) focusWithoutScrolling(item);
+					return;
+				}
+				if (lostTarget.isConnected) manager.setFocused(false);
+			});
+			return;
+		}
+		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(() => [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(() => manager.focusedKey, () => {
+		if (manager.collection.size > 0) shouldVirtualFocusFirst = false;
+	}, { defer: true });
+	let autoFocusActive = autoFocus !== false;
+	let didAutoFocus = false;
+	createTrackedEffect(() => {
+		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);
+		if (focusedKey != null && selectOnFocus() && !selectedKeys.size && manager.canSelectItem(focusedKey)) manager.replaceSelection(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;
+	createTrackedEffect(() => {
+		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;
+	});
+	onOwnedCleanup(() => {
+		if (raf != null) cancelAnimationFrame(raf);
+	});
+	addRefListener(ref, "react-aria-focus-scope-restore", (e) => {
+		e.preventDefault();
+		manager.setFocused(true);
+	});
+	addRefListener(ref, "focusin", (e) => onFocusIn(e));
+	addRefListener(ref, "focusout", (e) => onFocusOut(e));
+	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 = mergeProps(keyboardProps, repeatKeyboardProps, {
+			onFocusIn,
+			onFocus: (e) => {
+				if (getEventTarget(e) === e.currentTarget) onFocusIn(e);
+			},
+			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) {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
+		const el = ref();
+		if (!el) return;
+		el.addEventListener(type, handler);
+		_s2Cleanups.push(() => el.removeEventListener(type, handler));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
+	});
+}
+//#endregion
+//#region src/selection/createSelectableList.ts
+/**
+* createSelectableList - keyboard navigation and selection for a list collection.
+* Based on `packages/react-aria/src/selection/useSelectableList.ts`.
+*
+* 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,
+			orientation: options.orientation,
+			direction: options.direction
+		});
+	});
+	const collection = createSelectableCollection({
+		...options,
+		keyboardDelegate
+	});
+	return { get listProps() {
+		return collection.collectionProps;
+	} };
+}
+//#endregion
+export { DOMLayoutDelegate as i, createSelectableCollection as n, ListKeyboardDelegate as r, createSelectableList as t };
+
+//# sourceMappingURL=createSelectableList.jsx.map