@shoper/phoenix_design_system 1.0.3 → 1.0.4

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 (15) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +40 -23
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -4
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +5 -2
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  8. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +41 -24
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -4
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -0
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +5 -2
  14. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  15. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -49,6 +49,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
49
49
  utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
50
50
  };
51
51
  this.show = async () => {
52
+ if (this.opened)
53
+ return;
52
54
  return new Promise((resolve) => {
53
55
  var _a, _b;
54
56
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
@@ -93,25 +95,29 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
93
95
  }
94
96
  await this.hide();
95
97
  };
96
- this.hide = async (ev) => new Promise((resolve) => {
97
- var _a;
98
- if (ev && ev.detail.name !== this.name)
98
+ this.hide = async (ev) => {
99
+ if (!this.opened)
99
100
  return;
100
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
101
- const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
102
- window.requestAnimationFrame(() => {
103
- var _a, _b;
104
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
105
- (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
106
- setTimeout(() => {
107
- var _a;
108
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
109
- this.opened = false;
110
- this._dispatchHideDropdownEvent();
111
- resolve();
112
- }, transitionDuration);
101
+ return new Promise((resolve) => {
102
+ var _a;
103
+ if (ev && ev.detail.name !== this.name)
104
+ return;
105
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
106
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
107
+ window.requestAnimationFrame(() => {
108
+ var _a, _b;
109
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
110
+ (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
111
+ setTimeout(() => {
112
+ var _a;
113
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
114
+ this.opened = false;
115
+ this._dispatchHideDropdownEvent();
116
+ resolve();
117
+ }, transitionDuration);
118
+ });
113
119
  });
114
- });
120
+ };
115
121
  this._dispatchHideDropdownEvent = () => {
116
122
  const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hidden, {
117
123
  bubbles: true
@@ -138,13 +144,16 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
138
144
  await this.hide();
139
145
  };
140
146
  this._handleForwardFocus = async (ev) => {
141
- const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent);
147
+ if (!this.opened || ev.shiftKey)
148
+ return;
149
+ const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
142
150
  const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
143
- const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
151
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
152
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
144
153
  if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
145
- this._focusOnNextElementAfterToggler(ev);
154
+ this._handleFocusOnNextElement(ev);
146
155
  };
147
- this._focusOnNextElementAfterToggler = async (ev) => {
156
+ this._handleFocusOnNextElement = async (ev) => {
148
157
  ev.preventDefault();
149
158
  const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
150
159
  const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
@@ -153,10 +162,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
153
162
  return currentElement;
154
163
  return null;
155
164
  });
156
- if ($nextElementToFocus)
157
- $nextElementToFocus.focus();
158
165
  await this._hideDropdownsSequentially();
159
166
  await this.hide();
167
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
168
+ };
169
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
170
+ var _a;
171
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
172
+ if (isTogglerLastChildOfPreviousDropdown) {
173
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
174
+ return;
175
+ }
176
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
160
177
  };
161
178
  this._handleBackwardFocus = async (ev) => {
162
179
  var _a;
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.js CHANGED
@@ -22,10 +22,7 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
22
22
  }
23
23
  render() {
24
24
  super.render();
25
- return lit.html `
26
- <div role="dialog">${this.getSlot('content')}</div>
27
- <div tabindex="0" aria-hidden="true"></div>
28
- `;
25
+ return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
29
26
  }
30
27
  };
31
28
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -16,9 +16,12 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
16
  super();
17
17
  this.name = '';
18
18
  this.toggleOnHover = false;
19
+ this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
20
+ ev.stopImmediatePropagation();
21
+ this._dispatchToggleDropdownEvent(ev);
22
+ };
19
23
  this._dispatchToggleDropdownEvent = (ev) => {
20
24
  ev.preventDefault();
21
- ev.stopImmediatePropagation();
22
25
  const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
23
26
  bubbles: true
24
27
  });
@@ -42,7 +45,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
42
45
  connectedCallback() {
43
46
  var _a;
44
47
  super.connectedCallback();
45
- this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEvent);
48
+ this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
46
49
  this._$dropdown = this.parentElement;
47
50
  if (this._$dropdown.isOpened)
48
51
  this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -38,6 +38,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
38
38
  private _toggleScroll;
39
39
  private _closeDropdownOnEscape;
40
40
  private _handleForwardFocus;
41
+ private _handleFocusOnNextElement;
41
42
  private _focusOnNextElementAfterToggler;
42
43
  private _handleBackwardFocus;
43
44
  private _hoverToggle;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -9,7 +9,7 @@ import { BackdropController } from '../backdrop/controller/backdrop_controller.j
9
9
  import { property } from '@lit/reactive-element/decorators.js';
10
10
  import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
11
11
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
12
- import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTENT_NAME } from './dropdown_constants.js';
12
+ import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
13
13
  import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
