@react-aria/focus
Version:
Spectrum UI components in React
937 lines (910 loc) • 51.4 kB
JavaScript
import {useLayoutEffect as $6nfFC$useLayoutEffect, getOwnerDocument as $6nfFC$getOwnerDocument, runAfterTransition as $6nfFC$runAfterTransition, focusWithoutScrolling as $6nfFC$focusWithoutScrolling, getOwnerWindow as $6nfFC$getOwnerWindow, mergeProps as $6nfFC$mergeProps, useSyncRef as $6nfFC$useSyncRef, useObjectRef as $6nfFC$useObjectRef} from "@react-aria/utils";
import $6nfFC$react, {useRef as $6nfFC$useRef, useContext as $6nfFC$useContext, useMemo as $6nfFC$useMemo, useEffect as $6nfFC$useEffect, useState as $6nfFC$useState, useCallback as $6nfFC$useCallback} from "react";
import {getInteractionModality as $6nfFC$getInteractionModality, isFocusVisible as $6nfFC$isFocusVisible, useFocusVisibleListener as $6nfFC$useFocusVisibleListener, useFocus as $6nfFC$useFocus, useFocusWithin as $6nfFC$useFocusWithin, useKeyboard as $6nfFC$useKeyboard} from "@react-aria/interactions";
import $6nfFC$clsx from "clsx";
/*
* 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.
*/ /*
* 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.
*/ /*
* 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.
*/
function $6a99195332edec8b$export$80f3e147d781571c(element) {
// If the user is interacting with a virtual cursor, e.g. screen reader, then
// wait until after any animated transitions that are currently occurring on
// the page before shifting focus. This avoids issues with VoiceOver on iOS
// causing the page to scroll when moving focus if the element is transitioning
// from off the screen.
const ownerDocument = (0, $6nfFC$getOwnerDocument)(element);
if ((0, $6nfFC$getInteractionModality)() === "virtual") {
let lastFocusedElement = ownerDocument.activeElement;
(0, $6nfFC$runAfterTransition)(()=>{
// If focus did not move and the element is still in the document, focus it.
if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $6nfFC$focusWithoutScrolling)(element);
});
} else (0, $6nfFC$focusWithoutScrolling)(element);
}
/*
* Copyright 2021 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.
*/
function $645f2e67b85a24c9$var$isStyleVisible(element) {
const windowObject = (0, $6nfFC$getOwnerWindow)(element);
if (!(element instanceof windowObject.HTMLElement) && !(element instanceof windowObject.SVGElement)) return false;
let { display: display, visibility: visibility } = element.style;
let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
if (isVisible) {
const { getComputedStyle: getComputedStyle } = element.ownerDocument.defaultView;
let { display: computedDisplay, visibility: computedVisibility } = getComputedStyle(element);
isVisible = computedDisplay !== "none" && computedVisibility !== "hidden" && computedVisibility !== "collapse";
}
return isVisible;
}
function $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) {
return !element.hasAttribute("hidden") && (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY" ? element.hasAttribute("open") : true);
}
function $645f2e67b85a24c9$export$e989c0fffaa6b27a(element, childElement) {
return element.nodeName !== "#comment" && $645f2e67b85a24c9$var$isStyleVisible(element) && $645f2e67b85a24c9$var$isAttributeVisible(element, childElement) && (!element.parentElement || $645f2e67b85a24c9$export$e989c0fffaa6b27a(element.parentElement, element));
}
const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $6nfFC$react).createContext(null);
let $9bf71ea28793e738$var$activeScope = null;
function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
let { children: children, contain: contain, restoreFocus: restoreFocus, autoFocus: autoFocus } = props;
let startRef = (0, $6nfFC$useRef)(null);
let endRef = (0, $6nfFC$useRef)(null);
let scopeRef = (0, $6nfFC$useRef)([]);
let { parentNode: parentNode } = (0, $6nfFC$useContext)($9bf71ea28793e738$var$FocusContext) || {};
// Create a tree node here so we can add children to it even before it is added to the tree.
let node = (0, $6nfFC$useMemo)(()=>new $9bf71ea28793e738$var$TreeNode({
scopeRef: scopeRef
}), [
scopeRef
]);
(0, $6nfFC$useLayoutEffect)(()=>{
// If a new scope mounts outside the active scope, (e.g. DialogContainer launched from a menu),
// use the active scope as the parent instead of the parent from context. Layout effects run bottom
// up, so if the parent is not yet added to the tree, don't do this. Only the outer-most FocusScope
// that is being added should get the activeScope as its parent.
let parent = parentNode || $9bf71ea28793e738$export$d06fae2ee68b101e.root;
if ($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parent.scopeRef) && $9bf71ea28793e738$var$activeScope && !$9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, parent.scopeRef)) {
let activeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
if (activeNode) parent = activeNode;
}
// Add the node to the parent, and to the tree.
parent.addChild(node);
$9bf71ea28793e738$export$d06fae2ee68b101e.addNode(node);
}, [
node,
parentNode
]);
(0, $6nfFC$useLayoutEffect)(()=>{
let node = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
if (node) node.contain = !!contain;
}, [
contain
]);
(0, $6nfFC$useLayoutEffect)(()=>{
var _startRef_current;
// Find all rendered nodes between the sentinels and add them to the scope.
let node = (_startRef_current = startRef.current) === null || _startRef_current === void 0 ? void 0 : _startRef_current.nextSibling;
let nodes = [];
while(node && node !== endRef.current){
nodes.push(node);
node = node.nextSibling;
}
scopeRef.current = nodes;
}, [
children
]);
$9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restoreFocus, contain);
$9bf71ea28793e738$var$useFocusContainment(scopeRef, contain);
$9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain);
$9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus);
// This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
// It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
(0, $6nfFC$useEffect)(()=>{
const activeElement = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
let scope = null;
if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
// We need to traverse the focusScope tree and find the bottom most scope that
// contains the active element and set that as the activeScope.
for (let node of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse())if (node.scopeRef && $9bf71ea28793e738$var$isElementInScope(activeElement, node.scopeRef.current)) scope = node;
if (scope === $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $9bf71ea28793e738$var$activeScope = scope.scopeRef;
}
}, [
scopeRef
]);
// This layout effect cleanup is so that the tree node is removed synchronously with react before the RAF
// in useRestoreFocus cleanup runs.
(0, $6nfFC$useLayoutEffect)(()=>{
return ()=>{
var _focusScopeTree_getTreeNode_parent, _focusScopeTree_getTreeNode;
var _focusScopeTree_getTreeNode_parent_scopeRef;
// Scope may have been re-parented.
let parentScope = (_focusScopeTree_getTreeNode_parent_scopeRef = (_focusScopeTree_getTreeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : (_focusScopeTree_getTreeNode_parent = _focusScopeTree_getTreeNode.parent) === null || _focusScopeTree_getTreeNode_parent === void 0 ? void 0 : _focusScopeTree_getTreeNode_parent.scopeRef) !== null && _focusScopeTree_getTreeNode_parent_scopeRef !== void 0 ? _focusScopeTree_getTreeNode_parent_scopeRef : null;
if ((scopeRef === $9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope(scopeRef, $9bf71ea28793e738$var$activeScope)) && (!parentScope || $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(parentScope))) $9bf71ea28793e738$var$activeScope = parentScope;
$9bf71ea28793e738$export$d06fae2ee68b101e.removeTreeNode(scopeRef);
};
}, [
scopeRef
]);
let focusManager = (0, $6nfFC$useMemo)(()=>$9bf71ea28793e738$var$createFocusManagerForScope(scopeRef), []);
let value = (0, $6nfFC$useMemo)(()=>({
focusManager: focusManager,
parentNode: node
}), [
node,
focusManager
]);
return /*#__PURE__*/ (0, $6nfFC$react).createElement($9bf71ea28793e738$var$FocusContext.Provider, {
value: value
}, /*#__PURE__*/ (0, $6nfFC$react).createElement("span", {
"data-focus-scope-start": true,
hidden: true,
ref: startRef
}), children, /*#__PURE__*/ (0, $6nfFC$react).createElement("span", {
"data-focus-scope-end": true,
hidden: true,
ref: endRef
}));
}
function $9bf71ea28793e738$export$10c5169755ce7bd7() {
var _useContext;
return (_useContext = (0, $6nfFC$useContext)($9bf71ea28793e738$var$FocusContext)) === null || _useContext === void 0 ? void 0 : _useContext.focusManager;
}
function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
return {
focusNext (opts = {}) {
let scope = scopeRef.current;
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
let node = from || (0, $6nfFC$getOwnerDocument)(scope[0]).activeElement;
let sentinel = scope[0].previousElementSibling;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: tabbable,
accept: accept
}, scope);
walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
let nextNode = walker.nextNode();
if (!nextNode && wrap) {
walker.currentNode = sentinel;
nextNode = walker.nextNode();
}
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
return nextNode;
},
focusPrevious (opts = {}) {
let scope = scopeRef.current;
let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
let node = from || (0, $6nfFC$getOwnerDocument)(scope[0]).activeElement;
let sentinel = scope[scope.length - 1].nextElementSibling;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: tabbable,
accept: accept
}, scope);
walker.currentNode = $9bf71ea28793e738$var$isElementInScope(node, scope) ? node : sentinel;
let previousNode = walker.previousNode();
if (!previousNode && wrap) {
walker.currentNode = sentinel;
previousNode = walker.previousNode();
}
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
return previousNode;
},
focusFirst (opts = {}) {
let scope = scopeRef.current;
let { tabbable: tabbable, accept: accept } = opts;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: tabbable,
accept: accept
}, scope);
walker.currentNode = scope[0].previousElementSibling;
let nextNode = walker.nextNode();
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
return nextNode;
},
focusLast (opts = {}) {
let scope = scopeRef.current;
let { tabbable: tabbable, accept: accept } = opts;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: tabbable,
accept: accept
}, scope);
walker.currentNode = scope[scope.length - 1].nextElementSibling;
let previousNode = walker.previousNode();
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
return previousNode;
}
};
}
const $9bf71ea28793e738$var$focusableElements = [
"input:not([disabled]):not([type=hidden])",
"select:not([disabled])",
"textarea:not([disabled])",
"button:not([disabled])",
"a[href]",
"area[href]",
"summary",
"iframe",
"object",
"embed",
"audio[controls]",
"video[controls]",
"[contenteditable]"
];
const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
$9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
function $9bf71ea28793e738$var$getScopeRoot(scope) {
return scope[0].parentElement;
}
function $9bf71ea28793e738$var$shouldContainFocus(scopeRef) {
let scope = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
while(scope && scope.scopeRef !== scopeRef){
if (scope.contain) return false;
scope = scope.parent;
}
return true;
}
function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
let focusedNode = (0, $6nfFC$useRef)();
let raf = (0, $6nfFC$useRef)();
(0, $6nfFC$useLayoutEffect)(()=>{
let scope = scopeRef.current;
if (!contain) {
// if contain was changed, then we should cancel any ongoing waits to pull focus back into containment
if (raf.current) {
cancelAnimationFrame(raf.current);
raf.current = undefined;
}
return;
}
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scope ? scope[0] : undefined);
// Handle the Tab key to contain focus within the scope
let onKeyDown = (e)=>{
if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef)) return;
let focusedElement = ownerDocument.activeElement;
let scope = scopeRef.current;
if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: true
}, scope);
if (!focusedElement) return;
walker.currentNode = focusedElement;
let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
if (!nextElement) {
walker.currentNode = e.shiftKey ? scope[scope.length - 1].nextElementSibling : scope[0].previousElementSibling;
nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
}
e.preventDefault();
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
};
let onFocus = (e)=>{
// If focusing an element in a child scope of the currently active scope, the child becomes active.
// Moving out of the active scope to an ancestor is not allowed.
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(e.target, scopeRef.current)) {
$9bf71ea28793e738$var$activeScope = scopeRef;
focusedNode.current = e.target;
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(e.target, scopeRef)) {
// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
// restore focus to the previously focused node or the first tabbable element in the active scope.
if (focusedNode.current) focusedNode.current.focus();
else if ($9bf71ea28793e738$var$activeScope && $9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
} else if ($9bf71ea28793e738$var$shouldContainFocus(scopeRef)) focusedNode.current = e.target;
};
let onBlur = (e)=>{
// Firefox doesn't shift focus back to the Dialog properly without this
if (raf.current) cancelAnimationFrame(raf.current);
raf.current = requestAnimationFrame(()=>{
// Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
if (ownerDocument.activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
$9bf71ea28793e738$var$activeScope = scopeRef;
if (ownerDocument.body.contains(e.target)) {
var _focusedNode_current;
focusedNode.current = e.target;
(_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
} else if ($9bf71ea28793e738$var$activeScope.current) $9bf71ea28793e738$var$focusFirstInScope($9bf71ea28793e738$var$activeScope.current);
}
});
};
ownerDocument.addEventListener("keydown", onKeyDown, false);
ownerDocument.addEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusout", onBlur, false));
return ()=>{
ownerDocument.removeEventListener("keydown", onKeyDown, false);
ownerDocument.removeEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusout", onBlur, false));
};
}, [
scopeRef,
contain
]);
// This is a useLayoutEffect so it is guaranteed to run before our async synthetic blur
// eslint-disable-next-line arrow-body-style
(0, $6nfFC$useLayoutEffect)(()=>{
return ()=>{
if (raf.current) cancelAnimationFrame(raf.current);
};
}, [
raf
]);
}
function $9bf71ea28793e738$var$isElementInAnyScope(element) {
return $9bf71ea28793e738$var$isElementInChildScope(element);
}
function $9bf71ea28793e738$var$isElementInScope(element, scope) {
if (!element) return false;
if (!scope) return false;
return scope.some((node)=>node.contains(element));
}
function $9bf71ea28793e738$var$isElementInChildScope(element, scope = null) {
// If the element is within a top layer element (e.g. toasts), always allow moving focus there.
if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
// node.contains in isElementInScope covers child scopes that are also DOM children,
// but does not cover child scopes in portals.
for (let { scopeRef: s } of $9bf71ea28793e738$export$d06fae2ee68b101e.traverse($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope))){
if (s && $9bf71ea28793e738$var$isElementInScope(element, s.current)) return true;
}
return false;
}
function $9bf71ea28793e738$export$1258395f99bf9cbf(element) {
return $9bf71ea28793e738$var$isElementInChildScope(element, $9bf71ea28793e738$var$activeScope);
}
function $9bf71ea28793e738$var$isAncestorScope(ancestor, scope) {
var _focusScopeTree_getTreeNode;
let parent = (_focusScopeTree_getTreeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : _focusScopeTree_getTreeNode.parent;
while(parent){
if (parent.scopeRef === ancestor) return true;
parent = parent.parent;
}
return false;
}
function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
if (element != null && !scroll) try {
(0, $6a99195332edec8b$export$80f3e147d781571c)(element);
} catch (err) {
// ignore
}
else if (element != null) try {
element.focus();
} catch (err) {
// ignore
}
}
function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
let sentinel = scope[0].previousElementSibling;
let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: tabbable
}, scope);
walker.currentNode = sentinel;
let nextNode = walker.nextNode();
// If the scope does not contain a tabbable element, use the first focusable element.
if (tabbable && !nextNode) {
scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
tabbable: false
}, scope);
walker.currentNode = sentinel;
nextNode = walker.nextNode();
}
$9bf71ea28793e738$var$focusElement(nextNode);
}
function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
const autoFocusRef = (0, $6nfFC$react).useRef(autoFocus);
(0, $6nfFC$useEffect)(()=>{
if (autoFocusRef.current) {
$9bf71ea28793e738$var$activeScope = scopeRef;
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
if (!$9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
}
autoFocusRef.current = false;
}, [
scopeRef
]);
}
function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain) {
// tracks the active scope, in case restore and contain are both false.
// if either are true, this is tracked in useRestoreFocus or useFocusContainment.
(0, $6nfFC$useLayoutEffect)(()=>{
if (restore || contain) return;
let scope = scopeRef.current;
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scope ? scope[0] : undefined);
let onFocus = (e)=>{
let target = e.target;
if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
};
ownerDocument.addEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
return ()=>{
ownerDocument.removeEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
};
}, [
scopeRef,
restore,
contain
]);
}
function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
let scope = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode($9bf71ea28793e738$var$activeScope);
while(scope && scope.scopeRef !== scopeRef){
if (scope.nodeToRestore) return false;
scope = scope.parent;
}
return (scope === null || scope === void 0 ? void 0 : scope.scopeRef) === scopeRef;
}
function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
// create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
// eslint-disable-next-line no-restricted-globals
const nodeToRestoreRef = (0, $6nfFC$useRef)(typeof document !== "undefined" ? (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement : null);
// restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
// restoring-non-containing scopes should only care if they become active so they can perform the restore
(0, $6nfFC$useLayoutEffect)(()=>{
let scope = scopeRef.current;
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scope ? scope[0] : undefined);
if (!restoreFocus || contain) return;
let onFocus = ()=>{
// If focusing an element in a child scope of the currently active scope, the child becomes active.
// Moving out of the active scope to an ancestor is not allowed.
if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
};
ownerDocument.addEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
return ()=>{
ownerDocument.removeEventListener("focusin", onFocus, false);
scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
scopeRef,
contain
]);
(0, $6nfFC$useLayoutEffect)(()=>{
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
if (!restoreFocus) return;
// Handle the Tab key so that tabbing out of the scope goes to the next element
// after the node that had focus when the scope mounted. This is important when
// using portals for overlays, so that focus goes to the expected element when
// tabbing out of the overlay.
let onKeyDown = (e)=>{
if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef)) return;
let focusedElement = ownerDocument.activeElement;
if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
if (!treeNode) return;
let nodeToRestore = treeNode.nodeToRestore;
// Create a DOM tree walker that matches all tabbable elements
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(ownerDocument.body, {
tabbable: true
});
// Find the next tabbable element after the currently focused element
walker.currentNode = focusedElement;
let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
if (!nodeToRestore || !ownerDocument.body.contains(nodeToRestore) || nodeToRestore === ownerDocument.body) {
nodeToRestore = undefined;
treeNode.nodeToRestore = undefined;
}
// If there is no next element, or it is outside the current scope, move focus to the
// next element after the node to restore to instead.
if ((!nextElement || !$9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current)) && nodeToRestore) {
walker.currentNode = nodeToRestore;
// Skip over elements within the scope, in case the scope immediately follows the node to restore.
do nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
while ($9bf71ea28793e738$var$isElementInScope(nextElement, scopeRef.current));
e.preventDefault();
e.stopPropagation();
if (nextElement) $9bf71ea28793e738$var$focusElement(nextElement, true);
else // If there is no next element and the nodeToRestore isn't within a FocusScope (i.e. we are leaving the top level focus scope)
// then move focus to the body.
// Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
if (!$9bf71ea28793e738$var$isElementInAnyScope(nodeToRestore)) focusedElement.blur();
else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
}
};
if (!contain) ownerDocument.addEventListener("keydown", onKeyDown, true);
return ()=>{
if (!contain) ownerDocument.removeEventListener("keydown", onKeyDown, true);
};
}, [
scopeRef,
restoreFocus,
contain
]);
// useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
(0, $6nfFC$useLayoutEffect)(()=>{
const ownerDocument = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
if (!restoreFocus) return;
let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
if (!treeNode) return;
var _nodeToRestoreRef_current;
treeNode.nodeToRestore = (_nodeToRestoreRef_current = nodeToRestoreRef.current) !== null && _nodeToRestoreRef_current !== void 0 ? _nodeToRestoreRef_current : undefined;
return ()=>{
let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
if (!treeNode) return;
let nodeToRestore = treeNode.nodeToRestore;
// if we already lost focus to the body and this was the active scope, then we should attempt to restore
if (restoreFocus && nodeToRestore && // eslint-disable-next-line react-hooks/exhaustive-deps
($9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, scopeRef.current) || ownerDocument.activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
// freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
let clonedTree = $9bf71ea28793e738$export$d06fae2ee68b101e.clone();
requestAnimationFrame(()=>{
// Only restore focus if we've lost focus to the body, the alternative is that focus has been purposefully moved elsewhere
if (ownerDocument.activeElement === ownerDocument.body) {
// look up the tree starting with our scope to find a nodeToRestore still in the DOM
let treeNode = clonedTree.getTreeNode(scopeRef);
while(treeNode){
if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
$9bf71ea28793e738$var$focusElement(treeNode.nodeToRestore);
return;
}
treeNode = treeNode.parent;
}
// If no nodeToRestore was found, focus the first element in the nearest
// ancestor scope that is still in the tree.
treeNode = clonedTree.getTreeNode(scopeRef);
while(treeNode){
if (treeNode.scopeRef && treeNode.scopeRef.current && $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
$9bf71ea28793e738$var$focusFirstInScope(treeNode.scopeRef.current, true);
return;
}
treeNode = treeNode.parent;
}
}
});
}
};
}, [
scopeRef,
restoreFocus
]);
}
function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR : $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR;
let walker = (0, $6nfFC$getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
acceptNode (node) {
var _opts_from;
// Skip nodes inside the starting node.
if (opts === null || opts === void 0 ? void 0 : (_opts_from = opts.from) === null || _opts_from === void 0 ? void 0 : _opts_from.contains(node)) return NodeFilter.FILTER_REJECT;
if (node.matches(selector) && (0, $645f2e67b85a24c9$export$e989c0fffaa6b27a)(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
return NodeFilter.FILTER_SKIP;
}
});
if (opts === null || opts === void 0 ? void 0 : opts.from) walker.currentNode = opts.from;
return walker;
}
function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
return {
focusNext (opts = {}) {
let root = ref.current;
if (!root) return null;
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
let node = from || (0, $6nfFC$getOwnerDocument)(root).activeElement;
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
tabbable: tabbable,
accept: accept
});
if (root.contains(node)) walker.currentNode = node;
let nextNode = walker.nextNode();
if (!nextNode && wrap) {
walker.currentNode = root;
nextNode = walker.nextNode();
}
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
return nextNode;
},
focusPrevious (opts = defaultOptions) {
let root = ref.current;
if (!root) return null;
let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
let node = from || (0, $6nfFC$getOwnerDocument)(root).activeElement;
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
tabbable: tabbable,
accept: accept
});
if (root.contains(node)) walker.currentNode = node;
else {
let next = $9bf71ea28793e738$var$last(walker);
if (next) $9bf71ea28793e738$var$focusElement(next, true);
return next !== null && next !== void 0 ? next : null;
}
let previousNode = walker.previousNode();
if (!previousNode && wrap) {
walker.currentNode = root;
let lastNode = $9bf71ea28793e738$var$last(walker);
if (!lastNode) // couldn't wrap
return null;
previousNode = lastNode;
}
if (previousNode) $9bf71ea28793e738$var$focusElement(previousNode, true);
return previousNode !== null && previousNode !== void 0 ? previousNode : null;
},
focusFirst (opts = defaultOptions) {
let root = ref.current;
if (!root) return null;
let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
tabbable: tabbable,
accept: accept
});
let nextNode = walker.nextNode();
if (nextNode) $9bf71ea28793e738$var$focusElement(nextNode, true);
return nextNode;
},
focusLast (opts = defaultOptions) {
let root = ref.current;
if (!root) return null;
let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
tabbable: tabbable,
accept: accept
});
let next = $9bf71ea28793e738$var$last(walker);
if (next) $9bf71ea28793e738$var$focusElement(next, true);
return next !== null && next !== void 0 ? next : null;
}
};
}
function $9bf71ea28793e738$var$last(walker) {
let next = undefined;
let last;
do {
last = walker.lastChild();
if (last) next = last;
}while (last);
return next;
}
class $9bf71ea28793e738$var$Tree {
get size() {
return this.fastMap.size;
}
getTreeNode(data) {
return this.fastMap.get(data);
}
addTreeNode(scopeRef, parent, nodeToRestore) {
let parentNode = this.fastMap.get(parent !== null && parent !== void 0 ? parent : null);
if (!parentNode) return;
let node = new $9bf71ea28793e738$var$TreeNode({
scopeRef: scopeRef
});
parentNode.addChild(node);
node.parent = parentNode;
this.fastMap.set(scopeRef, node);
if (nodeToRestore) node.nodeToRestore = nodeToRestore;
}
addNode(node) {
this.fastMap.set(node.scopeRef, node);
}
removeTreeNode(scopeRef) {
// never remove the root
if (scopeRef === null) return;
let node = this.fastMap.get(scopeRef);
if (!node) return;
let parentNode = node.parent;
// when we remove a scope, check if any sibling scopes are trying to restore focus to something inside the scope we're removing
// if we are, then replace the siblings restore with the restore from the scope we're removing
for (let current of this.traverse())if (current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef && node.scopeRef.current && $9bf71ea28793e738$var$isElementInScope(current.nodeToRestore, node.scopeRef.current)) current.nodeToRestore = node.nodeToRestore;
let children = node.children;
if (parentNode) {
parentNode.removeChild(node);
if (children.size > 0) children.forEach((child)=>parentNode && parentNode.addChild(child));
}
this.fastMap.delete(node.scopeRef);
}
// Pre Order Depth First
*traverse(node = this.root) {
if (node.scopeRef != null) yield node;
if (node.children.size > 0) for (let child of node.children)yield* this.traverse(child);
}
clone() {
var _node_parent;
let newTree = new $9bf71ea28793e738$var$Tree();
var _node_parent_scopeRef;
for (let node of this.traverse())newTree.addTreeNode(node.scopeRef, (_node_parent_scopeRef = (_node_parent = node.parent) === null || _node_parent === void 0 ? void 0 : _node_parent.scopeRef) !== null && _node_parent_scopeRef !== void 0 ? _node_parent_scopeRef : null, node.nodeToRestore);
return newTree;
}
constructor(){
this.fastMap = new Map();
this.root = new $9bf71ea28793e738$var$TreeNode({
scopeRef: null
});
this.fastMap.set(null, this.root);
}
}
class $9bf71ea28793e738$var$TreeNode {
addChild(node) {
this.children.add(node);
node.parent = this;
}
removeChild(node) {
this.children.delete(node);
node.parent = undefined;
}
constructor(props){
this.children = new Set();
this.contain = false;
this.scopeRef = props.scopeRef;
}
}
let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree();
/*
* 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.
*/
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
let { autoFocus: autoFocus = false, isTextInput: isTextInput, within: within } = props;
let state = (0, $6nfFC$useRef)({
isFocused: false,
isFocusVisible: autoFocus || (0, $6nfFC$isFocusVisible)()
});
let [isFocused, setFocused] = (0, $6nfFC$useState)(false);
let [isFocusVisibleState, setFocusVisible] = (0, $6nfFC$useState)(()=>state.current.isFocused && state.current.isFocusVisible);
let updateState = (0, $6nfFC$useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
let onFocusChange = (0, $6nfFC$useCallback)((isFocused)=>{
state.current.isFocused = isFocused;
setFocused(isFocused);
updateState();
}, [
updateState
]);
(0, $6nfFC$useFocusVisibleListener)((isFocusVisible)=>{
state.current.isFocusVisible = isFocusVisible;
updateState();
}, [], {
isTextInput: isTextInput
});
let { focusProps: focusProps } = (0, $6nfFC$useFocus)({
isDisabled: within,
onFocusChange: onFocusChange
});
let { focusWithinProps: focusWithinProps } = (0, $6nfFC$useFocusWithin)({
isDisabled: !within,
onFocusWithinChange: onFocusChange
});
return {
isFocused: isFocused,
isFocusVisible: isFocusVisibleState,
focusProps: within ? focusWithinProps : focusProps
};
}
function $907718708eab68af$export$1a38b4ad7f578e1d(props) {
let { children: children, focusClass: focusClass, focusRingClass: focusRingClass } = props;
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $f7dceffc5ad7768b$export$4e328f61c538687f)(props);
let child = (0, $6nfFC$react).Children.only(children);
return /*#__PURE__*/ (0, $6nfFC$react).cloneElement(child, (0, $6nfFC$mergeProps)(child.props, {
...focusProps,
className: (0, $6nfFC$clsx)({
[focusClass || ""]: isFocused,
[focusRingClass || ""]: isFocusVisible
})
}));
}
/*
* 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.
*/
let $e6afbd83fe6ebbd2$var$FocusableContext = /*#__PURE__*/ (0, $6nfFC$react).createContext(null);
function $e6afbd83fe6ebbd2$var$useFocusableContext(ref) {
let context = (0, $6nfFC$useContext)($e6afbd83fe6ebbd2$var$FocusableContext) || {};
(0, $6nfFC$useSyncRef)(context, ref);
// eslint-disable-next-line
let { ref: _, ...otherProps } = context;
return otherProps;
}
/**
* Provides DOM props to the nearest focusable child.
*/ function $e6afbd83fe6ebbd2$var$FocusableProvider(props, ref) {
let { children: children, ...otherProps } = props;
let objRef = (0, $6nfFC$useObjectRef)(ref);
let context = {
...otherProps,
ref: objRef
};
return /*#__PURE__*/ (0, $6nfFC$react).createElement($e6afbd83fe6ebbd2$var$FocusableContext.Provider, {
value: context
}, children);
}
let $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, $6nfFC$react).forwardRef($e6afbd83fe6ebbd2$var$FocusableProvider);
function $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, domRef) {
let { focusProps: focusProps } = (0, $6nfFC$useFocus)(props);
let { keyboardProps: keyboardProps } = (0, $6nfFC$useKeyboard)(props);
let interactions = (0, $6nfFC$mergeProps)(focusProps, keyboardProps);
let domProps = $e6afbd83fe6ebbd2$var$useFocusableContext(domRef);
let interactionProps = props.isDisabled ? {} : domProps;
let autoFocusRef = (0, $6nfFC$useRef)(props.autoFocus);
(0, $6nfFC$useEffect)(()=>{
if (autoFocusRef.current && domRef.current) (0, $6a99195332edec8b$export$80f3e147d781571c)(domRef.current);
autoFocusRef.current = false;
}, [
domRef
]);
return {
focusableProps: (0, $6nfFC$mergeProps)({
...interactions,
tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
}, interactionProps)
};
}
/*
* Copyright 2022 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.
*/
function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
let isDisabled = options === null || options === void 0 ? void 0 : options.isDisabled;
let [hasTabbableChild, setHasTabbableChild] = (0, $6nfFC$useState)(false);
(0, $6nfFC$useLayoutEffect)(()=>{
if ((ref === null || ref === void 0 ? void 0 : ref.current) && !isDisabled) {
let update = ()=>{
if (ref.current) {
let walker = (0, $9bf71ea28793e738$export$2d6ec8fc375ceafa)(ref.current, {
tabbable: true
});
setHasTabbableChild(!!walker.nextNode());
}
};
update();
// Update when new elements are inserted, or the tabIndex/disabled attribute updates.
let observer = new MutationObserver(update);
observer.observe(ref.current, {
subtree: true,
childList: true,
attributes: