@shoper/phoenix_design_system 1.18.23-7 → 1.18.23-8

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 (25) hide show
  1. package/build/cjs/packages/phoenix/src/components/modal/modal.js +2 -10
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js +2 -10
  4. package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js +1 -0
  6. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js +13 -41
  8. package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +0 -4
  10. package/build/esm/packages/phoenix/src/components/modal/modal.js +2 -10
  11. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/sheet/sheet.d.ts +0 -4
  13. package/build/esm/packages/phoenix/src/components/sheet/sheet.js +2 -10
  14. package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.d.ts +3 -7
  16. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.d.ts +2 -2
  17. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.d.ts +1 -0
  18. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js +1 -0
  19. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.d.ts +1 -8
  21. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.d.ts +5 -17
  22. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js +13 -41
  23. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.d.ts +2 -2
  25. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -6,7 +6,6 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
7
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
8
  var decorators_js = require('@lit/reactive-element/decorators.js');
9
- require('@lit/reactive-element');
10
9
  var litHtml = require('lit-html');
11
10
  var ref_js = require('lit-html/directives/ref.js');
12
11
  var portal_constants = require('../portal/portal_constants.js');
@@ -27,8 +26,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
27
26
  this.noAutofocus = false;
28
27
  this._focusedToggler = null;
29
28
  this._contentRef = ref_js.createRef();
