node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
# `react-focus-scope`
## Installation
```sh
$ yarn add @radix-ui/react-focus-scope
# or
$ npm install @radix-ui/react-focus-scope
```
## Usage
This is an internal utility, not intended for public usage.

View File

@@ -0,0 +1,32 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface FocusScopeProps extends PrimitiveDivProps {
/**
* When `true`, tabbing from last item will focus first tabbable
* and shift+tab from first item will focus last tababble.
* @defaultValue false
*/
loop?: boolean;
/**
* When `true`, focus cannot escape the focus scope via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapped?: boolean;
/**
* Event handler called when auto-focusing on mount.
* Can be prevented.
*/
onMountAutoFocus?: (event: Event) => void;
/**
* Event handler called when auto-focusing on unmount.
* Can be prevented.
*/
onUnmountAutoFocus?: (event: Event) => void;
}
export const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,32 @@
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface FocusScopeProps extends PrimitiveDivProps {
/**
* When `true`, tabbing from last item will focus first tabbable
* and shift+tab from first item will focus last tababble.
* @defaultValue false
*/
loop?: boolean;
/**
* When `true`, focus cannot escape the focus scope via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapped?: boolean;
/**
* Event handler called when auto-focusing on mount.
* Can be prevented.
*/
onMountAutoFocus?: (event: Event) => void;
/**
* Event handler called when auto-focusing on unmount.
* Can be prevented.
*/
onUnmountAutoFocus?: (event: Event) => void;
}
export const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
export const Root: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;AAoBA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,gCAA0B,SAAQ,iBAAiB;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7C;AAED,OAAA,MAAM,kGA8JJ,CAAC;AA2IH,OAAA,MAAM,4FAAiB,CAAC","sources":["packages/react/focus-scope/src/packages/react/focus-scope/src/FocusScope.tsx","packages/react/focus-scope/src/packages/react/focus-scope/src/index.ts","packages/react/focus-scope/src/index.ts"],"sourcesContent":[null,null,"export {\n FocusScope,\n //\n Root,\n} from './FocusScope';\nexport type { FocusScopeProps } from './FocusScope';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,300 @@
var $buum9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $buum9$react = require("react");
var $buum9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $buum9$radixuireactprimitive = require("@radix-ui/react-primitive");
var $buum9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "FocusScope", () => $2bc01e66e04aa9ed$export$20e40289641fbbb6);
$parcel$export(module.exports, "Root", () => $2bc01e66e04aa9ed$export$be92b6f5f03c0fe9);
const $2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
const $2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
const $2bc01e66e04aa9ed$var$EVENT_OPTIONS = {
bubbles: false,
cancelable: true
};
/* -------------------------------------------------------------------------------------------------
* FocusScope
* -----------------------------------------------------------------------------------------------*/ const $2bc01e66e04aa9ed$var$FOCUS_SCOPE_NAME = 'FocusScope';
const $2bc01e66e04aa9ed$export$20e40289641fbbb6 = /*#__PURE__*/ $buum9$react.forwardRef((props, forwardedRef)=>{
const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
const [container1, setContainer] = $buum9$react.useState(null);
const onMountAutoFocus = $buum9$radixuireactusecallbackref.useCallbackRef(onMountAutoFocusProp);
const onUnmountAutoFocus = $buum9$radixuireactusecallbackref.useCallbackRef(onUnmountAutoFocusProp);
const lastFocusedElementRef = $buum9$react.useRef(null);
const composedRefs = $buum9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContainer(node)
);
const focusScope = $buum9$react.useRef({
paused: false,
pause () {
this.paused = true;
},
resume () {
this.paused = false;
}
}).current; // Takes care of trapping focus if focus is moved outside programmatically for example
$buum9$react.useEffect(()=>{
if (trapped) {
function handleFocusIn(event) {
if (focusScope.paused || !container1) return;
const target = event.target;
if (container1.contains(target)) lastFocusedElementRef.current = target;
else $2bc01e66e04aa9ed$var$focus(lastFocusedElementRef.current, {
select: true
});
}
function handleFocusOut(event) {
if (focusScope.paused || !container1) return;
const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
//
// 1. When the user switches app/tabs/windows/the browser itself loses focus.
// 2. In Google Chrome, when the focused element is removed from the DOM.
//
// We let the browser do its thing here because:
//
// 1. The browser already keeps a memory of what's focused for when the page gets refocused.
// 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
// throws the CPU to 100%, so we avoid doing anything for this reason here too.
if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
// that is outside the container, we move focus to the last valid focused element inside.
if (!container1.contains(relatedTarget)) $2bc01e66e04aa9ed$var$focus(lastFocusedElementRef.current, {
select: true
});
} // When the focused element gets removed from the DOM, browsers move focus
// back to the document.body. In this case, we move focus to the container
// to keep focus trapped correctly.
function handleMutations(mutations) {
const focusedElement = document.activeElement;
if (focusedElement !== document.body) return;
for (const mutation of mutations)if (mutation.removedNodes.length > 0) $2bc01e66e04aa9ed$var$focus(container1);
}
document.addEventListener('focusin', handleFocusIn);
document.addEventListener('focusout', handleFocusOut);
const mutationObserver = new MutationObserver(handleMutations);
if (container1) mutationObserver.observe(container1, {
childList: true,
subtree: true
});
return ()=>{
document.removeEventListener('focusin', handleFocusIn);
document.removeEventListener('focusout', handleFocusOut);
mutationObserver.disconnect();
};
}
}, [
trapped,
container1,
focusScope.paused
]);
$buum9$react.useEffect(()=>{
if (container1) {
$2bc01e66e04aa9ed$var$focusScopesStack.add(focusScope);
const previouslyFocusedElement = document.activeElement;
const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
if (!hasFocusedCandidate) {
const mountEvent = new CustomEvent($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, $2bc01e66e04aa9ed$var$EVENT_OPTIONS);
container1.addEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
container1.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
$2bc01e66e04aa9ed$var$focusFirst($2bc01e66e04aa9ed$var$removeLinks($2bc01e66e04aa9ed$var$getTabbableCandidates(container1)), {
select: true
});
if (document.activeElement === previouslyFocusedElement) $2bc01e66e04aa9ed$var$focus(container1);
}
}
return ()=>{
container1.removeEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
// We need to delay the focus a little to get around it for now.
// See: https://github.com/facebook/react/issues/17894
setTimeout(()=>{
const unmountEvent = new CustomEvent($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, $2bc01e66e04aa9ed$var$EVENT_OPTIONS);
container1.addEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
container1.dispatchEvent(unmountEvent);
if (!unmountEvent.defaultPrevented) $2bc01e66e04aa9ed$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
select: true
});
// we need to remove the listener after we `dispatchEvent`
container1.removeEventListener($2bc01e66e04aa9ed$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
$2bc01e66e04aa9ed$var$focusScopesStack.remove(focusScope);
}, 0);
};
}
}, [
container1,
onMountAutoFocus,
onUnmountAutoFocus,
focusScope
]); // Takes care of looping focus (when tabbing whilst at the edges)
const handleKeyDown = $buum9$react.useCallback((event)=>{
if (!loop && !trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = document.activeElement;
if (isTabKey && focusedElement) {
const container = event.currentTarget;
const [first, last] = $2bc01e66e04aa9ed$var$getTabbableEdges(container);
const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
if (!hasTabbableElementsInside) {
if (focusedElement === container) event.preventDefault();
} else {
if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (loop) $2bc01e66e04aa9ed$var$focus(first, {
select: true
});
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (loop) $2bc01e66e04aa9ed$var$focus(last, {
select: true
});
}
}
}
}, [
loop,
trapped,
focusScope.paused
]);
return /*#__PURE__*/ $buum9$react.createElement($buum9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($buum9$babelruntimehelpersextends))({
tabIndex: -1
}, scopeProps, {
ref: composedRefs,
onKeyDown: handleKeyDown
}));
});
/*#__PURE__*/ Object.assign($2bc01e66e04aa9ed$export$20e40289641fbbb6, {
displayName: $2bc01e66e04aa9ed$var$FOCUS_SCOPE_NAME
});
/* -------------------------------------------------------------------------------------------------
* Utils
* -----------------------------------------------------------------------------------------------*/ /**
* Attempts focusing the first element in a list of candidates.
* Stops when focus has actually moved.
*/ function $2bc01e66e04aa9ed$var$focusFirst(candidates, { select: select = false } = {}) {
const previouslyFocusedElement = document.activeElement;
for (const candidate of candidates){
$2bc01e66e04aa9ed$var$focus(candidate, {
select: select
});
if (document.activeElement !== previouslyFocusedElement) return;
}
}
/**
* Returns the first and last tabbable elements inside a container.
*/ function $2bc01e66e04aa9ed$var$getTabbableEdges(container) {
const candidates = $2bc01e66e04aa9ed$var$getTabbableCandidates(container);
const first = $2bc01e66e04aa9ed$var$findVisible(candidates, container);
const last = $2bc01e66e04aa9ed$var$findVisible(candidates.reverse(), container);
return [
first,
last
];
}
/**
* Returns a list of potential tabbable candidates.
*
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
*/ function $2bc01e66e04aa9ed$var$getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node)=>{
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
// runtime's understanding of tabbability, so this automatically accounts
// for any kind of element that could be tabbed to.
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
// hinders accessibility to have tab order different from visual order.
return nodes;
}
/**
* Returns the first visible element in a list.
* NOTE: Only checks visibility up to the `container`.
*/ function $2bc01e66e04aa9ed$var$findVisible(elements, container) {
for (const element of elements){
// we stop checking if it's hidden at the `container` level (excluding)
if (!$2bc01e66e04aa9ed$var$isHidden(element, {
upTo: container
})) return element;
}
}
function $2bc01e66e04aa9ed$var$isHidden(node, { upTo: upTo }) {
if (getComputedStyle(node).visibility === 'hidden') return true;
while(node){
// we stop at `upTo` (excluding it)
if (upTo !== undefined && node === upTo) return false;
if (getComputedStyle(node).display === 'none') return true;
node = node.parentElement;
}
return false;
}
function $2bc01e66e04aa9ed$var$isSelectableInput(element) {
return element instanceof HTMLInputElement && 'select' in element;
}
function $2bc01e66e04aa9ed$var$focus(element, { select: select = false } = {}) {
// only focus if that element is focusable
if (element && element.focus) {
const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
element.focus({
preventScroll: true
}); // only select if its not the same element, it supports selection and we need to select
if (element !== previouslyFocusedElement && $2bc01e66e04aa9ed$var$isSelectableInput(element) && select) element.select();
}
}
/* -------------------------------------------------------------------------------------------------
* FocusScope stack
* -----------------------------------------------------------------------------------------------*/ const $2bc01e66e04aa9ed$var$focusScopesStack = $2bc01e66e04aa9ed$var$createFocusScopesStack();
function $2bc01e66e04aa9ed$var$createFocusScopesStack() {
/** A stack of focus scopes, with the active one at the top */ let stack = [];
return {
add (focusScope) {
// pause the currently active focus scope (at the top of the stack)
const activeFocusScope = stack[0];
if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
// remove in case it already exists (because we'll re-add it at the top of the stack)
stack = $2bc01e66e04aa9ed$var$arrayRemove(stack, focusScope);
stack.unshift(focusScope);
},
remove (focusScope) {
var _stack$;
stack = $2bc01e66e04aa9ed$var$arrayRemove(stack, focusScope);
(_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
}
};
}
function $2bc01e66e04aa9ed$var$arrayRemove(array, item) {
const updatedArray = [
...array
];
const index = updatedArray.indexOf(item);
if (index !== -1) updatedArray.splice(index, 1);
return updatedArray;
}
function $2bc01e66e04aa9ed$var$removeLinks(items) {
return items.filter((item)=>item.tagName !== 'A'
);
}
const $2bc01e66e04aa9ed$export$be92b6f5f03c0fe9 = $2bc01e66e04aa9ed$export$20e40289641fbbb6;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,292 @@
import $45QHv$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {forwardRef as $45QHv$forwardRef, useState as $45QHv$useState, useRef as $45QHv$useRef, useEffect as $45QHv$useEffect, useCallback as $45QHv$useCallback, createElement as $45QHv$createElement} from "react";
import {useComposedRefs as $45QHv$useComposedRefs} from "@radix-ui/react-compose-refs";
import {Primitive as $45QHv$Primitive} from "@radix-ui/react-primitive";
import {useCallbackRef as $45QHv$useCallbackRef} from "@radix-ui/react-use-callback-ref";
const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
bubbles: false,
cancelable: true
};
/* -------------------------------------------------------------------------------------------------
* FocusScope
* -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME = 'FocusScope';
const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ $45QHv$forwardRef((props, forwardedRef)=>{
const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
const [container1, setContainer] = $45QHv$useState(null);
const onMountAutoFocus = $45QHv$useCallbackRef(onMountAutoFocusProp);
const onUnmountAutoFocus = $45QHv$useCallbackRef(onUnmountAutoFocusProp);
const lastFocusedElementRef = $45QHv$useRef(null);
const composedRefs = $45QHv$useComposedRefs(forwardedRef, (node)=>setContainer(node)
);
const focusScope = $45QHv$useRef({
paused: false,
pause () {
this.paused = true;
},
resume () {
this.paused = false;
}
}).current; // Takes care of trapping focus if focus is moved outside programmatically for example
$45QHv$useEffect(()=>{
if (trapped) {
function handleFocusIn(event) {
if (focusScope.paused || !container1) return;
const target = event.target;
if (container1.contains(target)) lastFocusedElementRef.current = target;
else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
select: true
});
}
function handleFocusOut(event) {
if (focusScope.paused || !container1) return;
const relatedTarget = event.relatedTarget; // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
//
// 1. When the user switches app/tabs/windows/the browser itself loses focus.
// 2. In Google Chrome, when the focused element is removed from the DOM.
//
// We let the browser do its thing here because:
//
// 1. The browser already keeps a memory of what's focused for when the page gets refocused.
// 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
// throws the CPU to 100%, so we avoid doing anything for this reason here too.
if (relatedTarget === null) return; // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
// that is outside the container, we move focus to the last valid focused element inside.
if (!container1.contains(relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, {
select: true
});
} // When the focused element gets removed from the DOM, browsers move focus
// back to the document.body. In this case, we move focus to the container
// to keep focus trapped correctly.
function handleMutations(mutations) {
const focusedElement = document.activeElement;
if (focusedElement !== document.body) return;
for (const mutation of mutations)if (mutation.removedNodes.length > 0) $d3863c46a17e8a28$var$focus(container1);
}
document.addEventListener('focusin', handleFocusIn);
document.addEventListener('focusout', handleFocusOut);
const mutationObserver = new MutationObserver(handleMutations);
if (container1) mutationObserver.observe(container1, {
childList: true,
subtree: true
});
return ()=>{
document.removeEventListener('focusin', handleFocusIn);
document.removeEventListener('focusout', handleFocusOut);
mutationObserver.disconnect();
};
}
}, [
trapped,
container1,
focusScope.paused
]);
$45QHv$useEffect(()=>{
if (container1) {
$d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
const previouslyFocusedElement = document.activeElement;
const hasFocusedCandidate = container1.contains(previouslyFocusedElement);
if (!hasFocusedCandidate) {
const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
container1.dispatchEvent(mountEvent);
if (!mountEvent.defaultPrevented) {
$d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), {
select: true
});
if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1);
}
}
return ()=>{
container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount.
// We need to delay the focus a little to get around it for now.
// See: https://github.com/facebook/react/issues/17894
setTimeout(()=>{
const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS);
container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
container1.dispatchEvent(unmountEvent);
if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, {
select: true
});
// we need to remove the listener after we `dispatchEvent`
container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
$d3863c46a17e8a28$var$focusScopesStack.remove(focusScope);
}, 0);
};
}
}, [
container1,
onMountAutoFocus,
onUnmountAutoFocus,
focusScope
]); // Takes care of looping focus (when tabbing whilst at the edges)
const handleKeyDown = $45QHv$useCallback((event)=>{
if (!loop && !trapped) return;
if (focusScope.paused) return;
const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
const focusedElement = document.activeElement;
if (isTabKey && focusedElement) {
const container = event.currentTarget;
const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container);
const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges
if (!hasTabbableElementsInside) {
if (focusedElement === container) event.preventDefault();
} else {
if (!event.shiftKey && focusedElement === last) {
event.preventDefault();
if (loop) $d3863c46a17e8a28$var$focus(first, {
select: true
});
} else if (event.shiftKey && focusedElement === first) {
event.preventDefault();
if (loop) $d3863c46a17e8a28$var$focus(last, {
select: true
});
}
}
}
}, [
loop,
trapped,
focusScope.paused
]);
return /*#__PURE__*/ $45QHv$createElement($45QHv$Primitive.div, $45QHv$babelruntimehelpersesmextends({
tabIndex: -1
}, scopeProps, {
ref: composedRefs,
onKeyDown: handleKeyDown
}));
});
/*#__PURE__*/ Object.assign($d3863c46a17e8a28$export$20e40289641fbbb6, {
displayName: $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME
});
/* -------------------------------------------------------------------------------------------------
* Utils
* -----------------------------------------------------------------------------------------------*/ /**
* Attempts focusing the first element in a list of candidates.
* Stops when focus has actually moved.
*/ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false } = {}) {
const previouslyFocusedElement = document.activeElement;
for (const candidate of candidates){
$d3863c46a17e8a28$var$focus(candidate, {
select: select
});
if (document.activeElement !== previouslyFocusedElement) return;
}
}
/**
* Returns the first and last tabbable elements inside a container.
*/ function $d3863c46a17e8a28$var$getTabbableEdges(container) {
const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container);
const first = $d3863c46a17e8a28$var$findVisible(candidates, container);
const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container);
return [
first,
last
];
}
/**
* Returns a list of potential tabbable candidates.
*
* NOTE: This is only a close approximation. For example it doesn't take into account cases like when
* elements are not visible. This cannot be worked out easily by just reading a property, but rather
* necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
* Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
*/ function $d3863c46a17e8a28$var$getTabbableCandidates(container) {
const nodes = [];
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node)=>{
const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
// runtime's understanding of tabbability, so this automatically accounts
// for any kind of element that could be tabbed to.
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
// hinders accessibility to have tab order different from visual order.
return nodes;
}
/**
* Returns the first visible element in a list.
* NOTE: Only checks visibility up to the `container`.
*/ function $d3863c46a17e8a28$var$findVisible(elements, container) {
for (const element of elements){
// we stop checking if it's hidden at the `container` level (excluding)
if (!$d3863c46a17e8a28$var$isHidden(element, {
upTo: container
})) return element;
}
}
function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo }) {
if (getComputedStyle(node).visibility === 'hidden') return true;
while(node){
// we stop at `upTo` (excluding it)
if (upTo !== undefined && node === upTo) return false;
if (getComputedStyle(node).display === 'none') return true;
node = node.parentElement;
}
return false;
}
function $d3863c46a17e8a28$var$isSelectableInput(element) {
return element instanceof HTMLInputElement && 'select' in element;
}
function $d3863c46a17e8a28$var$focus(element, { select: select = false } = {}) {
// only focus if that element is focusable
if (element && element.focus) {
const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
element.focus({
preventScroll: true
}); // only select if its not the same element, it supports selection and we need to select
if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select();
}
}
/* -------------------------------------------------------------------------------------------------
* FocusScope stack
* -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack();
function $d3863c46a17e8a28$var$createFocusScopesStack() {
/** A stack of focus scopes, with the active one at the top */ let stack = [];
return {
add (focusScope) {
// pause the currently active focus scope (at the top of the stack)
const activeFocusScope = stack[0];
if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause();
// remove in case it already exists (because we'll re-add it at the top of the stack)
stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
stack.unshift(focusScope);
},
remove (focusScope) {
var _stack$;
stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope);
(_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume();
}
};
}
function $d3863c46a17e8a28$var$arrayRemove(array, item) {
const updatedArray = [
...array
];
const index = updatedArray.indexOf(item);
if (index !== -1) updatedArray.splice(index, 1);
return updatedArray;
}
function $d3863c46a17e8a28$var$removeLinks(items) {
return items.filter((item)=>item.tagName !== 'A'
);
}
const $d3863c46a17e8a28$export$be92b6f5f03c0fe9 = $d3863c46a17e8a28$export$20e40289641fbbb6;
export {$d3863c46a17e8a28$export$20e40289641fbbb6 as FocusScope, $d3863c46a17e8a28$export$be92b6f5f03c0fe9 as Root};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,58 @@
{
"name": "@radix-ui/react-focus-scope",
"version": "1.0.4",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-callback-ref": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}