@shoper/phoenix_design_system 1.11.10-5 → 1.11.10-7

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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +47 -21
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +2 -0
  4. package/build/esm/packages/phoenix/src/components/form/search/search.js +47 -21
  5. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -36,7 +36,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
36
36
  this._historyContext = new behavior_subject.BehaviorSubject({
37
37
  showLoadMore: false
38
38
  });
39
- this._activeItemId = `${this.id}-1`;
39
+ this._activeItemId = `${this._id}-1`;
40
40
  this._translations = {};
41
41
  this._containerRole = 'grid';
42
42
  this._bindKeys = (ev) => {
@@ -60,7 +60,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
60
60
  break;
61
61
  case 'Enter':
62
62
  ev.preventDefault();
63
- if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
63
+ if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
64
64
  return;
65
65
  this._handleChooseSearchItem();
66
66
  break;
@@ -70,6 +70,10 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
70
70
  this._resetSearchView();
71
71
  break;
72
72
  case 'Tab':
73
+ if (ev.shiftKey) {
74
+ this._focusOnPreviousElementBeforeSearchInput(ev);
75
+ return;
76
+ }
73
77
  const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
74
78
  if (!isFocusedOnSearchInput) {
75
79
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
@@ -77,9 +81,26 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
77
81
  this._resetSearchView();
78
82
  document.removeEventListener('keyup', this._bindKeys);
79
83
  }
84
+ this._focusOnNextElementAfterSearchInput(ev);
80
85
  break;
81
86
  }
82
87
  };
88
+ this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
89
+ ev.preventDefault();
90
+ const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
91
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
92
+ this._resetSearchView();
93
+ document.removeEventListener('keyup', this._bindKeys);
94
+ utilities.UiDomUtils.getPreviousFocusableElement(this).focus();
95
+ };
96
+ this._focusOnNextElementAfterSearchInput = async (ev) => {
97
+ ev.preventDefault();
98
+ const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
99
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
100
+ this._resetSearchView();
101
+ document.removeEventListener('keyup', this._bindKeys);
102
+ utilities.UiDomUtils.getNextFocusableElement(this).focus();
103
+ };
83
104
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
84
105
  var _a;
85
106
  const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
@@ -118,7 +139,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
118
139
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
119
140
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
120
141
  $nextSearchItemElement.focus();
121
- this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
142
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
122
143
  };
123
144
  this._handleBackwardListFocus = () => {
124
145
  var _a, _b;
@@ -150,7 +171,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
150
171
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
151
172
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
152
173
  $previousSearchItemElement.focus();
153
- this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
174
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
154
175
  };
155
176
  this._setActiveItemId = (newActiveItemId) => {
156
177
  this._activeItemId = newActiveItemId;
@@ -252,7 +273,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
252
273
  this._updateSearchView('', false);
253
274
  });
254
275
  this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
255
- if (this._activeItemId !== `${this.id}-1`)
276
+ if (this._activeItemId !== `${this._id}-1`)
256
277
  return;
257
278
  if (this._inputField.value === '') {
258
279
  this._updateSearchView(this._inputField.value, true);
@@ -279,7 +300,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
279
300
  }
280
301
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
281
302
  this._shouldShowMessage = shouldShowMessage;
282
- this._setActiveItemId(`${this.id}-1`);
303
+ this._setActiveItemId(`${this._id}-1`);
283
304
  this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
284
305
  this._displaySuggester(searchPhrase);
285
306
  if (!shouldUpdateSearchPhrase)
@@ -334,11 +355,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
334
355
  $input.setAttribute('aria-expanded', 'true');
335
356
  if (shouldShowHistory) {
336
357
  $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
337
- $input.setAttribute('haspopup', 'grid');
358
+ $input.setAttribute('aria-haspopup', 'grid');
338
359
  }
339
360
  if (shouldShowResults) {
340
361
  $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
341
- this._inputField.removeAttribute('haspopup');
362
+ this._inputField.removeAttribute('aria-haspopup');
342
363
  }
343
364
  }
344
365
  _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
@@ -358,7 +379,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
358
379
  }