30
- this._focusSentinelStart = ref_js.createRef();
31
- this._focusSentinelEnd = ref_js.createRef();
32
29
  this._propsChangeStrategies = {
33
30
  [modal_constants.MODAL_OPENED_PROP]: {
34
31
  true: () => {
@@ -136,10 +133,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
136
133
  document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
137
134
  document.removeEventListener('keydown', this._bindCloseOnEsc);
138
135
  }
139
- firstUpdated(props) {
140
- super.firstUpdated(props);
141
- this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
142
- }
143
136
  updated(changedProps) {
144
137
  if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
145
138
  this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
@@ -163,7 +156,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
163
156
  setTimeout(() => {
164
157
  var _a;
165
158
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
166
- this._focusTrapController.strategy.focusFirst();
167
159
  resolve();
168
160
  }, transitionDuration);
169
161
  });
@@ -191,11 +183,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
191
183
  return litHtml.html `
192
184
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
193
185
  <div class="modal-wrapper ${this.class}">
194
- <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
186
+ <div tabindex="0"></div>
195
187
  <div ${ref_js.ref(this._contentRef)} class="modal" role="dialog" aria-label="${this.modalLabel}">
196
188
  <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
197
189
  </div>
198
- <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
190
+ <div tabindex="0"></div>
199
191
  </div>
200
192
  </h-portal>
201
193
  `;
package/build/cjs/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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;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;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,wBAAwB,4CAAgD;AACxE;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;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;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/components/sheet/sheet.js CHANGED
@@ -6,7 +6,6 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
7
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
8
  var decorators_js = require('@lit/reactive-element/decorators.js');
9
- require('@lit/reactive-element');
10
9
  var litHtml = require('lit-html');
11
10
  var ref_js = require('lit-html/directives/ref.js');
12
11
  var portal_constants = require('../portal/portal_constants.js');
@@ -26,8 +25,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
26
25
  this.sheetLabel = '';
27
26
  this._focusedToggler = null;
28
27
  this._contentRef = ref_js.createRef();
29
- this._focusSentinelStart = ref_js.createRef();
30
- this._focusSentinelEnd = ref_js.createRef();
31
28
  this._propsChangeStrategies = {
32
29
  [sheet_constants.SHEET_OPENED_PROP]: {
33
30
  true: () => {
@@ -134,10 +131,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
134
131
  document.removeEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
135
132
  document.removeEventListener('keydown', this._bindCloseOnEsc);
136
133
  }
137
- firstUpdated(props) {
138
- super.firstUpdated(props);
139
- this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
140
- }
141
134
  updated(changedProps) {
142
135
  if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
143
136
  this._propsChangeStrategies[sheet_constants.SHEET_OPENED_PROP][String(this[sheet_constants.SHEET_OPENED_PROP])]();
@@ -158,7 +151,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
158
151
  setTimeout(() => {
159
152
  var _a;
160
153
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
161
- this._focusTrapController.strategy.focusFirst();
162
154
  resolve();
163
155
  }, transitionDuration);
164
156
  });
@@ -184,11 +176,11 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
184
176
  return litHtml.html `
185
177
  <h-portal ?disabled="${!this.opened}" to="${sheet_constants.SHEETS_PORTAL_NAME}" hidden>
186
178
  <div class="sheet-wrapper ${this.class}">
187
- <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
179
+ <div tabindex="0"></div>
188
180
  <div ${ref_js.ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
189
181
  <div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
190
182
  </div>
191
- <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
183
+ <div tabindex="0"></div>
192
184
  </div>
193
185
  </h-portal>
194
186
  `;
package/build/cjs/packages/phoenix/src/components/sheet/sheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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;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;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,wBAAwB,4CAAgD;AACxE;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;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;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/focus_trap_strategy.js CHANGED
@@ -8,6 +8,7 @@ class FocusTrapStrategy {
8
8
  constructor(getContainer) {
9
9
  this.getContainer = getContainer;
10
10
  this.active = false;
11
+ this.noAutofocus = false;
11
12
  this._handleKeyDown = (ev) => {
12
13
  if (!this.active || ev.code !== 'Tab')
13
14
  return;
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/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;"}
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;"}
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js CHANGED
@@ -2,63 +2,35 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
- require('@dreamcommerce/utilities');
7
5
  var focus_trap_strategy = require('./focus_trap_strategy.js');
8
6
 
9
- var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
10
7
  /**
11
8
  * Sentinel mode focus trap.
12
9
  *
13
- * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
14
- * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
15
- * background content is marked `inert`, giving the browser an extra safety net.
16
- *
17
- * Reacts on `keyup` so that the browser's native focus movement has already completed
18
- * before we redirect it.
10
+ * Traps focus within the container using `keydown` interception. On `activate()`,
11
+ * automatically moves focus to the first focusable element inside the container.
12
+ * Appropriate for modal dialogs and sheets where background content is marked `inert`.
19
13
  */
20
14
  class SentinelFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
21
15
  constructor({ getContainer, noAutofocus = false }) {
22
16
  super(getContainer);
23
- _SentinelFocusTrapStrategy_sentinelStart.set(this, void 0);
24
- _SentinelFocusTrapStrategy_sentinelEnd.set(this, void 0);
25
17
  this.noAutofocus = noAutofocus;
26
18
  }
27
- /** Call once in firstUpdated with the two bookend sentinel elements. */
28
- setSentinels(start, end) {
29
- tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelStart, start, "f");
30
- tslib_es6.__classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelEnd, end, "f");
31
- }
32
- /**
33
- * Move focus to the first real interactive element after the open transition
34
- * completes (skips sentinelStart at index 0).
35
- */
36
- focusFirst() {
37
- if (this.noAutofocus)
38
- return;
39
- requestAnimationFrame(() => {
40
- const container = this.getContainer();
41
- if (!container)
42
- return;
43
- const focusableElements = this.getFocusableElements(container);
44
- if (focusableElements.length > 0) {
45
- focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
46
- }
47
- });
48
- }
49
19
  activate() {
50
20
  this.active = true;
51
21
  if (!this.noAutofocus) {
52
- const scrollY = window.scrollY;
53
- setTimeout(() => {
54
- var _a;
55
- (_a = tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
56
- window.scrollTo(0, scrollY);
57
- }, 0);
22
+ requestAnimationFrame(() => {
23
+ const container = this.getContainer();
24
+ if (!container)
25
+ return;
26
+ const focusableElements = this.getFocusableElements(container);
27
+ if (focusableElements.length > 0) {
28
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
29
+ }
30
+ });
58
31
  }
59
32
  }
60
- }
61
- _SentinelFocusTrapStrategy_sentinelStart = new WeakMap(), _SentinelFocusTrapStrategy_sentinelEnd = new WeakMap();
33
+ }
62
34
 
63
35
  exports.SentinelFocusTrapStrategy = SentinelFocusTrapStrategy;
64
36
  //# sourceMappingURL=sentinel_focus_trap_strategy.js.map
package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;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;"}
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { TemplateResult } from 'lit-html';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import { PropertyValues } from '@lit/reactive-element';
4
3
  export declare class HModal extends PhoenixLightLitElement {
5
4
  opened: boolean;
6
5
  class: string;
@@ -9,8 +8,6 @@ export declare class HModal extends PhoenixLightLitElement {
9
8
  noAutofocus: boolean;
10
9
  private _focusedToggler;
11
10
  private _contentRef;
12
- private _focusSentinelStart;
13
- private _focusSentinelEnd;
14
11
  private _propsChangeStrategies;
15
12
  private static openModals;
16
13
  private _backdropController;
@@ -20,7 +17,6 @@ export declare class HModal extends PhoenixLightLitElement {
20
17
  constructor();
21
18
  connectedCallback(): void;
22
19
  disconnectedCallback(): void;
23
- firstUpdated(props: PropertyValues): void;
24
20
  updated(changedProps: Map<string, any>): void;
25
21
  private _handleCloseFromCloseComponent;
26
22
  private _bindCloseOnEsc;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -2,7 +2,6 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
2
2
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
3
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
4
4
  import { property } from '@lit/reactive-element/decorators.js';
5
- import '@lit/reactive-element';
6
5
  import { html } from 'lit-html';
7
6
  import { createRef, ref } from 'lit-html/directives/ref.js';
8
7
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
@@ -23,8 +22,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
23
22
  this.noAutofocus = false;
24
23
  this._focusedToggler = null;
25
24
  this._contentRef = createRef();
26
- this._focusSentinelStart = createRef();
27
- this._focusSentinelEnd = createRef();
28
25
  this._propsChangeStrategies = {
29
26
  [MODAL_OPENED_PROP]: {
30
27
  true: () => {
@@ -132,10 +129,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
132
129
  document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
133
130
  document.removeEventListener('keydown', this._bindCloseOnEsc);
134
131
  }
135
- firstUpdated(props) {
136
- super.firstUpdated(props);
137
- this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
138
- }
139
132
  updated(changedProps) {
140
133
  if (changedProps.has(MODAL_OPENED_PROP)) {
141
134
  this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
@@ -159,7 +152,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
159
152
  setTimeout(() => {
160
153
  var _a;
161
154
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
162
- this._focusTrapController.strategy.focusFirst();
163
155
  resolve();
164
156
  }, transitionDuration);
165
157
  });
@@ -187,11 +179,11 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
187
179
  return html `
188
180
  <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
189
181
  <div class="modal-wrapper ${this.class}">
190
- <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
182
+ <div tabindex="0"></div>
191
183
  <div ${ref(this._contentRef)} class="modal" role="dialog" aria-label="${this.modalLabel}">
192
184
  <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
193
185
  </div>
194
- <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
186
+ <div tabindex="0"></div>
195
187
  </div>
196
188
  </h-portal>
197
189
  `;
package/build/esm/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;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;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,uCAAuC,4CAAgD;AACvF;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;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;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/components/sheet/sheet.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { TemplateResult } from 'lit-html';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import { PropertyValues } from '@lit/reactive-element';
4
3
  export declare class HSheet extends PhoenixLightLitElement {
5
4
  opened: boolean;
6
5
  class: string;
@@ -8,8 +7,6 @@ export declare class HSheet extends PhoenixLightLitElement {
8
7
  sheetLabel: string;
9
8
  private _focusedToggler;
10
9
  private _contentRef;
11
- private _focusSentinelStart;
12
- private _focusSentinelEnd;
13
10
  private _propsChangeStrategies;
14
11
  private static openSheets;
15
12
  private _backdropController;
@@ -19,7 +16,6 @@ export declare class HSheet extends PhoenixLightLitElement {
19
16
  constructor();
20
17
  connectedCallback(): void;
21
18
  disconnectedCallback(): void;
22
- firstUpdated(props: PropertyValues): void;
23
19
  updated(changedProps: Map<string, any>): void;
24
20
  private _handleCloseFromCloseComponent;
25
21
  private _bindCloseOnEsc;
package/build/esm/packages/phoenix/src/components/sheet/sheet.js CHANGED
@@ -2,7 +2,6 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
2
2
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
3
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
4
4
  import { property } from '@lit/reactive-element/decorators.js';
5
- import '@lit/reactive-element';
6
5
  import { html } from 'lit-html';
7
6
  import { createRef, ref } from 'lit-html/directives/ref.js';
8
7
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
@@ -22,8 +21,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
22
21
  this.sheetLabel = '';
23
22
  this._focusedToggler = null;
24
23
  this._contentRef = createRef();
25
- this._focusSentinelStart = createRef();
26
- this._focusSentinelEnd = createRef();
27
24
  this._propsChangeStrategies = {
28
25
  [SHEET_OPENED_PROP]: {
29
26
  true: () => {
@@ -130,10 +127,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
130
127
  document.removeEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
131
128
  document.removeEventListener('keydown', this._bindCloseOnEsc);
132
129
  }
133
- firstUpdated(props) {
134
- super.firstUpdated(props);
135
- this._focusTrapController.strategy.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
136
- }
137
130
  updated(changedProps) {
138
131
  if (changedProps.has(SHEET_OPENED_PROP)) {
139
132
  this._propsChangeStrategies[SHEET_OPENED_PROP][String(this[SHEET_OPENED_PROP])]();
@@ -154,7 +147,6 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
154
147
  setTimeout(() => {
155
148
  var _a;
156
149
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
157
- this._focusTrapController.strategy.focusFirst();
158
150
  resolve();
159
151
  }, transitionDuration);
160
152
  });
@@ -180,11 +172,11 @@ let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
180
172
  return html `
181
173
  <h-portal ?disabled="${!this.opened}" to="${SHEETS_PORTAL_NAME}" hidden>
182
174
  <div class="sheet-wrapper ${this.class}">
183
- <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
175
+ <div tabindex="0"></div>
184
176
  <div ${ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
185
177
  <div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
186
178
  </div>
187
- <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
179
+ <div tabindex="0"></div>
188
180
  </div>
189
181
  </h-portal>
190
182
  `;
package/build/esm/packages/phoenix/src/components/sheet/sheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;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;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,uCAAuC,4CAAgD;AACvF;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;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;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/focus_trap_controller.d.ts CHANGED
@@ -1,17 +1,13 @@
1
1
  import { ReactiveController, ReactiveControllerHost } from 'lit';
2
- import type { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy';
3
- import type { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy';
4
- import type { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy';
5
- import type { TFocusTrapProps, TSentinelFocusTrapProps, TCyclicFocusTrapProps } from './focus_trap_controller_types';
6
- declare type StrategyFor<T extends TFocusTrapProps> = T extends TSentinelFocusTrapProps ? SentinelFocusTrapStrategy : T extends TCyclicFocusTrapProps ? CyclicFocusTrapStrategy : TogglerFocusTrapStrategy;
2
+ import type { TFocusTrapProps } from './focus_trap_controller_types';
3
+ import { IFocusTrapStrategy } from './strategies/focus_trap_strategy_types';
7
4
  export declare class FocusTrapController<TProps extends TFocusTrapProps = TFocusTrapProps> implements ReactiveController {
8
5
  #private;
9
6
  constructor(host: ReactiveControllerHost, { mode, ...strategyProps }: TProps);
10
- get strategy(): StrategyFor<TProps>;
7
+ get strategy(): IFocusTrapStrategy;
11
8
  hostConnected(): void;
12
9
  hostDisconnected(): void;
13
10
  activate(): void;
14
11
  deactivate(): void;
15
12
  getFocusableElements(container: HTMLElement): HTMLElement[];
16
13
  }
17
- export {};
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FocusTrapStrategy } from './focus_trap_strategy';
2
- import { ICyclicFocusTrapStrategy } from './focus_trap_strategy_types';
2
+ import { IFocusTrapStrategy } from './focus_trap_strategy_types';
3
3
  export declare type TCyclicFocusTrapStrategyProps = {
4
4
  getContainer: () => HTMLElement | undefined;
5
5
  };
@@ -13,6 +13,6 @@ export declare type TCyclicFocusTrapStrategyProps = {
13
13
  * Suitable when the host is not portaled and `inert` is not applied to background content
14
14
  * (e.g. a full-screen search overlay on mobile).
15
15
  */
16
- export declare class CyclicFocusTrapStrategy extends FocusTrapStrategy implements ICyclicFocusTrapStrategy {
16
+ export declare class CyclicFocusTrapStrategy extends FocusTrapStrategy implements IFocusTrapStrategy {
17
17
  constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
18
18
  }
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.d.ts CHANGED
@@ -2,6 +2,7 @@ import { IFocusTrapStrategy } from './focus_trap_strategy_types';
2
2
  export declare abstract class FocusTrapStrategy implements IFocusTrapStrategy {
3
3
  protected readonly getContainer: () => HTMLElement | undefined;
4
4
  protected active: boolean;
5
+ noAutofocus: boolean;
5
6
  constructor(getContainer: () => HTMLElement | undefined);
6
7
  attach(): void;
7
8
  detach(): void;
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js CHANGED
@@ -4,6 +4,7 @@ class FocusTrapStrategy {
4
4
  constructor(getContainer) {
5
5
  this.getContainer = getContainer;
6
6
  this.active = false;
7
+ this.noAutofocus = false;
7
8
  this._handleKeyDown = (ev) => {
8
9
  if (!this.active || ev.code !== 'Tab')
9
10
  return;
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/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;"}
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;"}
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.d.ts CHANGED
@@ -1,15 +1,8 @@
1
1
  export interface IFocusTrapStrategy {
2
+ noAutofocus: boolean;
2
3
  attach(): void;
3
4
  detach(): void;
4
5
  activate(): void;
5
6
  deactivate(): void;
6
7
  getFocusableElements(container: HTMLElement): HTMLElement[];
7
8
  }
8
- export interface ICyclicFocusTrapStrategy extends IFocusTrapStrategy {
9
- }
10
- export interface ITogglerFocusTrapStrategy extends IFocusTrapStrategy {
11
- }
12
- export interface ISentinelFocusTrapStrategy extends IFocusTrapStrategy {
13
- setSentinels(start: HTMLElement, end: HTMLElement): void;
14
- focusFirst(): void;
15
- }
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FocusTrapStrategy } from './focus_trap_strategy';
2
- import { ISentinelFocusTrapStrategy } from './focus_trap_strategy_types';
2
+ import { IFocusTrapStrategy } from './focus_trap_strategy_types';
3
3
  export declare type TSentinelFocusTrapStrategyProps = {
4
4
  getContainer: () => HTMLElement | undefined;
5
5
  noAutofocus?: boolean;
@@ -7,23 +7,11 @@ export declare type TSentinelFocusTrapStrategyProps = {
7
7
  /**
8
8
  * Sentinel mode focus trap.
9
9
  *
10
- * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
11
- * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
12
- * background content is marked `inert`, giving the browser an extra safety net.
13
- *
14
- * Reacts on `keyup` so that the browser's native focus movement has already completed
15
- * before we redirect it.
10
+ * Traps focus within the container using `keydown` interception. On `activate()`,
11
+ * automatically moves focus to the first focusable element inside the container.
12
+ * Appropriate for modal dialogs and sheets where background content is marked `inert`.
16
13
  */
17
- export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy implements ISentinelFocusTrapStrategy {
18
- #private;
19
- noAutofocus: boolean;
14
+ export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy implements IFocusTrapStrategy {
20
15
  constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);
21
- /** Call once in firstUpdated with the two bookend sentinel elements. */
22
- setSentinels(start: HTMLElement, end: HTMLElement): void;
23
- /**
24
- * Move focus to the first real interactive element after the open transition
25
- * completes (skips sentinelStart at index 0).
26
- */
27
- focusFirst(): void;
28
16
  activate(): void;
29
17
  }
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js CHANGED
@@ -1,60 +1,32 @@
1
- import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../../external/tslib/tslib.es6.js';
2
- import '@dreamcommerce/utilities';
3
1
  import { FocusTrapStrategy } from './focus_trap_strategy.js';
4
2
 
5
- var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
6
3
  /**
7
4
  * Sentinel mode focus trap.
8
5
  *
9
- * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
10
- * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
11
- * background content is marked `inert`, giving the browser an extra safety net.
12
- *
13
- * Reacts on `keyup` so that the browser's native focus movement has already completed
14
- * before we redirect it.
6
+ * Traps focus within the container using `keydown` interception. On `activate()`,
7
+ * automatically moves focus to the first focusable element inside the container.
8
+ * Appropriate for modal dialogs and sheets where background content is marked `inert`.
15
9
  */
16
10
  class SentinelFocusTrapStrategy extends FocusTrapStrategy {
17
11
  constructor({ getContainer, noAutofocus = false }) {
18
12
  super(getContainer);
19
- _SentinelFocusTrapStrategy_sentinelStart.set(this, void 0);
20
- _SentinelFocusTrapStrategy_sentinelEnd.set(this, void 0);
21
13
  this.noAutofocus = noAutofocus;
22
14
  }
23
- /** Call once in firstUpdated with the two bookend sentinel elements. */
24
- setSentinels(start, end) {
25
- __classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelStart, start, "f");
26
- __classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelEnd, end, "f");
27
- }
28
- /**
29
- * Move focus to the first real interactive element after the open transition
30
- * completes (skips sentinelStart at index 0).
31
- */
32
- focusFirst() {
33
- if (this.noAutofocus)
34
- return;
35
- requestAnimationFrame(() => {
36
- const container = this.getContainer();
37
- if (!container)
38
- return;
39
- const focusableElements = this.getFocusableElements(container);
40
- if (focusableElements.length > 0) {
41
- focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
42
- }
43
- });
44
- }
45
15
  activate() {
46
16
  this.active = true;
47
17
  if (!this.noAutofocus) {
48
- const scrollY = window.scrollY;
49
- setTimeout(() => {
50
- var _a;
51
- (_a = __classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
52
- window.scrollTo(0, scrollY);
53
- }, 0);
18
+ requestAnimationFrame(() => {
19
+ const container = this.getContainer();
20
+ if (!container)
21
+ return;
22
+ const focusableElements = this.getFocusableElements(container);
23
+ if (focusableElements.length > 0) {
24
+ focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
25
+ }
26
+ });
54
27
  }
55
28
  }
56
- }
57
- _SentinelFocusTrapStrategy_sentinelStart = new WeakMap(), _SentinelFocusTrapStrategy_sentinelEnd = new WeakMap();
29
+ }
58
30
 
59
31
  export { SentinelFocusTrapStrategy };
60
32
  //# sourceMappingURL=sentinel_focus_trap_strategy.js.map
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,+CAAmD;AAClH;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;"}
package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FocusTrapStrategy } from './focus_trap_strategy';
2
- import { ITogglerFocusTrapStrategy } from './focus_trap_strategy_types';
2
+ import { IFocusTrapStrategy } from './focus_trap_strategy_types';
3
3
  export declare type TTogglerFocusTrapStrategyProps = {
4
4
  getContainer: () => HTMLElement | undefined;
5
5
  getToggler: () => HTMLElement | null | undefined;
@@ -13,7 +13,7 @@ export declare type TTogglerFocusTrapStrategyProps = {
13
13
  * Suitable for dropdowns where the toggler button should stay in the Tab cycle
14
14
  * alongside the dropdown content.
15
15
  */
16
- export declare class TogglerFocusTrapStrategy extends FocusTrapStrategy implements ITogglerFocusTrapStrategy {
16
+ export declare class TogglerFocusTrapStrategy extends FocusTrapStrategy implements IFocusTrapStrategy {
17
17
  #private;
18
18
  constructor({ getContainer, getToggler }: TTogglerFocusTrapStrategyProps);
19
19
  protected _handleKeyDown: (ev: KeyboardEvent) => void;
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.23-7",
5
+ "version": "1.18.23-8",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",