@getflip/swirl-components 0.134.0 → 0.136.0

package/dist/collection/components/swirl-menu/swirl-menu.spec.js

@@ -1,9 +1,9 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlButton } from "../swirl-button/swirl-button";
 import { SwirlMenuItem } from "../swirl-menu-item/swirl-menu-item";
+import { SwirlPopoverTrigger } from "../swirl-popover-trigger/swirl-popover-trigger";
 import { SwirlPopover } from "../swirl-popover/swirl-popover";
 import { SwirlMenu } from "./swirl-menu";
-import { SwirlPopoverTrigger } from "../swirl-popover-trigger/swirl-popover-trigger";
 global.DocumentFragment = class DocumentFragment extends Node {
 };
 global.ShadowRoot = class ShadowRoot extends DocumentFragment {
@@ -13,6 +13,11 @@ global.MutationObserver = class {
   disconnect() { }
   observe() { }
 };
+global.IntersectionObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
 const template = `
   <div>
     <swirl-popover-trigger popover="menu">

package/dist/collection/components/swirl-popover/swirl-popover.spec.js

@@ -1,6 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { SwirlPopover } from "./swirl-popover";
 import { SwirlPopoverTrigger } from "../swirl-popover-trigger/swirl-popover-trigger";
+import { SwirlPopover } from "./swirl-popover";
+global.IntersectionObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
 describe("swirl-popover", () => {
   const template = `
     <div>

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -39,11 +39,27 @@ export class SwirlPopoverTrigger {
         triggerEl.setAttribute("aria-haspopup", "dialog");
       }
     };
+    this.hidePopoverWhenInvisible = true;
+    this.parentScrollContainer = undefined;
     this.popover = undefined;
     this.setAriaAttributes = true;
   }
   componentDidLoad() {
     this.updateTriggerElAriaAttributes();
+    if (this.hidePopoverWhenInvisible) {
+      this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+        root: this.parentScrollContainer,
+        threshold: 1,
+      });
+      const firstChild = this.el.querySelector("*");
+      if (!Boolean(firstChild)) {
+        return;
+      }
+      this.intersectionObserver.observe(firstChild);
+    }
+  }
+  disconnectedCallback() {
+    this.intersectionObserver?.disconnect();
   }
   watchPopover() {
     this.updateTriggerElAriaAttributes();
@@ -59,9 +75,15 @@ export class SwirlPopoverTrigger {
     }
     return this.el.children[0];
   }
+  onVisibilityChange(entries) {
+    const triggerIsVisible = entries[0].isIntersecting;
+    if (!triggerIsVisible && this.isPopoverOpen()) {
+      this.getPopoverEl()?.close();
+    }
+  }
   isPopoverOpen() {
     const popover = this.getPopoverEl();
-    const isActive = popover.shadowRoot.firstChild?.classList.contains("popover--active");
+    const isActive = popover?.shadowRoot.firstChild?.classList.contains("popover--active");
     return isActive;
   }
   render() {
@@ -81,6 +103,43 @@ export class SwirlPopoverTrigger {
   }
   static get properties() {
     return {
+      "hidePopoverWhenInvisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-popover-when-invisible",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "parentScrollContainer": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
       "popover": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.spec.js

@@ -1,6 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { SwirlPopoverTrigger } from "./swirl-popover-trigger";
 import { SwirlButton } from "../swirl-button/swirl-button";
+import { SwirlPopoverTrigger } from "./swirl-popover-trigger";
+global.IntersectionObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
 describe("swirl-popover-trigger", () => {
   it("renders its trigger element and adds aria attributes", async () => {
     const page = await newSpecPage({

package/dist/collection/components/swirl-text/swirl-text.css

@@ -29,6 +29,30 @@
   color: var(--s-text-default);
 }
 
+.text--color-highlight {
+  color: var(--s-text-highlight);
+}
+
+.text--color-on-action-primary {
+  color: var(--s-text-on-action-primary);
+}
+
+.text--color-on-image {
+  color: var(--s-text-on-image);
+}
+
+.text--color-on-status {
+  color: var(--s-text-on-status);
+}
+
+.text--color-on-surface-highlight {
+  color: var(--s-text-on-surface-highlight);
+}
+
+.text--color-on-surface-highlight-subdued {
+  color: var(--s-text-on-surface-highlight-subdued);
+}
+
 .text--color-subdued {
   color: var(--s-text-subdued);
 }

package/dist/collection/components/swirl-text/swirl-text.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import classnames from "classnames";
 import balanceText from "balance-text";
+import classnames from "classnames";
 import shave from "shave";
 export class SwirlText {
   constructor() {
@@ -126,7 +126,7 @@ export class SwirlText {
         "mutable": false,
         "complexType": {
           "original": "SwirlTextColor",
-          "resolved": "\"critical\" | \"default\" | \"subdued\" | \"success\" | \"warning\"",
+          "resolved": "\"critical\" | \"default\" | \"highlight\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"subdued\" | \"success\" | \"warning\"",
           "references": {
             "SwirlTextColor": {
               "location": "local",