@shoper/phoenix_design_system 1.18.23-3 → 1.18.23-5

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js

@@ -0,0 +1,49 @@
+import { FocusTrapStrategy } from './focus_trap_strategy.js';
+
+/**
+ * Cyclic keydown focus trap.
+ *
+ * No sentinel DOM elements. Tab past the last focusable element wraps to the first;
+ * Shift+Tab past the first wraps to the last. Uses `keydown` + `preventDefault` so the
+ * browser never moves focus outside the container.
+ *
+ * Suitable when the host is not portaled and `inert` is not applied to background content
+ * (e.g. a full-screen search overlay on mobile).
+ */
+class CyclicFocusTrapStrategy extends FocusTrapStrategy {
+    constructor(getContainer) {
+        super(getContainer);
+        this._handleKeyDown = (ev) => {
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            if (!container)
+                return;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length === 0)
+                return;
+            const $target = ev.target;
+            if (ev.shiftKey) {
+                if ($target === focusableElements[0]) {
+                    ev.preventDefault();
+                    focusableElements[focusableElements.length - 1].focus();
+                }
+            }
+            else {
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    focusableElements[0].focus();
+                }
+            }
+        };
+    }
+    attach() {
+        document.addEventListener('keydown', this._handleKeyDown);
+    }
+    detach() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+    }
+}
+
+export { CyclicFocusTrapStrategy };
+//# sourceMappingURL=cyclic_focus_trap_strategy.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/cyclic_focus_trap_strategy.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/focus_trap_controller/strategies/focus_trap_strategy.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class FocusTrapStrategy {
+    protected readonly getContainer: () => HTMLElement | undefined;
+    protected active: boolean;
+    constructor(getContainer: () => HTMLElement | undefined);
+    abstract attach(): void;
+    abstract detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+    private _isElementTrulyFocusable;
+}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js

@@ -0,0 +1,32 @@
+import { UiDomUtils } from '@dreamcommerce/utilities';
+
+class FocusTrapStrategy {
+    constructor(getContainer) {
+        this.getContainer = getContainer;
+        this.active = false;
+    }
+    activate() {
+        this.active = true;
+    }
+    deactivate() {
+        this.active = false;
+    }
+    getFocusableElements(container) {
+        return UiDomUtils.getFocusableElements(container).filter(($el) => this._isElementTrulyFocusable($el));
+    }
+    _isElementTrulyFocusable($el) {
+        const style = window.getComputedStyle($el);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+        if ($el.nodeName === 'H-PORTAL')
+            return true;
+        const $parent = $el.parentElement;
+        if (!$parent)
+            return true;
+        return this._isElementTrulyFocusable($parent);
+    }
+}
+
+export { FocusTrapStrategy };
+//# sourceMappingURL=focus_trap_strategy.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.d.ts

