@shoper/phoenix_design_system 1.15.3-20 → 1.15.3-21

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 (10) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +10 -4
  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/controllers/list_box_controller/list_box_keyboard_controller.js +7 -2
  4. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +10 -4
  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/controllers/list_box_controller/list_box_keyboard_controller.js +7 -2
  9. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -16,10 +16,15 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  this.value = '';
19
- this._$selectContainer = null;
19
+ this._$selectOptions = null;
20
20
  this._handleSearchArrowNavigation = (ev) => {
21
- var _a;
22
- (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
21
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
22
+ const $firstOption = $options.find(($option) => {
23
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
24
+ });
25
+ const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
26
+ const $optionToFocus = $selectedOption || $firstOption;
27
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
23
28
  };
24
29
  this._handleInputChange = debounce['default'](({ target }) => {
25
30
  this.value = target.value;
@@ -31,7 +36,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
31
36
  connectedCallback() {
32
37
  super.connectedCallback();
33
38
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
34
- this._$selectContainer = this.closest('h-select');
39
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
40
+ this._$selectOptions = document.querySelector('h-options');
35
41
  this.addEventListener('keydown', this._handleSearchArrowNavigation);
36
42
  }
37
43
  render() {
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;"}
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;"}
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -34,8 +34,13 @@ class ListBoxKeyboardController {
34
34
  }
35
35
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
36
36
  const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
37
- utilities.UiDomUtils.makeNavigable($focusedOption);
38
- $focusedOption.focus();
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
44
  };
40
45
  this.calculateSelectedOptionIndex = () => {
41
46
  const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts CHANGED
@@ -2,7 +2,7 @@ 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 _$selectContainer;
5
+ private _$selectOptions;
6
6
  connectedCallback(): void;
7
7
  private _handleSearchArrowNavigation;
8
8
  private _handleInputChange;
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -12,10 +12,15 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this.value = '';
15
- this._$selectContainer = null;
15
+ this._$selectOptions = null;
16
16
  this._handleSearchArrowNavigation = (ev) => {
17
- var _a;
18
- (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
17
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
18
+ const $firstOption = $options.find(($option) => {
19
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
20
+ });
21
+ const $selectedOption = $options.find(($option) => $option.getAttribute('aria-selected'));
22
+ const $optionToFocus = $selectedOption || $firstOption;
23
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
19
24
  };
20
25
  this._handleInputChange = debounce_1(({ target }) => {
21
26
  this.value = target.value;
@@ -27,7 +32,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
27
32
  connectedCallback() {
28
33
  super.connectedCallback();
29
34
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
30
- this._$selectContainer = this.closest('h-select');
35
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
36
+ this._$selectOptions = document.querySelector('h-options');
31
37
  this.addEventListener('keydown', this._handleSearchArrowNavigation);
32
38
  }
33
39
  render() {
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;"}
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;"}
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -30,8 +30,13 @@ class ListBoxKeyboardController {
30
30
  }
31
31
  __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
32
  const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
33
- UiDomUtils.makeNavigable($focusedOption);
34
- $focusedOption.focus();
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
40
  };
36
41
  this.calculateSelectedOptionIndex = () => {
37
42
  const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
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;"}
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;"}
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-20",
5
+ "version": "1.15.3-21",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",