@shoper/phoenix_design_system 1.15.11-3 → 1.15.11-30

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

@@ -1,11 +1,13 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { DIRECTIONS } from '@dreamcommerce/utilities';
+import { DIRECTIONS, DomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.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 } from './base_message_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, LIST_OF_MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -16,12 +18,24 @@ class BaseMessage extends PhoenixLightLitElement {
         this.offset = DEFAULT_MESSAGE_OFFSET;
         this.mouseonly = false;
         this.tabindex = '-1';
+        this._messageId = v4();
+        this._handleChildrenAriaAttributes = () => {
+            [...this.children].forEach((child) => {
+                if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
+                    return;
+                child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
+            });
+        };
         this._setupEventListeners = () => {
+            var _a, _b;
             this.addEventListener('mouseenter', this.open);
-            this.addEventListener('mouseleave', this.close);
+            this.addEventListener('mouseleave', this._handleClose);
+            this.addEventListener('keydown', this._closeFromKeyboard);
+            (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
+            (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this._handleClose);
             if (!this.mouseonly) {
                 this.addEventListener('focusin', this.open);
-                this.addEventListener('focusout', this.close);
+                this.addEventListener('focusout', this._handleClose);
             }
         };
         this._positionMessage = () => {
@@ -39,8 +53,18 @@ class BaseMessage extends PhoenixLightLitElement {
                 this.opened = true;
             }, MESSAGE_SHOW_DELAY_IN_MS);
         };