14
14
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
15
15
  import throttle_1 from '../../../../../external/lodash/throttle.js';
@@ -45,6 +45,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
45
45
  UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
46
46
  };
47
47
  this.show = async () => {
48
+ if (this.opened)
49
+ return;
48
50
  return new Promise((resolve) => {
49
51
  var _a, _b;
50
52
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
@@ -89,25 +91,29 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
89
91
  }
90
92
  await this.hide();
91
93
  };
92
- this.hide = async (ev) => new Promise((resolve) => {
93
- var _a;
94
- if (ev && ev.detail.name !== this.name)
94
+ this.hide = async (ev) => {
95
+ if (!this.opened)
95
96
  return;
96
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
97
- const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
98
- window.requestAnimationFrame(() => {
99
- var _a, _b;
100
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
101
- (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
102
- setTimeout(() => {
103
- var _a;
104
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
105
- this.opened = false;
106
- this._dispatchHideDropdownEvent();
107
- resolve();
108
- }, transitionDuration);
97
+ return new Promise((resolve) => {
98
+ var _a;
99
+ if (ev && ev.detail.name !== this.name)
100
+ return;
101
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
102
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
103
+ window.requestAnimationFrame(() => {
104
+ var _a, _b;
105
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
106
+ (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
107
+ setTimeout(() => {
108
+ var _a;
109
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
110
+ this.opened = false;
111
+ this._dispatchHideDropdownEvent();
112
+ resolve();
113
+ }, transitionDuration);
114
+ });
109
115
  });
110
- });
116
+ };
111
117
  this._dispatchHideDropdownEvent = () => {
112
118
  const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hidden, {
113
119
  bubbles: true
@@ -134,13 +140,16 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
134
140
  await this.hide();
135
141
  };
136
142
  this._handleForwardFocus = async (ev) => {
137
- const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent);
143
+ if (!this.opened || ev.shiftKey)
144
+ return;
145
+ const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
138
146
  const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
139
- const isActiveElementLastFocusableElement = document.activeElement === this._lastFocusableElement;
147
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
148
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
140
149
  if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
141
- this._focusOnNextElementAfterToggler(ev);
150
+ this._handleFocusOnNextElement(ev);
142
151
  };
143
- this._focusOnNextElementAfterToggler = async (ev) => {
152
+ this._handleFocusOnNextElement = async (ev) => {
144
153
  ev.preventDefault();
145
154
  const $focusableElements = UiDomUtils.getFocusableElements(document.body);
146
155
  const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
@@ -149,10 +158,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
149
158
  return currentElement;
150
159
  return null;
151
160
  });
152
- if ($nextElementToFocus)
153
- $nextElementToFocus.focus();
154
161
  await this._hideDropdownsSequentially();
155
162
  await this.hide();
163
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
164
+ };
165
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
166
+ var _a;
167
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
168
+ if (isTogglerLastChildOfPreviousDropdown) {
169
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
170
+ return;
171
+ }
172
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
156
173
  };
157
174
  this._handleBackwardFocus = async (ev) => {
158
175
  var _a;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.js CHANGED
@@ -18,10 +18,7 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
18
18
  }
19
19
  render() {
20
20
  super.render();
21
- return html `
22
- <div role="dialog">${this.getSlot('content')}</div>
23
- <div tabindex="0" aria-hidden="true"></div>
24
- `;
21
+ return html ` <div role="dialog">${this.getSlot('content')}</div> `;
25
22
  }
26
23
  };
27
24
  __decorate([
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
7
7
  toggleOnHover: boolean;
8
8
  constructor();
9
9
  connectedCallback(): void;
10
+ private _dispatchToggleDropdownEventWithKeyboard;
10
11
  private _dispatchToggleDropdownEvent;
11
12
  private _handleFocusToOpenedDropdown;
12
13
  disconnectedCallback(): void;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -12,9 +12,12 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
12
  super();
13
13
  this.name = '';
14
14
  this.toggleOnHover = false;
15
+ this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
16
+ ev.stopImmediatePropagation();
17
+ this._dispatchToggleDropdownEvent(ev);
18
+ };
15
19
  this._dispatchToggleDropdownEvent = (ev) => {
16
20
  ev.preventDefault();
17
- ev.stopImmediatePropagation();
18
21
  const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
19
22
  bubbles: true
20
23
  });
@@ -38,7 +41,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
38
41
  connectedCallback() {
39
42
  var _a;
40
43
  super.connectedCallback();
41
- this._btnController = new BtnController(this, this._dispatchToggleDropdownEvent);
44
+ this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
42
45
  this._$dropdown = this.parentElement;
43
46
  if (this._$dropdown.isOpened)
44
47
  this._toggleElementAriaController = new ToggleElementAriaController({
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map CHANGED
@@ -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;"}
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;"}
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.0.3",
5
+ "version": "1.0.4",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",