@primer/behaviors 0.0.0-2022222144245 → 0.0.0-2022224222547
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/cjs/focus-trap.d.ts +1 -1
- package/dist/cjs/focus-trap.js +13 -8
- package/dist/cjs/utils/iterate-focusable-elements.d.ts +0 -1
- package/dist/cjs/utils/iterate-focusable-elements.js +1 -7
- package/dist/esm/focus-trap.d.ts +1 -1
- package/dist/esm/focus-trap.js +14 -9
- package/dist/esm/utils/iterate-focusable-elements.d.ts +0 -1
- package/dist/esm/utils/iterate-focusable-elements.js +0 -5
- package/package.json +9 -15
- package/dist/cjs/components/modal-dialog.d.ts +0 -18
- package/dist/cjs/components/modal-dialog.js +0 -114
- package/dist/esm/components/modal-dialog.d.ts +0 -18
- package/dist/esm/components/modal-dialog.js +0 -112
package/dist/cjs/focus-trap.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function focusTrap(container: HTMLElement,
|
|
1
|
+
export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
|
package/dist/cjs/focus-trap.js
CHANGED
|
@@ -9,7 +9,7 @@ let activeTrap = undefined;
|
|
|
9
9
|
function tryReactivate() {
|
|
10
10
|
const trapToReactivate = suspendedTrapStack.pop();
|
|
11
11
|
if (trapToReactivate) {
|
|
12
|
-
focusTrap(trapToReactivate.container, trapToReactivate.
|
|
12
|
+
focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
function followSignal(signal) {
|
|
@@ -19,7 +19,9 @@ function followSignal(signal) {
|
|
|
19
19
|
});
|
|
20
20
|
return controller;
|
|
21
21
|
}
|
|
22
|
-
function focusTrap(container,
|
|
22
|
+
function focusTrap(container, initialFocus, abortSignal) {
|
|
23
|
+
const controller = new AbortController();
|
|
24
|
+
const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
|
|
23
25
|
container.setAttribute('data-focus-trap', 'active');
|
|
24
26
|
const sentinelStart = document.createElement('span');
|
|
25
27
|
sentinelStart.setAttribute('class', 'sentinel');
|
|
@@ -48,22 +50,22 @@ function focusTrap(container, abortSignal, initialFocus) {
|
|
|
48
50
|
}
|
|
49
51
|
else {
|
|
50
52
|
if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
|
|
51
|
-
|
|
53
|
+
lastFocusedChild.focus();
|
|
52
54
|
return;
|
|
53
55
|
}
|
|
54
56
|
else if (initialFocus && container.contains(initialFocus)) {
|
|
55
|
-
|
|
57
|
+
initialFocus.focus();
|
|
56
58
|
return;
|
|
57
59
|
}
|
|
58
60
|
else {
|
|
59
61
|
const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
|
|
60
|
-
|
|
62
|
+
firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
|
|
61
63
|
return;
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
}
|
|
66
|
-
const wrappingController = followSignal(
|
|
68
|
+
const wrappingController = followSignal(signal);
|
|
67
69
|
if (activeTrap) {
|
|
68
70
|
const suspendedTrap = activeTrap;
|
|
69
71
|
activeTrap.container.setAttribute('data-focus-trap', 'suspended');
|
|
@@ -73,7 +75,7 @@ function focusTrap(container, abortSignal, initialFocus) {
|
|
|
73
75
|
wrappingController.signal.addEventListener('abort', () => {
|
|
74
76
|
activeTrap = undefined;
|
|
75
77
|
});
|
|
76
|
-
|
|
78
|
+
signal.addEventListener('abort', () => {
|
|
77
79
|
container.removeAttribute('data-focus-trap');
|
|
78
80
|
const sentinels = container.getElementsByClassName('sentinel');
|
|
79
81
|
while (sentinels.length > 0)
|
|
@@ -92,11 +94,14 @@ function focusTrap(container, abortSignal, initialFocus) {
|
|
|
92
94
|
container,
|
|
93
95
|
controller: wrappingController,
|
|
94
96
|
initialFocus,
|
|
95
|
-
originalSignal:
|
|
97
|
+
originalSignal: signal
|
|
96
98
|
};
|
|
97
99
|
const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
|
|
98
100
|
if (suspendedTrapIndex >= 0) {
|
|
99
101
|
suspendedTrapStack.splice(suspendedTrapIndex, 1);
|
|
100
102
|
}
|
|
103
|
+
if (!abortSignal) {
|
|
104
|
+
return controller;
|
|
105
|
+
}
|
|
101
106
|
}
|
|
102
107
|
exports.focusTrap = focusTrap;
|
|
@@ -4,7 +4,6 @@ export interface IterateFocusableElements {
|
|
|
4
4
|
onlyTabbable?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
|
|
7
|
-
export declare function focusIfNeeded(elem?: HTMLElement): void;
|
|
8
7
|
export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
|
|
9
8
|
export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
|
|
10
9
|
export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.
|
|
3
|
+
exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
|
|
4
4
|
function* iterateFocusableElements(container, options = {}) {
|
|
5
5
|
var _a, _b;
|
|
6
6
|
const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
|
|
@@ -32,12 +32,6 @@ function* iterateFocusableElements(container, options = {}) {
|
|
|
32
32
|
return undefined;
|
|
33
33
|
}
|
|
34
34
|
exports.iterateFocusableElements = iterateFocusableElements;
|
|
35
|
-
function focusIfNeeded(elem) {
|
|
36
|
-
if (document.activeElement !== elem) {
|
|
37
|
-
elem === null || elem === void 0 ? void 0 : elem.focus();
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
exports.focusIfNeeded = focusIfNeeded;
|
|
41
35
|
function getFocusableChild(container, lastChild = false) {
|
|
42
36
|
return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
|
|
43
37
|
}
|
package/dist/esm/focus-trap.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function focusTrap(container: HTMLElement,
|
|
1
|
+
export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
|
package/dist/esm/focus-trap.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
|
|
2
2
|
import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
|
|
3
3
|
eventListenerSignalPolyfill();
|
|
4
4
|
const suspendedTrapStack = [];
|
|
@@ -6,7 +6,7 @@ let activeTrap = undefined;
|
|
|
6
6
|
function tryReactivate() {
|
|
7
7
|
const trapToReactivate = suspendedTrapStack.pop();
|
|
8
8
|
if (trapToReactivate) {
|
|
9
|
-
focusTrap(trapToReactivate.container, trapToReactivate.
|
|
9
|
+
focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
function followSignal(signal) {
|
|
@@ -16,7 +16,9 @@ function followSignal(signal) {
|
|
|
16
16
|
});
|
|
17
17
|
return controller;
|
|
18
18
|
}
|
|
19
|
-
export function focusTrap(container,
|
|
19
|
+
export function focusTrap(container, initialFocus, abortSignal) {
|
|
20
|
+
const controller = new AbortController();
|
|
21
|
+
const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
|
|
20
22
|
container.setAttribute('data-focus-trap', 'active');
|
|
21
23
|
const sentinelStart = document.createElement('span');
|
|
22
24
|
sentinelStart.setAttribute('class', 'sentinel');
|
|
@@ -45,22 +47,22 @@ export function focusTrap(container, abortSignal, initialFocus) {
|
|
|
45
47
|
}
|
|
46
48
|
else {
|
|
47
49
|
if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
|
|
48
|
-
|
|
50
|
+
lastFocusedChild.focus();
|
|
49
51
|
return;
|
|
50
52
|
}
|
|
51
53
|
else if (initialFocus && container.contains(initialFocus)) {
|
|
52
|
-
|
|
54
|
+
initialFocus.focus();
|
|
53
55
|
return;
|
|
54
56
|
}
|
|
55
57
|
else {
|
|
56
58
|
const firstFocusableChild = getFocusableChild(container);
|
|
57
|
-
|
|
59
|
+
firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
|
|
58
60
|
return;
|
|
59
61
|
}
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
|
-
const wrappingController = followSignal(
|
|
65
|
+
const wrappingController = followSignal(signal);
|
|
64
66
|
if (activeTrap) {
|
|
65
67
|
const suspendedTrap = activeTrap;
|
|
66
68
|
activeTrap.container.setAttribute('data-focus-trap', 'suspended');
|
|
@@ -70,7 +72,7 @@ export function focusTrap(container, abortSignal, initialFocus) {
|
|
|
70
72
|
wrappingController.signal.addEventListener('abort', () => {
|
|
71
73
|
activeTrap = undefined;
|
|
72
74
|
});
|
|
73
|
-
|
|
75
|
+
signal.addEventListener('abort', () => {
|
|
74
76
|
container.removeAttribute('data-focus-trap');
|
|
75
77
|
const sentinels = container.getElementsByClassName('sentinel');
|
|
76
78
|
while (sentinels.length > 0)
|
|
@@ -89,10 +91,13 @@ export function focusTrap(container, abortSignal, initialFocus) {
|
|
|
89
91
|
container,
|
|
90
92
|
controller: wrappingController,
|
|
91
93
|
initialFocus,
|
|
92
|
-
originalSignal:
|
|
94
|
+
originalSignal: signal
|
|
93
95
|
};
|
|
94
96
|
const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
|
|
95
97
|
if (suspendedTrapIndex >= 0) {
|
|
96
98
|
suspendedTrapStack.splice(suspendedTrapIndex, 1);
|
|
97
99
|
}
|
|
100
|
+
if (!abortSignal) {
|
|
101
|
+
return controller;
|
|
102
|
+
}
|
|
98
103
|
}
|
|
@@ -4,7 +4,6 @@ export interface IterateFocusableElements {
|
|
|
4
4
|
onlyTabbable?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
|
|
7
|
-
export declare function focusIfNeeded(elem?: HTMLElement): void;
|
|
8
7
|
export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
|
|
9
8
|
export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
|
|
10
9
|
export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;
|
|
@@ -28,11 +28,6 @@ export function* iterateFocusableElements(container, options = {}) {
|
|
|
28
28
|
}
|
|
29
29
|
return undefined;
|
|
30
30
|
}
|
|
31
|
-
export function focusIfNeeded(elem) {
|
|
32
|
-
if (document.activeElement !== elem) {
|
|
33
|
-
elem === null || elem === void 0 ? void 0 : elem.focus();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
31
|
export function getFocusableChild(container, lastChild = false) {
|
|
37
32
|
return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
|
|
38
33
|
}
|
package/package.json
CHANGED
|
@@ -1,39 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/behaviors",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-2022224222547",
|
|
4
4
|
"description": "Shared behaviors for JavaScript components",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": {
|
|
9
|
-
"
|
|
9
|
+
"module": "./dist/esm/index.js",
|
|
10
|
+
"import": "./dist/esm/index.js",
|
|
10
11
|
"require": "./dist/cjs/index.js",
|
|
11
|
-
"
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
12
13
|
},
|
|
13
14
|
"./utils": {
|
|
14
|
-
"
|
|
15
|
+
"module": "./dist/esm/utils/index.js",
|
|
16
|
+
"import": "./dist/esm/utils/index.js",
|
|
15
17
|
"require": "./dist/cjs/utils/index.js",
|
|
16
|
-
"
|
|
17
|
-
},
|
|
18
|
-
"./components/modal-dialog": {
|
|
19
|
-
"types": "./dist/components/modal-dialog.d.ts",
|
|
20
|
-
"require": "./dist/cjs/components/modal-dialog.js",
|
|
21
|
-
"module": "./dist/esm/components/modal-dialog.js"
|
|
18
|
+
"types": "./dist/utils/index.d.ts"
|
|
22
19
|
}
|
|
23
20
|
},
|
|
24
21
|
"types": "dist/cjs/index.d.ts",
|
|
25
22
|
"files": [
|
|
26
23
|
"dist",
|
|
27
|
-
"utils"
|
|
28
|
-
"modal-dialog"
|
|
24
|
+
"utils"
|
|
29
25
|
],
|
|
30
26
|
"sideEffects": [
|
|
31
27
|
"dist/esm/focus-zone.js",
|
|
32
28
|
"dist/esm/focus-trap.js",
|
|
33
29
|
"dist/cjs/focus-zone.js",
|
|
34
|
-
"dist/cjs/focus-trap.js"
|
|
35
|
-
"dist/esm/components/modal-dialog.js",
|
|
36
|
-
"dist/cjs/components/modal-dialog.js"
|
|
30
|
+
"dist/cjs/focus-trap.js"
|
|
37
31
|
],
|
|
38
32
|
"scripts": {
|
|
39
33
|
"lint": "eslint src/",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
declare class ModalDialogElement extends HTMLElement {
|
|
2
|
-
#private;
|
|
3
|
-
get open(): boolean;
|
|
4
|
-
set open(value: boolean);
|
|
5
|
-
connectedCallback(): void;
|
|
6
|
-
disconnectedCallback(): void;
|
|
7
|
-
show(): void;
|
|
8
|
-
close(): void;
|
|
9
|
-
}
|
|
10
|
-
declare global {
|
|
11
|
-
interface Window {
|
|
12
|
-
ModalDialogElement: typeof ModalDialogElement;
|
|
13
|
-
}
|
|
14
|
-
interface HTMLElementTagNameMap {
|
|
15
|
-
'modal-dialog': ModalDialogElement;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
export default ModalDialogElement;
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
3
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
4
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
5
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
8
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
9
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
10
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
11
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
12
|
-
};
|
|
13
|
-
var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
|
|
14
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
-
const iterate_focusable_elements_js_1 = require("../utils/iterate-focusable-elements.js");
|
|
16
|
-
const focus_trap_js_1 = require("../focus-trap.js");
|
|
17
|
-
class ModalDialogElement extends HTMLElement {
|
|
18
|
-
constructor() {
|
|
19
|
-
super(...arguments);
|
|
20
|
-
_ModalDialogElement_instances.add(this);
|
|
21
|
-
_ModalDialogElement_focusAbortController.set(this, new AbortController());
|
|
22
|
-
_ModalDialogElement_abortController.set(this, new AbortController());
|
|
23
|
-
_ModalDialogElement_openButton.set(this, void 0);
|
|
24
|
-
}
|
|
25
|
-
get open() {
|
|
26
|
-
return this.hasAttribute('open');
|
|
27
|
-
}
|
|
28
|
-
set open(value) {
|
|
29
|
-
var _a, _b;
|
|
30
|
-
if (value) {
|
|
31
|
-
if (this.open)
|
|
32
|
-
return;
|
|
33
|
-
this.setAttribute('open', '');
|
|
34
|
-
(_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
|
|
35
|
-
document.body.style.overflow = 'hidden';
|
|
36
|
-
if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
|
|
37
|
-
__classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
|
|
38
|
-
}
|
|
39
|
-
(0, focus_trap_js_1.focusTrap)(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
if (!this.open)
|
|
43
|
-
return;
|
|
44
|
-
this.removeAttribute('open');
|
|
45
|
-
(_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
|
|
46
|
-
document.body.style.overflow = 'initial';
|
|
47
|
-
__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
|
|
48
|
-
(0, iterate_focusable_elements_js_1.focusIfNeeded)(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
|
|
49
|
-
__classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
connectedCallback() {
|
|
53
|
-
if (!this.hasAttribute('role'))
|
|
54
|
-
this.setAttribute('role', 'dialog');
|
|
55
|
-
const signal = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").signal;
|
|
56
|
-
this.ownerDocument.addEventListener('click', event => {
|
|
57
|
-
const target = event.target;
|
|
58
|
-
const clickOutsideDialog = target.closest(this.tagName) !== this;
|
|
59
|
-
const button = target === null || target === void 0 ? void 0 : target.closest('button');
|
|
60
|
-
if (!button) {
|
|
61
|
-
if (clickOutsideDialog) {
|
|
62
|
-
this.close();
|
|
63
|
-
}
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
let dialogId = button.getAttribute('data-close-dialog-id');
|
|
67
|
-
if (dialogId === this.id) {
|
|
68
|
-
this.close();
|
|
69
|
-
}
|
|
70
|
-
dialogId = button.getAttribute('data-show-dialog-id');
|
|
71
|
-
if (dialogId === this.id) {
|
|
72
|
-
event.stopPropagation();
|
|
73
|
-
__classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
|
|
74
|
-
this.show();
|
|
75
|
-
}
|
|
76
|
-
}, { signal });
|
|
77
|
-
this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
|
|
78
|
-
}
|
|
79
|
-
disconnectedCallback() {
|
|
80
|
-
__classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").abort();
|
|
81
|
-
}
|
|
82
|
-
show() {
|
|
83
|
-
this.open = true;
|
|
84
|
-
}
|
|
85
|
-
close() {
|
|
86
|
-
this.open = false;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
|
|
90
|
-
var _a;
|
|
91
|
-
if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
|
|
92
|
-
return this.parentElement;
|
|
93
|
-
}
|
|
94
|
-
return null;
|
|
95
|
-
}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
|
|
96
|
-
if (!(event instanceof KeyboardEvent))
|
|
97
|
-
return;
|
|
98
|
-
if (event.isComposing)
|
|
99
|
-
return;
|
|
100
|
-
switch (event.key) {
|
|
101
|
-
case 'Escape':
|
|
102
|
-
if (this.open) {
|
|
103
|
-
this.close();
|
|
104
|
-
event.preventDefault();
|
|
105
|
-
event.stopPropagation();
|
|
106
|
-
}
|
|
107
|
-
break;
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
exports.default = ModalDialogElement;
|
|
111
|
-
if (!window.customElements.get('modal-dialog')) {
|
|
112
|
-
window.ModalDialogElement = ModalDialogElement;
|
|
113
|
-
window.customElements.define('modal-dialog', ModalDialogElement);
|
|
114
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
declare class ModalDialogElement extends HTMLElement {
|
|
2
|
-
#private;
|
|
3
|
-
get open(): boolean;
|
|
4
|
-
set open(value: boolean);
|
|
5
|
-
connectedCallback(): void;
|
|
6
|
-
disconnectedCallback(): void;
|
|
7
|
-
show(): void;
|
|
8
|
-
close(): void;
|
|
9
|
-
}
|
|
10
|
-
declare global {
|
|
11
|
-
interface Window {
|
|
12
|
-
ModalDialogElement: typeof ModalDialogElement;
|
|
13
|
-
}
|
|
14
|
-
interface HTMLElementTagNameMap {
|
|
15
|
-
'modal-dialog': ModalDialogElement;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
export default ModalDialogElement;
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
3
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
4
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
5
|
-
};
|
|
6
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
7
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
10
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
11
|
-
};
|
|
12
|
-
var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
|
|
13
|
-
import { focusIfNeeded } from '../utils/iterate-focusable-elements.js';
|
|
14
|
-
import { focusTrap } from '../focus-trap.js';
|
|
15
|
-
class ModalDialogElement extends HTMLElement {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
_ModalDialogElement_instances.add(this);
|
|
19
|
-
_ModalDialogElement_focusAbortController.set(this, new AbortController());
|
|
20
|
-
_ModalDialogElement_abortController.set(this, new AbortController());
|
|
21
|
-
_ModalDialogElement_openButton.set(this, void 0);
|
|
22
|
-
}
|
|
23
|
-
get open() {
|
|
24
|
-
return this.hasAttribute('open');
|
|
25
|
-
}
|
|
26
|
-
set open(value) {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
if (value) {
|
|
29
|
-
if (this.open)
|
|
30
|
-
return;
|
|
31
|
-
this.setAttribute('open', '');
|
|
32
|
-
(_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay-hidden');
|
|
33
|
-
document.body.style.overflow = 'hidden';
|
|
34
|
-
if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
|
|
35
|
-
__classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
|
|
36
|
-
}
|
|
37
|
-
focusTrap(this, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
if (!this.open)
|
|
41
|
-
return;
|
|
42
|
-
this.removeAttribute('open');
|
|
43
|
-
(_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay-hidden');
|
|
44
|
-
document.body.style.overflow = 'initial';
|
|
45
|
-
__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
|
|
46
|
-
focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
|
|
47
|
-
__classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
connectedCallback() {
|
|
51
|
-
if (!this.hasAttribute('role'))
|
|
52
|
-
this.setAttribute('role', 'dialog');
|
|
53
|
-
const signal = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").signal;
|
|
54
|
-
this.ownerDocument.addEventListener('click', event => {
|
|
55
|
-
const target = event.target;
|
|
56
|
-
const clickOutsideDialog = target.closest(this.tagName) !== this;
|
|
57
|
-
const button = target === null || target === void 0 ? void 0 : target.closest('button');
|
|
58
|
-
if (!button) {
|
|
59
|
-
if (clickOutsideDialog) {
|
|
60
|
-
this.close();
|
|
61
|
-
}
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
let dialogId = button.getAttribute('data-close-dialog-id');
|
|
65
|
-
if (dialogId === this.id) {
|
|
66
|
-
this.close();
|
|
67
|
-
}
|
|
68
|
-
dialogId = button.getAttribute('data-show-dialog-id');
|
|
69
|
-
if (dialogId === this.id) {
|
|
70
|
-
event.stopPropagation();
|
|
71
|
-
__classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
|
|
72
|
-
this.show();
|
|
73
|
-
}
|
|
74
|
-
}, { signal });
|
|
75
|
-
this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
|
|
76
|
-
}
|
|
77
|
-
disconnectedCallback() {
|
|
78
|
-
__classPrivateFieldGet(this, _ModalDialogElement_abortController, "f").abort();
|
|
79
|
-
}
|
|
80
|
-
show() {
|
|
81
|
-
this.open = true;
|
|
82
|
-
}
|
|
83
|
-
close() {
|
|
84
|
-
this.open = false;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
|
|
88
|
-
var _a;
|
|
89
|
-
if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('Overlay-backdrop')) {
|
|
90
|
-
return this.parentElement;
|
|
91
|
-
}
|
|
92
|
-
return null;
|
|
93
|
-
}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
|
|
94
|
-
if (!(event instanceof KeyboardEvent))
|
|
95
|
-
return;
|
|
96
|
-
if (event.isComposing)
|
|
97
|
-
return;
|
|
98
|
-
switch (event.key) {
|
|
99
|
-
case 'Escape':
|
|
100
|
-
if (this.open) {
|
|
101
|
-
this.close();
|
|
102
|
-
event.preventDefault();
|
|
103
|
-
event.stopPropagation();
|
|
104
|
-
}
|
|
105
|
-
break;
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
export default ModalDialogElement;
|
|
109
|
-
if (!window.customElements.get('modal-dialog')) {
|
|
110
|
-
window.ModalDialogElement = ModalDialogElement;
|
|
111
|
-
window.customElements.define('modal-dialog', ModalDialogElement);
|
|
112
|
-
}
|