@@ -0,0 +1,6 @@
+export { FocusTrapStrategy } from './focus_trap_strategy';
+export { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy';
+export type { TSentinelFocusTrapStrategyProps } from './sentinel_focus_trap_strategy';
+export { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy';
+export { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy';
+export type { TTogglerFocusTrapStrategyProps } from './toggler_focus_trap_strategy';

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.js

@@ -0,0 +1,5 @@
+export { FocusTrapStrategy } from './focus_trap_strategy';
+export { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy';
+export { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy';
+export { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy';
+//# sourceMappingURL=index.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/controllers/focus_trap_controller/strategies/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC"}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.d.ts

@@ -0,0 +1,31 @@
+import { FocusTrapStrategy } from './focus_trap_strategy';
+export declare type TSentinelFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+    noAutofocus?: boolean;
+};
+/**
+ * Sentinel mode focus trap.
+ *
+ * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
+ * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
+ * background content is marked `inert`, giving the browser an extra safety net.
+ *
+ * Reacts on `keyup` so that the browser's native focus movement has already completed
+ * before we redirect it.
+ */
+export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy {
+    #private;
+    noAutofocus: boolean;
+    constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);
+    /** Call once in firstUpdated with the two bookend sentinel elements. */
+    setSentinels(start: HTMLElement, end: HTMLElement): void;
+    /**
+     * Move focus to the first real interactive element after the open transition
+     * completes (skips sentinelStart at index 0).
+     */
+    focusFirst(): void;
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    private _handleKeyUp;
+}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js

@@ -0,0 +1,85 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../external/tslib/tslib.es6.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { FocusTrapStrategy } from './focus_trap_strategy.js';
+
+var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
+/**
+ * Sentinel mode focus trap.
+ *
+ * Uses two inert bookend elements (sentinelStart / sentinelEnd) to detect when focus
+ * escapes the container and cycle it back. Appropriate for modal dialogs and sheets where
+ * background content is marked `inert`, giving the browser an extra safety net.
+ *
+ * Reacts on `keyup` so that the browser's native focus movement has already completed
+ * before we redirect it.
+ */
+class SentinelFocusTrapStrategy extends FocusTrapStrategy {
+    constructor({ getContainer, noAutofocus = false }) {
+        super(getContainer);
+        _SentinelFocusTrapStrategy_sentinelStart.set(this, void 0);
+        _SentinelFocusTrapStrategy_sentinelEnd.set(this, void 0);
+        this._handleKeyUp = (ev) => {
+            var _a;
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            if (!container)
+                return;
+            if (ev.shiftKey) {
+                if (document.activeElement === __classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) {
+                    const focusableElements = this.getFocusableElements(container);
+                    (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    ev.preventDefault();
+                }
+            }
+            else if (document.activeElement === __classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelEnd, "f")) {
+                UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
+                ev.preventDefault();
+            }
+        };
+        this.noAutofocus = noAutofocus;
+    }
+    /** Call once in firstUpdated with the two bookend sentinel elements. */
+    setSentinels(start, end) {
+        __classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelStart, start, "f");
+        __classPrivateFieldSet(this, _SentinelFocusTrapStrategy_sentinelEnd, end, "f");
+    }
+    /**
+     * Move focus to the first real interactive element after the open transition
+     * completes (skips sentinelStart at index 0).
+     */
+    focusFirst() {
+        if (this.noAutofocus)
+            return;
+        requestAnimationFrame(() => {
+            const container = this.getContainer();
+            if (!container)
+                return;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length > 0) {
+                focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
+            }
+        });
+    }
+    attach() {
+        document.addEventListener('keyup', this._handleKeyUp);
+    }
+    detach() {
+        document.removeEventListener('keyup', this._handleKeyUp);
+    }
+    activate() {
+        this.active = true;
+        if (!this.noAutofocus) {
+            const scrollY = window.scrollY;
+            setTimeout(() => {
+                var _a;
+                (_a = __classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+                window.scrollTo(0, scrollY);
+            }, 0);
+        }
+    }
+}
+_SentinelFocusTrapStrategy_sentinelStart = new WeakMap(), _SentinelFocusTrapStrategy_sentinelEnd = new WeakMap();
+
+export { SentinelFocusTrapStrategy };
+//# sourceMappingURL=sentinel_focus_trap_strategy.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/sentinel_focus_trap_strategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,+CAAmD;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/focus_trap_controller/strategies/toggler_focus_trap_strategy.d.ts

@@ -0,0 +1,21 @@
+import { FocusTrapStrategy } from './focus_trap_strategy';
+export declare type TTogglerFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+    getToggler: () => HTMLElement | null | undefined;
+};
+/**
+ * Toggler mode focus trap.
+ *
+ * Focus cycles: toggler → content[0] → … → content[last] → toggler (and reverse).
+ * Uses `keydown` + `preventDefault` so the browser never moves focus on its own.
+ *
+ * Suitable for dropdowns where the toggler button should stay in the Tab cycle
+ * alongside the dropdown content.
+ */
+export declare class TogglerFocusTrapStrategy extends FocusTrapStrategy {
+    #private;
+    constructor({ getContainer, getToggler }: TTogglerFocusTrapStrategyProps);
+    attach(): void;
+    detach(): void;
+    private _handleKeyDown;
+}

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js

@@ -0,0 +1,73 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../external/tslib/tslib.es6.js';
+import { FocusTrapStrategy } from './focus_trap_strategy.js';
+
+var _TogglerFocusTrapStrategy_getToggler;
+/**
+ * Toggler mode focus trap.
+ *
+ * Focus cycles: toggler → content[0] → … → content[last] → toggler (and reverse).
+ * Uses `keydown` + `preventDefault` so the browser never moves focus on its own.
+ *
+ * Suitable for dropdowns where the toggler button should stay in the Tab cycle
+ * alongside the dropdown content.
+ */
+class TogglerFocusTrapStrategy extends FocusTrapStrategy {
+    constructor({ getContainer, getToggler }) {
+        super(getContainer);
+        _TogglerFocusTrapStrategy_getToggler.set(this, void 0);
+        this._handleKeyDown = (ev) => {
+            var _a;
+            if (!this.active || ev.code !== 'Tab')
+                return;
+            const container = this.getContainer();
+            const toggler = (_a = __classPrivateFieldGet(this, _TogglerFocusTrapStrategy_getToggler, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+            if (!container || !toggler)
+                return;
+            const $target = ev.target;
+            const focusableElements = this.getFocusableElements(container);
+            if (ev.shiftKey) {
+                // Shift+Tab on toggler → last content element
+                if (toggler.contains($target)) {
+                    const last = focusableElements[focusableElements.length - 1];
+                    if (!last)
+                        return;
+                    ev.preventDefault();
+                    last.focus();
+                    return;
+                }
+                // Shift+Tab on first content element → toggler
+                if ($target === focusableElements[0]) {
+                    ev.preventDefault();
+                    toggler.focus();
+                }
+            }
+            else {
+                // Tab on toggler → first content element
+                if (toggler.contains($target)) {
+                    const first = focusableElements[0];
+                    if (!first)
+                        return;
+                    ev.preventDefault();
+                    first.focus();
+                    return;
+                }
+                // Tab on last content element → toggler
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    toggler.focus();
+                }
+            }
+        };
+        __classPrivateFieldSet(this, _TogglerFocusTrapStrategy_getToggler, getToggler, "f");
+    }
+    attach() {
+        document.addEventListener('keydown', this._handleKeyDown);
+    }
+    detach() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+    }
+}
+_TogglerFocusTrapStrategy_getToggler = new WeakMap();
+
+export { TogglerFocusTrapStrategy };
+//# sourceMappingURL=toggler_focus_trap_strategy.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/toggler_focus_trap_strategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,+CAAmD;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.18.23-3",
+  "version": "1.18.23-5",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",