@shoper/phoenix_design_system 1.11.3-6 → 1.11.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 (26) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +37 -65
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -19
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +24 -13
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js +0 -1
  8. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +2 -13
  10. package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +4 -8
  12. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +38 -66
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -7
  15. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -19
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +2 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +25 -14
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/form/select/select.js +0 -1
  21. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.d.ts +1 -2
  23. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +2 -13
  24. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts +0 -1
  26. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -12,7 +12,6 @@ var litHtml = require('lit-html');
12
12
  var global_constants = require('../../global_constants.js');
13
13
  var dropdown_constants = require('./dropdown_constants.js');
14
14
  var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
15
- var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
16
15
  var portal_constants = require('../portal/portal_constants.js');
17
16
  var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
18
17
  var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
@@ -30,8 +29,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
30
29
  this.transition = 'direction';
31
30
  this.offset = 0;
32
31
  this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
33
- this.id = v4['default']();
34
- this.preventFocusTrap = false;
35
32
  this._backdropController = new backdrop_controller.BackdropController();
36
33
  this._handleClickOutside = async (target) => {
37
34
  var _a, _b;
@@ -139,19 +136,44 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
139
136
  return;
140
137
  await this.hide();
141
138
  };
142
- this._keepFocusWithinDropdownForwards = (ev) => {
143
- if (ev.shiftKey === true || !this.$dropdownContent)
139
+ this._handleForwardFocus = async (ev) => {
140
+ // if (!this.opened) this._handleFocusOnNextElement(ev);
141
+ if (!this.opened || ev.shiftKey)
144
142
  return;
145
- const $target = ev.target;
146
- this._handleFocusFromTogglerForwards(ev, $target);
147
- this._handleFocusFromSentinelEndForwards(ev, $target);
143
+ const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
144
+ const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
145
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
146
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
147
+ if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
148
+ this._handleFocusOnNextElement(ev);
148
149
  };
149
- this._keepFocusWithinDropdownBackwards = (ev) => {
150
- if (!this.opened || !this.$dropdownContent)
150
+ this._handleFocusOnNextElement = async (ev) => {
151
+ var _a;
152
+ ev.preventDefault();
153
+ const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
154
+ const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
155
+ const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
156
+ await this._hideDropdownsSequentially();
157
+ await this.hide();
158
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
159
+ };
160
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
161
+ var _a;
162
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
163
+ if (isTogglerLastChildOfPreviousDropdown) {
164
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
151
165
  return;
152
- const $target = ev.target;
153
- this._handleFocusFromTogglerBackwards(ev, $target);
154
- this._handleFocusFromSentinelStartBackwards(ev, $target);
166
+ }
167
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
168
+ };
169
+ this._handleBackwardFocus = async (ev) => {
170
+ var _a;
171
+ const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
172
+ if (document.activeElement !== $firstFocusableElement)
173
+ return;
174
+ ev.preventDefault();
175
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
176
+ await this._hideDropdownsSequentially();
155
177
  };
156
178
  this._hoverToggle = async (ev) => {
157
179
  if (window.innerWidth < global_constants.BREAKPOINTS.xs)
@@ -194,14 +216,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
194
216
  host: this,
195
217
  target: document.body,
196
218
  keys: ['tab'],
197
- callback: this._keepFocusWithinDropdownForwards
219
+ callback: this._handleForwardFocus
198
220
  });
199
221
  new keystrokes_controller.KeystrokesController({
200
222
  host: this,
201
223
  target: document.body,
202
224
  keys: [['shift', 'tab']],
203
- callback: this._keepFocusWithinDropdownBackwards,
204
- containerSelectors: ['h-dropdown', 'h-dropdown-content']
225
+ callback: this._handleBackwardFocus
205
226
  });
206
227
  }
207
228
  async connectedCallback() {
@@ -277,45 +298,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
277
298
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
278
299
  }
279
300
  }