-        this.close = () => {
-            this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
+        this._closeFromKeyboard = (ev) => {
+            if (ev.key !== 'Escape' || !this.opened)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close(true);
+        };
+        this._handleClose = () => {
+            this.close();
+        };
+        this.close = (shouldCloseImmediately = false) => {
+            this._shouldDelayClosing = !shouldCloseImmediately && Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
             if (!this.opened)
                 return;
@@ -61,7 +85,7 @@ class BaseMessage extends PhoenixLightLitElement {
         this._clickOutsideController = new ClickOutsideController({
             host: this,
             container: this,
-            action: this.close
+            action: this._handleClose
         });
     }
     connectedCallback(messageComponentName = '') {
@@ -79,8 +103,14 @@ class BaseMessage extends PhoenixLightLitElement {
                 offset: this.offset
             });
         this.setAttribute('tabindex', this.tabindex);
+        if (!this._$baseMessageContent)
+            this._$baseMessageContent = [...this.children].find((child) => LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
         this._setupEventListeners();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._handleChildrenAriaAttributes();
+    }
     static _appendMessagePortal() {
         const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
         if ($messagePortalTarget)
@@ -89,6 +119,22 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
+        (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this._handleClose);
+    }
+    render() {
+        var _a;
+        super.render();
+        return html `
+            <span class="sr-only" id="${this._messageId}">${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}</span>
+            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),

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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -7,3 +7,5 @@ export declare const MESSAGE_CONTENT_ELEMENTS: string[];
 export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
 export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+export declare const LIST_OF_MESSAGE_CONTENT_ELEMENTS: string[];
+export declare const LIST_OF_MESSAGE_CHILDREN: string[];

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

@@ -1,3 +1,4 @@
+import { PORTAL_COMPONENT_NAME } from '../portal/portal_constants.js';
 import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
 import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
@@ -8,7 +9,9 @@ const DEFAULT_MESSAGE_OFFSET = 10;
 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;
+const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
+const LIST_OF_MESSAGE_CHILDREN = [...LIST_OF_MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
 
-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 };
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, LIST_OF_MESSAGE_CONTENT_ELEMENTS, 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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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_content.js

@@ -16,7 +16,6 @@ class BaseMessageContent extends PhoenixLightLitElement {
     }
     _setupAriaAttributes() {
         this.setAttribute('role', 'tooltip');
-        this.setAttribute('inert', '');
     }
 }
 __decorate([

package/build/esm/packages/phoenix/src/components/messages/base_message_content.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/messages/base_message_types.d.ts

@@ -1,4 +1,4 @@
 export interface IBaseMessage {
     open: () => void;
-    close: () => void;
+    close: (shouldCloseImmediately?: boolean) => void;
 }

package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts

@@ -1,7 +1,5 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HHint extends BaseMessage {
     constructor();
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js

@@ -1,8 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HHint = class HHint extends BaseMessage {
@@ -14,14 +12,6 @@ let HHint = class HHint extends BaseMessage {
         super.connectedCallback(HINT_CLASS_NAME);
         this.classList.add(HINT_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HHint = __decorate([
     phoenixCustomElement(HINT_ELEMENT_NAME),

package/build/esm/packages/phoenix/src/components/messages/hints/hint.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts

@@ -1,6 +1,4 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HTooltip extends BaseMessage {
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -1,8 +1,6 @@
 import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HTooltip = class HTooltip extends BaseMessage {
@@ -10,14 +8,6 @@ let HTooltip = class HTooltip extends BaseMessage {
         super.connectedCallback(TOOLTIP_CLASS_NAME);
         this.classList.add(TOOLTIP_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HTooltip = __decorate([
     phoenixCustomElement(TOOLTIP_ELEMENT_NAME)

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

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

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js

@@ -3,8 +3,9 @@ const PORTAL_EVENTS = {
     close: 'close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_COMPONENT_NAME = 'h-portal';
 const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
 const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
-export { PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { PORTAL_COMPONENT_NAME, PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
 //# sourceMappingURL=portal_constants.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map

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

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts

@@ -1,14 +1,10 @@
 import { Any } from 'ts-toolbelt';
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { ReactiveControllerHost } from 'lit';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
-import { HSelect } from "../../components/form/select/select";
 export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
 export declare type TListBoxKeyboardControllerConstructorOptions = {
-    host: ReactiveControllerHost & HSelect;
+    host: ReactiveControllerHost & HTMLElement;
     $list: HTMLElement;
     listItemSelector?: string;
     orientation?: TListBoxKeyboardNavigationDirection;
 };
-export interface IListboxController extends ReactiveController {
-    calculateSelectedOptionIndex(): void;
-}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js

@@ -1,5 +1,4 @@
 import 'ts-toolbelt';
 import 'lit';
 import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
-import '@phoenixRoot/components/form/select/select';
 //# sourceMappingURL=list_box_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map

@@ -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,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
+{"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"}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts

@@ -1,15 +1,10 @@
-import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
-export declare class ListBoxKeyboardController implements IListboxController {
+import { ReactiveController } from 'lit';
+import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
+export declare class ListBoxKeyboardController implements ReactiveController {
     #private;
-    currentOptionIndex: number | undefined;
     constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
     hostConnected(): void;
-    private _handleKeyboardNavigation;
     private _handleArrowNavigation;
-    private _findCurrentIndex;
-    private _handleWriteableCharacter;
-    calculateSelectedOptionIndex: () => void;
     private _getPrevOptionIndex;
     private _getNextOptionIndex;
-    hostDisconnected(): void;
 }

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js

@@ -1,64 +1,37 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { UiDomUtils } from '@dreamcommerce/utilities';
+import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
 import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
 
-var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
 class ListBoxKeyboardController {
     constructor({ host, $list, listItemSelector = '[role="option"]', orientation = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
         _ListBoxKeyboardController_host.set(this, void 0);
         _ListBoxKeyboardController__$list.set(this, void 0);
+        _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
         _ListBoxKeyboardController__$options.set(this, void 0);
         _ListBoxKeyboardController_listItemSelector.set(this, void 0);
         _ListBoxKeyboardController_keys.set(this, void 0);
-        this._handleKeyboardNavigation = (ev) => {
-            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
-                this._handleArrowNavigation(ev);
-                return;
-            }
-            this._handleWriteableCharacter(ev);
-        };
         this._handleArrowNavigation = (event) => {
             event.preventDefault();
             const { key } = event;
-            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-            });
-            const prevOptionIndex = this._findCurrentIndex();
+            const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
             let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
             if (newOptionIndex === undefined) {
-                newOptionIndex = this._findCurrentIndex();
+                const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
+                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
             }
-            if (newOptionIndex === this.currentOptionIndex)
+            if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
                 return;
             if (prevOptionIndex !== undefined) {
                 const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
-                $prevOption && UiDomUtils.makeUnnavigable($prevOption);
+                UiDomUtils.makeUnnavigable($prevOption);
             }
-            this.currentOptionIndex = newOptionIndex;
-            const $focusedOption = $availableOptions[newOptionIndex];
-            if ($focusedOption) {
-                UiDomUtils.makeNavigable($focusedOption);
-                $focusedOption.focus();
-            }
-        };
-        this._findCurrentIndex = () => {
-            const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-            });
-            const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
-            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
-        };
-        this._handleWriteableCharacter = (ev) => {
-            var _a;
-            const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-            if (!$searchInput)
-                return;
-            $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
-        };
-        this.calculateSelectedOptionIndex = () => {
-            const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-            this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
+            const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
+            UiDomUtils.makeNavigable($focusedOption);
+            $focusedOption.focus();
         };
         __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
         __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -68,59 +41,40 @@ class ListBoxKeyboardController {
         __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
     }
     hostConnected() {
-        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+        new KeystrokesController({
+            host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
+            keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
+            callback: this._handleArrowNavigation,
+            target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
+        });
         UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
             if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
                 return;
-            if (this.currentOptionIndex === undefined)
+            if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
                 return;
-            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
+            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
             UiDomUtils.makeUnnavigable($prevOption);
-            this.currentOptionIndex = undefined;
+            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
         });
         __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
     }
     _getPrevOptionIndex() {
-        if (this.currentOptionIndex === undefined)
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        if (this.currentOptionIndex <= 0)
-            return this.currentOptionIndex;
-        if (this.currentOptionIndex <= 0)
-            return this.currentOptionIndex;
-        const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-        });
-        if (!!$availableOptions[this.currentOptionIndex - 1])
-            return this.currentOptionIndex - 1;
-        // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
-        const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
-        if (newIndexOfCurrentlySelectedOption)
-            return newIndexOfCurrentlySelectedOption - 1;
-        return this.currentOptionIndex - 1;
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
+            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
     }
     _getNextOptionIndex() {
-        if (this.currentOptionIndex === undefined)
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
             return undefined;
-        const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
-            return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-        });
-        if (this.currentOptionIndex === $availableOptions.length - 1)
-            return this.currentOptionIndex;
-        if (this.currentOptionIndex > $availableOptions.length - 1) {
-            // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
-            const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
-            if (newIndexOfCurrentlySelectedOption)
-                return newIndexOfCurrentlySelectedOption + 1;
-            return 0;
-        }
-        return this.currentOptionIndex + 1;
-    }
-    hostDisconnected() {
-        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
+            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
     }
 }
-_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
 
 export { ListBoxKeyboardController };
 //# sourceMappingURL=list_box_keyboard_controller.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_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;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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.15.11-3",
+  "version": "1.15.11-30",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider && start-storybook --no-open --port 6007",
     "build": "rimraf ./build/ && tsc --project tsconfig.build.json && rollup --config rollup.config.js",
     "watch": "rollup --config rollup.config.js --watch",
-    "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js",
+    "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js -- hint",
     "watch:tests:unit": "jest --watch -c .config/jest/jest.config.js"
   },
   "peerDependencies": {
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.20.1",
+    "@dreamcommerce/utilities": "^1.20.1-2",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js

@@ -1,96 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
-require('lit');
-var utilities = require('@dreamcommerce/utilities');
-
-var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
-class SelectTogglerKeyboardController {
-    constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
-        _SelectTogglerKeyboardController_host.set(this, void 0);
-        _SelectTogglerKeyboardController__$toggler.set(this, void 0);
-        _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
-        _SelectTogglerKeyboardController__$options.set(this, void 0);
-        this._handleKeyboardNavigation = (ev) => {
-            const arrowKeys = ['ArrowUp', 'ArrowDown'];
-            if (arrowKeys.includes(ev.key)) {
-                this._openSelect(ev);
-                return;
-            }
-            if (ev.key === 'Home') {
-                this._openSelectAndGoToFirstElement(ev);
-                return;
-            }
-            if (ev.key === 'End') {
-                this._openSelectAndGoToLastElement(ev);
-                return;
-            }
-            const isAWriteableCharacter = ev.key.length === 1;
-            if (isAWriteableCharacter)
-                this._openSelectAndGoToMatchedElement(ev);
-        };
-        this._openSelect = (event) => {
-            var _a;
-            event.preventDefault();
-            (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
-        };
-        this._openSelectAndGoToFirstElement = async (event) => {
-            var _a;
-            event.preventDefault();
-            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
-            const $firstOption = this._getAvailableOptions()[0];
-            if ($firstOption)
-                this._navigate($firstOption);
-        };
-        this._openSelectAndGoToLastElement = async (event) => {
-            var _a;
-            event.preventDefault();
-            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
-            const $availableOptions = this._getAvailableOptions();
-            const $lastOption = $availableOptions[$availableOptions.length - 1];
-            if ($lastOption)
-                this._navigate($lastOption);
-        };
-        this._openSelectAndGoToMatchedElement = async (event) => {
-            var _a;
-            event.preventDefault();
-            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
-            const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
-            if ($matchedOption)
-                this._navigate($matchedOption);
-        };
-        this._getAvailableOptions = () => {
-            return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
-                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
-            });
-        };
-        this._findSelectedIndex = () => {
-            const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
-            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
-        };
-        this._navigate = ($newOption) => {
-            const $selectedOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
-            utilities.UiDomUtils.makeUnnavigable($selectedOption);
-            const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
-            tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
-            utilities.UiDomUtils.makeNavigable($newOption);
-            $newOption.focus();
-        };
-        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
-        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
-        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
-        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
-    }
-    hostConnected() {
-        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
-    }
-    hostDisconnected() {
-        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
-    }
-}
-_SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
-
-exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
-//# sourceMappingURL=select_toggler_keyboard_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map

@@ -1 +0,0 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts

@@ -1,15 +0,0 @@
-import { TSelectTogglerKeyboardControllerConstructorOptions } from './select_toggler_keyboard_controller_types';
-export declare class SelectTogglerKeyboardController {
-    #private;
-    constructor({ host, $toggler, $list, listItemSelector, }: TSelectTogglerKeyboardControllerConstructorOptions);
-    hostConnected(): void;
-    private _handleKeyboardNavigation;
-    private _openSelect;
-    private _openSelectAndGoToFirstElement;
-    private _openSelectAndGoToLastElement;
-    private _openSelectAndGoToMatchedElement;
-    private _getAvailableOptions;
-    private _findSelectedIndex;
-    private _navigate;
-    hostDisconnected(): void;
-}