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

package/dist/_chunk/FocusScope.js

@@ -1,12 +1,27 @@
-import { g as isTabbable, i as getActiveElement, o as getFocusableTreeWalker, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.js";
-import { createContext, createEffect, createSignal, onCleanup, onMount, useContext } from "solid-js";
-import { createComponent, getNextElement, isServer, memo, template, use } from "solid-js/web";
+/*
+* 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/focus/FocusScope.tsx
+import { n as useContextOptional, t as onOwnedCleanup } from "./owner.js";
+import { D as runAfterPaint, T as focusWithoutScrolling, a as getOwnerDocument, f as isFocusable, h as isTabbable, i as getFocusableTreeWalker, n as getActiveElement, w as focusSafely } from "./dom.js";
+import { createContext, createEffect, createSignal, onSettled } from "solid-js";
+import { createComponent, getNextElement, isServer, memo, ref, template } from "@solidjs/web";
 //#region src/focus/FocusScope.tsx
 /**
 * FocusScope component for managing focus containment, restoration, and auto-focus.
-* Based on @react-aria/focus FocusScope.
+* Ported from packages/react-aria/src/focus/FocusScope.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<span data-focus-scope-start hidden>`), _tmpl$2 = /*#__PURE__*/ template(`<span data-focus-scope-end hidden>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span data-focus-scope-start hidden>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-focus-scope-end hidden>`);
+const RESTORE_FOCUS_EVENT = "react-aria-focus-scope-restore";
 /**
 * Walks a TreeWalker to its final (deepest-last) node, mirroring the `last`
 * helper in @react-aria/focus.
@@ -102,7 +117,7 @@ const FocusScopeContext = createContext(null);
 * a FocusScope, e.g. in response to user events like keyboard navigation.
 */
 function useFocusManager() {
-	return useContext(FocusScopeContext)?.focusManager;
+	return useContextOptional(FocusScopeContext)?.focusManager;
 }
 /**
 * Gets all focusable elements within a scope.
@@ -128,14 +143,45 @@ function isElementInScope(element, scope) {
 	return scope.some((node) => node.contains(element));
 }
 /**
-* A registry of the live FocusScopes and their parent/child relationships,
-* mirroring @react-aria/focus's `focusScopeTree`. The DOM tree alone can't
-* express scope nesting because a child scope (e.g. a menu opened from inside a
-* modal popover) is rendered in a portal, outside its parent scope's subtree.
-* The tree records that nesting so containment can recognize a portaled
-* descendant scope as "inside".
+* Auto-focus target for a scope. Mirrors @react-aria/focus `getFirstInScope`:
+* prefer a tabbable node, then fall back to the first focusable node (e.g. a
+* `tabIndex={-1}` overlay root) when nothing is tabbable yet.
+*/
+function firstInScope(scope) {
+	return getFocusableElements(scope, true)[0] ?? getFocusableElements(scope, false)[0] ?? null;
+}
+function focusFirstInScope(scope) {
+	const target = firstInScope(scope);
+	if (target) focusSafely(target);
+}
+function restoreFocusToElement(node) {
+	if (node.dispatchEvent(new CustomEvent(RESTORE_FOCUS_EVENT, {
+		bubbles: true,
+		cancelable: true
+	}))) focusWithoutScrolling(node);
+}
+/**
+* Collects the element siblings between FocusScope sentinels. React's
+* FocusScope re-runs this in `useLayoutEffect` on every render; Solid only
+* re-runs the component body once, so callers must re-collect when the DOM
+* between the sentinels changes (portaled overlay children, delayed collections).
 */
-var FocusScopeTree = class {
+function collectScopeElements(start, end) {
+	if (!start || !end) return [];
+	const nodes = [];
+	let node = start.nextSibling;
+	while (node && node !== end) {
+		if (node.nodeType === Node.ELEMENT_NODE) nodes.push(node);
+		node = node.nextSibling;
+	}
+	return nodes;
+}
+function sameElements(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+const focusScopeTree = new class FocusScopeTree {
 	root;
 	fastMap = /* @__PURE__ */ new Map();
 	constructor() {
@@ -149,13 +195,14 @@ var FocusScopeTree = class {
 	getTreeNode(scopeRef) {
 		return this.fastMap.get(scopeRef);
 	}
-	addTreeNode(scopeRef, parent) {
+	addTreeNode(scopeRef, parent, nodeToRestore) {
 		const parentNode = this.fastMap.get(parent) ?? this.root;
 		const node = {
 			scopeRef,
 			parent: parentNode,
 			children: /* @__PURE__ */ new Set()
 		};
+		if (nodeToRestore) node.nodeToRestore = nodeToRestore;
 		parentNode.children.add(node);
 		this.fastMap.set(scopeRef, node);
 	}
@@ -173,12 +220,31 @@ var FocusScopeTree = class {
 		}
 		this.fastMap.delete(scopeRef);
 	}
+	clone() {
+		const newTree = new FocusScopeTree();
+		for (const node of this.traverse()) newTree.addTreeNode(node.scopeRef, node.parent?.scopeRef ?? null, node.nodeToRestore);
+		return newTree;
+	}
 	*traverse(node = this.root) {
 		if (node.scopeRef != null) yield node;
 		for (const child of node.children) yield* this.traverse(child);
 	}
-};
-const focusScopeTree = new FocusScopeTree();
+}();
+/**
+* The scope that currently holds focus. Mirrors @react-aria/focus's
+* module-level `activeScope`: focus moving into a child scope makes the child
+* active, moving out to an ancestor does not.
+*/
+let activeScope = null;
+/** Whether `ancestor` is above `scope` in the focus-scope tree. */
+function isAncestorScope(ancestor, scope) {
+	let parent = focusScopeTree.getTreeNode(scope)?.parent;
+	while (parent) {
+		if (parent.scopeRef === ancestor) return true;
+		parent = parent.parent;
+	}
+	return false;
+}
 /**
 * Whether the element is inside `scope` or any of its descendant scopes.
 *
@@ -188,10 +254,23 @@ const focusScopeTree = new FocusScopeTree();
 * counts as "inside". Mirrors @react-aria/focus's `isElementInChildScope`.
 */
 function isElementInChildScope(element, scope = null) {
-	if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
+	if (element instanceof Element && element.closest("[data-solidaria-top-layer]")) return true;
 	for (const node of focusScopeTree.traverse(focusScopeTree.getTreeNode(scope))) if (node.scopeRef && isElementInScope(element, node.scopeRef())) return true;
 	return false;
 }
+/** Whether the element is inside any registered focus scope. */
+function isElementInAnyScope(element) {
+	return isElementInChildScope(element);
+}
+/**
+* Whether the element is inside the active scope or any of its descendant
+* scopes. `createOverlay` uses it to leave an overlay open when focus moves
+* into a child scope (a menu inside a dialog). Mirrors @react-aria/focus's
+* `isElementInChildOfActiveScope`.
+*/
+function isElementInChildOfActiveScope(element) {
+	return isElementInChildScope(element, activeScope);
+}
 /**
 * A FocusScope manages focus for its descendants. It supports containing focus inside
 * the scope, restoring focus to the previously focused element on unmount, and auto
@@ -200,16 +279,20 @@ function isElementInChildScope(element, scope = null) {
 * to user events.
 */
 const FocusScope = (props) => {
-	if (isServer) return memo(() => props.children);
-	let startRef;
-	let endRef;
-	const [scopeElements, setScopeElements] = createSignal([]);
-	const parentScopeRef = useContext(FocusScopeContext)?.scopeRef ?? null;
+	const [startEl, setStartEl] = createSignal(null, { ownedWrite: true });
+	const [endEl, setEndEl] = createSignal(null, { ownedWrite: true });
+	const [scopeElements, setScopeElements] = createSignal([], { ownedWrite: true });
+	const syncScopeElements = () => {
+		const next = collectScopeElements(startEl(), endEl());
+		if (!sameElements(next, scopeElements())) setScopeElements(next);
+	};
+	const parentScopeRef = useContextOptional(FocusScopeContext)?.scopeRef ?? null;
 	let nodeToRestore = null;
 	const getRestorableElement = (element, doc) => {
 		if (!element || element === doc.body || element === doc.documentElement) return null;
 		return element;
 	};
+	if (props.restoreFocus && !isServer) nodeToRestore = getRestorableElement(getActiveElement(document), document);
 	const focusManager = {
 		focusNext(opts = {}) {
 			const scope = scopeElements();
@@ -220,8 +303,10 @@ const FocusScope = (props) => {
 			const current = from || getActiveElement(doc);
 			if (!current || elements.length === 0) return null;
 			let nextIndex = elements.indexOf(current) + 1;
-			if (nextIndex >= elements.length) if (wrap) nextIndex = 0;
-			else return null;
+			if (nextIndex >= elements.length) {
+				if (wrap) nextIndex = 0;
+				else return null;
+			}
 			const nextElement = elements[nextIndex];
 			if (nextElement) {
 				focusSafely(nextElement);
@@ -238,8 +323,10 @@ const FocusScope = (props) => {
 			const current = from || getActiveElement(doc);
 			if (!current || elements.length === 0) return null;
 			let prevIndex = elements.indexOf(current) - 1;
-			if (prevIndex < 0) if (wrap) prevIndex = elements.length - 1;
-			else return null;
+			if (prevIndex < 0) {
+				if (wrap) prevIndex = elements.length - 1;
+				else return null;
+			}
 			const prevElement = elements[prevIndex];
 			if (prevElement) {
 				focusSafely(prevElement);
@@ -271,42 +358,122 @@ const FocusScope = (props) => {
 			return null;
 		}
 	};
-	onMount(() => {
-		if (!startRef || !endRef) return;
-		const nodes = [];
-		let node = startRef.nextSibling;
-		while (node && node !== endRef) {
-			if (node.nodeType === Node.ELEMENT_NODE) nodes.push(node);
-			node = node.nextSibling;
-		}
-		setScopeElements(nodes);
+	createEffect(() => {
+		return {
+			start: startEl(),
+			end: endEl()
+		};
+	}, ({ start, end }) => {
+		if (!start || !end) return;
+		syncScopeElements();
+		const parent = start.parentNode;
+		if (!parent) return;
+		const observer = new MutationObserver(() => {
+			syncScopeElements();
+		});
+		observer.observe(parent, { childList: true });
+		return () => observer.disconnect();
+	});
+	onSettled(() => {
+		let parentScope = parentScopeRef;
+		if (focusScopeTree.getTreeNode(parentScope) && activeScope && !isAncestorScope(activeScope, parentScope) && focusScopeTree.getTreeNode(activeScope)) parentScope = activeScope;
+		focusScopeTree.addTreeNode(scopeElements, parentScope, nodeToRestore ?? void 0);
 	});
-	onMount(() => {
-		focusScopeTree.addTreeNode(scopeElements, parentScopeRef);
+	let didActivateOnMount = false;
+	createEffect(scopeElements, (scope) => {
+		if (didActivateOnMount || scope.length === 0) return;
+		didActivateOnMount = true;
+		const activeElement = getActiveElement(getOwnerDocument(scope[0]));
+		if (!activeElement || !isElementInScope(activeElement, scope)) return;
+		let bottomMost = null;
+		for (const node of focusScopeTree.traverse()) if (node.scopeRef && isElementInScope(activeElement, node.scopeRef())) bottomMost = node;
+		if (bottomMost && bottomMost === focusScopeTree.getTreeNode(scopeElements)) activeScope = bottomMost.scopeRef;
 	});
-	onCleanup(() => {
+	onOwnedCleanup(() => {
+		const parentScope = focusScopeTree.getTreeNode(scopeElements)?.parent?.scopeRef ?? null;
+		if ((scopeElements === activeScope || isAncestorScope(scopeElements, activeScope)) && (!parentScope || focusScopeTree.getTreeNode(parentScope))) activeScope = parentScope;
 		focusScopeTree.removeTreeNode(scopeElements);
 	});
-	onMount(() => {
+	onSettled(() => {
 		if (!props.restoreFocus) return;
-		const scopeDoc = startRef ? getOwnerDocument(startRef) : document;
+		const persistRestoreTarget = (element) => {
+			if (element) nodeToRestore = element;
+			const treeNode = focusScopeTree.getTreeNode(scopeElements);
+			if (treeNode && nodeToRestore) treeNode.nodeToRestore = nodeToRestore;
+		};
+		if (nodeToRestore && nodeToRestore.isConnected) {
+			persistRestoreTarget(nodeToRestore);
+			return;
+		}
+		const scopeDoc = startEl() ? getOwnerDocument(startEl()) : document;
 		const scopeActive = getActiveElement(scopeDoc);
 		const topActive = getActiveElement(document);
-		if (scopeDoc !== document && document.activeElement instanceof HTMLIFrameElement && document.activeElement.contentDocument === scopeDoc && scopeActive && scopeActive !== scopeDoc.body) {
-			nodeToRestore = getRestorableElement(scopeActive, scopeDoc);
+		const scope = scopeElements();
+		if (scopeDoc !== document && document.activeElement instanceof HTMLIFrameElement && document.activeElement.contentDocument === scopeDoc && scopeActive && scopeActive !== scopeDoc.body && !isElementInScope(scopeActive, scope)) {
+			persistRestoreTarget(getRestorableElement(scopeActive, scopeDoc));
 			return;
 		}
-		nodeToRestore = getRestorableElement(topActive, document);
+		const candidate = getRestorableElement(topActive, document);
+		if (candidate && !isElementInScope(candidate, scope)) persistRestoreTarget(candidate);
 	});
+	let autoFocusStarted = false;
+	let cancelAutoFocus;
 	createEffect(() => {
-		if (!props.autoFocus) return;
+		const autoFocus = !!props.autoFocus;
 		const scope = scopeElements();
-		if (scope.length === 0) return;
-		if (!isElementInScope(getActiveElement(getOwnerDocument(scope[0])), scope)) focusManager.focusFirst();
+		return {
+			autoFocus,
+			ready: scope.length > 0 && !!firstInScope(scope),
+			scope
+		};
+	}, ({ autoFocus, ready, scope }) => {
+		if (!autoFocus || autoFocusStarted || !ready) return;
+		autoFocusStarted = true;
+		const doc = getOwnerDocument(scope[0]);
+		cancelAutoFocus = runAfterPaint(() => {
+			cancelAutoFocus = void 0;
+			const currentScope = scopeElements();
+			if (currentScope.length === 0) return;
+			activeScope = scopeElements;
+			if (!isElementInScope(getActiveElement(doc), currentScope)) focusFirstInScope(currentScope);
+		}, doc);
+	});
+	onOwnedCleanup(() => {
+		cancelAutoFocus?.();
 	});
 	createEffect(() => {
-		if (!props.contain) return;
-		const scope = scopeElements();
+		return {
+			contain: !!props.contain,
+			restore: !!props.restoreFocus,
+			scope: scopeElements()
+		};
+	}, ({ contain, restore, scope }) => {
+		if (contain || scope.length === 0) return;
+		const doc = getOwnerDocument(scope[0]);
+		const onFocus = (e) => {
+			const target = e.target;
+			if (restore) {
+				if ((!activeScope || isAncestorScope(activeScope, scopeElements)) && isElementInScope(getActiveElement(doc), scopeElements())) activeScope = scopeElements;
+				return;
+			}
+			if (isElementInScope(target, scopeElements())) activeScope = scopeElements;
+			else if (!isElementInAnyScope(target)) activeScope = null;
+		};
+		const onFocusListener = onFocus;
+		doc.addEventListener("focusin", onFocus, false);
+		for (const element of scope) element.addEventListener("focusin", onFocusListener, false);
+		return () => {
+			doc.removeEventListener("focusin", onFocus, false);
+			for (const element of scope) element.removeEventListener("focusin", onFocusListener, false);
+		};
+	});
+	createEffect(() => {
+		return {
+			contain: !!props.contain,
+			scope: scopeElements()
+		};
+	}, ({ contain, scope }) => {
+		if (!contain) return;
 		if (scope.length === 0) return;
 		const doc = getOwnerDocument(scope[0]);
 		let focusedNode = null;
@@ -330,8 +497,11 @@ const FocusScope = (props) => {
 		const onFocusIn = (e) => {
 			const scope = scopeElements();
 			const target = e.target;
-			if (isElementInScope(target, scope)) focusedNode = target;
-			else if (isElementInChildScope(target, scopeElements)) focusedNode = target;
+			if (isElementInScope(target, scope)) {
+				if (!activeScope || isAncestorScope(activeScope, scopeElements)) activeScope = scopeElements;
+				focusedNode = target;
+			} else if (isElementInChildScope(target, scopeElements)) focusedNode = target;
+			else if (target === doc.body || target === doc.documentElement) return;
 			else if (focusedNode) focusSafely(focusedNode);
 			else focusManager.focusFirst();
 		};
@@ -355,22 +525,63 @@ const FocusScope = (props) => {
 		doc.addEventListener("keydown", onKeyDown, true);
 		doc.addEventListener("focusin", onFocusIn, true);
 		doc.addEventListener("focusout", onFocusOut, true);
-		onCleanup(() => {
+		return () => {
 			doc.removeEventListener("keydown", onKeyDown, true);
 			doc.removeEventListener("focusin", onFocusIn, true);
 			doc.removeEventListener("focusout", onFocusOut, true);
 			if (restoreRaf != null) (doc.defaultView ?? window).cancelAnimationFrame(restoreRaf);
-		});
+		};
 	});
-	onCleanup(() => {
-		if (props.restoreFocus && nodeToRestore && nodeToRestore.focus) {
-			const doc = getOwnerDocument(nodeToRestore);
-			(doc.defaultView ?? window).requestAnimationFrame(() => {
-				if (nodeToRestore && doc.body.contains(nodeToRestore)) nodeToRestore.focus();
-			});
-		}
+	onOwnedCleanup(() => {
+		if (!props.restoreFocus) return;
+		const saved = focusScopeTree.getTreeNode(scopeElements)?.nodeToRestore ?? nodeToRestore;
+		if (!saved) return;
+		const scope = scopeElements();
+		const scopeDoc = getOwnerDocument(scope[0] ?? startEl() ?? saved);
+		const clonedTree = focusScopeTree.clone();
+		const win = scopeDoc.defaultView ?? window;
+		const restoreToParentScope = () => {
+			if (parentScopeRef) {
+				const first = firstInScope(parentScopeRef());
+				if (first) {
+					restoreFocusToElement(first);
+					return true;
+				}
+			}
+			let node = clonedTree.getTreeNode(scopeElements)?.parent ?? null;
+			while (node) {
+				if (node.scopeRef && focusScopeTree.getTreeNode(node.scopeRef)) {
+					const first = firstInScope(node.scopeRef());
+					if (first) {
+						restoreFocusToElement(first);
+						return true;
+					}
+				}
+				node = node.parent;
+			}
+			return false;
+		};
+		const tryRestore = () => {
+			const active = scopeDoc.activeElement;
+			if (active && active !== scopeDoc.body && active !== scopeDoc.documentElement && active.isConnected) return;
+			if (saved && saved.isConnected) {
+				restoreFocusToElement(saved);
+				return;
+			}
+			let node = clonedTree.getTreeNode(scopeElements);
+			while (node) {
+				if (node.nodeToRestore && node.nodeToRestore.isConnected && node.scopeRef !== scopeElements) {
+					restoreFocusToElement(node.nodeToRestore);
+					return;
+				}
+				node = node.parent;
+			}
+			restoreToParentScope();
+		};
+		tryRestore();
+		win.requestAnimationFrame(tryRestore);
 	});
-	return createComponent(FocusScopeContext.Provider, {
+	return createComponent(FocusScopeContext, {
 		value: {
 			focusManager,
 			scopeRef: scopeElements
@@ -379,15 +590,19 @@ const FocusScope = (props) => {
 			return [
 				(() => {
 					var _el$ = getNextElement(_tmpl$);
-					var _ref$ = startRef;
-					typeof _ref$ === "function" ? use(_ref$, _el$) : startRef = _el$;
+					ref(() => {
+						return (el) => setStartEl(el ?? null);
+					}, _el$);
 					return _el$;
 				})(),
-				memo(() => props.children),
+				memo(() => {
+					return props.children;
+				}),
 				(() => {
 					var _el$2 = getNextElement(_tmpl$2);
-					var _ref$2 = endRef;
-					typeof _ref$2 === "function" ? use(_ref$2, _el$2) : endRef = _el$2;
+					ref(() => {
+						return (el) => setEndEl(el ?? null);
+					}, _el$2);
 					return _el$2;
 				})()
 			];
@@ -395,6 +610,6 @@ const FocusScope = (props) => {
 	});
 };
 //#endregion
-export { createFocusManager as n, useFocusManager as r, FocusScope as t };
+export { useFocusManager as i, createFocusManager as n, isElementInChildOfActiveScope as r, FocusScope as t };
 
 //# sourceMappingURL=FocusScope.js.map