@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/dist/_chunk/focus2.js

@@ -0,0 +1,631 @@
+import { i as getActiveElement$1, s as getOwnerDocument, t as focusSafely } from "./focus.js";
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+//#region src/focus/createFocusRestore.ts
+/**
+* Focus restoration utilities for solidaria
+*
+* Provides enhanced focus restoration with retry logic, cross-scope tracking,
+* and safe restoration patterns.
+*/
+const focusStack = [];
+/**
+* Push an element onto the focus stack.
+*/
+function pushFocusStack(element) {
+	focusStack.push(element);
+}
+/**
+* Pop the last element from the focus stack.
+*/
+function popFocusStack() {
+	return focusStack.pop();
+}
+/**
+* Get the current focus stack length.
+*/
+function getFocusStackLength() {
+	return focusStack.length;
+}
+/**
+* Clear the entire focus stack.
+*/
+function clearFocusStack() {
+	focusStack.length = 0;
+}
+/**
+* Gets the active element, accounting for shadow DOM.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
+	return activeElement;
+}
+/**
+* Checks if an element is still valid for focus restoration.
+*/
+function isValidForRestore(element) {
+	if (!element) return false;
+	if (!document.body.contains(element)) return false;
+	if (element.hasAttribute("disabled")) return false;
+	if (element.getAttribute("aria-disabled") === "true") return false;
+	if (element.getAttribute("aria-hidden") === "true") return false;
+	return true;
+}
+/**
+* Attempts to restore focus with retries.
+*/
+function tryRestoreFocus(element, options) {
+	const { maxRetries, retryDelay, preventScroll, onRestore, onRestoreFailed } = options;
+	let attempts = 0;
+	const attempt = () => {
+		if (!element) {
+			onRestoreFailed?.();
+			return;
+		}
+		if (isValidForRestore(element)) {
+			if (preventScroll) focusSafely(element);
+			else element.focus();
+			onRestore?.(element);
+			return;
+		}
+		attempts++;
+		if (attempts < maxRetries) setTimeout(attempt, retryDelay);
+		else onRestoreFailed?.();
+	};
+	requestAnimationFrame(attempt);
+}
+/**
+* Creates a focus restoration manager.
+*
+* This hook saves the currently focused element when mounted and provides
+* methods to restore focus later, with retry logic for reliability.
+*
+* @example
+* ```tsx
+* function Modal(props) {
+*   const focusRestore = createFocusRestore({
+*     restoreOnUnmount: true,
+*     onRestore: () => console.log('Focus restored'),
+*   });
+*
+*   return (
+*     <div role="dialog">
+*       {props.children}
+*       <button onClick={() => focusRestore.restore()}>
+*         Close
+*       </button>
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Manual focus management
+* function Dropdown() {
+*   const focusRestore = createFocusRestore({ restoreOnUnmount: false });
+*
+*   const onOpen = () => {
+*     focusRestore.saveCurrentFocus();
+*     // Focus dropdown content
+*   };
+*
+*   const onClose = () => {
+*     focusRestore.restore();
+*   };
+*
+*   return <div>...</div>;
+* }
+* ```
+*/
+function createFocusRestore(options = {}) {
+	const { restoreOnUnmount = true, maxRetries = 3, retryDelay = 50, onRestore, onRestoreFailed, preventScroll = true } = options;
+	if (isServer) return {
+		restore: () => false,
+		getSavedElement: () => null,
+		saveCurrentFocus: () => {},
+		clear: () => {}
+	};
+	let savedElement = null;
+	onMount(() => {
+		saveCurrentFocus();
+	});
+	onCleanup(() => {
+		if (restoreOnUnmount && savedElement) tryRestoreFocus(savedElement, {
+			maxRetries,
+			retryDelay,
+			preventScroll,
+			onRestore: onRestore ?? (() => {}),
+			onRestoreFailed: onRestoreFailed ?? (() => {})
+		});
+	});
+	function saveCurrentFocus() {
+		const doc = typeof document !== "undefined" ? document : null;
+		if (!doc) return;
+		const active = getActiveElement(doc);
+		if (active && active !== doc.body) {
+			savedElement = active;
+			pushFocusStack(active);
+		}
+	}
+	function restore() {
+		if (!savedElement) return false;
+		if (isValidForRestore(savedElement)) {
+			if (preventScroll) focusSafely(savedElement);
+			else savedElement.focus();
+			onRestore?.(savedElement);
+			return true;
+		}
+		while (focusStack.length > 0) {
+			const stackElement = popFocusStack();
+			if (stackElement && isValidForRestore(stackElement)) {
+				if (preventScroll) focusSafely(stackElement);
+				else stackElement.focus();
+				onRestore?.(stackElement);
+				return true;
+			}
+		}
+		onRestoreFailed?.();
+		return false;
+	}
+	function getSavedElement() {
+		return savedElement;
+	}
+	function clear() {
+		savedElement = null;
+	}
+	return {
+		restore,
+		getSavedElement,
+		saveCurrentFocus,
+		clear
+	};
+}
+//#endregion
+//#region src/focus/createVirtualFocus.ts
+/**
+* Virtual focus management for solidaria
+*
+* Provides virtual focus for large collections where tracking DOM focus
+* on every item is impractical. Instead, a single element receives real
+* focus while aria-activedescendant indicates the virtually focused item.
+*
+* This is commonly used in:
+* - Virtualized lists (where not all items are in the DOM)
+* - Large trees
+* - Autocomplete/combobox suggestions
+* - Grid/table navigation
+*/
+const DEFAULT_PAGE_SIZE = 10;
+/**
+* Creates virtual focus management for a collection.
+*
+* Virtual focus uses aria-activedescendant to indicate which item is
+* "focused" while keeping real DOM focus on a container element. This
+* is more performant for large collections and required for virtualized
+* lists where items may not be in the DOM.
+*
+* @example
+* ```tsx
+* function Listbox(props) {
+*   const virtualFocus = createVirtualFocus({
+*     items: () => props.items,
+*     getKey: (item) => item.id,
+*     isDisabled: (item) => item.disabled,
+*   });
+*
+*   return (
+*     <ul
+*       role="listbox"
+*       tabIndex={0}
+*       aria-activedescendant={virtualFocus.containerProps['aria-activedescendant']()}
+*       onKeyDown={virtualFocus.containerProps.onKeyDown}
+*     >
+*       <For each={props.items}>
+*         {(item) => (
+*           <li
+*             {...virtualFocus.getItemProps(item.id)}
+*             role="option"
+*             aria-selected={virtualFocus.isFocused(item.id)}
+*           >
+*             {item.name}
+*           </li>
+*         )}
+*       </For>
+*     </ul>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With controlled focus
+* function ControlledListbox() {
+*   const [focusedKey, setFocusedKey] = createSignal<string | null>(null);
+*
+*   const virtualFocus = createVirtualFocus({
+*     items: () => items,
+*     getKey: (item) => item.id,
+*     focusedKey: focusedKey,
+*     onFocusChange: setFocusedKey,
+*   });
+*
+*   return <ul>...</ul>;
+* }
+* ```
+*/
+function createVirtualFocus(options) {
+	const { items, getKey, isDisabled = () => false, defaultFocusedKey, focusedKey: controlledFocusedKey, onFocusChange, wrap = true, skipDisabled = true, orientation = "vertical" } = options;
+	if (isServer) {
+		const emptyAccessor = () => null;
+		return {
+			focusedKey: emptyAccessor,
+			focusedItem: emptyAccessor,
+			setFocusedKey: () => {},
+			focusNext: () => {},
+			focusPrevious: () => {},
+			focusFirst: () => {},
+			focusLast: () => {},
+			focusPageDown: () => {},
+			focusPageUp: () => {},
+			isFocused: () => false,
+			containerProps: {
+				"aria-activedescendant": () => void 0,
+				onKeyDown: () => {}
+			},
+			getItemProps: (key) => ({ id: `item-${key}` })
+		};
+	}
+	const [internalKey, setInternalKey] = createSignal(defaultFocusedKey ?? null);
+	const focusedKey = controlledFocusedKey ?? internalKey;
+	const setFocusedKey = (key) => {
+		if (controlledFocusedKey) onFocusChange?.(key);
+		else {
+			setInternalKey(key);
+			onFocusChange?.(key);
+		}
+	};
+	const focusedItem = () => {
+		const key = focusedKey();
+		if (!key) return null;
+		return items().find((item) => getKey(item) === key) ?? null;
+	};
+	const getValidItems = () => {
+		if (!skipDisabled) return items();
+		return items().filter((item) => !isDisabled(item));
+	};
+	const getKeyIndex = (key) => {
+		if (!key) return -1;
+		return getValidItems().findIndex((item) => getKey(item) === key);
+	};
+	const focusByIndex = (index) => {
+		const validItems = getValidItems();
+		if (validItems.length === 0) return;
+		let targetIndex = index;
+		if (wrap) targetIndex = (index % validItems.length + validItems.length) % validItems.length;
+		else targetIndex = Math.max(0, Math.min(index, validItems.length - 1));
+		const item = validItems[targetIndex];
+		if (item) setFocusedKey(getKey(item));
+	};
+	const focusNext = () => {
+		focusByIndex(getKeyIndex(focusedKey()) + 1);
+	};
+	const focusPrevious = () => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - 1);
+	};
+	const focusFirst = () => {
+		focusByIndex(0);
+	};
+	const focusLast = () => {
+		focusByIndex(getValidItems().length - 1);
+	};
+	const focusPageDown = (pageSize = DEFAULT_PAGE_SIZE) => {
+		focusByIndex(getKeyIndex(focusedKey()) + pageSize);
+	};
+	const focusPageUp = (pageSize = DEFAULT_PAGE_SIZE) => {
+		const currentIndex = getKeyIndex(focusedKey());
+		if (currentIndex === -1) focusByIndex(getValidItems().length - 1);
+		else focusByIndex(currentIndex - pageSize);
+	};
+	const isFocused = (key) => {
+		return focusedKey() === key;
+	};
+	const onKeyDown = (e) => {
+		const isVertical = orientation === "vertical" || orientation === "both";
+		const isHorizontal = orientation === "horizontal" || orientation === "both";
+		switch (e.key) {
+			case "ArrowDown":
+				if (isVertical) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowUp":
+				if (isVertical) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "ArrowRight":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusNext();
+				}
+				break;
+			case "ArrowLeft":
+				if (isHorizontal) {
+					e.preventDefault();
+					focusPrevious();
+				}
+				break;
+			case "Home":
+				e.preventDefault();
+				focusFirst();
+				break;
+			case "End":
+				e.preventDefault();
+				focusLast();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				focusPageDown();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				focusPageUp();
+				break;
+		}
+	};
+	const containerProps = {
+		"aria-activedescendant": () => {
+			const key = focusedKey();
+			return key ? `item-${key}` : void 0;
+		},
+		onKeyDown
+	};
+	const getItemProps = (key) => ({ id: `item-${key}` });
+	return {
+		focusedKey,
+		focusedItem,
+		setFocusedKey,
+		focusNext,
+		focusPrevious,
+		focusFirst,
+		focusLast,
+		focusPageDown,
+		focusPageUp,
+		isFocused,
+		containerProps,
+		getItemProps
+	};
+}
+//#endregion
+//#region src/focus/virtualFocus.ts
+/**
+* Virtual-focus event dispatch primitives.
+*
+* A faithful port of @react-aria/focus's `virtualFocus` module. Under virtual
+* focus (e.g. Autocomplete), real DOM focus stays on an input while the
+* "focused" collection option is indicated by `aria-activedescendant`. Moving
+* that virtual cursor dispatches synthetic `focus`/`blur` events (with matching
+* bubbling `focusin`/`focusout`) on the option elements so listeners — notably
+* the autocomplete input's `focusin` handler that mirrors the active descendant
+* — react as if the element were really focused.
+*/
+/**
+* Moves virtual focus to `to`, dispatching a virtual blur on the previously
+* virtually-focused element (if any) and a virtual focus on `to` (if non-null).
+*/
+function moveVirtualFocus(to) {
+	const from = getVirtuallyFocusedElement(getOwnerDocument(to));
+	if (from !== to) {
+		if (from) dispatchVirtualBlur(from, to);
+		if (to) dispatchVirtualFocus(to, from);
+	}
+}
+/** Dispatches synthetic `blur` + bubbling `focusout` events on `from`. */
+function dispatchVirtualBlur(from, to) {
+	from.dispatchEvent(new FocusEvent("blur", { relatedTarget: to }));
+	from.dispatchEvent(new FocusEvent("focusout", {
+		bubbles: true,
+		relatedTarget: to
+	}));
+}
+/** Dispatches synthetic `focus` + bubbling `focusin` events on `to`. */
+function dispatchVirtualFocus(to, from) {
+	to.dispatchEvent(new FocusEvent("focus", { relatedTarget: from }));
+	to.dispatchEvent(new FocusEvent("focusin", {
+		bubbles: true,
+		relatedTarget: from
+	}));
+}
+/**
+* Returns the currently virtually-focused element: the element referenced by the
+* active element's `aria-activedescendant`, or the active element itself.
+*/
+function getVirtuallyFocusedElement(document) {
+	const activeElement = getActiveElement$1(document);
+	const activeDescendant = activeElement?.getAttribute("aria-activedescendant");
+	if (activeDescendant) return document.getElementById(activeDescendant) || activeElement;
+	return activeElement;
+}
+//#endregion
+//#region src/focus/createAutoFocus.ts
+/**
+* Auto-focus management for solidaria
+*
+* Provides priority-based auto-focus with deferred execution
+* and conflict resolution for multiple auto-focus elements.
+*/
+let autoFocusQueue = [];
+let processingTimeout = null;
+/**
+* Process the auto-focus queue and focus the highest priority element.
+*/
+function processAutoFocusQueue() {
+	if (processingTimeout) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
+	}
+	if (autoFocusQueue.length === 0) return;
+	autoFocusQueue.sort((a, b) => b.priority - a.priority);
+	const winner = autoFocusQueue[0];
+	const losers = autoFocusQueue.slice(1);
+	autoFocusQueue = [];
+	for (const loser of losers) loser.onSkip?.();
+	const element = winner.ref();
+	if (!element) {
+		winner.onSkip?.();
+		return;
+	}
+	const activeElement = document.activeElement;
+	if (!(winner.force || !activeElement || activeElement === document.body || activeElement === document.documentElement)) {
+		winner.onSkip?.();
+		return;
+	}
+	if (winner.delay > 0) setTimeout(() => {
+		const el = winner.ref();
+		if (el && document.body.contains(el)) {
+			if (winner.preventScroll) focusSafely(el);
+			else el.focus();
+			winner.onFocus?.(el);
+		}
+	}, winner.delay);
+	else {
+		if (winner.preventScroll) focusSafely(element);
+		else element.focus();
+		winner.onFocus?.(element);
+	}
+}
+/**
+* Queue an element for auto-focus.
+*/
+function queueAutoFocus(item) {
+	autoFocusQueue.push(item);
+	if (processingTimeout === null) processingTimeout = setTimeout(processAutoFocusQueue, 0);
+}
+/**
+* Remove an item from the auto-focus queue.
+*/
+function removeFromQueue(ref) {
+	autoFocusQueue = autoFocusQueue.filter((item) => item.ref !== ref);
+}
+/**
+* Creates auto-focus behavior for an element.
+*
+* This hook registers the element for auto-focus when mounted. If multiple
+* elements request auto-focus, the one with the highest priority wins.
+*
+* @param ref - Accessor for the element to focus
+* @param options - Auto-focus options
+*
+* @example
+* ```tsx
+* function Dialog(props) {
+*   let contentRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => contentRef, {
+*     priority: 10, // High priority for dialogs
+*     onFocus: () => console.log('Dialog focused'),
+*   });
+*
+*   return (
+*     <div ref={contentRef} tabIndex={-1}>
+*       {props.children}
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With delay for animations
+* function AnimatedPanel() {
+*   let panelRef: HTMLDivElement | undefined;
+*
+*   createAutoFocus(() => panelRef, {
+*     delay: 300, // Wait for animation
+*   });
+*
+*   return <div ref={panelRef} class="animated-panel">...</div>;
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Conditional auto-focus
+* function Input(props) {
+*   let inputRef: HTMLInputElement | undefined;
+*
+*   createAutoFocus(() => inputRef, {
+*     isEnabled: props.autoFocus,
+*   });
+*
+*   return <input ref={inputRef} />;
+* }
+* ```
+*/
+function createAutoFocus(ref, options = {}) {
+	const { isEnabled = true, priority = 0, delay = 0, force = false, preventScroll = true, onFocus, onSkip } = options;
+	if (isServer) return {
+		focus: () => {},
+		cancel: () => {}
+	};
+	let canceled = false;
+	onMount(() => {
+		if (!isEnabled || canceled) return;
+		queueAutoFocus({
+			ref,
+			priority,
+			delay,
+			force,
+			preventScroll,
+			onFocus,
+			onSkip
+		});
+	});
+	onCleanup(() => {
+		removeFromQueue(ref);
+	});
+	const focus = () => {
+		if (canceled) return;
+		const element = ref();
+		if (!element) return;
+		if (preventScroll) focusSafely(element);
+		else element.focus();
+		onFocus?.(element);
+	};
+	const cancel = () => {
+		canceled = true;
+		removeFromQueue(ref);
+	};
+	return {
+		focus,
+		cancel
+	};
+}
+/**
+* Clears all pending auto-focus requests.
+* Useful for testing or when navigating away.
+*/
+function clearAutoFocusQueue() {
+	if (processingTimeout) {
+		clearTimeout(processingTimeout);
+		processingTimeout = null;
+	}
+	autoFocusQueue = [];
+}
+/**
+* Gets the current auto-focus queue length.
+* Useful for debugging.
+*/
+function getAutoFocusQueueLength() {
+	return autoFocusQueue.length;
+}
+//#endregion
+export { dispatchVirtualFocus as a, createVirtualFocus as c, getFocusStackLength as d, popFocusStack as f, dispatchVirtualBlur as i, clearFocusStack as l, createAutoFocus as n, getVirtuallyFocusedElement as o, pushFocusStack as p, getAutoFocusQueueLength as r, moveVirtualFocus as s, clearAutoFocusQueue as t, createFocusRestore as u };
+
+//# sourceMappingURL=focus2.js.map