@shoper/phoenix_design_system 1.18.23-0 → 1.18.23-2

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js

@@ -16,6 +16,7 @@ var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
+var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
 var throttle = require('../../../../../external/lodash/throttle.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 
@@ -34,6 +35,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.preventFocusTrap = false;
         this.noAutoFocus = false;
         this._backdropController = new backdrop_controller.BackdropController();
+        this._focusTrapController = new focus_trap_controller.FocusTrapController({
+            host: this,
+            getContainer: () => { var _a; return (_a = this.$dropdownContent) !== null && _a !== void 0 ? _a : undefined; },
+            getToggler: () => this.$dropdownToggler
+        });
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -71,6 +77,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
                         this._toggleScroll();
+                        if (!this.preventFocusTrap)
+                            this._focusTrapController.activate();
                         resolve();
                     }, transitionDuration);
                 });
@@ -111,6 +119,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                         var _a;
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
                         this.opened = false;
+                        this._focusTrapController.deactivate();
                         this._dispatchHideDropdownEvent();
                         resolve();
                     }, transitionDuration);
@@ -142,31 +151,16 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
             await this.hide();
         };
         this._keepFocusWithinDropdownForwards = (ev) => {
-            var _a, _b;
-            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
+            if (ev.shiftKey || !this.$dropdownContent || !this.opened || !this.preventFocusTrap)
                 return;
-            const $target = ev.target;
-            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
+            if (this.$dropdownContent.contains(ev.target)) {
                 this._handleFocusOnNextElementAfterDropdown(ev);
-                return;
             }
-            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
-                this._handleFocusFromTogglerForwards(ev);
-                return;
-            }
-            this._handleFocusFromSentinelEndForwards(ev, $target);
         };
         this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
+            if (!this.opened || !this.$dropdownContent || !this.preventFocusTrap)
                 return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
-            }
+            this._handleDefaultFocusFromDropdownBackwards(ev);
         };
         this._hoverToggle = async (ev) => {
             if (window.innerWidth < global_constants.BREAKPOINTS.xs)
@@ -188,7 +182,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this._focusOnFirstContentElement = () => {
             if (!this.$dropdownContent)
                 return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+            const $firstFocusableElement = this._focusTrapController.getFocusableElements(this.$dropdownContent)[0];
             if ($firstFocusableElement)
                 $firstFocusableElement.focus();
         };
@@ -306,68 +300,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         utilities.UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
         return;
     }