280
- _handleFocusFromTogglerForwards(ev, $target) {
281
- var _a, _b, _c;
282
- if (!((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.opened)
283
- return;
284
- ev.preventDefault();
285
- (_c = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.focusSentinelStart.value) === null || _c === void 0 ? void 0 : _c.focus();
286
- }
287
- _handleFocusFromSentinelEndForwards(ev, $target) {
288
- var _a, _b;
289
- if ($target !== ((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.focusSentinelEnd.value))
290
- return;
291
- ev.preventDefault();
292
- if (this.preventFocusTrap) {
293
- this.hide();
294
- utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
295
- }
296
- else {
297
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.focus();
298
- }
299
- }
300
- _handleFocusFromTogglerBackwards(ev, $target) {
301
- var _a, _b, _c;
302
- if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))
303
- return;
304
- if (this.preventFocusTrap) {
305
- this.hide();
306
- }
307
- else {
308
- ev.preventDefault();
309
- (_c = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.focusSentinelEnd.value) === null || _c === void 0 ? void 0 : _c.focus();
310
- }
311
- }
312
- _handleFocusFromSentinelStartBackwards(ev, $target) {
313
- var _a, _b;
314
- if ($target !== ((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.focusSentinelStart.value))
315
- return;
316
- ev.preventDefault();
317
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.focus();
318
- }
319
301
  _isHoveredWithinDropdown(element) {
320
302
  var _a;
321
303
  if (element === this)
@@ -339,8 +321,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
339
321
  return;
340
322
  if (!this._hasScrollableClassInitially)
341
323
  this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
342
- if (!this.preventFocusTrap)
343
- this.$dropdownContent.setAttribute('aria-modal', 'true');
344
324
  }
345
325
  _getDropdownContentWidth() {
346
326
  const isMobileResolution = document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs;
@@ -409,14 +389,6 @@ tslib_es6.__decorate([
409
389
  decorators_js.property({ type: String, attribute: 'mobile-position' }),
410
390
  tslib_es6.__metadata("design:type", String)
411
391
  ], exports.HDropdown.prototype, "mobilePosition", void 0);
412
- tslib_es6.__decorate([
413
- decorators_js.property({ type: String, attribute: 'id', reflect: true }),
414
- tslib_es6.__metadata("design:type", Object)
415
- ], exports.HDropdown.prototype, "id", void 0);
416
- tslib_es6.__decorate([
417
- decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
418
- tslib_es6.__metadata("design:type", Object)
419
- ], exports.HDropdown.prototype, "preventFocusTrap", void 0);
420
392
  exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
421
393
  phoenix_custom_element.phoenixCustomElement('h-dropdown'),
422
394
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.js CHANGED
@@ -7,18 +7,13 @@ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
- var ref_js = require('lit-html/directives/ref.js');
11
10
  var dropdown_constants = require('./dropdown_constants.js');
12
11
 
13
12
  exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
14
13
  constructor() {
15
14
  super();
16
15
  this.name = '';
17
- this.focusSentinelStart = ref_js.createRef();
18
- this.focusSentinelEnd = ref_js.createRef();
19
- this._contentContainer = ref_js.createRef();
20
16
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
21
- this._initialChildren = Array.from(this.childNodes);
22
17
  }
23
18
  connectedCallback() {
24
19
  super.connectedCallback();
@@ -28,22 +23,9 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
28
23
  element.setAttribute('role', 'menuitem');
29
24
  });
30
25
  }
31
- firstUpdated(_changedProperties) {
32
- super.firstUpdated(_changedProperties);
33
- if (this._contentContainer.value) {
34
- this._initialChildren.forEach((child) => {
35
- var _a;
36
- (_a = this._contentContainer.value) === null || _a === void 0 ? void 0 : _a.appendChild(child);
37
- });
38
- }
39
- }
40
26
  render() {
41
27
  super.render();
42
- return lit.html `
43
- <div tabindex="0" ${ref_js.ref(this.focusSentinelStart)}></div>
44
- <div ${ref_js.ref(this._contentContainer)}></div>
45
- <div tabindex="0" ${ref_js.ref(this.focusSentinelEnd)}></div>
46
- `;
28
+ return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
47
29
  }
48
30
  };
