@shoper/phoenix_design_system 1.15.3-21 → 1.15.3-22

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 (12) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +5 -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 +1 -1
  4. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +15 -12
  5. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +5 -2
  7. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/select.js +1 -1
  9. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -1
  10. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +15 -12
  11. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  12. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -19,10 +19,13 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
19
19
  this._$selectOptions = null;
20
20
  this._handleSearchArrowNavigation = (ev) => {
21
21
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
22
- const $firstOption = $options.find(($option) => {
22
+ const $availableOptions = $options.filter(($option) => {
23
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
24
+ });
25
+ const $firstOption = $availableOptions.find(($option) => {
23
26
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
24
27
  });
25
- const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
28
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
26
29
  const $optionToFocus = $selectedOption || $firstOption;
27
30
  $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
28
31
  };
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;"}
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
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -17,13 +17,16 @@ 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._handleArrowNavigation = (event) => {
21
21
  event.preventDefault();
22
22
  const { key } = event;
23
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
24
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
25
+ });
23
26
  const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
24
27
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
25
28
  if (newOptionIndex === undefined) {
26
- const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
29
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
27
30
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
28
31
  }
29
32
  if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
@@ -33,14 +36,9 @@ class ListBoxKeyboardController {
33
36
  utilities.UiDomUtils.makeUnnavigable($prevOption);
34
37
  }
35
38
  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();
43
- }
39
+ const $focusedOption = $availableOptions[newOptionIndex];
40
+ utilities.UiDomUtils.makeNavigable($focusedOption);
41
+ $focusedOption.focus();
44
42
  };
45
43
  this.calculateSelectedOptionIndex = () => {
46
44
  const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
@@ -57,7 +55,7 @@ class ListBoxKeyboardController {
57
55
  new keystrokes_controller.KeystrokesController({
58
56
  host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
59
57
  keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
60
- callback: this.handleArrowNavigation,
58
+ callback: this._handleArrowNavigation,
61
59
  target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
62
60
  });
63
61
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -82,8 +80,13 @@ class ListBoxKeyboardController {
82
80
  _getNextOptionIndex() {
83
81
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
84
82
  return undefined;
85
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
83
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
84
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
85
+ });
86
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
86
87
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
88
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
89
+ return $availableOptions.length;
87
90
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
88
91
  }
89
92
  }
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -15,10 +15,13 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
15
15
  this._$selectOptions = null;
16
16
  this._handleSearchArrowNavigation = (ev) => {
17
17
  const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
18
- const $firstOption = $options.find(($option) => {
18
+ const $availableOptions = $options.filter(($option) => {
19
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
20
+ });
21
+ const $firstOption = $availableOptions.find(($option) => {
19
22
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
20
23
  });
21
- const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
24
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
22
25
  const $optionToFocus = $selectedOption || $firstOption;
23
26
  $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
24
27
  };
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;"}
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
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts CHANGED
@@ -3,7 +3,7 @@ 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 _handleArrowNavigation;
7
7
  calculateSelectedOptionIndex: () => void;
8
8
  private _getPrevOptionIndex;
9
9
  private _getNextOptionIndex;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -13,13 +13,16 @@ 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._handleArrowNavigation = (event) => {
17
17
  event.preventDefault();
18
18
  const { key } = event;
19
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
20
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
21
+ });
19
22
  const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
20
23
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
21
24
  if (newOptionIndex === undefined) {
22
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
25
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
23
26
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
24
27
  }
25
28
  if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
@@ -29,14 +32,9 @@ class ListBoxKeyboardController {
29
32
  UiDomUtils.makeUnnavigable($prevOption);
30
33
  }
31
34
  __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();
39
- }
35
+ const $focusedOption = $availableOptions[newOptionIndex];
36
+ UiDomUtils.makeNavigable($focusedOption);
37
+ $focusedOption.focus();
40
38
  };
41
39
  this.calculateSelectedOptionIndex = () => {
42
40
  const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
@@ -53,7 +51,7 @@ class ListBoxKeyboardController {
53
51
  new KeystrokesController({
54
52
  host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
55
53
  keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
56
- callback: this.handleArrowNavigation,
54
+ callback: this._handleArrowNavigation,
57
55
  target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
58
56
  });
59
57
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -78,8 +76,13 @@ class ListBoxKeyboardController {
78
76
  _getNextOptionIndex() {
79
77
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
80
78
  return undefined;
81
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
79
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
80
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
81
+ });
82
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
82
83
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
84
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
85
+ return $availableOptions.length;
83
86
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
84
87
  }
85
88
  }
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;"}
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-22",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",