@shoper/phoenix_design_system 1.18.23-5 → 1.18.23-6

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js

@@ -4,33 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
-var sentinel_focus_trap_strategy = require('./strategies/sentinel_focus_trap_strategy.js');
-var cyclic_focus_trap_strategy = require('./strategies/cyclic_focus_trap_strategy.js');
-var toggler_focus_trap_strategy = require('./strategies/toggler_focus_trap_strategy.js');
+var focus_trap_strategy_constants = require('./strategies/focus_trap_strategy_constants.js');
 
 var _FocusTrapController_strategy;
-function createStrategy(props) {
-    switch (props.mode) {
-        case 'sentinel': return new sentinel_focus_trap_strategy.SentinelFocusTrapStrategy({ getContainer: props.getContainer, noAutofocus: props.noAutofocus });
-        case 'cyclic': return new cyclic_focus_trap_strategy.CyclicFocusTrapStrategy(props.getContainer);
-        case 'toggler': return new toggler_focus_trap_strategy.TogglerFocusTrapStrategy({ getContainer: props.getContainer, getToggler: props.getToggler });
-    }
-}
-/**
- * A thin Lit ReactiveController that owns the lifecycle of a FocusTrapStrategy.
- *
- * Pass a discriminated-union `props` object with `mode: 'sentinel' | 'cyclic' | 'toggler'`
- * and the required options for that mode. The controller creates the correct strategy
- * internally and exposes it as a typed `.strategy` property for mode-specific API access
- * (e.g. `controller.strategy.setSentinels(...)` when mode is 'sentinel').
- */
 class FocusTrapController {
-    constructor(host, props) {
+    constructor(host, { mode, ...strategyProps }) {
         _FocusTrapController_strategy.set(this, void 0);
-        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, createStrategy(props), "f");
+        tslib_es6.__classPrivateFieldSet(this, _FocusTrapController_strategy, new focus_trap_strategy_constants.FOCUS_TRAP_STRATEGY_STRATEGIES[mode](strategyProps), "f");
         host.addController(this);
     }
-    /** The underlying strategy instance, typed to match the mode passed at construction. */
     get strategy() {
         return tslib_es6.__classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
     }

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -15,7 +15,7 @@ var focus_trap_strategy = require('./focus_trap_strategy.js');
  * (e.g. a full-screen search overlay on mobile).
  */
 class CyclicFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
-    constructor(getContainer) {
+    constructor({ getContainer }) {
         super(getContainer);
         this._handleKeyDown = (ev) => {
             if (!this.active || ev.code !== 'Tab')

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cyclic_focus_trap_strategy = require('./cyclic_focus_trap_strategy.js');
+var toggler_focus_trap_strategy = require('./toggler_focus_trap_strategy.js');
+var sentinel_focus_trap_strategy = require('./sentinel_focus_trap_strategy.js');
+
+const FOCUS_TRAP_STRATEGY_TYPES = {
+    cyclic: 'cyclic',
+    toggler: 'toggler',
+    sentinel: 'sentinel',
+};
+const FOCUS_TRAP_STRATEGY_STRATEGIES = {
+    [FOCUS_TRAP_STRATEGY_TYPES.cyclic]: cyclic_focus_trap_strategy.CyclicFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.toggler]: toggler_focus_trap_strategy.TogglerFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.sentinel]: sentinel_focus_trap_strategy.SentinelFocusTrapStrategy,
+};
+
+exports.FOCUS_TRAP_STRATEGY_STRATEGIES = FOCUS_TRAP_STRATEGY_STRATEGIES;
+exports.FOCUS_TRAP_STRATEGY_TYPES = FOCUS_TRAP_STRATEGY_TYPES;
+//# sourceMappingURL=focus_trap_strategy_constants.js.map

package/build/cjs/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.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;"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
-var utilities = require('@dreamcommerce/utilities');
+require('@dreamcommerce/utilities');
 var focus_trap_strategy = require('./focus_trap_strategy.js');
 
 var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
@@ -23,22 +23,26 @@ class SentinelFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
         _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;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length === 0)
+                return;
+            const $target = ev.target;
             if (ev.shiftKey) {
-                if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelStart, "f")) {
-                    const focusableElements = this.getFocusableElements(container);
-                    (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                if ($target === focusableElements[0]) {
                     ev.preventDefault();
+                    focusableElements[focusableElements.length - 1].focus();
                 }
             }
-            else if (document.activeElement === tslib_es6.__classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelEnd, "f")) {
-                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
-                ev.preventDefault();
+            else {
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    focusableElements[0].focus();
+                }
             }
         };
         this.noAutofocus = noAutofocus;