359
380
  _resetSearchView() {
360
381
  this._shouldShowMessage = false;
361
- this._setActiveItemId(`${this.id}-1`);
382
+ this._setActiveItemId(`${this._id}-1`);
362
383
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
363
384
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
364
385
  this._hideHistorySuggestionsAndResults();
@@ -397,12 +418,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
397
418
  <div class="labeled-icon__signature">${this._translations.search}</div>
398
419
  </div>
399
420
 
400
- <div
401
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
402
- id="${this._searchContentContainerId}"
403
- role="${this._containerRole}"
404
- >
405
- ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
421
+ ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
422
+ <div
423
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
424
+ id="${this._searchContentContainerId}"
425
+ role="${this._containerRole}"
426
+ >
406
427
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
407
428
  .history="${this._historyLimitedContent}"
408
429
  .results="${this._searchResults}"
@@ -415,7 +436,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
415
436
  .history="${this._historyLimitedContent}"
416
437
  .translations="${this._translations}"
417
438
  active-item-id="${this._activeItemId}"
418
- search-id="${this.id}"
439
+ search-id="${this._id}"
419
440
  module-instance-id="${this.moduleInstanceId}"
420
441
  ></h-search-history>`)}
421
442
  ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
@@ -427,11 +448,17 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
427
448
  view="${this.view}"
428
449
  .translations="${this._translations}"
429
450
  active-item-id="${this._activeItemId}"
430
- search-id="${this.id}"
451
+ search-id="${this._id}"
431
452
  module-instance-id="${this.moduleInstanceId}"
432
453
  ></h-search-results>`)}