-    _handleFocusFromTogglerForwards(ev) {
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        ev.preventDefault();
-        trulyFocusableElements[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
     _handleDefaultFocusFromDropdownBackwards(ev) {
         ev.preventDefault();
         this.hide();
         utilities.UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
     }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = utilities.UiDomUtils.getFocusableElements($container);
-        return focusableElements.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);
-    }
     _isHoveredWithinDropdown(element) {
         var _a;
         if (element === this)

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/form/search/search.js

@@ -16,6 +16,7 @@ var ref_js = require('lit-html/directives/ref.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
 var global_constants = require('../../../global_constants.js');
 var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
+var focus_trap_controller = require('../../../controllers/focus_trap_controller/focus_trap_controller.js');
 var modal_constants = require('../../modal/modal_constants.js');
 var sheet_constants = require('../../sheet/sheet_constants.js');
 var when = require('../../../../../../external/lit-html/directives/when.js');
@@ -31,7 +32,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this._togglerElement = null;
         this._id = v4['default']();
         this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
+        this._searchIconId = `${this._id}-search-icon`;
         this._searchContentContainerId = v4['default']();
+        this._mobileFocusTrapController = new focus_trap_controller.FocusTrapController({
+            host: this,
+            getContainer: () => this,
+            noAutofocus: true,
+            cyclicKeydown: true
+        });
         this._searchResultsRef = ref_js.createRef();
         this._searchHistoryRef = ref_js.createRef();
         this._searchMessageRef = ref_js.createRef();
@@ -327,6 +335,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
             if (window.innerWidth > global_constants.BREAKPOINTS.sm) {
                 const hasBeenOpened = this.classList.contains(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
                 this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+                this._deactivateMobileDialog();
                 if (hasBeenOpened && this.displayMode !== 'dropdown') {
                     const $storefrontSearch = document.querySelector(`h-storefront-search[module-instance-id="${this.moduleInstanceId}"]`);
                     const searchOverlayTriggerName = (_a = $storefrontSearch === null || $storefrontSearch === void 0 ? void 0 : $storefrontSearch.querySelector('[aria-haspopup="dialog"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('name');
@@ -342,6 +351,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         };
         this._openMobileView = () => {
             this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+            this._activateMobileDialog();
         };
         this._isSuggesterLayerVisible = () => {
             var _a;
@@ -362,6 +372,20 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
                 document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
             }
         };
+        this._activateMobileDialog = () => {
+            if (this.displayMode !== 'dropdown')
+                return;
+            this.setAttribute('role', 'dialog');
+            this.setAttribute('aria-modal', 'true');
+            this.setAttribute('aria-labelledby', this._searchIconId);
+            this._mobileFocusTrapController.activate();
+        };
+        this._deactivateMobileDialog = () => {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-modal');
+            this.removeAttribute('aria-labelledby');
+            this._mobileFocusTrapController.deactivate();
+        };
         this._setupAriaAttributes = () => {
             var _a;
             if (this._translations.openSearchButtonAriaLabel) {
@@ -370,6 +394,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         };
         this._handleOpenSearch = () => {
             this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+            this._activateMobileDialog();
             const shouldShowMessage = this._searchPhrase !== '';
             this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
             const $searchInput = this.querySelector(`
@@ -490,6 +515,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, this._handleSubmitForm);
         this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, () => {
             this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
+            this._deactivateMobileDialog();
             this._resetSearchView();
             this.isSearchUxFixesFlagEnabled && this._removeSearchKeyboardNavigation();
         });
@@ -622,6 +648,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
         super.render();
         return lit.html `
             ${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
+                    id="${this._searchIconId}"
                     class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
                     tabindex="0"
                     aria-haspopup="dialog"

package/build/cjs/packages/phoenix/src/components/form/search/search.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,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/modal/modal.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
@@ -13,6 +12,7 @@ var ref_js = require('lit-html/directives/ref.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
+var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
 var modal_constants = require('./modal_constants.js');
 var modal_close = require('./modal_close.js');
 
@@ -25,9 +25,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
         this.transition = 'scale';
         this.modalLabel = '';
         this.noAutofocus = false;
-        this._firstFocusableElement = undefined;
-        this._focusableElements = null;
-        this._lastFocusableElement = undefined;
         this._focusedToggler = null;
         this._contentRef = ref_js.createRef();
         this._focusSentinelStart = ref_js.createRef();
@@ -35,44 +32,26 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
         this._propsChangeStrategies = {
             [modal_constants.MODAL_OPENED_PROP]: {
                 true: () => {
-                    const scrollY = window.scrollY;
                     HModal_1.openModals = [...HModal_1.openModals, this];
                     document.addEventListener('keydown', this._bindCloseOnEsc);
                     document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
                     this._dispatchModalOpenedEvent();
-                    if (!this.noAutofocus) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                            window.scrollTo(0, scrollY);
-                        }, 0);
-                    }
+                    this._focusTrapController.activate();
                 },
                 false: () => {
                     HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
+                    this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new backdrop_controller.BackdropController();
-        this._keepFocusWithinModal = (ev) => {
-            var _a;
-            const isTabPressed = ev.code === 'Tab';
-            if (isTabPressed && this._contentRef.value) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
-                        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
-                    ev.preventDefault();
-                }
-            }
-        };
+        this._focusTrapController = new focus_trap_controller.FocusTrapController({
+            host: this,
+            getContainer: () => this._contentRef.value,
+            noAutofocus: this.noAutofocus
+        });
         this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
@@ -133,7 +112,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             });
         };
         this.hidden = true;
-        this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
     }
     static _appendModalsPortal() {
         const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${modal_constants.MODALS_PORTAL_NAME}"]`);
@@ -149,7 +127,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        document.addEventListener('keyup', this._keepFocusWithinModal);
         document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -158,29 +135,18 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             this.close();
         document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
-        document.removeEventListener('keyup', this._keepFocusWithinModal);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
     }
     updated(changedProps) {
         if (changedProps.has(modal_constants.MODAL_OPENED_PROP)) {
             this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
         }
-    }
-    _setFocusToFirstFocusableElementInModalOrCloseBtn() {
-        if (this.noAutofocus)
-            return;
-        requestAnimationFrame(() => {
-            if (this._contentRef.value) {
-                const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
-                if (focusableElements.length > 0) {
-                    focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
-                }
-            }
-        });
+        if (changedProps.has('noAutofocus')) {
+            this._focusTrapController.noAutofocus = this.noAutofocus;
+        }
     }
     async open() {
         this._focusedToggler = document.activeElement;
@@ -197,7 +163,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 setTimeout(() => {
                     var _a;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
-                    this._setFocusToFirstFocusableElementInModalOrCloseBtn();
+                    this._focusTrapController.focusFirst();
                     resolve();
                 }, transitionDuration);
             });
@@ -256,18 +222,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HModal.prototype, "noAutofocus", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HModal.prototype, "_firstFocusableElement", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HModal.prototype, "_focusableElements", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HModal.prototype, "_lastFocusableElement", void 0);
 exports.HModal = HModal_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-modal'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/modal/modal_constants.js

@@ -9,10 +9,8 @@ const MODAL_EVENTS = {
     opened: 'opened',
     closed: 'closed'
 };
-const MODAL_OPENED_PROP = 'opened';
-const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const MODAL_OPENED_PROP = 'opened';
 
-exports.FOCUSABLE_ELEMENTS_WITHIN_MODAL = FOCUSABLE_ELEMENTS_WITHIN_MODAL;
 exports.MODALS_PORTAL_NAME = MODALS_PORTAL_NAME;
 exports.MODAL_EVENTS = MODAL_EVENTS;
 exports.MODAL_OPENED_PROP = MODAL_OPENED_PROP;

package/build/cjs/packages/phoenix/src/components/modal/modal_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/sheet/sheet.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
@@ -13,6 +12,7 @@ var ref_js = require('lit-html/directives/ref.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
+var focus_trap_controller = require('../../controllers/focus_trap_controller/focus_trap_controller.js');
 var sheet_constants = require('./sheet_constants.js');
 var sheet_close = require('./sheet_close.js');
 
@@ -24,9 +24,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
         this.class = '';
         this.transition = 'scale';
         this.sheetLabel = '';
-        this._firstFocusableElement = undefined;
-        this._focusableElements = null;
-        this._lastFocusableElement = undefined;
         this._focusedToggler = null;
         this._contentRef = ref_js.createRef();
         this._focusSentinelStart = ref_js.createRef();
@@ -34,42 +31,25 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
         this._propsChangeStrategies = {
             [sheet_constants.SHEET_OPENED_PROP]: {
                 true: () => {
-                    const scrollY = window.scrollY;
                     HSheet_1.openSheets = [...HSheet_1.openSheets, this];
                     document.addEventListener('keydown', this._bindCloseOnEsc);
                     document.addEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
                     this._dispatchSheetOpenedEvent();
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                        window.scrollTo(0, scrollY);
-                    }, 0);
+                    this._focusTrapController.activate();
                 },
                 false: () => {
                     HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
                     document.removeEventListener('keydown', this._bindCloseOnEsc);
                     document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.clicked, this.close);
+                    this._focusTrapController.deactivate();
                 }
             }
         };
         this._backdropController = new backdrop_controller.BackdropController();