49
31
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
- require('@dreamcommerce/utilities');
7
+ var utilities = require('@dreamcommerce/utilities');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
10
  var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
@@ -16,17 +16,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
16
  constructor() {
17
17
  super();
18
18
  this.name = '';
19
- this._setupTogglerAria = () => {
20
- this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
21
- if (this._$dropdown.isOpened)
22
- this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
23
- host: this,
24
- initialAriaExpandedValue: this._$dropdown.isOpened()
25
- });
26
- this.setAttribute('aria-haspopup', 'true');
27
- if (this._$dropdown.id)
28
- this.setAttribute('aria-controls', this._$dropdown.id);
29
- };
30
19
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
31
20
  ev.stopImmediatePropagation();
32
21
  this._dispatchToggleDropdownEvent(ev);
@@ -40,6 +29,18 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
40
29
  ev.preventDefault();
41
30
  this.emitCustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle);
42
31
  };
32
+ this._handleFocusToOpenedDropdown = async (ev) => {
33
+ if (ev.target !== this)
34
+ return;
35
+ const isOpened = this._$dropdown.isOpened();
36
+ if (!isOpened)
37
+ return;
38
+ const $dropdownContent = document.querySelector(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
39
+ if (!$dropdownContent)
40
+ return;
41
+ ev.preventDefault();
42
+ utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
43
+ };
43
44
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
44
45
  this.className = `${dropdown_constants.DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
45
46
  }
@@ -47,7 +48,13 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
47
48
  var _a;
48
49
  super.connectedCallback();
49
50
  this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
50
- this._setupTogglerAria();
51
+ this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
52
+ if (this._$dropdown.isOpened)
53
+ this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
54
+ host: this,
55
+ initialAriaExpandedValue: this._$dropdown.isOpened()
56
+ });
57
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
51
58
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
52
59
  if (hasToggleOnHover) {
53
60
  this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -55,6 +62,10 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
55
62
  }
56
63
  this.addEventListener('click', this._dispatchToggleDropdownEvent);
57
64
  }
65
+ disconnectedCallback() {
66
+ super.disconnectedCallback();
67
+ document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
68
+ }
58
69
  };
59
70
  tslib_es6.__decorate([
60
71
  decorators.property({ type: String, reflect: true }),
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -300,7 +300,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
300
300
  name="${this.controlName}"
301
301
  offset=${this.offset}
302
302
  content-width="full"
303
- prevent-focus-trap
304
303
  >
305
304
  <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
306
305
 
package/build/cjs/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/keystrokes_controller/keystrokes_controller.js CHANGED
@@ -7,21 +7,11 @@ require('lit');
7
7
 
8
8
  var _KeystrokesController_host, _KeystrokesController_target;
9
9
  class KeystrokesController {
10
- constructor({ host, keys, callback, target, containerSelectors }) {
10
+ constructor({ host, keys, callback, target }) {
11
11
  _KeystrokesController_host.set(this, void 0);
12
12
  _KeystrokesController_target.set(this, void 0);
13
13
  this._buffer = [];
14
- this._clearBuffer = (ev) => {
15
- if (!this._containerSelectors) {
16
- this._buffer = [];
17
- return;
18
- }
19
- const $newFocusedElement = ev.relatedTarget;
20
- if ($newFocusedElement) {
21
- const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
22
- if (isNewFocusedElementAChild)
23
- return;
24
- }
14
+ this._clearBuffer = () => {
25
15
  this._buffer = [];
26
16
  };
27
17
  this._saveKey = (ev) => {
@@ -89,7 +79,6 @@ class KeystrokesController {
89
79
  tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
90
80
  this._keys = keys;
91
81
  this._callback = callback;
92
- this._containerSelectors = containerSelectors;
93
82
  tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
94
83
  }
95
84
  hostConnected() {
package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -15,8 +15,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
15
15
  contentWidth: TDropdownContentWidth;
16
16
  portalTarget: string;
17
17
  mobilePosition: TMobileElementPosition;
18
- id: string;
19
- preventFocusTrap: boolean;
20
18
  $dropdownToggler: HDropdownToggler | null;
21
19
  $dropdownContent: HDropdownContent | null;
22
20
  $nestedDropdownContentElements?: HDropdownContent[];
@@ -42,12 +40,10 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
42
40
  private _observeScrollToggling;
43
41
  private _toggleScroll;
44
42
  private _closeDropdownOnEscape;
45
- private _keepFocusWithinDropdownForwards;
46
- private _handleFocusFromTogglerForwards;
47
- private _handleFocusFromSentinelEndForwards;
48
- private _keepFocusWithinDropdownBackwards;
49
- private _handleFocusFromTogglerBackwards;
50
- private _handleFocusFromSentinelStartBackwards;
43
+ private _handleForwardFocus;
44
+ private _handleFocusOnNextElement;
45
+ private _focusOnNextElementAfterToggler;
46
+ private _handleBackwardFocus;
51
47
  private _hoverToggle;
52
48
  private _isHoveredWithinDropdown;
53
49
  private _setupInitialDropdownProperties;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -6,9 +6,8 @@ import { property } from '@lit/reactive-element/decorators.js';
6
6
  import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
7
7
  import { html } from 'lit-html';
8
8
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
9
- import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
9
+ import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
10
10
  import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
- import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
12
11
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
13
12
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
14
13
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
@@ -26,8 +25,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
26
25
  this.transition = 'direction';
27
26
  this.offset = 0;
28
27
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
29
- this.id = v4();
30
- this.preventFocusTrap = false;
31
28
  this._backdropController = new BackdropController();
32
29
  this._handleClickOutside = async (target) => {
33
30
  var _a, _b;
@@ -135,19 +132,44 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
135
132
  return;
136
133
  await this.hide();
137
134
  };
138
- this._keepFocusWithinDropdownForwards = (ev) => {
139
- if (ev.shiftKey === true || !this.$dropdownContent)
135
+ this._handleForwardFocus = async (ev) => {
136
+ // if (!this.opened) this._handleFocusOnNextElement(ev);
137
+ if (!this.opened || ev.shiftKey)
140
138
  return;
141
- const $target = ev.target;
142
- this._handleFocusFromTogglerForwards(ev, $target);
143
- this._handleFocusFromSentinelEndForwards(ev, $target);
139
+ const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
140
+ const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
141
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
142
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
143
+ if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
144
+ this._handleFocusOnNextElement(ev);
144
145
  };
145
- this._keepFocusWithinDropdownBackwards = (ev) => {
146
- if (!this.opened || !this.$dropdownContent)
146
+ this._handleFocusOnNextElement = async (ev) => {
147
+ var _a;
148
+ ev.preventDefault();
149
+ const $focusableElements = UiDomUtils.getFocusableElements(document.body);
150
+ const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
151
+ const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
152
+ await this._hideDropdownsSequentially();
153
+ await this.hide();
154
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
155
+ };
156
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
157
+ var _a;
158
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
159
+ if (isTogglerLastChildOfPreviousDropdown) {
160
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
147
161
  return;
148
- const $target = ev.target;
149
- this._handleFocusFromTogglerBackwards(ev, $target);
150
- this._handleFocusFromSentinelStartBackwards(ev, $target);
162
+ }
163
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
164
+ };
165
+ this._handleBackwardFocus = async (ev) => {
166
+ var _a;
167
+ const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
168
+ if (document.activeElement !== $firstFocusableElement)
169
+ return;
170
+ ev.preventDefault();
171
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
172
+ await this._hideDropdownsSequentially();
151
173
  };
152
174
  this._hoverToggle = async (ev) => {
153
175
  if (window.innerWidth < BREAKPOINTS.xs)
@@ -190,14 +212,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
190
212
  host: this,
191
213
  target: document.body,
192
214
  keys: ['tab'],
193
- callback: this._keepFocusWithinDropdownForwards
215
+ callback: this._handleForwardFocus
194
216
  });
195
217
  new KeystrokesController({
196
218
  host: this,
197
219
  target: document.body,
198
220
  keys: [['shift', 'tab']],
199
- callback: this._keepFocusWithinDropdownBackwards,
200
- containerSelectors: ['h-dropdown', 'h-dropdown-content']
221
+ callback: this._handleBackwardFocus
201
222
  });
202
223
  }
203
224
  async connectedCallback() {
@@ -273,45 +294,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
273
294
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
274
295
  }
275
296
  }
276
- _handleFocusFromTogglerForwards(ev, $target) {
277
- var _a, _b, _c;
278
- if (!((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.opened)
279
- return;
280
- ev.preventDefault();
281
- (_c = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.focusSentinelStart.value) === null || _c === void 0 ? void 0 : _c.focus();
282
- }
283
- _handleFocusFromSentinelEndForwards(ev, $target) {
284
- var _a, _b;
285
- if ($target !== ((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.focusSentinelEnd.value))
286
- return;
287
- ev.preventDefault();
288
- if (this.preventFocusTrap) {
289
- this.hide();
290
- UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
291
- }
292
- else {
293
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.focus();
294
- }
295
- }
296
- _handleFocusFromTogglerBackwards(ev, $target) {
297
- var _a, _b, _c;
298
- if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))
299
- return;
300
- if (this.preventFocusTrap) {
301
- this.hide();
302
- }
303
- else {
304
- ev.preventDefault();
305
- (_c = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.focusSentinelEnd.value) === null || _c === void 0 ? void 0 : _c.focus();
306
- }
307
- }
308
- _handleFocusFromSentinelStartBackwards(ev, $target) {
309
- var _a, _b;
310
- if ($target !== ((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.focusSentinelStart.value))
311
- return;
312
- ev.preventDefault();
313
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.focus();
314
- }
315
297
  _isHoveredWithinDropdown(element) {
316
298
  var _a;
317
299
  if (element === this)
@@ -335,8 +317,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
335
317
  return;
336
318
  if (!this._hasScrollableClassInitially)
337
319
  this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
338
- if (!this.preventFocusTrap)
339
- this.$dropdownContent.setAttribute('aria-modal', 'true');
340
320
  }
341
321
  _getDropdownContentWidth() {
342
322
  const isMobileResolution = document.documentElement.clientWidth < BREAKPOINTS.xs;
@@ -405,14 +385,6 @@ __decorate([
405
385
  property({ type: String, attribute: 'mobile-position' }),
406
386
  __metadata("design:type", String)
407
387
  ], HDropdown.prototype, "mobilePosition", void 0);
408
- __decorate([
409
- property({ type: String, attribute: 'id', reflect: true }),
410
- __metadata("design:type", Object)
411
- ], HDropdown.prototype, "id", void 0);
412
- __decorate([
413
- property({ type: Boolean, attribute: 'prevent-focus-trap' }),
414
- __metadata("design:type", Object)
415
- ], HDropdown.prototype, "preventFocusTrap", void 0);
416
388
  HDropdown = HDropdown_1 = __decorate([
417
389
  phoenixCustomElement('h-dropdown'),
418
390
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.d.ts CHANGED
@@ -1,14 +1,8 @@
1
- import { PropertyValues, TemplateResult } from 'lit';
1
+ import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import { Ref } from 'lit-html/directives/ref.js';
4
3
  export declare class HDropdownContent extends PhoenixLightLitElement {
5
4
  name: string;
6
- focusSentinelStart: Ref<HTMLElement>;
7
- focusSentinelEnd: Ref<HTMLElement>;
8
- private _contentContainer;
9
- private _initialChildren;
10
5
  constructor();
11
6
  connectedCallback(): void;
12
- firstUpdated(_changedProperties: PropertyValues): void;
13
7
  protected render(): TemplateResult;
14
8
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -3,18 +3,13 @@ import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
- import { createRef, ref } from 'lit-html/directives/ref.js';
7
6
  import { DROPDOWN_CSS_CLASSES } from './dropdown_constants.js';
8
7
 
9
8
  let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
10
9
  constructor() {
11
10
  super();
12
11
  this.name = '';
13
- this.focusSentinelStart = createRef();
14
- this.focusSentinelEnd = createRef();
15
- this._contentContainer = createRef();
16
12
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
17
- this._initialChildren = Array.from(this.childNodes);
18
13
  }
19
14
  connectedCallback() {
20
15
  super.connectedCallback();
@@ -24,22 +19,9 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
24
19
  element.setAttribute('role', 'menuitem');
25
20
  });
26
21
  }
27
- firstUpdated(_changedProperties) {
28
- super.firstUpdated(_changedProperties);
29
- if (this._contentContainer.value) {
30
- this._initialChildren.forEach((child) => {
31
- var _a;
32
- (_a = this._contentContainer.value) === null || _a === void 0 ? void 0 : _a.appendChild(child);
33
- });
34
- }
35
- }
36
22
  render() {
37
23
  super.render();
38
- return html `
39
- <div tabindex="0" ${ref(this.focusSentinelStart)}></div>
40
- <div ${ref(this._contentContainer)}></div>
41
- <div tabindex="0" ${ref(this.focusSentinelEnd)}></div>
42
- `;
24
+ return html ` <div role="dialog">${this.getSlot('content')}</div> `;
43
25
  }
44
26
  };
45
27
  __decorate([
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts CHANGED
@@ -6,8 +6,9 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
6
6
  private _$dropdown;
7
7
  constructor();
8
8
  connectedCallback(): void;
9
- private _setupTogglerAria;
10
9
  private _dispatchToggleDropdownEventWithKeyboard;
11
10
  private _dispatchToggleDropdownEventOnMobile;
12
11
  private _dispatchToggleDropdownEvent;
12
+ private _handleFocusToOpenedDropdown;
13
+ disconnectedCallback(): void;
13
14
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -1,28 +1,17 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
- import '@dreamcommerce/utilities';
3
+ import { UiDomUtils } from '@dreamcommerce/utilities';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
6
  import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
7
7
  import { BREAKPOINTS } from '../../global_constants.js';
8
- import { DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS, DROPDOWN_CSS_CLASSES, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
8
+ import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_CSS_CLASSES, DROPDOWN_CONTAINER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
9
9
  import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
10
10
 
11
11
  let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super();
14
14
  this.name = '';
15
- this._setupTogglerAria = () => {
16
- this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
17
- if (this._$dropdown.isOpened)
18
- this._toggleElementAriaController = new ToggleElementAriaController({
19
- host: this,
20
- initialAriaExpandedValue: this._$dropdown.isOpened()
21
- });
22
- this.setAttribute('aria-haspopup', 'true');
23
- if (this._$dropdown.id)
24
- this.setAttribute('aria-controls', this._$dropdown.id);
25
- };
26
15
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
27
16
  ev.stopImmediatePropagation();
28
17
  this._dispatchToggleDropdownEvent(ev);
@@ -36,6 +25,18 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
36
25
  ev.preventDefault();
37
26
  this.emitCustomEvent(DROPDOWN_EVENTS.toggle);
38
27
  };
28
+ this._handleFocusToOpenedDropdown = async (ev) => {
29
+ if (ev.target !== this)
30
+ return;
31
+ const isOpened = this._$dropdown.isOpened();
32
+ if (!isOpened)
33
+ return;
34
+ const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
35
+ if (!$dropdownContent)
36
+ return;
37
+ ev.preventDefault();
38
+ UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
39
+ };
39
40
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
40
41
  this.className = `${DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
41
42
  }
@@ -43,7 +44,13 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
43
44
  var _a;
44
45
  super.connectedCallback();
45
46
  this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
46
- this._setupTogglerAria();
47
+ this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
48
+ if (this._$dropdown.isOpened)
49
+ this._toggleElementAriaController = new ToggleElementAriaController({
50
+ host: this,
51
+ initialAriaExpandedValue: this._$dropdown.isOpened()
52
+ });
53
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
47
54
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
48
55
  if (hasToggleOnHover) {
49
56
  this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -51,6 +58,10 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
51
58
  }
52
59
  this.addEventListener('click', this._dispatchToggleDropdownEvent);
53
60
  }
