@shoper/phoenix_design_system 1.15.5 → 1.15.6-0

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 (62) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js +21 -29
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js +0 -4
  4. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +121 -11
  6. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +0 -2
  8. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  10. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  12. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  14. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  16. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  17. package/build/cjs/packages/phoenix/src/components/form/select/select.js +41 -8
  18. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  19. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +16 -47
  20. package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  21. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +0 -2
  22. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  23. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  24. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  25. package/build/cjs/packages/phoenix/src/index.js +5 -5
  26. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts +3 -6
  27. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js +22 -30
  28. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js +1 -4
  30. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +11 -1
  32. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +124 -14
  33. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  34. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +1 -2
  35. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  36. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  37. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  38. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  39. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -0
  40. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  41. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  42. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +4 -0
  43. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  44. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  45. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  46. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  47. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +6 -2
  48. package/build/esm/packages/phoenix/src/components/form/select/select.js +41 -8
  49. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  50. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +2 -3
  51. package/build/esm/packages/phoenix/src/components/messages/base_message.js +18 -49
  52. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  53. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +3 -4
  54. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  55. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +6 -2
  56. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +1 -0
  57. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  58. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +7 -3
  59. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  60. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  61. package/build/esm/packages/phoenix/src/index.js +1 -1
  62. package/package.json +1 -1
@@ -1,12 +1,11 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
- import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
3
+ import { DIRECTIONS } from '@dreamcommerce/utilities';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
- import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
6
5
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
7
6
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
8
7
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
9
- import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS } from './base_message_constants.js';
8
+ import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
10
9
 
