@primer/behaviors 0.0.0-202202813730 → 0.0.0-2022031145415

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.
Files changed (7) hide show
  1. package/dist/cjs/components/modal-dialog.d.ts +10 -1
  2. package/dist/cjs/components/modal-dialog.js +17 -4
  3. package/dist/cjs/focus-trap.js +28 -7
  4. package/dist/esm/components/modal-dialog.d.ts +10 -1
  5. package/dist/esm/components/modal-dialog.js +18 -3
  6. package/dist/esm/focus-trap.js +28 -7
  7. package/package.json +10 -7
package/dist/cjs/components/modal-dialog.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare class ModalDialogElement extends HTMLElement {
1
+ declare class ModalDialogElement extends HTMLElement {
2
2
  private abortController;
3
3
  constructor();
4
4
  connectedCallback(): void;
@@ -6,3 +6,12 @@ export declare class ModalDialogElement extends HTMLElement {
6
6
  show(): void;
7
7
  close(): void;
8
8
  }
9
+ declare global {
10
+ interface Window {
11
+ ModalDialogElement: typeof ModalDialogElement;
12
+ }
13
+ interface HTMLElementTagNameMap {
14
+ 'modal-dialog': ModalDialogElement;
15
+ }
16
+ }
17
+ export default ModalDialogElement;
package/dist/cjs/components/modal-dialog.js CHANGED
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ModalDialogElement = void 0;
4
3
  const focus_trap_js_1 = require("../focus-trap.js");
5
4
  class ModalDialogElement extends HTMLElement {
6
5
  constructor() {
7
6
  var _a, _b;
8
7
  super();
9
8
  (_a = this.querySelector('.close-button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.close());
10
- (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.show());
9
+ (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', (event) => {
10
+ event.stopPropagation();
11
+ this.show();
12
+ });
11
13
  }
12
14
  connectedCallback() {
13
15
  if (!this.hasAttribute('role'))
@@ -15,7 +17,8 @@ class ModalDialogElement extends HTMLElement {
15
17
  const subscriptions = [
16
18
  fromEvent(this, 'compositionstart', e => trackComposition(this, e)),
17
19
  fromEvent(this, 'compositionend', e => trackComposition(this, e)),
18
- fromEvent(this, 'keydown', e => keydown(this, e))
20
+ fromEvent(this, 'keydown', e => keydown(this, e)),
21
+ fromEvent(window, 'click', e => clickToDismiss(this, e))
19
22
  ];
20
23
  states.set(this, { subscriptions, loaded: false, isComposing: false });
21
24
  }
@@ -55,7 +58,6 @@ class ModalDialogElement extends HTMLElement {
55
58
  (_b = this.abortController) === null || _b === void 0 ? void 0 : _b.abort();
56
59
  }
57
60
  }
58
- exports.ModalDialogElement = ModalDialogElement;
59
61
  const states = new WeakMap();
60
62
  function fromEvent(target, eventName, onNext, options = false) {
61
63
  target.addEventListener(eventName, onNext, options);
@@ -87,3 +89,14 @@ function trackComposition(dialog, event) {
87
89
  return;
88
90
  state.isComposing = event.type === 'compositionstart';
89
91
  }
92
+ function clickToDismiss(dialog, event) {
93
+ const target = event.target;
94
+ if (dialog.hasAttribute('open') && target && !target.matches(`#${dialog.id}, #${dialog.id} *`)) {
95
+ dialog.close();
96
+ }
97
+ }
98
+ exports.default = ModalDialogElement;
99
+ if (!window.customElements.get('modal-dialog')) {
100
+ window.ModalDialogElement = ModalDialogElement;
101
+ window.customElements.define('modal-dialog', ModalDialogElement);
102
+ }
package/dist/cjs/focus-trap.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.focusTrap = void 0;
4
- const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
5
4
  const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
5
+ const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
6
6
  (0, event_listener_signal_js_1.polyfill)();
7
7
  const suspendedTrapStack = [];
8
8
  let activeTrap = undefined;
@@ -41,12 +41,29 @@ function focusTrap(container, initialFocus, abortSignal) {
41
41
  };
42
42
  container.prepend(sentinelStart);
43
43
  container.append(sentinelEnd);
44
- if (initialFocus) {
45
- initialFocus.focus();
46
- }
47
- else {
48
- const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
49
- firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
44
+ let lastFocusedChild = undefined;
45
+ function ensureTrapZoneHasFocus(focusedElement) {
46
+ if (focusedElement instanceof HTMLElement && document.contains(container)) {
47
+ if (container.contains(focusedElement)) {
48
+ lastFocusedChild = focusedElement;
49
+ return;
50
+ }
51
+ else {
52
+ if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
53
+ lastFocusedChild.focus();
54
+ return;
55
+ }
56
+ else if (initialFocus && container.contains(initialFocus)) {
57
+ initialFocus.focus();
58
+ return;
59
+ }
60
+ else {
61
+ const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
62
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
63
+ return;
64
+ }
65
+ }
66
+ }
50
67
  }
51
68
  const wrappingController = followSignal(signal);
52
69
  if (activeTrap) {
@@ -69,6 +86,10 @@ function focusTrap(container, initialFocus, abortSignal) {
69
86
  }
70
87
  tryReactivate();
71
88
  });
89
+ document.addEventListener('focus', event => {
90
+ ensureTrapZoneHasFocus(event.target);
91
+ }, { signal: wrappingController.signal, capture: true });
92
+ ensureTrapZoneHasFocus(document.activeElement);
72
93
  activeTrap = {
73
94
  container,
74
95
  controller: wrappingController,
package/dist/esm/components/modal-dialog.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare class ModalDialogElement extends HTMLElement {
1
+ declare class ModalDialogElement extends HTMLElement {
2
2
  private abortController;
3
3
  constructor();
4
4
  connectedCallback(): void;
@@ -6,3 +6,12 @@ export declare class ModalDialogElement extends HTMLElement {
6
6
  show(): void;
7
7
  close(): void;
8
8
  }
9
+ declare global {
10
+ interface Window {
11
+ ModalDialogElement: typeof ModalDialogElement;
12
+ }
13
+ interface HTMLElementTagNameMap {
14
+ 'modal-dialog': ModalDialogElement;
15
+ }
16
+ }
17
+ export default ModalDialogElement;
package/dist/esm/components/modal-dialog.js CHANGED
@@ -1,10 +1,13 @@
1
1
  import { focusTrap } from '../focus-trap.js';
2
- export class ModalDialogElement extends HTMLElement {
2
+ class ModalDialogElement extends HTMLElement {
3
3
  constructor() {
4
4
  var _a, _b;
5
5
  super();
6
6
  (_a = this.querySelector('.close-button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.close());
7
- (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.show());
7
+ (_b = document.body.querySelector(`.js-dialog-show-${this.id}`)) === null || _b === void 0 ? void 0 : _b.addEventListener('click', (event) => {
8
+ event.stopPropagation();
9
+ this.show();
10
+ });
8
11
  }
9
12
  connectedCallback() {
10
13
  if (!this.hasAttribute('role'))
@@ -12,7 +15,8 @@ export class ModalDialogElement extends HTMLElement {
12
15
  const subscriptions = [
13
16
  fromEvent(this, 'compositionstart', e => trackComposition(this, e)),
14
17
  fromEvent(this, 'compositionend', e => trackComposition(this, e)),
15
- fromEvent(this, 'keydown', e => keydown(this, e))
18
+ fromEvent(this, 'keydown', e => keydown(this, e)),
19
+ fromEvent(window, 'click', e => clickToDismiss(this, e))
16
20
  ];
17
21
  states.set(this, { subscriptions, loaded: false, isComposing: false });
18
22
  }
@@ -83,3 +87,14 @@ function trackComposition(dialog, event) {
83
87
  return;
84
88
  state.isComposing = event.type === 'compositionstart';
85
89
  }
90
+ function clickToDismiss(dialog, event) {
91
+ const target = event.target;
92
+ if (dialog.hasAttribute('open') && target && !target.matches(`#${dialog.id}, #${dialog.id} *`)) {
93
+ dialog.close();
94
+ }
95
+ }
96
+ export default ModalDialogElement;
97
+ if (!window.customElements.get('modal-dialog')) {
98
+ window.ModalDialogElement = ModalDialogElement;
99
+ window.customElements.define('modal-dialog', ModalDialogElement);
100
+ }
package/dist/esm/focus-trap.js CHANGED
@@ -1,5 +1,5 @@
1
+ import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
1
2
  import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
2
- import { getFocusableChild } from './utils/iterate-focusable-elements.js';
3
3
  eventListenerSignalPolyfill();
4
4
  const suspendedTrapStack = [];
5
5
  let activeTrap = undefined;
@@ -38,12 +38,29 @@ export function focusTrap(container, initialFocus, abortSignal) {
38
38
  };
39
39
  container.prepend(sentinelStart);
40
40
  container.append(sentinelEnd);
41
- if (initialFocus) {
42
- initialFocus.focus();
43
- }
44
- else {
45
- const firstFocusableChild = getFocusableChild(container);
46
- firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
41
+ let lastFocusedChild = undefined;
42
+ function ensureTrapZoneHasFocus(focusedElement) {
43
+ if (focusedElement instanceof HTMLElement && document.contains(container)) {
44
+ if (container.contains(focusedElement)) {
45
+ lastFocusedChild = focusedElement;
46
+ return;
47
+ }
48
+ else {
49
+ if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
50
+ lastFocusedChild.focus();
51
+ return;
52
+ }
53
+ else if (initialFocus && container.contains(initialFocus)) {
54
+ initialFocus.focus();
55
+ return;
56
+ }
57
+ else {
58
+ const firstFocusableChild = getFocusableChild(container);
59
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
60
+ return;
61
+ }
62
+ }
63
+ }
47
64
  }
48
65
  const wrappingController = followSignal(signal);
49
66
  if (activeTrap) {
@@ -66,6 +83,10 @@ export function focusTrap(container, initialFocus, abortSignal) {
66
83
  }
67
84
  tryReactivate();
68
85
  });
86
+ document.addEventListener('focus', event => {
87
+ ensureTrapZoneHasFocus(event.target);
88
+ }, { signal: wrappingController.signal, capture: true });
89
+ ensureTrapZoneHasFocus(document.activeElement);
69
90
  activeTrap = {
70
91
  container,
71
92
  controller: wrappingController,
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-202202813730",
3
+ "version": "0.0.0-2022031145415",
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
- "types": "./dist/cjs/index.d.ts",
9
+ "types": "./dist/index.d.ts",
10
10
  "require": "./dist/cjs/index.js",
11
11
  "module": "./dist/esm/index.js"
12
12
  },
13
13
  "./utils": {
14
- "types": "./dist/cjs/utils/index.d.ts",
14
+ "types": "./dist/utils/index.d.ts",
15
15
  "require": "./dist/cjs/utils/index.js",
16
16
  "module": "./dist/esm/utils/index.js"
17
17
  },
18
- "./modal-dialog": {
19
- "types": "./dist/cjs/components/modal-dialog.d.ts",
18
+ "./components/modal-dialog": {
19
+ "types": "./dist/components/modal-dialog.d.ts",
20
20
  "require": "./dist/cjs/components/modal-dialog.js",
21
21
  "module": "./dist/esm/components/modal-dialog.js"
22
22
  }
@@ -24,13 +24,16 @@
24
24
  "types": "dist/cjs/index.d.ts",
25
25
  "files": [
26
26
  "dist",
27
- "utils"
27
+ "utils",
28
+ "modal-dialog"
28
29
  ],
29
30
  "sideEffects": [
30
31
  "dist/esm/focus-zone.js",
31
32
  "dist/esm/focus-trap.js",
32
33
  "dist/cjs/focus-zone.js",
33
- "dist/cjs/focus-trap.js"
34
+ "dist/cjs/focus-trap.js",
35
+ "dist/esm/components/modal-dialog.js",
36
+ "dist/cjs/components/modal-dialog.js"
34
37
  ],
35
38
  "scripts": {
36
39
  "lint": "eslint src/",