1 | "use strict";
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = useTabTrap;
|
5 |
|
6 | var _react = require("react");
|
7 |
|
8 | var _useEventListener = _interopRequireDefault(require("@restart/hooks/useEventListener"));
|
9 |
|
10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11 |
|
12 | const defaultSelector = ['input', 'textarea', 'select', 'button:not([tabindex="-1"])', '[tabindex="0"]'].join(',');
|
13 |
|
14 | const getDocument = () => document;
|
15 |
|
16 | function useTabTrap(ref, selector = defaultSelector) {
|
17 | const startedRef = (0, _react.useRef)(false);
|
18 | (0, _useEventListener.default)(getDocument, 'keydown', event => {
|
19 | if (!startedRef.current || !ref.current || event.key !== 'Tab') {
|
20 | return;
|
21 | }
|
22 |
|
23 | const tabbables = ref.current.querySelectorAll(selector);
|
24 |
|
25 | if (event.shiftKey && event.target === tabbables[0]) {
|
26 | tabbables[tabbables.length - 1].focus();
|
27 | event.preventDefault();
|
28 | } else if (!event.shiftKey && event.target === tabbables[tabbables.length - 1] || !ref.current.contains(event.target)) {
|
29 | tabbables[0].focus();
|
30 | event.preventDefault();
|
31 | }
|
32 | });
|
33 | return (0, _react.useMemo)(() => ({
|
34 | focus() {
|
35 | const tabbables = ref.current.querySelectorAll(selector);
|
36 | const first = tabbables[0];
|
37 | if (first) first.focus();
|
38 | },
|
39 |
|
40 | start() {
|
41 | startedRef.current = true;
|
42 | },
|
43 |
|
44 | stop() {
|
45 | startedRef.current = false;
|
46 | }
|
47 |
|
48 | }), [ref, selector]);
|
49 | } |
\ | No newline at end of file |