11
10
  class BaseMessage extends PhoenixLightLitElement {
12
11
  constructor() {
@@ -15,11 +14,15 @@ class BaseMessage extends PhoenixLightLitElement {
15
14
  this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
16
15
  this.direction = DIRECTIONS.topCenter;
17
16
  this.offset = DEFAULT_MESSAGE_OFFSET;
17
+ this.mouseonly = false;
18
+ this.tabindex = '-1';
18
19
  this._setupEventListeners = () => {
19
20
  this.addEventListener('mouseenter', this.open);
20
21
  this.addEventListener('mouseleave', this.close);
21
- this.addEventListener('focusin', this.open);
22
- this.addEventListener('focusout', this.close);
22
+ if (!this.mouseonly) {
23
+ this.addEventListener('focusin', this.open);
24
+ this.addEventListener('focusout', this.close);
25
+ }
23
26
  };
24
27
  this._positionMessage = () => {
25
28
  requestAnimationFrame(() => {
@@ -55,49 +58,11 @@ class BaseMessage extends PhoenixLightLitElement {
55
58
  });
56
59
  }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
57
60
  };
58
- this._handleFocusWithinMessage = (ev) => {
59
- var _a;
60
- if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
61
- this.close();
62
- if (!document.activeElement || ev.shiftKey)
63
- return;
64
- const $focusableElements = UiDomUtils.getFocusableElements(this);
65
- const activeElementIndex = $focusableElements.indexOf(document.activeElement);
66
- const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
67
- if (!isLastFocusableChild)
68
- return;
69
- this.close();
70
- };
71
- this._handleReverseTab = () => {
72
- const $focusableElements = UiDomUtils.getFocusableElements(document.body);
73
- const activeElement = document.activeElement;
74
- const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
75
- const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
76
- const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
77
- if ($previousElementMessageParent === this)
78
- return;
79
- if ($previousElementMessageParent)
80
- $previousElementMessageParent.open();
81
- if (this._isBaseMessage(activeElement))
82
- activeElement.close();
83
- };
84
61
  this._clickOutsideController = new ClickOutsideController({
85
62
  host: this,
86
63
  container: this,
87
64
  action: this.close
88
65
  });
89
- new KeystrokesController({
90
- host: this,
91
- keys: ['tab'],
92
- target: this,
93
- callback: this._handleFocusWithinMessage
94
- });
95
- new KeystrokesController({
96
- host: this,
97
- keys: [['shift', 'tab']],
98
- target: document.body,
99
- callback: this._handleReverseTab
100
- });
101
66
  }
102
67
  connectedCallback(messageComponentName = '') {
103
68
  super.connectedCallback();
@@ -113,6 +78,7 @@ class BaseMessage extends PhoenixLightLitElement {
113
78
  elementToPosition: this._$messageContent,
114
79
  offset: this.offset
115
80
  });
81
+ this.setAttribute('tabindex', this.tabindex);
116
82
  this._setupEventListeners();
117
83
  }
118
84
  static _appendMessagePortal() {
@@ -123,11 +89,6 @@ class BaseMessage extends PhoenixLightLitElement {
123
89
  $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
124
90
  document.body.appendChild($portalTarget);
125
91
  }
126
- _isBaseMessage($element) {
127
- if (MESSAGE_ELEMENTS.includes($element.localName))
128
- return true;
129
- return false;
130
- }
131
92
  }
132
93
  __decorate([
133
94
  property({ type: Boolean, reflect: true }),
@@ -144,7 +105,15 @@ __decorate([
144
105
  __decorate([
145
106
  property({ type: String }),
146
107
  __metadata("design:type", Number)
147
- ], BaseMessage.prototype, "offset", void 0);
108
+ ], BaseMessage.prototype, "offset", void 0);
109
+ __decorate([
110
+ property({ type: Boolean }),
111
+ __metadata("design:type", Boolean)
112
+ ], BaseMessage.prototype, "mouseonly", void 0);
113
+ __decorate([
114
+ property({ type: String }),
115
+ __metadata("design:type", String)
116
+ ], BaseMessage.prototype, "tabindex", void 0);
148
117
 
149
118
  export { BaseMessage };
150
119
  //# sourceMappingURL=base_message.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,15 +1,14 @@
1
- import { HINT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
2
- import { TOOLTIP_ELEMENT_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
1
+ import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
2
+ import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
3
3
 
4
4
  const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
5
5
  const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
6
6
  const MESSAGE_REMOVED_CLASS_NAME = `removed`;
7
7
  const DEFAULT_MESSAGE_OFFSET = 10;
8
- const MESSAGE_ELEMENTS = [TOOLTIP_ELEMENT_NAME, HINT_ELEMENT_NAME];
9
8
  const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
10
9
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
11
10
  const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
12
11
  const MESSAGE_CLOSE_DELAY_IN_MS = 500;
13
12
 
14
- export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_ELEMENTS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
13
+ export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
15
14
  //# sourceMappingURL=base_message_constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,10 +1,14 @@
1
1
  import { Any } from 'ts-toolbelt';
2
- import { ReactiveControllerHost } from 'lit';
2
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
3
3
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
4
+ import { HSelect } from "../../components/form/select/select";
4
5
  export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
5
6
  export declare type TListBoxKeyboardControllerConstructorOptions = {
6
- host: ReactiveControllerHost & HTMLElement;
7
+ host: ReactiveControllerHost & HSelect;
7
8
  $list: HTMLElement;
8
9
  listItemSelector?: string;
9
10
  orientation?: TListBoxKeyboardNavigationDirection;
10
11
  };
12
+ export interface IListboxController extends ReactiveController {
13
+ calculateSelectedOptionIndex(): void;
14
+ }
@@ -1,4 +1,5 @@
1
1
  import 'ts-toolbelt';
2
2
  import 'lit';
3
3
  import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
4
+ import '@phoenixRoot/components/form/select/select';
4
5
  //# sourceMappingURL=list_box_controller_types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}
1
+ {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
@@ -1,10 +1,14 @@
1
- import { ReactiveController } from 'lit';
2
- import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
3
- export declare class ListBoxKeyboardController implements ReactiveController {
1
+ import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
2
+ export declare class ListBoxKeyboardController implements IListboxController {
4
3
  #private;
5
4
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
6
5
  hostConnected(): void;
6
+ private _handleKeyboardNavigation;
7
7
  private _handleArrowNavigation;
8
+ private _findCurrentIndex;
9
+ private _handleWriteableCharacter;
10
+ calculateSelectedOptionIndex: () => void;
8
11
  private _getPrevOptionIndex;
9
12
  private _getNextOptionIndex;
13
+ hostDisconnected(): void;
10
14
  }
@@ -1,7 +1,6 @@
1
1
  import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import 'lit';
3
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
4
- import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
5
4
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
6
5
 
7
6
  var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -13,25 +12,54 @@ class ListBoxKeyboardController {
13
12
  _ListBoxKeyboardController__$options.set(this, void 0);
14
13
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
15
14
  _ListBoxKeyboardController_keys.set(this, void 0);
15
+ this._handleKeyboardNavigation = (ev) => {
16
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
17
+ this._handleArrowNavigation(ev);
18
+ return;
19
+ }
20
+ this._handleWriteableCharacter(ev);
21
+ };
16
22
  this._handleArrowNavigation = (event) => {
17
23
  event.preventDefault();
18
24
  const { key } = event;
19
- const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
25
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
26
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
27
+ });
28
+ const prevOptionIndex = this._findCurrentIndex();
20
29
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
21
30
  if (newOptionIndex === undefined) {
22
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
23
- newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
31
+ newOptionIndex = this._findCurrentIndex();
24
32
  }
25
33
  if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
26
34
  return;
27
35
  if (prevOptionIndex !== undefined) {
28
36
  const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
29
- UiDomUtils.makeUnnavigable($prevOption);
37
+ $prevOption && UiDomUtils.makeUnnavigable($prevOption);
30
38
  }
31
39
  __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
- const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
33
- UiDomUtils.makeNavigable($focusedOption);
34
- $focusedOption.focus();
40
+ const $focusedOption = $availableOptions[newOptionIndex];
41
+ if ($focusedOption) {
42
+ UiDomUtils.makeNavigable($focusedOption);
43
+ $focusedOption.focus();
44
+ }
45
+ };
46
+ this._findCurrentIndex = () => {
47
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
48
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
49
+ });
50
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
51
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
52
+ };
53
+ this._handleWriteableCharacter = (ev) => {
54
+ var _a;
55
+ const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
56
+ if (!$searchInput)
57
+ return;
58
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
59
+ };
60
+ this.calculateSelectedOptionIndex = () => {
61
+ const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
62
+ __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
35
63
  };
36
64
  __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
37
65
  __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -41,12 +69,7 @@ class ListBoxKeyboardController {
41
69
  __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
42
70
  }
43
71
  hostConnected() {
44
- new KeystrokesController({
45
- host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
46
- keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
47
- callback: this._handleArrowNavigation,
48
- target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
49
- });
72
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
50
73
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
51
74
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
52
75
  if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -64,15 +87,39 @@ class ListBoxKeyboardController {
64
87
  return undefined;
65
88
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
66
89
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
90
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
91
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
92
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
93
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
94
+ });
95
+ if (!!$availableOptions[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
96
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
97
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
98
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
99
+ if (newIndexOfCurrentlySelectedOption)
100
+ return newIndexOfCurrentlySelectedOption - 1;
67
101
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
68
102
  }
69
103
  _getNextOptionIndex() {
70
104
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
71
105
  return undefined;
72
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
106
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
107
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
108
+ });
109
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
73
110
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
111
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
112
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
113
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
114
+ if (newIndexOfCurrentlySelectedOption)
115
+ return newIndexOfCurrentlySelectedOption + 1;
116
+ return 0;
117
+ }
74
118
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
75
119
  }
120
+ hostDisconnected() {
121
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
122
+ }
76
123
  }
77
124
  _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
78
125
 
@@ -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;"}
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;AACA;AACA;"}
@@ -72,8 +72,8 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
72
72
  export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
73
73
  export { HBackdrop } from './components/backdrop/backdrop.js';
74
74
  export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
75
- export { HColorItem } from './components/color_swatches/color_item/color_item.js';
76
75
  export { HColorSwatches } from './components/color_swatches/color_swatches.js';
76
+ export { HColorItem } from './components/color_swatches/color_item/color_item.js';
77
77
  export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
78
78
  export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
79
79
  export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
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.5",
5
+ "version": "1.15.6-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",