@shoper/phoenix_design_system 1.15.11-35 → 1.15.11-37

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

@@ -1,6 +1,8 @@
 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 {
@@ -12,6 +14,14 @@ 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;"}
+{"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;"}

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

@@ -1,4 +1,6 @@
+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,6 +1,8 @@
 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 {
@@ -8,6 +10,14 @@ 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;"}
+{"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;"}

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

@@ -3,9 +3,8 @@ 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_COMPONENT_NAME, PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { 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;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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,10 +1,14 @@
 import { Any } from 'ts-toolbelt';
-import { ReactiveControllerHost } from 'lit';
+import { ReactiveController, 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 & HTMLElement;
+    host: ReactiveControllerHost & HSelect;
     $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,4 +1,5 @@
 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,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,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,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}

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

@@ -1,10 +1,15 @@
-import { ReactiveController } from 'lit';
-import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
-export declare class ListBoxKeyboardController implements ReactiveController {
+import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
+export declare class ListBoxKeyboardController implements IListboxController {
     #private;
+    currentOptionIndex: number | undefined;
     constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
     hostConnected(): void;
+    private _handleKeyboardNavigation;
     private _handleArrowNavigation;
+    private _setVirtualFocusToFirstElement;
+    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,37 +1,59 @@
 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_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _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) => {
+            var _a, _b;
             event.preventDefault();
             const { key } = event;
-            const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-            let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
-            if (newOptionIndex === undefined) {
-                const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
-                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
-            }
-            if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
+            const activeElementId = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-activedescendant');
+            if (!activeElementId) {
+                this._setVirtualFocusToFirstElement();
                 return;
-            if (prevOptionIndex !== undefined) {
-                const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
-                UiDomUtils.makeUnnavigable($prevOption);
             }
-            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
-            const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
-            UiDomUtils.makeNavigable($focusedOption);
-            $focusedOption.focus();
+            const $activeElement = document.querySelector(`#${activeElementId}`);
+            let $newActiveElement;
+            if (key === 'ArrowDown' || key === 'ArrowRight') {
+                $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.nextElementSibling;
+            }
+            if (key === 'ArrowUp' || key === 'ArrowLeft') {
+                $newActiveElement = $activeElement === null || $activeElement === void 0 ? void 0 : $activeElement.previousElementSibling;
+            }
+            (_b = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-activedescendant', ($newActiveElement === null || $newActiveElement === void 0 ? void 0 : $newActiveElement.id) || '');
+        };
+        this._setVirtualFocusToFirstElement = () => {
+            var _a;
+            const $firstOption = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").options[0];
+            if (!$firstOption)
+                return;
+            (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $firstOption.id);
+        };
+        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_host, host, "f");
         __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -41,40 +63,58 @@ class ListBoxKeyboardController {
         __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
     }
     hostConnected() {
-        new KeystrokesController({
-            host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
-            keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
-            callback: this._handleArrowNavigation,
-            target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
-        });
+        __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
         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 (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
-                return;
-            const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
-            UiDomUtils.makeUnnavigable($prevOption);
-            __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
+            // if (this.currentOptionIndex === undefined) return;
+            // const $prevOption = this.#_$options[this.currentOptionIndex];
+            // UiDomUtils.makeUnnavigable($prevOption);
+            // this.currentOptionIndex = undefined;
         });
-        __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
+        // this.#_$options.forEach(($option: HTMLElement) => UiDomUtils.makeUnnavigable($option));
     }
     _getPrevOptionIndex() {
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
-            return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
-        return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+        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;
     }
     _getNextOptionIndex() {
-        if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+        if (this.currentOptionIndex === undefined)
             return undefined;
-        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;
+        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);
     }
 }
-_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = 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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.15.11-35",
+  "version": "1.15.11-37",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.20.1-2",
+    "@dreamcommerce/utilities": "^1.20.1-0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",