@shoper/phoenix_design_system 1.15.3-21 → 1.15.3-23

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 (14) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +7 -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/select.js +5 -1
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +36 -12
  6. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +7 -2
  8. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/select.js +5 -1
  10. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -1
  12. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +36 -12
  13. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  14. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -18,11 +18,16 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
18
18
  this.value = '';
19
19
  this._$selectOptions = null;
20
20
  this._handleSearchArrowNavigation = (ev) => {
21
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
22
+ return;
21
23
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
22
- const $firstOption = $options.find(($option) => {
24
+ const $availableOptions = $options.filter(($option) => {
25
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
26
+ });
27
+ const $firstOption = $availableOptions.find(($option) => {
23
28
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
24
29
  });
25
- const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
30
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
26
31
  const $optionToFocus = $selectedOption || $firstOption;
27
32
  $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
28
33
  };
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,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;"}
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,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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -196,7 +196,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
196
  if (changedProperties.has('optionsList')) {
197
197
  this._updateOptions();
198
198
  }
199
- if (this._$optionsList.value && !this.listBoxController)
199
+ if (this._$optionsList.value)
200
200
  this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
201
201
  host: this,
202
202
  $list: this._$optionsList.value
@@ -256,6 +256,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
256
256
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
257
257
  }
258
258
  updateOptionAriaAttribute($option) {
259
+ if (!this.multiple) {
260
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
261
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
262
+ }
259
263
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
260
264
  }
261
265
  _removeHTMLOptions(optionsValues) {
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -17,29 +17,48 @@ class ListBoxKeyboardController {
17
17
  _ListBoxKeyboardController__$options.set(this, void 0);
18
18
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
19
19
  _ListBoxKeyboardController_keys.set(this, void 0);
20
- this.handleArrowNavigation = (event) => {
20
+ this._handleKeyboardNavigation = (ev) => {
21
+ if (ev.key.includes('Arrow')) {
22
+ this._handleArrowNavigation(ev);
23
+ return;
24
+ }
25
+ if (ev.key.length === 1) {
26
+ this._handleWriteableCharacter(ev);
27
+ }
28
+ };
29
+ this._handleArrowNavigation = (event) => {
21
30
  event.preventDefault();
22
31
  const { key } = event;
32
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
33
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
34
+ });
23
35
  const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
24
36
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
25
37
  if (newOptionIndex === undefined) {
26
- const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
38
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
27
39
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
28
40
  }
29
41
  if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
30
42
  return;
31
43
  if (prevOptionIndex !== undefined) {
32
44
  const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
33
- utilities.UiDomUtils.makeUnnavigable($prevOption);
45
+ $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
34
46
  }
35
47
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
36
- const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
37
- const $test = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").querySelector(`[value="${newOptionIndex}"]`);
38
- // UiDomUtils.makeNavigable($focusedOption);
39
- // $focusedOption.focus();
40
- if ($test) {
41
- utilities.UiDomUtils.makeNavigable($test);
42
- $test.focus();
48
+ const $focusedOption = $availableOptions[newOptionIndex];
49
+ if ($focusedOption) {
50
+ utilities.UiDomUtils.makeNavigable($focusedOption);
51
+ $focusedOption.focus();
52
+ }
53
+ };
54
+ this._handleWriteableCharacter = (ev) => {
55
+ const $inputField = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").querySelector('[role="search]');
56
+ if (!$inputField)
57
+ return;
58
+ $inputField === null || $inputField === void 0 ? void 0 : $inputField.focus();
59
+ const isAPrintableCharacter = ev.key.match(/\P{C}/u);
60
+ if (ev.key.length !== 1 || !isAPrintableCharacter) {
61
+ ev.preventDefault();
43
62
  }
44
63
  };
45
64
  this.calculateSelectedOptionIndex = () => {
@@ -57,7 +76,7 @@ class ListBoxKeyboardController {
57
76
  new keystrokes_controller.KeystrokesController({
58
77
  host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
59
78
  keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
60
- callback: this.handleArrowNavigation,
79
+ callback: this._handleKeyboardNavigation,
61
80
  target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
62
81
  });
63
82
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -82,8 +101,13 @@ class ListBoxKeyboardController {
82
101
  _getNextOptionIndex() {
83
102
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
84
103
  return undefined;
85
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
104
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
105
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
106
+ });
107
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
86
108
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
109
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
110
+ return $availableOptions.length - 1;
87
111
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
88
112
  }
89
113
  }
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -14,11 +14,16 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
14
14
  this.value = '';
15
15
  this._$selectOptions = null;
16
16
  this._handleSearchArrowNavigation = (ev) => {
17
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
18
+ return;
17
19
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
18
- const $firstOption = $options.find(($option) => {
20
+ const $availableOptions = $options.filter(($option) => {
21
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
22
+ });
23
+ const $firstOption = $availableOptions.find(($option) => {
19
24
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
20
25
  });
21
- const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
26
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
22
27
  const $optionToFocus = $selectedOption || $firstOption;
23
28
  $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
24
29
  };
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,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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -192,7 +192,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
192
192
  if (changedProperties.has('optionsList')) {
193
193
  this._updateOptions();
194
194
  }
195
- if (this._$optionsList.value && !this.listBoxController)
195
+ if (this._$optionsList.value)
196
196
  this.listBoxController = new ListBoxKeyboardController({
197
197
  host: this,
198
198
  $list: this._$optionsList.value
@@ -252,6 +252,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
252
252
  SelectControlUtils.appendHTMLOption($option, $list, position);
253
253
  }
254
254
  updateOptionAriaAttribute($option) {
255
+ if (!this.multiple) {
256
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
257
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
258
+ }
255
259
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
256
260
  }
257
261
  _removeHTMLOptions(optionsValues) {
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -3,7 +3,9 @@ export declare class ListBoxKeyboardController implements IListboxController {
3
3
  #private;
4
4
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
5
5
  hostConnected(): void;
6
- handleArrowNavigation: (event: KeyboardEvent) => void;
6
+ private _handleKeyboardNavigation;
7
+ private _handleArrowNavigation;
8
+ private _handleWriteableCharacter;
7
9
  calculateSelectedOptionIndex: () => void;
8
10
  private _getPrevOptionIndex;
9
11
  private _getNextOptionIndex;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -13,29 +13,48 @@ class ListBoxKeyboardController {
13
13
  _ListBoxKeyboardController__$options.set(this, void 0);
14
14
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
15
15
  _ListBoxKeyboardController_keys.set(this, void 0);
16
- this.handleArrowNavigation = (event) => {
16
+ this._handleKeyboardNavigation = (ev) => {
17
+ if (ev.key.includes('Arrow')) {
18
+ this._handleArrowNavigation(ev);
19
+ return;
20
+ }
21
+ if (ev.key.length === 1) {
22
+ this._handleWriteableCharacter(ev);
23
+ }
24
+ };
25
+ this._handleArrowNavigation = (event) => {
17
26
  event.preventDefault();
18
27
  const { key } = event;
28
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
29
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
30
+ });
19
31
  const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
20
32
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
21
33
  if (newOptionIndex === undefined) {
22
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
34
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
23
35
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
24
36
  }
25
37
  if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
26
38
  return;
27
39
  if (prevOptionIndex !== undefined) {
28
40
  const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
29
- UiDomUtils.makeUnnavigable($prevOption);
41
+ $prevOption && UiDomUtils.makeUnnavigable($prevOption);
30
42
  }
31
43
  __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
- const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
33
- const $test = __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").querySelector(`[value="${newOptionIndex}"]`);
34
- // UiDomUtils.makeNavigable($focusedOption);
35
- // $focusedOption.focus();
36
- if ($test) {
37
- UiDomUtils.makeNavigable($test);
38
- $test.focus();
44
+ const $focusedOption = $availableOptions[newOptionIndex];
45
+ if ($focusedOption) {
46
+ UiDomUtils.makeNavigable($focusedOption);
47
+ $focusedOption.focus();
48
+ }
49
+ };
50
+ this._handleWriteableCharacter = (ev) => {
51
+ const $inputField = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").querySelector('[role="search]');
52
+ if (!$inputField)
53
+ return;
54
+ $inputField === null || $inputField === void 0 ? void 0 : $inputField.focus();
55
+ const isAPrintableCharacter = ev.key.match(/\P{C}/u);
56
+ if (ev.key.length !== 1 || !isAPrintableCharacter) {
57
+ ev.preventDefault();
39
58
  }
40
59
  };
41
60
  this.calculateSelectedOptionIndex = () => {
@@ -53,7 +72,7 @@ class ListBoxKeyboardController {
53
72
  new KeystrokesController({
54
73
  host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
55
74
  keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
56
- callback: this.handleArrowNavigation,
75
+ callback: this._handleKeyboardNavigation,
57
76
  target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
58
77
  });
59
78
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -78,8 +97,13 @@ class ListBoxKeyboardController {
78
97
  _getNextOptionIndex() {
79
98
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
80
99
  return undefined;
81
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
100
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
101
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
102
+ });
103
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
82
104
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
105
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
106
+ return $availableOptions.length - 1;
83
107
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
84
108
  }
85
109
  }
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;"}
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;"}
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.3-21",
5
+ "version": "1.15.3-23",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",