@shoper/phoenix_design_system 1.13.0 → 1.14.1-0

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -1,17 +1,28 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+import '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 import { BREAKPOINTS } from '../../global_constants.js';
-import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_CSS_CLASSES, DROPDOWN_CONTAINER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS, DROPDOWN_CSS_CLASSES, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
     constructor() {
         super();
         this.name = '';
+        this._setupTogglerAria = () => {
+            this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
+            if (this._$dropdown.isOpened)
+                this._toggleElementAriaController = new ToggleElementAriaController({
+                    host: this,
+                    initialAriaExpandedValue: this._$dropdown.isOpened()
+                });
+            this.setAttribute('aria-haspopup', 'true');
+            if (this._$dropdown.id)
+                this.setAttribute('aria-controls', this._$dropdown.id);
+        };
         this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
             ev.stopImmediatePropagation();
             this._dispatchToggleDropdownEvent(ev);
@@ -25,18 +36,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             ev.preventDefault();
             this.emitCustomEvent(DROPDOWN_EVENTS.toggle);
         };
-        this._handleFocusToOpenedDropdown = async (ev) => {
-            if (ev.target !== this)
-                return;
-            const isOpened = this._$dropdown.isOpened();
-            if (!isOpened)
-                return;
-            const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
-            if (!$dropdownContent)
-                return;
-            ev.preventDefault();
-            UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
-        };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
         this.className = `${DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
     }
@@ -44,13 +43,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         var _a;
         super.connectedCallback();
         this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
-        this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
-        if (this._$dropdown.isOpened)
-            this._toggleElementAriaController = new ToggleElementAriaController({
-                host: this,
-                initialAriaExpandedValue: this._$dropdown.isOpened()
-            });
-        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
+        this._setupTogglerAria();
         const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
         if (hasToggleOnHover) {
             this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -58,10 +51,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         }
         this.addEventListener('click', this._dispatchToggleDropdownEvent);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
-    }
 };
 __decorate([
     property({ type: String, reflect: true }),

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/form/select/select.js

@@ -229,9 +229,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     updateOptionAriaAttribute($option) {
-        !$option.selected
-            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
-            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+        $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
@@ -296,13 +294,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 name="${this.controlName}"
                 offset=${this.offset}
                 content-width="full"
+                prevent-focus-trap
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
                 <h-dropdown-content
                     class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
                     ${ref(this._$dropdownContent)}
-                    name=${this.controlName}
+                    name="${this.controlName}"
                 >
                     <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
 

package/build/esm/packages/phoenix/src/components/form/select/select.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message.d.ts

@@ -6,6 +6,8 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     portalTarget: string;
     direction: TDirection;
     offset: number;
+    mouseonly: boolean;
+    tabindex: string;
     private _positionController;
     private _clickOutsideController;
     private _$messageContent;
@@ -21,7 +23,4 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     protected _positionMessage: () => void;
     open: () => void;
     close: () => void;
-    private _handleFocusWithinMessage;
-    private _handleReverseTab;
-    private _isBaseMessage;
 }

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -1,12 +1,11 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
+import { DIRECTIONS } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-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';
+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';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -15,10 +14,15 @@ class BaseMessage extends PhoenixLightLitElement {
         this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
         this.direction = DIRECTIONS.topCenter;
         this.offset = DEFAULT_MESSAGE_OFFSET;
+        this.mouseonly = false;
+        this.tabindex = '0';
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
-            this.addEventListener('focus', this.open);
+            if (!this.mouseonly) {
+                this.addEventListener('focusin', this.open);
+                this.addEventListener('focusout', this.close);
+            }
         };
         this._positionMessage = () => {
             requestAnimationFrame(() => {
@@ -54,49 +58,11 @@ class BaseMessage extends PhoenixLightLitElement {
                 });
             }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
         };
-        this._handleFocusWithinMessage = (ev) => {
-            var _a;
-            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
-                this.close();
-            if (!document.activeElement || ev.shiftKey)
-                return;
-            const $focusableElements = UiDomUtils.getFocusableElements(this);
-            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
-            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
-            if (!isLastFocusableChild)
-                return;
-            this.close();
-        };
-        this._handleReverseTab = () => {
-            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
-            const activeElement = document.activeElement;
-            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
-            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
-            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
-            if ($previousElementMessageParent === this)
-                return;
-            if ($previousElementMessageParent)
-                $previousElementMessageParent.open();
-            if (this._isBaseMessage(activeElement))
-                activeElement.close();
-        };
         this._clickOutsideController = new ClickOutsideController({
             host: this,
             container: this,
             action: this.close
         });
-        new KeystrokesController({
-            host: this,
-            keys: ['tab'],
-            target: this,
-            callback: this._handleFocusWithinMessage
-        });
-        new KeystrokesController({
-            host: this,
-            keys: [['shift', 'tab']],
-            target: document.body,
-            callback: this._handleReverseTab
-        });
     }
     connectedCallback(messageComponentName = '') {
         super.connectedCallback();
@@ -112,7 +78,7 @@ class BaseMessage extends PhoenixLightLitElement {
                 elementToPosition: this._$messageContent,
                 offset: this.offset
             });
-        this.setAttribute('tabindex', '0');
+        this.setAttribute('tabindex', this.tabindex);
         this._setupEventListeners();
     }
     static _appendMessagePortal() {
@@ -123,11 +89,6 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
-    _isBaseMessage($element) {
-        if (MESSAGE_ELEMENTS.includes($element.localName))
-            return true;
-        return false;
-    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -144,7 +105,15 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Number)
-], BaseMessage.prototype, "offset", void 0);
+], BaseMessage.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BaseMessage.prototype, "mouseonly", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BaseMessage.prototype, "tabindex", void 0);
 
 export { BaseMessage };
 //# sourceMappingURL=base_message.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js

@@ -1,15 +1,14 @@
-import { HINT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
-import { TOOLTIP_ELEMENT_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
+import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
+import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
 const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
 const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
-const MESSAGE_ELEMENTS = [TOOLTIP_ELEMENT_NAME, HINT_ELEMENT_NAME];
 const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 const MESSAGE_CLOSE_DELAY_IN_MS = 500;
 
-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 };
+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 };
 //# sourceMappingURL=base_message_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map

@@ -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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.d.ts

@@ -4,8 +4,9 @@ export declare class KeystrokesController implements ReactiveController {
     #private;
     private _keys;
     private _callback;
+    private _containerSelectors?;
     private _buffer;
-    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target, containerSelectors }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
     private _clearBuffer;

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js

@@ -3,11 +3,21 @@ import 'lit';
 
 var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback, target }) {
+    constructor({ host, keys, callback, target, containerSelectors }) {
         _KeystrokesController_host.set(this, void 0);
         _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._clearBuffer = () => {
+        this._clearBuffer = (ev) => {
+            if (!this._containerSelectors) {
+                this._buffer = [];
+                return;
+            }
+            const $newFocusedElement = ev.relatedTarget;
+            if ($newFocusedElement instanceof HTMLElement) {
+                const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
+                if (isNewFocusedElementAChild)
+                    return;
+            }
             this._buffer = [];
         };
         this._saveKey = (ev) => {
@@ -75,6 +85,7 @@ class KeystrokesController {
         __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         this._keys = keys;
         this._callback = callback;
+        this._containerSelectors = containerSelectors;
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
     }
     hostConnected() {

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts

@@ -4,4 +4,5 @@ export declare type TKeystrokesControllerProps = {
     keys: string[][] | string[] | string;
     callback: (ev: Event) => void;
     target: Element;
+    containerSelectors?: string[];
 };

package/build/esm/packages/phoenix/src/index.js

@@ -72,8 +72,8 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
-export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
+export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.13.0",
+  "version": "1.14.1-0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",