@getflip/swirl-components 0.8.0 → 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() {
@@ -19,12 +18,20 @@ export class FlipConsoleLayout {
     this.onMobileNavigationToggleClick = () => {
       this.toggleSidebar();
     };
+    this.onHideNavigationButtonClick = () => {
+      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) => {
@@ -34,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();
@@ -70,21 +70,35 @@ export class FlipConsoleLayout {
       this.activateSidebar();
     }
   }
+  /**
+   * Show the mobile navigation.
+   */
+  async showSidebar() {
+    if (!this.sidebarActive) {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Hide the mobile navigation.
+   */
+  async hideSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+  }
   activateSidebar() {
     var _a;
     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", {
@@ -104,7 +118,7 @@ export class FlipConsoleLayout {
           h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" },
             h("slot", { name: "navigation" }),
             this.sidebarActive && (h("flip-visually-hidden", null,
-              h("button", { class: "console-layout__hide-navigation-button", onClick: this.onMobileNavigationToggleClick, type: "button" }, this.hideNavigationButtonLabel)))),
+              h("button", { class: "console-layout__hide-navigation-button", onClick: this.onHideNavigationButtonClick, type: "button" }, this.hideNavigationButtonLabel)))),
           h("div", { class: "console-layout__user" },
             h("slot", { name: "user" }))),
         h("main", { "aria-labelledby": "app-name", class: "console-layout__main" },
@@ -123,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"; }
@@ -386,6 +402,38 @@ export class FlipConsoleLayout {
         "text": "Toggle the mobile navigation visibility.",
         "tags": []
       }
+    },
+    "showSidebar": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Show the mobile navigation.",
+        "tags": []
+      }
+    },
+    "hideSidebar": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hide the mobile navigation.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }

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();
       }
     };