@@ -66,10 +70,10 @@ class SentinelFocusTrapStrategy extends focus_trap_strategy.FocusTrapStrategy {
         });
     }
     attach() {
-        document.addEventListener('keyup', this._handleKeyUp);
+        document.addEventListener('keydown', this._handleKeyUp);
     }
     detach() {
-        document.removeEventListener('keyup', this._handleKeyUp);
+        document.removeEventListener('keydown', this._handleKeyUp);
     }
     activate() {
         this.active = true;

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

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

@@ -1,21 +1,12 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy';
-import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy';
-import { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy';
+import type { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy';
+import type { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy';
+import type { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy';
 import type { TFocusTrapProps, TSentinelFocusTrapProps, TCyclicFocusTrapProps } from './focus_trap_controller_types';
 declare type StrategyFor<T extends TFocusTrapProps> = T extends TSentinelFocusTrapProps ? SentinelFocusTrapStrategy : T extends TCyclicFocusTrapProps ? CyclicFocusTrapStrategy : TogglerFocusTrapStrategy;
-/**
- * A thin Lit ReactiveController that owns the lifecycle of a FocusTrapStrategy.
- *
- * Pass a discriminated-union `props` object with `mode: 'sentinel' | 'cyclic' | 'toggler'`
- * and the required options for that mode. The controller creates the correct strategy
- * internally and exposes it as a typed `.strategy` property for mode-specific API access
- * (e.g. `controller.strategy.setSentinels(...)` when mode is 'sentinel').
- */
 export declare class FocusTrapController<TProps extends TFocusTrapProps = TFocusTrapProps> implements ReactiveController {
     #private;
-    constructor(host: ReactiveControllerHost, props: TProps);
-    /** The underlying strategy instance, typed to match the mode passed at construction. */
+    constructor(host: ReactiveControllerHost, { mode, ...strategyProps }: TProps);
     get strategy(): StrategyFor<TProps>;
     hostConnected(): void;
     hostDisconnected(): void;

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

@@ -1,32 +1,14 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { SentinelFocusTrapStrategy } from './strategies/sentinel_focus_trap_strategy.js';
-import { CyclicFocusTrapStrategy } from './strategies/cyclic_focus_trap_strategy.js';
-import { TogglerFocusTrapStrategy } from './strategies/toggler_focus_trap_strategy.js';
+import { FOCUS_TRAP_STRATEGY_STRATEGIES } from './strategies/focus_trap_strategy_constants.js';
 
 var _FocusTrapController_strategy;
-function createStrategy(props) {
-    switch (props.mode) {
-        case 'sentinel': return new SentinelFocusTrapStrategy({ getContainer: props.getContainer, noAutofocus: props.noAutofocus });
-        case 'cyclic': return new CyclicFocusTrapStrategy(props.getContainer);
-        case 'toggler': return new TogglerFocusTrapStrategy({ getContainer: props.getContainer, getToggler: props.getToggler });
-    }
-}
-/**
- * A thin Lit ReactiveController that owns the lifecycle of a FocusTrapStrategy.
- *
- * Pass a discriminated-union `props` object with `mode: 'sentinel' | 'cyclic' | 'toggler'`
- * and the required options for that mode. The controller creates the correct strategy
- * internally and exposes it as a typed `.strategy` property for mode-specific API access
- * (e.g. `controller.strategy.setSentinels(...)` when mode is 'sentinel').
- */
 class FocusTrapController {
-    constructor(host, props) {
+    constructor(host, { mode, ...strategyProps }) {
         _FocusTrapController_strategy.set(this, void 0);
-        __classPrivateFieldSet(this, _FocusTrapController_strategy, createStrategy(props), "f");
+        __classPrivateFieldSet(this, _FocusTrapController_strategy, new FOCUS_TRAP_STRATEGY_STRATEGIES[mode](strategyProps), "f");
         host.addController(this);
     }
-    /** The underlying strategy instance, typed to match the mode passed at construction. */
     get strategy() {
         return __classPrivateFieldGet(this, _FocusTrapController_strategy, "f");
     }

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/focus_trap_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;"}
+{"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;"}

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

@@ -1,4 +1,8 @@
 import { FocusTrapStrategy } from './focus_trap_strategy';
+import { ICyclicFocusTrapStrategy } from './focus_trap_strategy_types';
+export declare type TCyclicFocusTrapStrategyProps = {
+    getContainer: () => HTMLElement | undefined;
+};
 /**
  * Cyclic keydown focus trap.
  *
@@ -9,8 +13,8 @@ import { FocusTrapStrategy } from './focus_trap_strategy';
  * Suitable when the host is not portaled and `inert` is not applied to background content
  * (e.g. a full-screen search overlay on mobile).
  */
-export declare class CyclicFocusTrapStrategy extends FocusTrapStrategy {
-    constructor(getContainer: () => HTMLElement | undefined);
+export declare class CyclicFocusTrapStrategy extends FocusTrapStrategy implements ICyclicFocusTrapStrategy {
+    constructor({ getContainer }: TCyclicFocusTrapStrategyProps);
     attach(): void;
     detach(): void;
     private _handleKeyDown;

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

@@ -11,7 +11,7 @@ import { FocusTrapStrategy } from './focus_trap_strategy.js';
  * (e.g. a full-screen search overlay on mobile).
  */
 class CyclicFocusTrapStrategy extends FocusTrapStrategy {
-    constructor(getContainer) {
+    constructor({ getContainer }) {
         super(getContainer);
         this._handleKeyDown = (ev) => {
             if (!this.active || ev.code !== 'Tab')

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

@@ -1,4 +1,5 @@
-export declare abstract class FocusTrapStrategy {
+import { IFocusTrapStrategy } from './focus_trap_strategy_types';
+export declare abstract class FocusTrapStrategy implements IFocusTrapStrategy {
     protected readonly getContainer: () => HTMLElement | undefined;
     protected active: boolean;
     constructor(getContainer: () => HTMLElement | undefined);

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

@@ -0,0 +1,13 @@
+import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy';
+import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy';
+import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy';
+export declare const FOCUS_TRAP_STRATEGY_TYPES: {
+    readonly cyclic: "cyclic";
+    readonly toggler: "toggler";
+    readonly sentinel: "sentinel";
+};
+export declare const FOCUS_TRAP_STRATEGY_STRATEGIES: {
+    readonly cyclic: typeof CyclicFocusTrapStrategy;
+    readonly toggler: typeof TogglerFocusTrapStrategy;
+    readonly sentinel: typeof SentinelFocusTrapStrategy;
+};

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

@@ -0,0 +1,17 @@
+import { CyclicFocusTrapStrategy } from './cyclic_focus_trap_strategy.js';
+import { TogglerFocusTrapStrategy } from './toggler_focus_trap_strategy.js';
+import { SentinelFocusTrapStrategy } from './sentinel_focus_trap_strategy.js';
+
+const FOCUS_TRAP_STRATEGY_TYPES = {
+    cyclic: 'cyclic',
+    toggler: 'toggler',
+    sentinel: 'sentinel',
+};
+const FOCUS_TRAP_STRATEGY_STRATEGIES = {
+    [FOCUS_TRAP_STRATEGY_TYPES.cyclic]: CyclicFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.toggler]: TogglerFocusTrapStrategy,
+    [FOCUS_TRAP_STRATEGY_TYPES.sentinel]: SentinelFocusTrapStrategy,
+};
+
+export { FOCUS_TRAP_STRATEGY_STRATEGIES, FOCUS_TRAP_STRATEGY_TYPES };
+//# sourceMappingURL=focus_trap_strategy_constants.js.map

package/build/esm/packages/phoenix/src/controllers/focus_trap_controller/strategies/focus_trap_strategy_constants.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;"}

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

@@ -0,0 +1,15 @@
+export interface IFocusTrapStrategy {
+    attach(): void;
+    detach(): void;
+    activate(): void;
+    deactivate(): void;
+    getFocusableElements(container: HTMLElement): HTMLElement[];
+}
+export interface ICyclicFocusTrapStrategy extends IFocusTrapStrategy {
+}
+export interface ITogglerFocusTrapStrategy extends IFocusTrapStrategy {
+}
+export interface ISentinelFocusTrapStrategy extends IFocusTrapStrategy {
+    setSentinels(start: HTMLElement, end: HTMLElement): void;
+    focusFirst(): void;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=focus_trap_strategy_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"focus_trap_strategy_types.js","sourceRoot":"","sources":["../../../../../../../../src/controllers/focus_trap_controller/strategies/focus_trap_strategy_types.ts"],"names":[],"mappings":""}

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

@@ -1,4 +1,5 @@
 import { FocusTrapStrategy } from './focus_trap_strategy';
+import { ISentinelFocusTrapStrategy } from './focus_trap_strategy_types';
 export declare type TSentinelFocusTrapStrategyProps = {
     getContainer: () => HTMLElement | undefined;
     noAutofocus?: boolean;
@@ -13,7 +14,7 @@ export declare type TSentinelFocusTrapStrategyProps = {
  * Reacts on `keyup` so that the browser's native focus movement has already completed
  * before we redirect it.
  */
-export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy {
+export declare class SentinelFocusTrapStrategy extends FocusTrapStrategy implements ISentinelFocusTrapStrategy {
     #private;
     noAutofocus: boolean;
     constructor({ getContainer, noAutofocus }: TSentinelFocusTrapStrategyProps);

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

@@ -1,5 +1,5 @@
-import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../external/tslib/tslib.es6.js';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../../external/tslib/tslib.es6.js';
+import '@dreamcommerce/utilities';
 import { FocusTrapStrategy } from './focus_trap_strategy.js';
 
 var _SentinelFocusTrapStrategy_sentinelStart, _SentinelFocusTrapStrategy_sentinelEnd;
@@ -19,22 +19,26 @@ class SentinelFocusTrapStrategy extends FocusTrapStrategy {
         _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;
+            const focusableElements = this.getFocusableElements(container);
+            if (focusableElements.length === 0)
+                return;
+            const $target = ev.target;
             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();
+                if ($target === focusableElements[0]) {
                     ev.preventDefault();
+                    focusableElements[focusableElements.length - 1].focus();
                 }
             }
-            else if (document.activeElement === __classPrivateFieldGet(this, _SentinelFocusTrapStrategy_sentinelEnd, "f")) {
-                UiDomUtils.setFocusToFirstFocusableElementInContainer(container);
-                ev.preventDefault();
+            else {
+                if ($target === focusableElements[focusableElements.length - 1]) {
+                    ev.preventDefault();
+                    focusableElements[0].focus();
+                }
             }
         };
         this.noAutofocus = noAutofocus;
@@ -62,10 +66,10 @@ class SentinelFocusTrapStrategy extends FocusTrapStrategy {
         });
     }
     attach() {
-        document.addEventListener('keyup', this._handleKeyUp);
+        document.addEventListener('keydown', this._handleKeyUp);
     }
     detach() {
-        document.removeEventListener('keyup', this._handleKeyUp);
+        document.removeEventListener('keydown', this._handleKeyUp);
     }
     activate() {
         this.active = true;

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

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

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

@@ -1,4 +1,5 @@
 import { FocusTrapStrategy } from './focus_trap_strategy';
+import { ITogglerFocusTrapStrategy } from './focus_trap_strategy_types';
 export declare type TTogglerFocusTrapStrategyProps = {
     getContainer: () => HTMLElement | undefined;
     getToggler: () => HTMLElement | null | undefined;
@@ -12,7 +13,7 @@ export declare type TTogglerFocusTrapStrategyProps = {
  * Suitable for dropdowns where the toggler button should stay in the Tab cycle
  * alongside the dropdown content.
  */
-export declare class TogglerFocusTrapStrategy extends FocusTrapStrategy {
+export declare class TogglerFocusTrapStrategy extends FocusTrapStrategy implements ITogglerFocusTrapStrategy {
     #private;
     constructor({ getContainer, getToggler }: TTogglerFocusTrapStrategyProps);
     attach(): void;

package/package.json

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}