-        this._keepFocusWithinSheet = (ev) => {
-            var _a;
-            const isTabPressed = ev.code === 'Tab';
-            if (isTabPressed && this._contentRef.value) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
-                        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
-                    ev.preventDefault();
-                }
-            }
-        };
+        this._focusTrapController = new focus_trap_controller.FocusTrapController({
+            host: this,
+            getContainer: () => this._contentRef.value
+        });
         this._handleCloseFromCloseComponent = async (ev) => {
             var _a;
             ev.stopPropagation();
@@ -130,7 +110,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
             });
         };
         this.hidden = true;
-        this._focusableElements = [...this.querySelectorAll(sheet_constants.FOCUSABLE_ELEMENTS_WITHIN_SHEET)];
     }
     static _appendSheetPortal() {
         const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${sheet_constants.SHEETS_PORTAL_NAME}"]`);
@@ -146,7 +125,6 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
     connectedCallback() {
         super.connectedCallback();
         HSheet_1._appendSheetPortal();
-        document.addEventListener('keyup', this._keepFocusWithinSheet);
         document.addEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
@@ -155,28 +133,16 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
             this.close();
         document.removeEventListener(sheet_constants.SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
-        document.removeEventListener('keyup', this._keepFocusWithinSheet);
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
+        this._focusTrapController.setSentinels(this._focusSentinelStart.value, this._focusSentinelEnd.value);
     }
     updated(changedProps) {
         if (changedProps.has(sheet_constants.SHEET_OPENED_PROP)) {
             this._propsChangeStrategies[sheet_constants.SHEET_OPENED_PROP][String(this[sheet_constants.SHEET_OPENED_PROP])]();
         }
     }
-    _setFocusToFirstFocusableElementInSheetOrCloseBtn() {
-        requestAnimationFrame(() => {
-            if (this._contentRef.value) {
-                const focusableElements = utilities.UiDomUtils.getFocusableElements(this._contentRef.value);
-                if (focusableElements.length > 0) {
-                    focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
-                }
-            }
-        });
-    }
     async open() {
         this._focusedToggler = document.activeElement;
         return new Promise((resolve) => {
@@ -192,7 +158,7 @@ exports.HSheet = HSheet_1 = class HSheet extends phoenix_light_lit_element.Phoen
                 setTimeout(() => {
                     var _a;
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
-                    this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
+                    this._focusTrapController.focusFirst();
                     resolve();
                 }, transitionDuration);
             });
@@ -245,18 +211,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String, attribute: 'sheet-label' }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HSheet.prototype, "sheetLabel", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HSheet.prototype, "_firstFocusableElement", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HSheet.prototype, "_focusableElements", void 0);
-tslib_es6.__decorate([
-    decorators_js.state(),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HSheet.prototype, "_lastFocusableElement", void 0);
 exports.HSheet = HSheet_1 = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-sheet'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/sheet/sheet.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/sheet/sheet_constants.js

@@ -9,10 +9,8 @@ const SHEET_EVENTS = {
     opened: 'opened',
     closed: 'closed'
 };
-const SHEET_OPENED_PROP = 'opened';
-const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const SHEET_OPENED_PROP = 'opened';
 
-exports.FOCUSABLE_ELEMENTS_WITHIN_SHEET = FOCUSABLE_ELEMENTS_WITHIN_SHEET;
 exports.SHEETS_PORTAL_NAME = SHEETS_PORTAL_NAME;
 exports.SHEET_EVENTS = SHEET_EVENTS;
 exports.SHEET_OPENED_PROP = SHEET_OPENED_PROP;

package/build/cjs/packages/phoenix/src/components/sheet/sheet_constants.js.map

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