@oscarpalmer/oui 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/focus-trap.cjs +147 -0
- package/dist/js/focus-trap.js +146 -0
- package/dist/js/index.cjs +2 -0
- package/dist/js/index.js +1 -0
- package/package.json +51 -6
- package/src/js/focus-trap.ts +181 -0
- package/src/js/index.ts +1 -0
- package/types/focus-trap.d.cts +3 -0
- package/types/focus-trap.d.ts +1 -0
- package/types/index.d.cts +3 -0
- package/types/index.d.ts +1 -0
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
4
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
const number = require("@oscarpalmer/atoms/number");
|
|
6
|
+
const event = require("@oscarpalmer/toretto/event");
|
|
7
|
+
const find = require("@oscarpalmer/toretto/find");
|
|
8
|
+
const focusable = require("@oscarpalmer/toretto/focusable");
|
|
9
|
+
class FocusTrap {
|
|
10
|
+
constructor(element) {
|
|
11
|
+
__publicField(this, "active", true);
|
|
12
|
+
this.element = element;
|
|
13
|
+
element.setAttribute("aria-modal", "true");
|
|
14
|
+
element.setAttribute("tabindex", "-1");
|
|
15
|
+
}
|
|
16
|
+
activate() {
|
|
17
|
+
this.element.setAttribute("aria-modal", "true");
|
|
18
|
+
this.active = true;
|
|
19
|
+
}
|
|
20
|
+
destroy() {
|
|
21
|
+
this.active = false;
|
|
22
|
+
this.element = void 0;
|
|
23
|
+
}
|
|
24
|
+
inactivate() {
|
|
25
|
+
this.element.setAttribute("aria-modal", "false");
|
|
26
|
+
this.active = false;
|
|
27
|
+
inactive.add(this);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
function addFocusTraps(nodes) {
|
|
31
|
+
const elements = [...nodes].filter(
|
|
32
|
+
(node) => node instanceof HTMLElement
|
|
33
|
+
);
|
|
34
|
+
const { length } = elements;
|
|
35
|
+
for (let index = 0; index < length; index += 1) {
|
|
36
|
+
const element = elements[index];
|
|
37
|
+
if (element.hasAttribute(selector)) {
|
|
38
|
+
focusTraps.set(element, new FocusTrap(element));
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
function onEscape(event2) {
|
|
43
|
+
var _a;
|
|
44
|
+
if (event2.key !== "Escape") {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const element = find.findAncestor(
|
|
48
|
+
document.activeElement,
|
|
49
|
+
`[${selector}]`
|
|
50
|
+
);
|
|
51
|
+
(_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
|
|
52
|
+
}
|
|
53
|
+
function onFocusOut() {
|
|
54
|
+
if (inactive.size === 0) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
const element = find.findAncestor(
|
|
59
|
+
document.activeElement,
|
|
60
|
+
`[${selector}]`
|
|
61
|
+
);
|
|
62
|
+
if (!focusTraps.has(element)) {
|
|
63
|
+
for (const focusTrap of inactive) {
|
|
64
|
+
focusTrap.activate();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, 0);
|
|
68
|
+
}
|
|
69
|
+
function onTab(event2) {
|
|
70
|
+
var _a;
|
|
71
|
+
if (event2.key !== "Tab") {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const element = find.findAncestor(
|
|
75
|
+
event2.target,
|
|
76
|
+
`[${selector}]`
|
|
77
|
+
);
|
|
78
|
+
if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
event2.preventDefault();
|
|
82
|
+
const elements = focusable.getFocusable(element);
|
|
83
|
+
const { length } = elements;
|
|
84
|
+
const index = elements.indexOf(event2.target);
|
|
85
|
+
if (index === -1 || length === 0) {
|
|
86
|
+
if (length === 0) {
|
|
87
|
+
element.focus();
|
|
88
|
+
} else {
|
|
89
|
+
elements[0].focus();
|
|
90
|
+
}
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
const next = number.clamp(index + (event2.shiftKey ? -1 : 1), 0, length - 1, true);
|
|
94
|
+
if (next !== index) {
|
|
95
|
+
elements[next].focus();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
function removeFocusTraps(nodes) {
|
|
99
|
+
var _a;
|
|
100
|
+
const elements = [...nodes].filter(
|
|
101
|
+
(node) => node instanceof HTMLElement
|
|
102
|
+
);
|
|
103
|
+
const { length } = elements;
|
|
104
|
+
for (let index = 0; index < length; index += 1) {
|
|
105
|
+
const element = elements[index];
|
|
106
|
+
(_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
|
|
107
|
+
focusTraps.delete(element);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
const focusTraps = /* @__PURE__ */ new WeakMap();
|
|
111
|
+
const inactive = /* @__PURE__ */ new Set();
|
|
112
|
+
const observer = new MutationObserver((entries) => {
|
|
113
|
+
const { length } = entries;
|
|
114
|
+
for (let index = 0; index < length; index += 1) {
|
|
115
|
+
const entry = entries[index];
|
|
116
|
+
if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
|
|
117
|
+
if (entry.target.hasAttribute(selector)) {
|
|
118
|
+
addFocusTraps([entry.target]);
|
|
119
|
+
} else {
|
|
120
|
+
removeFocusTraps([entry.target]);
|
|
121
|
+
}
|
|
122
|
+
} else if (entry.type === "childList") {
|
|
123
|
+
addFocusTraps(entry.addedNodes);
|
|
124
|
+
removeFocusTraps(entry.removedNodes);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
const selector = "oui-focus-trap";
|
|
129
|
+
observer.observe(document, {
|
|
130
|
+
attributeFilter: [selector],
|
|
131
|
+
attributes: true,
|
|
132
|
+
childList: true,
|
|
133
|
+
subtree: true
|
|
134
|
+
});
|
|
135
|
+
setTimeout(() => {
|
|
136
|
+
addFocusTraps(document.querySelectorAll(`[${selector}]`));
|
|
137
|
+
event.on(document, "focusout", onFocusOut, {
|
|
138
|
+
capture: true
|
|
139
|
+
});
|
|
140
|
+
event.on(document, "keydown", onTab, {
|
|
141
|
+
capture: true,
|
|
142
|
+
passive: false
|
|
143
|
+
});
|
|
144
|
+
event.on(document, "keydown", onEscape, {
|
|
145
|
+
passive: false
|
|
146
|
+
});
|
|
147
|
+
}, 0);
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
import { clamp } from "@oscarpalmer/atoms/number";
|
|
5
|
+
import { on } from "@oscarpalmer/toretto/event";
|
|
6
|
+
import { findAncestor } from "@oscarpalmer/toretto/find";
|
|
7
|
+
import { getFocusable } from "@oscarpalmer/toretto/focusable";
|
|
8
|
+
class FocusTrap {
|
|
9
|
+
constructor(element) {
|
|
10
|
+
__publicField(this, "active", true);
|
|
11
|
+
this.element = element;
|
|
12
|
+
element.setAttribute("aria-modal", "true");
|
|
13
|
+
element.setAttribute("tabindex", "-1");
|
|
14
|
+
}
|
|
15
|
+
activate() {
|
|
16
|
+
this.element.setAttribute("aria-modal", "true");
|
|
17
|
+
this.active = true;
|
|
18
|
+
}
|
|
19
|
+
destroy() {
|
|
20
|
+
this.active = false;
|
|
21
|
+
this.element = void 0;
|
|
22
|
+
}
|
|
23
|
+
inactivate() {
|
|
24
|
+
this.element.setAttribute("aria-modal", "false");
|
|
25
|
+
this.active = false;
|
|
26
|
+
inactive.add(this);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function addFocusTraps(nodes) {
|
|
30
|
+
const elements = [...nodes].filter(
|
|
31
|
+
(node) => node instanceof HTMLElement
|
|
32
|
+
);
|
|
33
|
+
const { length } = elements;
|
|
34
|
+
for (let index = 0; index < length; index += 1) {
|
|
35
|
+
const element = elements[index];
|
|
36
|
+
if (element.hasAttribute(selector)) {
|
|
37
|
+
focusTraps.set(element, new FocusTrap(element));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function onEscape(event) {
|
|
42
|
+
var _a;
|
|
43
|
+
if (event.key !== "Escape") {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const element = findAncestor(
|
|
47
|
+
document.activeElement,
|
|
48
|
+
`[${selector}]`
|
|
49
|
+
);
|
|
50
|
+
(_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
|
|
51
|
+
}
|
|
52
|
+
function onFocusOut() {
|
|
53
|
+
if (inactive.size === 0) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
setTimeout(() => {
|
|
57
|
+
const element = findAncestor(
|
|
58
|
+
document.activeElement,
|
|
59
|
+
`[${selector}]`
|
|
60
|
+
);
|
|
61
|
+
if (!focusTraps.has(element)) {
|
|
62
|
+
for (const focusTrap of inactive) {
|
|
63
|
+
focusTrap.activate();
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}, 0);
|
|
67
|
+
}
|
|
68
|
+
function onTab(event) {
|
|
69
|
+
var _a;
|
|
70
|
+
if (event.key !== "Tab") {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const element = findAncestor(
|
|
74
|
+
event.target,
|
|
75
|
+
`[${selector}]`
|
|
76
|
+
);
|
|
77
|
+
if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
const elements = getFocusable(element);
|
|
82
|
+
const { length } = elements;
|
|
83
|
+
const index = elements.indexOf(event.target);
|
|
84
|
+
if (index === -1 || length === 0) {
|
|
85
|
+
if (length === 0) {
|
|
86
|
+
element.focus();
|
|
87
|
+
} else {
|
|
88
|
+
elements[0].focus();
|
|
89
|
+
}
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
|
|
93
|
+
if (next !== index) {
|
|
94
|
+
elements[next].focus();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
function removeFocusTraps(nodes) {
|
|
98
|
+
var _a;
|
|
99
|
+
const elements = [...nodes].filter(
|
|
100
|
+
(node) => node instanceof HTMLElement
|
|
101
|
+
);
|
|
102
|
+
const { length } = elements;
|
|
103
|
+
for (let index = 0; index < length; index += 1) {
|
|
104
|
+
const element = elements[index];
|
|
105
|
+
(_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
|
|
106
|
+
focusTraps.delete(element);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
const focusTraps = /* @__PURE__ */ new WeakMap();
|
|
110
|
+
const inactive = /* @__PURE__ */ new Set();
|
|
111
|
+
const observer = new MutationObserver((entries) => {
|
|
112
|
+
const { length } = entries;
|
|
113
|
+
for (let index = 0; index < length; index += 1) {
|
|
114
|
+
const entry = entries[index];
|
|
115
|
+
if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
|
|
116
|
+
if (entry.target.hasAttribute(selector)) {
|
|
117
|
+
addFocusTraps([entry.target]);
|
|
118
|
+
} else {
|
|
119
|
+
removeFocusTraps([entry.target]);
|
|
120
|
+
}
|
|
121
|
+
} else if (entry.type === "childList") {
|
|
122
|
+
addFocusTraps(entry.addedNodes);
|
|
123
|
+
removeFocusTraps(entry.removedNodes);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
const selector = "oui-focus-trap";
|
|
128
|
+
observer.observe(document, {
|
|
129
|
+
attributeFilter: [selector],
|
|
130
|
+
attributes: true,
|
|
131
|
+
childList: true,
|
|
132
|
+
subtree: true
|
|
133
|
+
});
|
|
134
|
+
setTimeout(() => {
|
|
135
|
+
addFocusTraps(document.querySelectorAll(`[${selector}]`));
|
|
136
|
+
on(document, "focusout", onFocusOut, {
|
|
137
|
+
capture: true
|
|
138
|
+
});
|
|
139
|
+
on(document, "keydown", onTab, {
|
|
140
|
+
capture: true,
|
|
141
|
+
passive: false
|
|
142
|
+
});
|
|
143
|
+
on(document, "keydown", onEscape, {
|
|
144
|
+
passive: false
|
|
145
|
+
});
|
|
146
|
+
}, 0);
|
package/dist/js/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./focus-trap.js";
|
package/package.json
CHANGED
|
@@ -6,10 +6,45 @@
|
|
|
6
6
|
"description": "Styles, components, and utilities for building websites and applications.",
|
|
7
7
|
"devDependencies": {
|
|
8
8
|
"@biomejs/biome": "^1.9",
|
|
9
|
-
"
|
|
10
|
-
"
|
|
9
|
+
"@oscarpalmer/atoms": "^0.89.1",
|
|
10
|
+
"@oscarpalmer/toretto": "^0.18",
|
|
11
|
+
"@rollup/plugin-node-resolve": "^16",
|
|
12
|
+
"@rollup/plugin-typescript": "^12.1",
|
|
13
|
+
"@types/node": "^22.13",
|
|
14
|
+
"@vitest/coverage-istanbul": "^3",
|
|
15
|
+
"dts-bundle-generator": "^9.5",
|
|
16
|
+
"glob": "^11",
|
|
17
|
+
"happy-dom": "^17.4",
|
|
18
|
+
"sass": "^1.86",
|
|
19
|
+
"stylelint": "^16.17",
|
|
20
|
+
"tslib": "^2.8",
|
|
21
|
+
"typescript": "^5.8",
|
|
22
|
+
"vite": "^6.2",
|
|
23
|
+
"vitest": "^3"
|
|
11
24
|
},
|
|
12
|
-
"
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"import": {
|
|
28
|
+
"types": "./types/index.d.ts",
|
|
29
|
+
"default": "./dist/js/index.js"
|
|
30
|
+
},
|
|
31
|
+
"require": {
|
|
32
|
+
"types": "./types/index.d.cts",
|
|
33
|
+
"default": "./dist/js/index.cjs"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"./focus-trap": {
|
|
37
|
+
"import": {
|
|
38
|
+
"types": "./types/focus-trap.d.ts",
|
|
39
|
+
"default": "./dist/js/focus-trap.js"
|
|
40
|
+
},
|
|
41
|
+
"require": {
|
|
42
|
+
"types": "./types/focus-trap.d.cts",
|
|
43
|
+
"default": "./dist/js/focus-trap.cjs"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"files": ["dist", "src", "types"],
|
|
13
48
|
"keywords": [
|
|
14
49
|
"css",
|
|
15
50
|
"scss",
|
|
@@ -21,15 +56,25 @@
|
|
|
21
56
|
"utility"
|
|
22
57
|
],
|
|
23
58
|
"license": "MIT",
|
|
59
|
+
"main": "dist/js/index.cjs",
|
|
60
|
+
"module": "dist/js/index.js",
|
|
24
61
|
"name": "@oscarpalmer/oui",
|
|
25
62
|
"repository": {
|
|
26
63
|
"type": "git",
|
|
27
64
|
"url": "git+https://github.com/oscarpalmer/oui.git"
|
|
28
65
|
},
|
|
29
66
|
"scripts": {
|
|
30
|
-
"build": "
|
|
31
|
-
"
|
|
67
|
+
"build": "npm run clean && npm run build:css && npm run build:js",
|
|
68
|
+
"build:css": "npx sass ./src/css:./dist/css --no-source-map",
|
|
69
|
+
"build:js": "npx vite build && npm run types",
|
|
70
|
+
"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
|
|
71
|
+
"rollup": "npx rollup -c --watch",
|
|
72
|
+
"test": "npx vitest --coverage",
|
|
73
|
+
"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
|
|
74
|
+
"watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
|
|
75
|
+
"watch:js": "npx vite build --watch"
|
|
32
76
|
},
|
|
33
77
|
"type": "module",
|
|
34
|
-
"
|
|
78
|
+
"types": "types/index.d.cts",
|
|
79
|
+
"version": "0.9.0"
|
|
35
80
|
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import {clamp} from '@oscarpalmer/atoms/number';
|
|
2
|
+
import {on} from '@oscarpalmer/toretto/event';
|
|
3
|
+
import {findAncestor} from '@oscarpalmer/toretto/find';
|
|
4
|
+
import {getFocusable} from '@oscarpalmer/toretto/focusable';
|
|
5
|
+
|
|
6
|
+
class FocusTrap {
|
|
7
|
+
active = true;
|
|
8
|
+
|
|
9
|
+
constructor(private element: HTMLElement) {
|
|
10
|
+
element.setAttribute('aria-modal', 'true');
|
|
11
|
+
element.setAttribute('tabindex', '-1');
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
activate() {
|
|
15
|
+
this.element.setAttribute('aria-modal', 'true');
|
|
16
|
+
|
|
17
|
+
this.active = true;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
destroy() {
|
|
21
|
+
this.active = false;
|
|
22
|
+
this.element = undefined as never;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
inactivate() {
|
|
26
|
+
this.element.setAttribute('aria-modal', 'false');
|
|
27
|
+
|
|
28
|
+
this.active = false;
|
|
29
|
+
|
|
30
|
+
inactive.add(this);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function addFocusTraps(nodes: Node[] | NodeList): void {
|
|
35
|
+
const elements = [...nodes].filter(
|
|
36
|
+
node => node instanceof HTMLElement,
|
|
37
|
+
) as HTMLElement[];
|
|
38
|
+
|
|
39
|
+
const {length} = elements;
|
|
40
|
+
|
|
41
|
+
for (let index = 0; index < length; index += 1) {
|
|
42
|
+
const element = elements[index];
|
|
43
|
+
|
|
44
|
+
if (element.hasAttribute(selector)) {
|
|
45
|
+
focusTraps.set(element, new FocusTrap(element));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function onEscape(event: KeyboardEvent): void {
|
|
51
|
+
if (event.key !== 'Escape') {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const element = findAncestor(
|
|
56
|
+
document.activeElement as never,
|
|
57
|
+
`[${selector}]`,
|
|
58
|
+
) as HTMLElement;
|
|
59
|
+
|
|
60
|
+
focusTraps.get(element)?.inactivate();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function onFocusOut(): void {
|
|
64
|
+
if (inactive.size === 0) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
setTimeout(() => {
|
|
69
|
+
const element = findAncestor(
|
|
70
|
+
document.activeElement as never,
|
|
71
|
+
`[${selector}]`,
|
|
72
|
+
) as HTMLElement;
|
|
73
|
+
|
|
74
|
+
if (!focusTraps.has(element)) {
|
|
75
|
+
for (const focusTrap of inactive) {
|
|
76
|
+
focusTrap.activate();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}, 0);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function onTab(event: KeyboardEvent): void {
|
|
83
|
+
if (event.key !== 'Tab') {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const element = findAncestor(
|
|
88
|
+
event.target as never,
|
|
89
|
+
`[${selector}]`,
|
|
90
|
+
) as HTMLElement;
|
|
91
|
+
|
|
92
|
+
if (!(focusTraps.get(element)?.active ?? false)) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
event.preventDefault();
|
|
97
|
+
|
|
98
|
+
const elements = getFocusable(element);
|
|
99
|
+
const {length} = elements;
|
|
100
|
+
|
|
101
|
+
const index = elements.indexOf(event.target as HTMLElement);
|
|
102
|
+
|
|
103
|
+
if (index === -1 || length === 0) {
|
|
104
|
+
if (length === 0) {
|
|
105
|
+
element.focus();
|
|
106
|
+
} else {
|
|
107
|
+
(elements[0] as HTMLElement).focus();
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
|
|
114
|
+
|
|
115
|
+
if (next !== index) {
|
|
116
|
+
(elements[next] as HTMLElement).focus();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function removeFocusTraps(nodes: Node[] | NodeList): void {
|
|
121
|
+
const elements = [...nodes].filter(
|
|
122
|
+
node => node instanceof HTMLElement,
|
|
123
|
+
) as HTMLElement[];
|
|
124
|
+
|
|
125
|
+
const {length} = elements;
|
|
126
|
+
|
|
127
|
+
for (let index = 0; index < length; index += 1) {
|
|
128
|
+
const element = elements[index];
|
|
129
|
+
|
|
130
|
+
focusTraps.get(element)?.destroy();
|
|
131
|
+
focusTraps.delete(element);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
|
|
136
|
+
const inactive = new Set<FocusTrap>();
|
|
137
|
+
|
|
138
|
+
const observer = new MutationObserver(entries => {
|
|
139
|
+
const {length} = entries;
|
|
140
|
+
|
|
141
|
+
for (let index = 0; index < length; index += 1) {
|
|
142
|
+
const entry = entries[index];
|
|
143
|
+
|
|
144
|
+
if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
|
|
145
|
+
if (entry.target.hasAttribute(selector)) {
|
|
146
|
+
addFocusTraps([entry.target]);
|
|
147
|
+
} else {
|
|
148
|
+
removeFocusTraps([entry.target]);
|
|
149
|
+
}
|
|
150
|
+
} else if (entry.type === 'childList') {
|
|
151
|
+
addFocusTraps(entry.addedNodes);
|
|
152
|
+
removeFocusTraps(entry.removedNodes);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
const selector = 'oui-focus-trap';
|
|
158
|
+
|
|
159
|
+
observer.observe(document, {
|
|
160
|
+
attributeFilter: [selector],
|
|
161
|
+
attributes: true,
|
|
162
|
+
childList: true,
|
|
163
|
+
subtree: true,
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
setTimeout(() => {
|
|
167
|
+
addFocusTraps(document.querySelectorAll(`[${selector}]`));
|
|
168
|
+
|
|
169
|
+
on(document, 'focusout', onFocusOut, {
|
|
170
|
+
capture: true,
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
on(document, 'keydown', onTab, {
|
|
174
|
+
capture: true,
|
|
175
|
+
passive: false,
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
on(document, 'keydown', onEscape, {
|
|
179
|
+
passive: false,
|
|
180
|
+
});
|
|
181
|
+
}, 0);
|
package/src/js/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './focus-trap';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './focus-trap';
|