@shoper/phoenix_design_system 1.15.11-37 → 1.15.11-39

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 (19) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +18 -2
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +1 -3
  4. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js +17 -14
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +11 -6
  8. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +3 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +18 -2
  11. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +1 -3
  13. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +1 -1
  15. package/build/esm/packages/phoenix/src/components/form/select/select.js +17 -14
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +11 -6
  18. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  19. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -17,7 +17,10 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.value = '';
20
+ this.selectControlId = '';
21
+ this.selectOptionsId = '';
20
22
  this._$selectOptions = null;
23
+ this._$select = null;
21
24
  this._handleSearchKeydown = (ev) => {
22
25
  if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
23
26
  return;
@@ -32,6 +35,7 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
32
35
  (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
33
36
  };
34
37
  this._handleFocusOptionOnArrowNavigation = () => {
38
+ var _a;
35
39
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
36
40
  const $availableOptions = $options.filter(($option) => {
37
41
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
@@ -41,7 +45,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
41
45
  });
42
46
  const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
43
47
  const $optionToFocus = $selectedOption || $firstOption;
44
- $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
48
+ if ($optionToFocus)
49
+ (_a = this._$select) === null || _a === void 0 ? void 0 : _a.manageSelectVirtualFocus($optionToFocus);
45
50
  };
46
51
  this._handleInputChange = debounce['default'](({ target }) => {
47
52
  this.value = target.value;
@@ -55,17 +60,20 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
55
60
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
56
61
  const $selectOptionsContainer = this.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
57
62
  this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
63
+ this._$select = document.querySelector(`[control-id="${this.selectControlId}"]`);
58
64
  this.addEventListener('keydown', this._handleSearchKeydown);
59
65
  }
60
66
  render() {
61
67
  return lit.html `
62
68
  <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
63
69
  <input
64
- class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
70
+ id="${this.selectControlId}-search"
71
+ class="${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}"
65
72
  type="text"
66
73
  role="search"
67
74
  .value=${this.value}
68
75
  aria-autocomplete="list"
76
+ aria-controls="${this.selectOptionsId}"
69
77
  autocomplete="false"
70
78
  placeholder="Szukaj"
71
79
  @input=${this._handleInputChange}
@@ -77,6 +85,14 @@ tslib_es6.__decorate([
77
85
  decorators.property({ type: String, reflect: true }),
78
86
  tslib_es6.__metadata("design:type", String)
79
87
  ], exports.HSelectSearch.prototype, "value", void 0);
88
+ tslib_es6.__decorate([
89
+ decorators.property({ type: String }),
90
+ tslib_es6.__metadata("design:type", String)
91
+ ], exports.HSelectSearch.prototype, "selectControlId", void 0);
92
+ tslib_es6.__decorate([
93
+ decorators.property({ type: String }),
94
+ tslib_es6.__metadata("design:type", String)
95
+ ], exports.HSelectSearch.prototype, "selectOptionsId", void 0);
80
96
  exports.HSelectSearch = tslib_es6.__decorate([
81
97
  phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.search)
82
98
  ], exports.HSelectSearch);
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js CHANGED
@@ -65,12 +65,10 @@ class SelectTogglerKeyboardController {
65
65
  });
66
66
  };
67
67
  this._navigate = (newOptionIndex) => {
68
- var _a;
69
68
  const $newOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").options[newOptionIndex];
70
69
  if (!$newOption)
71
70
  return;
72
- (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
73
- tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
71
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").manageSelectVirtualFocus($newOption);
74
72
  };
75
73
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
76
74
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -146,22 +146,21 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
146
146
  }
147
147
  };
148
148
  this._handleDropdownShowed = () => {
149
- var _a;
150
149
  this.opened = true;
151
150
  const $activeDescendant = this.options.find((option) => option.selected);
152
- if ($activeDescendant)
153
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $activeDescendant.id);
154
- };
155
- this._manageSelectFocusAria = (ev) => {
156
- var _a;
157
- const $target = ev.target;
158
- if (!$target)
159
- return;
160
- const optionId = $target.id;
161
- if (optionId) {
162
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
151
+ if ($activeDescendant) {
152
+ this.manageSelectVirtualFocus($activeDescendant);
163
153
  }
164
154
  };
155
+ this.manageSelectVirtualFocus = ($newOption) => {
156
+ var _a, _b, _c;
157
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
158
+ (_c = (_b = this.$search.value) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-activedescendant', $newOption.id);
159
+ this.options.forEach((option) => {
160
+ option.classList.remove('select-option_virtually-focused');
161
+ });
162
+ $newOption.classList.add('select-option_virtually-focused');
163
+ };
165
164
  this._closeSelect = () => {
166
165
  var _a;
167
166
  if (!this.opened)
@@ -246,13 +245,16 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
246
245
  _focusElementAfterSelectOpened() {
247
246
  var _a;
248
247
  const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
248
+ if ($searchInput)
249
+ $searchInput.focus();
249
250
  const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
250
251
  const $firstOption = $options.find(($option) => {
251
252
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
252
253
  });
253
254
  const $selectedOption = this.selectedOptions[0];
254
255
  const $optionToFocus = $selectedOption || $firstOption;
255
- $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
256
+ if ($optionToFocus)
257
+ this.manageSelectVirtualFocus($optionToFocus);
256
258
  }
257
259
  connectedCallback() {
258
260
  var _a;
@@ -394,7 +396,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
394
396
  class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
395
397
  ${ref_js.ref(this._$dropdownContent)}
396
398
  name="${this.controlName}"
397
- @focusin="${this._manageSelectFocusAria}"
398
399
  >
399
400
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
400
401
 
@@ -406,6 +407,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
406
407
  ${ref_js.ref(this.$search)}
407
408
  .value=${this._searchValue}
408
409
  @search=${this._handleSearch}
410
+ .selectControlId="${this.controlId}"
411
+ .selectOptionsId="${this._selectOptionsId}"
409
412
  ></h-select-search>`
410
413
  : lit.nothing}
411
414
 
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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -23,7 +23,7 @@ class ListBoxKeyboardController {
23
23
  this._handleWriteableCharacter(ev);
24
24
  };
25
25
  this._handleArrowNavigation = (event) => {
26
- var _a, _b;
26
+ var _a;
27
27
  event.preventDefault();
28
28
  const { key } = event;
29
29
  const activeElementId = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-activedescendant');
@@ -31,22 +31,27 @@ class ListBoxKeyboardController {
31
31
  this._setVirtualFocusToFirstElement();
32
32
  return;
33
33
  }
34
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
35
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
36
+ });
34
37
  const $activeElement = document.querySelector(`#${activeElementId}`);
38
+ const activeElementIndex = $availableOptions.findIndex(($element) => $element.id === $activeElement.id);
35
39
  let $newActiveElement;
36
40
  if (key === 'ArrowDown' || key === 'ArrowRight') {
37
- $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.nextElementSibling;
41
+ $newActiveElement = $availableOptions[activeElementIndex + 1];
38
42
  }
39
43
  if (key === 'ArrowUp' || key === 'ArrowLeft') {
40
- $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.previousElementSibling;
44
+ $newActiveElement = $availableOptions[activeElementIndex - 1];
41
45
  }
42
- (_b = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-activedescendant', ($newActiveElement === null || $newActiveElement === void 0 ? void 0 : $newActiveElement.id) || '');
46
+ if (!$newActiveElement)
47
+ return;
48
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").manageSelectVirtualFocus($newActiveElement);
43
49
  };
44
50
  this._setVirtualFocusToFirstElement = () => {
45
- var _a;
46
51
  const $firstOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").options[0];
47
52
  if (!$firstOption)
48
53
  return;
49
- (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $firstOption.id);
54
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").manageSelectVirtualFocus($firstOption);
50
55
  };
51
56
  this._handleWriteableCharacter = (ev) => {
52
57
  var _a;
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts CHANGED
@@ -2,7 +2,10 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { TemplateResult } from 'lit';
3
3
  export declare class HSelectSearch extends PhoenixLightLitElement {
4
4
  value: string;
5
+ private selectControlId;
6
+ private selectOptionsId;
5
7
  private _$selectOptions;
8
+ private _$select;
6
9
  connectedCallback(): void;
7
10
  private _handleSearchKeydown;
8
11
  private _handleDispatchEventOnOptionsList;
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -13,7 +13,10 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
13
13
  constructor() {
14
14
  super(...arguments);
15
15
  this.value = '';
16
+ this.selectControlId = '';
17
+ this.selectOptionsId = '';
16
18
  this._$selectOptions = null;
19
+ this._$select = null;
17
20
  this._handleSearchKeydown = (ev) => {
18
21
  if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
19
22
  return;
@@ -28,6 +31,7 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
28
31
  (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
29
32
  };
30
33
  this._handleFocusOptionOnArrowNavigation = () => {
34
+ var _a;
31
35
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
32
36
  const $availableOptions = $options.filter(($option) => {
33
37
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
@@ -37,7 +41,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
37
41
  });
38
42
  const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
39
43
  const $optionToFocus = $selectedOption || $firstOption;
40
- $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
44
+ if ($optionToFocus)
45
+ (_a = this._$select) === null || _a === void 0 ? void 0 : _a.manageSelectVirtualFocus($optionToFocus);
41
46
  };
42
47
  this._handleInputChange = debounce_1(({ target }) => {
43
48
  this.value = target.value;
@@ -51,17 +56,20 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
51
56
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
52
57
  const $selectOptionsContainer = this.closest(DROPDOWN_CONTENT_NAME);
53
58
  this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
59
+ this._$select = document.querySelector(`[control-id="${this.selectControlId}"]`);
54
60
  this.addEventListener('keydown', this._handleSearchKeydown);
55
61
  }
56
62
  render() {
57
63
  return html `
58
64
  <h-icon icon-name="icon-search" class=${SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
59
65
  <input
60
- class=${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
66
+ id="${this.selectControlId}-search"
67
+ class="${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}"
61
68
  type="text"
62
69
  role="search"
63
70
  .value=${this.value}
64
71
  aria-autocomplete="list"
72
+ aria-controls="${this.selectOptionsId}"
65
73
  autocomplete="false"
66
74
  placeholder="Szukaj"
67
75
  @input=${this._handleInputChange}
@@ -73,6 +81,14 @@ __decorate([
73
81
  property({ type: String, reflect: true }),
74
82
  __metadata("design:type", String)
75
83
  ], HSelectSearch.prototype, "value", void 0);
84
+ __decorate([
85
+ property({ type: String }),
86
+ __metadata("design:type", String)
87
+ ], HSelectSearch.prototype, "selectControlId", void 0);
88
+ __decorate([
89
+ property({ type: String }),
90
+ __metadata("design:type", String)
91
+ ], HSelectSearch.prototype, "selectOptionsId", void 0);
76
92
  HSelectSearch = __decorate([
77
93
  phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.search)
78
94
  ], HSelectSearch);
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js CHANGED
@@ -61,12 +61,10 @@ class SelectTogglerKeyboardController {
61
61
  });
62
62
  };
63
63
  this._navigate = (newOptionIndex) => {
64
- var _a;
65
64
  const $newOption = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").options[newOptionIndex];
66
65
  if (!$newOption)
67
66
  return;
68
- (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
69
- __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
67
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").manageSelectVirtualFocus($newOption);
70
68
  };
71
69
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
72
70
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,qDAAyD;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -65,7 +65,7 @@ export declare class HSelect extends PhoenixLightLitElement {
65
65
  private _handleSearch;
66
66
  private _handleDropdownHidden;
67
67
  private _handleDropdownShowed;
68
- private _manageSelectFocusAria;
68
+ manageSelectVirtualFocus: ($newOption: HTMLElement) => void;
69
69
  private _closeSelect;
70
70
  private _clearOptions;
71
71
  private _dispatchChangeEvent;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -142,22 +142,21 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
142
142
  }
143
143
  };
144
144
  this._handleDropdownShowed = () => {
145
- var _a;
146
145
  this.opened = true;
147
146
  const $activeDescendant = this.options.find((option) => option.selected);
148
- if ($activeDescendant)
149
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $activeDescendant.id);
150
- };
151
- this._manageSelectFocusAria = (ev) => {
152
- var _a;
153
- const $target = ev.target;
154
- if (!$target)
155
- return;
156
- const optionId = $target.id;
157
- if (optionId) {
158
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
147
+ if ($activeDescendant) {
148
+ this.manageSelectVirtualFocus($activeDescendant);
159
149
  }
160
150
  };
151
+ this.manageSelectVirtualFocus = ($newOption) => {
152
+ var _a, _b, _c;
153
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
154
+ (_c = (_b = this.$search.value) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-activedescendant', $newOption.id);
155
+ this.options.forEach((option) => {
156
+ option.classList.remove('select-option_virtually-focused');
157
+ });
158
+ $newOption.classList.add('select-option_virtually-focused');
159
+ };
161
160
  this._closeSelect = () => {
162
161
  var _a;
163
162
  if (!this.opened)
@@ -242,13 +241,16 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
242
241
  _focusElementAfterSelectOpened() {
243
242
  var _a;
244
243
  const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
244
+ if ($searchInput)
245
+ $searchInput.focus();
245
246
  const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
246
247
  const $firstOption = $options.find(($option) => {
247
248
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
248
249
  });
249
250
  const $selectedOption = this.selectedOptions[0];
250
251
  const $optionToFocus = $selectedOption || $firstOption;
251
- $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
252
+ if ($optionToFocus)
253
+ this.manageSelectVirtualFocus($optionToFocus);
252
254
  }
253
255
  connectedCallback() {
254
256
  var _a;
@@ -390,7 +392,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
390
392
  class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
391
393
  ${ref(this._$dropdownContent)}
392
394
  name="${this.controlName}"
393
- @focusin="${this._manageSelectFocusAria}"
394
395
  >
395
396
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
396
397
 
@@ -402,6 +403,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
402
403
  ${ref(this.$search)}
403
404
  .value=${this._searchValue}
404
405
  @search=${this._handleSearch}
406
+ .selectControlId="${this.controlId}"
407
+ .selectOptionsId="${this._selectOptionsId}"
405
408
  ></h-select-search>`
406
409
  : nothing}
407
410
 
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,eAAe,wDAA4D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -19,7 +19,7 @@ class ListBoxKeyboardController {
19
19
  this._handleWriteableCharacter(ev);
20
20
  };
21
21
  this._handleArrowNavigation = (event) => {
22
- var _a, _b;
22
+ var _a;
23
23
  event.preventDefault();
24
24
  const { key } = event;
25
25
  const activeElementId = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-activedescendant');
@@ -27,22 +27,27 @@ class ListBoxKeyboardController {
27
27
  this._setVirtualFocusToFirstElement();
28
28
  return;
29
29
  }
30
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
31
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
32
+ });
30
33
  const $activeElement = document.querySelector(`#${activeElementId}`);
34
+ const activeElementIndex = $availableOptions.findIndex(($element) => $element.id === $activeElement.id);
31
35
  let $newActiveElement;
32
36
  if (key === 'ArrowDown' || key === 'ArrowRight') {
33
- $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.nextElementSibling;
37
+ $newActiveElement = $availableOptions[activeElementIndex + 1];
34
38
  }
35
39
  if (key === 'ArrowUp' || key === 'ArrowLeft') {
36
- $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.previousElementSibling;
40
+ $newActiveElement = $availableOptions[activeElementIndex - 1];
37
41
  }
38
- (_b = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-activedescendant', ($newActiveElement === null || $newActiveElement === void 0 ? void 0 : $newActiveElement.id) || '');
42
+ if (!$newActiveElement)
43
+ return;
44
+ __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").manageSelectVirtualFocus($newActiveElement);
39
45
  };
40
46
  this._setVirtualFocusToFirstElement = () => {
41
- var _a;
42
47
  const $firstOption = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").options[0];
43
48
  if (!$firstOption)
44
49
  return;
45
- (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $firstOption.id);
50
+ __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").manageSelectVirtualFocus($firstOption);
46
51
  };
47
52
  this._handleWriteableCharacter = (ev) => {
48
53
  var _a;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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.15.11-37",
5
+ "version": "1.15.11-39",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",