@getflip/swirl-components 0.8.1 → 0.8.2

package/dist/collection/components/flip-console-layout/flip-console-layout.js

@@ -1,6 +1,5 @@
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
 import classnames from "classnames";
-import { createFocusTrap } from "focus-trap";
 import { isMobileViewport } from "../../utils";
 export class FlipConsoleLayout {
   constructor() {
@@ -23,11 +22,16 @@ export class FlipConsoleLayout {
       this.hideSidebar();
     };
     this.onClick = (event) => {
+      var _a;
       const target = event.target;
       const clickOnToggle = Boolean(target.closest(".console-layout__mobile-navigation-button"));
+      const clickOnOverlay = ((_a = target.closest("[slot]")) === null || _a === void 0 ? void 0 : _a.slot) === "overlays";
       const clickInsideSidebar = event.composedPath().includes(this.sidebarEl);
-      if (!clickInsideSidebar && !clickOnToggle && this.sidebarActive) {
-        this.sidebarActive = false;
+      if (!clickInsideSidebar &&
+        !clickOnToggle &&
+        !clickOnOverlay &&
+        this.sidebarActive) {
+        this.deactivateSidebar();
       }
     };
     this.onKeyDown = (event) => {
@@ -37,13 +41,6 @@ export class FlipConsoleLayout {
     };
   }
   componentDidLoad() {
-    const sidebarContents = [
-      this.sidebarEl,
-      ...Array.from(this.el.querySelectorAll('[slot="navigation"], [slot="user"]')).filter((el) => Boolean(el)),
-    ];
-    this.focusTrap = createFocusTrap(sidebarContents, {
-      clickOutsideDeactivates: true,
-    });
     queueMicrotask(() => {
       if (!isMobileViewport()) {
         this.activateSidebar();
@@ -94,16 +91,14 @@ export class FlipConsoleLayout {
     this.sidebarActive = true;
     this.sidebarEl.removeAttribute("inert");
     if (isMobileViewport()) {
-      (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.activate();
+      (_a = this.el.querySelector("flip-tree-navigation-item")) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
   deactivateSidebar() {
-    var _a;
     this.sidebarActive = false;
     if (isMobileViewport()) {
       this.sidebarEl.setAttribute("inert", "");
     }
-    (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate({ returnFocus: true });
   }
   render() {
     const className = classnames("console-layout", {
@@ -142,7 +137,9 @@ export class FlipConsoleLayout {
                 h("flip-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }),
                 this.subheading && (h("flip-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))),
             h("div", { class: "console-layout__integration" },
-              h("slot", { name: "content" })))))));
+              h("slot", { name: "content" }))),
+          h("div", { class: "console-layout__overlays" },
+            h("slot", { name: "overlays" }))))));
   }
   static get is() { return "flip-console-layout"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-popover/flip-popover.js

@@ -25,6 +25,7 @@ export class FlipPopover {
     };
     this.onKeydown = (event) => {
       if (event.code === "Escape" && this.active) {
+        event.stopPropagation();
         this.close();
       }
     };