@shoper/phoenix_design_system 1.18.34-1 → 1.18.34-3

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 (10) hide show
  1. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +30 -1
  2. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +2 -2
  4. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts +5 -2
  5. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js +30 -1
  6. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts +1 -1
  8. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js +2 -2
  9. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts +2 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js CHANGED
@@ -3,10 +3,13 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var utilities = require('@dreamcommerce/utilities');
6
+ var portal_constants = require('../../../components/portal/portal_constants.js');
7
+ var backdrop_constants = require('../../../components/backdrop/backdrop_constants.js');
6
8
 
7
9
  class BaseFocusTrapStrategy {
8
- constructor(getContainer) {
10
+ constructor(getContainer, getOpener) {
9
11
  this.getContainer = getContainer;
12
+ this.getOpener = getOpener;
10
13
  this.active = false;
11
14
  this.noAutofocus = false;
12
15
  this._handleKeyDown = (ev) => {
@@ -32,18 +35,44 @@ class BaseFocusTrapStrategy {
32
35
  }
33
36
  }
34
37
  };
38
+ this._addInertToBodyChildrenElements = () => {
39
+ const container = this.getContainer();
40
+ [...document.body.children].forEach((child) => {
41
+ const isPortalTarget = child.tagName === portal_constants.PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
42
+ const isAriaLiveContainer = child.hasAttribute('aria-live');
43
+ const isBackdrop = child.tagName === backdrop_constants.BACKDROP_NAME.toUpperCase();
44
+ const containsContainer = container ? child.contains(container) : false;
45
+ if (!isPortalTarget && !isAriaLiveContainer && !isBackdrop && !containsContainer) {
46
+ child.setAttribute('inert', '');
47
+ }
48
+ });
49
+ };
50
+ this._removeInertFromBodyChildrenElements = () => {
51
+ [...document.body.children].forEach((child) => {
52
+ child.removeAttribute('inert');
53
+ });
54
+ };
35
55
  }
36
56
  attach() {
57
+ var _a, _b;
37
58
  document.addEventListener('keydown', this._handleKeyDown);
59
+ (_b = (_a = this.getOpener) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', 'dialog');
38
60
  }
39
61
  detach() {
40
62
  document.removeEventListener('keydown', this._handleKeyDown);
41
63
  }
42
64
  activate() {
65
+ var _a, _b, _c;
43
66
  this.active = true;
67
+ (_b = (_a = this.getOpener) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', 'dialog');
68
+ (_c = this.getContainer()) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-modal', 'true');
69
+ this._addInertToBodyChildrenElements();
44
70
  }
45
71
  deactivate() {
72
+ var _a;
46
73
  this.active = false;
74
+ (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-modal');
75
+ this._removeInertFromBodyChildrenElements();
47
76
  }
48
77
  getFocusableElements(container) {
49
78
  return utilities.UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js CHANGED
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var base_focus_trap_strategy = require('../base_focus_trap_strategy.js');
6
6
 
7
7
  class CyclicFocusTrapStrategy extends base_focus_trap_strategy.BaseFocusTrapStrategy {
8
- constructor({ getContainer }) {
9
- super(getContainer);
8
+ constructor({ getContainer, getOpener }) {
9
+ super(getContainer, getOpener);
10
10
  }
11
11
  }
12
12
 
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { IBaseFocusTrapStrategy } from './base_focus_trap_strategy_types';
2
2
  export declare abstract class BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
3
- protected readonly getContainer: () => HTMLElement | undefined;
3
+ protected readonly getContainer: () => HTMLElement | null | undefined;
4
+ protected readonly getOpener?: (() => HTMLElement | null | undefined) | undefined;
4
5
  protected active: boolean;
5
6
  noAutofocus: boolean;
6
- constructor(getContainer: () => HTMLElement | undefined);
7
+ constructor(getContainer: () => HTMLElement | null | undefined, getOpener?: (() => HTMLElement | null | undefined) | undefined);
7
8
  attach(): void;
8
9
  detach(): void;
9
10
  activate(): void;
10
11
  deactivate(): void;
11
12
  getFocusableElements(container: HTMLElement): HTMLElement[];
12
13
  protected _handleKeyDown: (ev: KeyboardEvent) => void;
14
+ private _addInertToBodyChildrenElements;
15
+ private _removeInertFromBodyChildrenElements;
13
16
  private _isElementTrulyFocusable;
14
17
  }
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js CHANGED
@@ -1,8 +1,11 @@
1
1
  import { UiDomUtils } from '@dreamcommerce/utilities';
2
+ import { PORTAL_TARGET_COMPONENT_NAME } from '../../../components/portal/portal_constants.js';
3
+ import { BACKDROP_NAME } from '../../../components/backdrop/backdrop_constants.js';
2
4
 
3
5
  class BaseFocusTrapStrategy {
4
- constructor(getContainer) {
6
+ constructor(getContainer, getOpener) {
5
7
  this.getContainer = getContainer;
8
+ this.getOpener = getOpener;
6
9
  this.active = false;
7
10
  this.noAutofocus = false;
8
11
  this._handleKeyDown = (ev) => {
@@ -28,18 +31,44 @@ class BaseFocusTrapStrategy {
28
31
  }
29
32
  }
30
33
  };
34
+ this._addInertToBodyChildrenElements = () => {
35
+ const container = this.getContainer();
36
+ [...document.body.children].forEach((child) => {
37
+ const isPortalTarget = child.tagName === PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
38
+ const isAriaLiveContainer = child.hasAttribute('aria-live');
39
+ const isBackdrop = child.tagName === BACKDROP_NAME.toUpperCase();
40
+ const containsContainer = container ? child.contains(container) : false;
41
+ if (!isPortalTarget && !isAriaLiveContainer && !isBackdrop && !containsContainer) {
42
+ child.setAttribute('inert', '');
43
+ }
44
+ });
45
+ };
46
+ this._removeInertFromBodyChildrenElements = () => {
47
+ [...document.body.children].forEach((child) => {
48
+ child.removeAttribute('inert');
49
+ });
50
+ };
31
51
  }
32
52
  attach() {
53
+ var _a, _b;
33
54
  document.addEventListener('keydown', this._handleKeyDown);
55
+ (_b = (_a = this.getOpener) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', 'dialog');
34
56
  }
35
57
  detach() {
36
58
  document.removeEventListener('keydown', this._handleKeyDown);
37
59
  }
38
60
  activate() {
61
+ var _a, _b, _c;
39
62
  this.active = true;
63
+ (_b = (_a = this.getOpener) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', 'dialog');
64
+ (_c = this.getContainer()) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-modal', 'true');
65
+ this._addInertToBodyChildrenElements();
40
66
  }
41
67
  deactivate() {
68
+ var _a;
42
69
  this.active = false;
70
+ (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-modal');
71
+ this._removeInertFromBodyChildrenElements();
43
72
  }
44
73
  getFocusableElements(container) {
45
74
  return UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/base_focus_trap_strategy.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.d.ts CHANGED
@@ -2,5 +2,5 @@ import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy';
2
2
  import { IBaseFocusTrapStrategy } from '../base_focus_trap_strategy_types';
3
3
  import { TCyclicFocusTrapStrategyProps } from './cyclic_focus_trap_strategy_types';
4
4
  export declare class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy implements IBaseFocusTrapStrategy {
5
- constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
5
+ constructor({ getContainer, getOpener }: TCyclicFocusTrapStrategyProps);
6
6
  }
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { BaseFocusTrapStrategy } from '../base_focus_trap_strategy.js';
2
2
 
3
3
  class CyclicFocusTrapStrategy extends BaseFocusTrapStrategy {
4
- constructor({ getContainer }) {
5
- super(getContainer);
4
+ constructor({ getContainer, getOpener }) {
5
+ super(getContainer, getOpener);
6
6
  }
7
7
  }
8
8
 
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy/cyclic_focus_trap_strategy_types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export declare type TCyclicFocusTrapStrategyProps = {
2
- getContainer: () => HTMLElement | undefined;
2
+ getContainer: () => HTMLElement | null | undefined;
3
+ getOpener?: () => HTMLElement | null | undefined;
3
4
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.34-1",
5
+ "version": "1.18.34-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",