433
- `)}
434
- </div>
454
+ </div>
455
+ `, () => lit.html `
456
+ <div
457
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
458
+ id="${this._searchContentContainerId}"
459
+ role="${this._containerRole}"
460
+ hidden
461
+ ></div>`)}
435
462
  `;
436
463
  }
437
464
  };
@@ -497,6 +524,5 @@ tslib_es6.__decorate([
497
524
  ], exports.HSearch.prototype, "_containerRole", void 0);
498
525
  exports.HSearch = tslib_es6.__decorate([
499
526
  phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.search)
500
- ], exports.HSearch);
501
- // aria-activedescendant nie czyści się na layer not visible
527
+ ], exports.HSearch);
502
528
  //# sourceMappingURL=search.js.map
package/build/cjs/packages/phoenix/src/components/form/search/search.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,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/search.d.ts CHANGED
@@ -43,6 +43,8 @@ export declare class HSearch extends PhoenixLightLitElement {
43
43
  private _toggleSearchInputAttributes;
44
44
  private _toggleSearchContainerAttributes;
45
45
  private _bindKeys;
46
+ private _focusOnPreviousElementBeforeSearchInput;
47
+ private _focusOnNextElementAfterSearchInput;
46
48
  private _preventScrollingOnSearchContentBrowsing;
47
49
  private _handleForwardListFocus;
48
50
  private _handleForwardGridFocus;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -32,7 +32,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
32
32
  this._historyContext = new BehaviorSubject({
33
33
  showLoadMore: false
34
34
  });
35
- this._activeItemId = `${this.id}-1`;
35
+ this._activeItemId = `${this._id}-1`;
36
36
  this._translations = {};
37
37
  this._containerRole = 'grid';
38
38
  this._bindKeys = (ev) => {
@@ -56,7 +56,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
56
56
  break;
57
57
  case 'Enter':
58
58
  ev.preventDefault();
59
- if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
59
+ if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
60
60
  return;
61
61
  this._handleChooseSearchItem();
62
62
  break;
@@ -66,6 +66,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
66
66
  this._resetSearchView();
67
67
  break;
68
68
  case 'Tab':
69
+ if (ev.shiftKey) {
70
+ this._focusOnPreviousElementBeforeSearchInput(ev);
71
+ return;
72
+ }
69
73
  const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
70
74
  if (!isFocusedOnSearchInput) {
71
75
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
@@ -73,9 +77,26 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
73
77
  this._resetSearchView();
74
78
  document.removeEventListener('keyup', this._bindKeys);
75
79
  }
80
+ this._focusOnNextElementAfterSearchInput(ev);
76
81
  break;
77
82
  }
78
83
  };
84
+ this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
85
+ ev.preventDefault();
86
+ const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
87
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
88
+ this._resetSearchView();
89
+ document.removeEventListener('keyup', this._bindKeys);
90
+ UiDomUtils.getPreviousFocusableElement(this).focus();
91
+ };
92
+ this._focusOnNextElementAfterSearchInput = async (ev) => {
93
+ ev.preventDefault();
94
+ const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
95
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
96
+ this._resetSearchView();
97
+ document.removeEventListener('keyup', this._bindKeys);
98
+ UiDomUtils.getNextFocusableElement(this).focus();
99
+ };
79
100
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
80
101
  var _a;
81
102
  const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
@@ -114,7 +135,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
114
135
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
115
136
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
116
137
  $nextSearchItemElement.focus();
117
- this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
138
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
118
139
  };
119
140
  this._handleBackwardListFocus = () => {
120
141
  var _a, _b;
@@ -146,7 +167,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
146
167
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
147
168
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
148
169
  $previousSearchItemElement.focus();
149
- this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
170
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
150
171
  };
151
172
  this._setActiveItemId = (newActiveItemId) => {
152
173
  this._activeItemId = newActiveItemId;
@@ -248,7 +269,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
248
269
  this._updateSearchView('', false);
249
270
  });
250
271
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
251
- if (this._activeItemId !== `${this.id}-1`)
272
+ if (this._activeItemId !== `${this._id}-1`)
252
273
  return;
253
274
  if (this._inputField.value === '') {
254
275
  this._updateSearchView(this._inputField.value, true);
@@ -275,7 +296,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
275
296
  }
276
297
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
277
298
  this._shouldShowMessage = shouldShowMessage;
278
- this._setActiveItemId(`${this.id}-1`);
299
+ this._setActiveItemId(`${this._id}-1`);
279
300
  this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
280
301
  this._displaySuggester(searchPhrase);
281
302
  if (!shouldUpdateSearchPhrase)
@@ -330,11 +351,11 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
330
351
  $input.setAttribute('aria-expanded', 'true');
331
352
  if (shouldShowHistory) {
332
353
  $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
333
- $input.setAttribute('haspopup', 'grid');
354
+ $input.setAttribute('aria-haspopup', 'grid');
334
355
  }
335
356
  if (shouldShowResults) {
336
357
  $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
337
- this._inputField.removeAttribute('haspopup');
358
+ this._inputField.removeAttribute('aria-haspopup');
338
359
  }
339
360
  }
340
361
  _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
@@ -354,7 +375,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
354
375
  }
355
376
  _resetSearchView() {
356
377
  this._shouldShowMessage = false;
357
- this._setActiveItemId(`${this.id}-1`);
378
+ this._setActiveItemId(`${this._id}-1`);
358
379
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
359
380
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
360
381
  this._hideHistorySuggestionsAndResults();
@@ -393,12 +414,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
393
414
  <div class="labeled-icon__signature">${this._translations.search}</div>
394
415
  </div>
395
416
 
396
- <div
397
- class="${SEARCH_CLASS_NAMES.container}"
398
- id="${this._searchContentContainerId}"
399
- role="${this._containerRole}"
400
- >
401
- ${n(this._isSuggesterLayerVisible(), () => html `
417
+ ${n(this._isSuggesterLayerVisible(), () => html `
418
+ <div
419
+ class="${SEARCH_CLASS_NAMES.container}"
420
+ id="${this._searchContentContainerId}"
421
+ role="${this._containerRole}"
422
+ >
402
423
  ${n(this._shouldShowMessage, () => html `<h-search-message
403
424
  .history="${this._historyLimitedContent}"
404
425
  .results="${this._searchResults}"
@@ -411,7 +432,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
411
432
  .history="${this._historyLimitedContent}"
412
433
  .translations="${this._translations}"
413
434
  active-item-id="${this._activeItemId}"
414
- search-id="${this.id}"
435
+ search-id="${this._id}"
415
436
  module-instance-id="${this.moduleInstanceId}"
416
437
  ></h-search-history>`)}
417
438
  ${n(this._shouldShowResults, () => html `<h-search-results
@@ -423,11 +444,17 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
423
444
  view="${this.view}"
424
445
  .translations="${this._translations}"
425
446
  active-item-id="${this._activeItemId}"
426
- search-id="${this.id}"
447
+ search-id="${this._id}"
427
448
  module-instance-id="${this.moduleInstanceId}"
428
449
  ></h-search-results>`)}
429
- `)}
430
- </div>
450
+ </div>
451
+ `, () => html `
452
+ <div
453
+ class="${SEARCH_CLASS_NAMES.container}"
454
+ id="${this._searchContentContainerId}"
455
+ role="${this._containerRole}"
456
+ hidden
457
+ ></div>`)}
431
458
  `;
432
459
  }
433
460
  };
@@ -493,8 +520,7 @@ __decorate([
493
520
  ], HSearch.prototype, "_containerRole", void 0);
494
521
  HSearch = __decorate([
495
522
  phoenixCustomElement(SEARCH_COMPONENT_NAMES.search)
496
- ], HSearch);
497
- // aria-activedescendant nie czyści się na layer not visible
523
+ ], HSearch);
498
524
 
499
525
  export { HSearch };
500
526
  //# sourceMappingURL=search.js.map
package/build/esm/packages/phoenix/src/components/form/search/search.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,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11.10-5",
5
+ "version": "1.11.10-7",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",