61
+ disconnectedCallback() {
62
+ super.disconnectedCallback();
63
+ document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
64
+ }
54
65
  };
55
66
  __decorate([
56
67
  property({ type: String, reflect: true }),
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -296,7 +296,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
296
296
  name="${this.controlName}"
297
297
  offset=${this.offset}
298
298
  content-width="full"
299
- prevent-focus-trap
300
299
  >
301
300
  <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
302
301
 
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/keystrokes_controller/keystrokes_controller.d.ts CHANGED
@@ -4,9 +4,8 @@ export declare class KeystrokesController implements ReactiveController {
4
4
  #private;
5
5
  private _keys;
6
6
  private _callback;
7
- private _containerSelectors?;
8
7
  private _buffer;
9
- constructor({ host, keys, callback, target, containerSelectors }: TKeystrokesControllerProps);
8
+ constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
10
9
  hostConnected(): void;
11
10
  hostDisconnected(): void;
12
11
  private _clearBuffer;
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js CHANGED
@@ -3,21 +3,11 @@ import 'lit';
3
3
 
4
4
  var _KeystrokesController_host, _KeystrokesController_target;
5
5
  class KeystrokesController {
6
- constructor({ host, keys, callback, target, containerSelectors }) {
6
+ constructor({ host, keys, callback, target }) {
7
7
  _KeystrokesController_host.set(this, void 0);
8
8
  _KeystrokesController_target.set(this, void 0);
9
9
  this._buffer = [];
10
- this._clearBuffer = (ev) => {
11
- if (!this._containerSelectors) {
12
- this._buffer = [];
13
- return;
14
- }
15
- const $newFocusedElement = ev.relatedTarget;
16
- if ($newFocusedElement) {
17
- const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
18
- if (isNewFocusedElementAChild)
19
- return;
20
- }
10
+ this._clearBuffer = () => {
21
11
  this._buffer = [];
22
12
  };
23
13
  this._saveKey = (ev) => {
@@ -85,7 +75,6 @@ class KeystrokesController {
85
75
  __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
86
76
  this._keys = keys;
87
77
  this._callback = callback;
88
- this._containerSelectors = containerSelectors;
89
78
  __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
90
79
  }
91
80
  hostConnected() {
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/keystrokes_controller/keystrokes_controller_types.d.ts CHANGED
@@ -4,5 +4,4 @@ export declare type TKeystrokesControllerProps = {
4
4
  keys: string[][] | string[] | string;
5
5
  callback: (ev: Event) => void;
6
6
  target: Element;
7
- containerSelectors?: string[];
8
7
  };
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.11.3-6",
5
+ "version": "1.11.3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "@splidejs/splide": "^4.0.7"
31
31
  },
32
32
  "devDependencies": {
33
- "@dreamcommerce/utilities": "^1.18.1-4",
33
+ "@dreamcommerce/utilities": "^1.18.1",
34
34
  "@shoper/jest_config": "^0.0.0",
35
35
  "@shoper/tsconfig": "^0.0.0",
36
36
  "@splidejs/splide": "4.0.7",