@getflip/swirl-components 0.404.0 → 0.406.0

package/dist/cjs/swirl-tooltip.cjs.entry.js

@@ -5,25 +5,30 @@ var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--promo .tooltip__bubble,.tooltip--promo .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const SwirlTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.active = true;
         this.delay = 200;
+        this.intent = "default";
         this.position = "top";
         this.positioning = "absolute";
-        /**
-         * If set to true, tooltip will be initially visible.
-         * It will only be dismissible via a click and will not reappear.
-         * Tooltip will have a blue background color.
-         */
-        this.isPromo = false;
+        this.trigger = ["focus", "hover"];
         this.visible = false;
-        this.isPromoShown = false;
         this.onKeydown = (event) => {
-            if (event.code === "Escape" && !this.isPromo) {
+            if (event.code === "Escape") {
+                this.hide();
+            }
+        };
+        this.onFocusIn = () => {
+            if (this.trigger.includes("focus")) {
+                this.show();
+            }
+        };
+        this.onFocusOut = () => {
+            if (this.trigger.includes("focus")) {
                 this.hide();
             }
         };
@@ -44,20 +49,6 @@ const SwirlTooltip = class {
                 top: Boolean(arrowY) ? arrowY + "px" : undefined,
             };
         };
-        this.show = () => {
-            if (!this.active || (this.isPromo && this.isPromoShown)) {
-                return;
-            }
-            this.visible = true;
-            requestAnimationFrame(() => {
-                const referenceElement = this.el.children[0];
-                if (!Boolean(referenceElement)) {
-                    return;
-                }
-                this.reposition();
-                this.disableAutoUpdate = floatingUi_dom_browser_min.N(referenceElement, this.popperEl, this.reposition.bind(this));
-            });
-        };
         this.showWithDelay = () => {
             if (!this.active) {
                 return;
@@ -70,14 +61,6 @@ const SwirlTooltip = class {
                 this.show();
             }, this.delay);
         };
-        this.hide = () => {
-            if (Boolean(this.showTimeout)) {
-                clearTimeout(this.showTimeout);
-                this.showTimeout = undefined;
-            }
-            this.visible = false;
-            this.disableAutoUpdate?.();
-        };
         this.updateOptions = () => {
             const margin = utils.getPixelsFromRemToken("--s-space-12");
             const shiftPaddingY = utils.getPixelsFromRemToken("--s-space-8");
@@ -104,10 +87,12 @@ const SwirlTooltip = class {
         this.updateOptions();
     }
     onMouseEnter() {
-        this.showWithDelay();
+        if (this.trigger.includes("hover")) {
+            this.showWithDelay();
+        }
     }
     onMouseLeave() {
-        if (!this.isPromo) {
+        if (this.trigger.includes("hover")) {
             this.hide();
         }
     }
@@ -128,18 +113,35 @@ const SwirlTooltip = class {
     }
     componentDidLoad() {
         this.updateOptions();
-        if (this.isPromo) {
-            this.show();
-            this.isPromoShown = true;
+    }
+    async show() {
+        if (!this.active) {
+            return;
+        }
+        this.visible = true;
+        requestAnimationFrame(() => {
+            const referenceElement = this.el.children[0];
+            if (!Boolean(referenceElement)) {
+                return;
+            }
+            this.reposition();
+            this.disableAutoUpdate = floatingUi_dom_browser_min.N(referenceElement, this.popperEl, this.reposition.bind(this));
+        });
+    }
+    async hide() {
+        if (Boolean(this.showTimeout)) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
         }
+        this.visible = false;
+        this.disableAutoUpdate?.();
     }
     render() {
-        const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
+        const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
-            "tooltip--promo": this.isPromo,
         });
-        return (index.h(index.Host, { key: 'fc519bc6bad0fd200f1488e3742b0dca44cc05b5', onKeydown: this.onKeydown }, index.h("span", { key: '91964f251ff0c04bfec3fbec8107744f6cfe3d1d', class: className }, index.h("span", { key: '0aace9505aedb2f37c5acc9fb0bb3cca3daf2088', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: 'a3fcf67df68395c98fc352938fd69c13990fbb3e' })), index.h("span", { key: 'd9f80d516bdc74a0193c91af589cd036500d3899', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (index.h(index.Host, { key: 'e418f075955973796c17ba8994cfb63284b99d13', onKeydown: this.onKeydown }, index.h("span", { key: '410ac8bc16773617287b73b4676682b4e887eeb3', class: className }, index.h("span", { key: 'e111062966a91142006124131819095cd3e41e69', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: 'fc43ad1b5a655a0512157a6cc6c9877c592caa1c' })), index.h("span", { key: '360545df93f2ea5b655166769d1a3d95c8dca299', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -147,7 +149,7 @@ const SwirlTooltip = class {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (index.h("span", { key: '3d54c43341109596f4aaf84c375f82bbeba6a42c', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: 'cc6a79df030454fdbceaaf93670ea93378a28713', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: 'ff31c9b40b969155ab7f1c21603406e23cf2a791', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (index.h("span", { key: 'b4af0145c86950a1a863f73d63f77000bd98f95a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '84a35eb842594411f9deac1c47b04034bdd64362', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: 'c6796dee53c0fd6d1fbc2a39d6495f91360671fc', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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

@@ -51,8 +51,7 @@
     }
 
 .popover--closing .popover__backdrop {
-    animation: 0.15s popover-fade-out;
-    animation-fill-mode: forwards;
+    animation: 0.15s popover-fade-out forwards;
   }
 
 @media (prefers-reduced-motion) {
@@ -63,14 +62,13 @@
     }
 
 .popover--closing .popover__content {
-    animation: 0.15s popover-slide-out;
-    animation-fill-mode: forwards;
+    animation: 0.15s popover-slide-out forwards;
   }
 
 @media (min-width: 768px) {
 
 .popover--closing .popover__content {
-      animation: 0.15s popover-fade-out
+      animation: 0.15s popover-fade-out forwards
   }
     }
 
@@ -96,8 +94,7 @@
       }
         }
       .popover--fullscreen-bottom-sheet.popover--closing .popover__content {
-        animation: 0.15s popover-fade-out;
-        animation-fill-mode: forwards;
+        animation: 0.15s popover-fade-out forwards;
       }
 
         @media (prefers-reduced-motion) {

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

@@ -88,10 +88,9 @@
   background-color: var(--s-surface-neutral-default);
 }
 
-.tooltip--promo .tooltip__bubble,
-.tooltip--promo .tooltip__arrow {
-  background-color: var(--s-surface-info-default);
-}
+.tooltip--intent-info .tooltip__bubble, .tooltip--intent-info .tooltip__arrow {
+    background-color: var(--s-surface-info-default);
+  }
 
 @keyframes tooltip-fade-in {
   from {

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

@@ -6,18 +6,23 @@ export class SwirlTooltip {
     constructor() {
         this.active = true;
         this.delay = 200;
+        this.intent = "default";
         this.position = "top";
         this.positioning = "absolute";
-        /**
-         * If set to true, tooltip will be initially visible.
-         * It will only be dismissible via a click and will not reappear.
-         * Tooltip will have a blue background color.
-         */
-        this.isPromo = false;
+        this.trigger = ["focus", "hover"];
         this.visible = false;
-        this.isPromoShown = false;
         this.onKeydown = (event) => {
-            if (event.code === "Escape" && !this.isPromo) {
+            if (event.code === "Escape") {
+                this.hide();
+            }
+        };
+        this.onFocusIn = () => {
+            if (this.trigger.includes("focus")) {
+                this.show();
+            }
+        };
+        this.onFocusOut = () => {
+            if (this.trigger.includes("focus")) {
                 this.hide();
             }
         };
@@ -38,20 +43,6 @@ export class SwirlTooltip {
                 top: Boolean(arrowY) ? arrowY + "px" : undefined,
             };
         };
-        this.show = () => {
-            if (!this.active || (this.isPromo && this.isPromoShown)) {
-                return;
-            }
-            this.visible = true;
-            requestAnimationFrame(() => {
-                const referenceElement = this.el.children[0];
-                if (!Boolean(referenceElement)) {
-                    return;
-                }
-                this.reposition();
-                this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
-            });
-        };
         this.showWithDelay = () => {
             if (!this.active) {
                 return;
@@ -64,14 +55,6 @@ export class SwirlTooltip {
                 this.show();
             }, this.delay);
         };
-        this.hide = () => {
-            if (Boolean(this.showTimeout)) {
-                clearTimeout(this.showTimeout);
-                this.showTimeout = undefined;
-            }
-            this.visible = false;
-            this.disableAutoUpdate?.();
-        };
         this.updateOptions = () => {
             const margin = getPixelsFromRemToken("--s-space-12");
             const shiftPaddingY = getPixelsFromRemToken("--s-space-8");
@@ -98,10 +81,12 @@ export class SwirlTooltip {
         this.updateOptions();
     }
     onMouseEnter() {
-        this.showWithDelay();
+        if (this.trigger.includes("hover")) {
+            this.showWithDelay();
+        }
     }
     onMouseLeave() {
-        if (!this.isPromo) {
+        if (this.trigger.includes("hover")) {
             this.hide();
         }
     }
@@ -122,18 +107,35 @@ export class SwirlTooltip {
     }
     componentDidLoad() {
         this.updateOptions();
-        if (this.isPromo) {
-            this.show();
-            this.isPromoShown = true;
+    }
+    async show() {
+        if (!this.active) {
+            return;
         }
+        this.visible = true;
+        requestAnimationFrame(() => {
+            const referenceElement = this.el.children[0];
+            if (!Boolean(referenceElement)) {
+                return;
+            }
+            this.reposition();
+            this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
+        });
+    }
+    async hide() {
+        if (Boolean(this.showTimeout)) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        this.visible = false;
+        this.disableAutoUpdate?.();
     }
     render() {
-        const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
+        const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
-            "tooltip--promo": this.isPromo,
         });
-        return (h(Host, { key: 'fc519bc6bad0fd200f1488e3742b0dca44cc05b5', onKeydown: this.onKeydown }, h("span", { key: '91964f251ff0c04bfec3fbec8107744f6cfe3d1d', class: className }, h("span", { key: '0aace9505aedb2f37c5acc9fb0bb3cca3daf2088', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'a3fcf67df68395c98fc352938fd69c13990fbb3e' })), h("span", { key: 'd9f80d516bdc74a0193c91af589cd036500d3899', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'e418f075955973796c17ba8994cfb63284b99d13', onKeydown: this.onKeydown }, h("span", { key: '410ac8bc16773617287b73b4676682b4e887eeb3', class: className }, h("span", { key: 'e111062966a91142006124131819095cd3e41e69', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: 'fc43ad1b5a655a0512157a6cc6c9877c592caa1c' })), h("span", { key: '360545df93f2ea5b655166769d1a3d95c8dca299', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -141,7 +143,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '3d54c43341109596f4aaf84c375f82bbeba6a42c', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'cc6a79df030454fdbceaaf93670ea93378a28713', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'ff31c9b40b969155ab7f1c21603406e23cf2a791', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'b4af0145c86950a1a863f73d63f77000bd98f95a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '84a35eb842594411f9deac1c47b04034bdd64362', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'c6796dee53c0fd6d1fbc2a39d6495f91360671fc', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));
@@ -219,6 +221,32 @@ export class SwirlTooltip {
                 "reflect": false,
                 "defaultValue": "200"
             },
+            "intent": {
+                "type": "string",
+                "attribute": "intent",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTooltipIntent",
+                    "resolved": "\"default\" | \"info\"",
+                    "references": {
+                        "SwirlTooltipIntent": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tooltip/swirl-tooltip.tsx",
+                            "id": "src/components/swirl-tooltip/swirl-tooltip.tsx::SwirlTooltipIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "position": {
                 "type": "string",
                 "attribute": "position",
@@ -271,25 +299,30 @@ export class SwirlTooltip {
                 "reflect": false,
                 "defaultValue": "\"absolute\""
             },
-            "isPromo": {
-                "type": "boolean",
-                "attribute": "is-promo",
+            "trigger": {
+                "type": "unknown",
+                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "SwirlTooltipTrigger[]",
+                    "resolved": "SwirlTooltipTrigger[]",
+                    "references": {
+                        "SwirlTooltipTrigger": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tooltip/swirl-tooltip.tsx",
+                            "id": "src/components/swirl-tooltip/swirl-tooltip.tsx::SwirlTooltipTrigger"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set to true, tooltip will be initially visible.\nIt will only be dismissible via a click and will not reappear.\nTooltip will have a blue background color."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "[\"focus\", \"hover\"]"
             }
         };
     }
@@ -297,8 +330,49 @@ export class SwirlTooltip {
         return {
             "actualPosition": {},
             "arrowStyles": {},
-            "visible": {},
-            "isPromoShown": {}
+            "visible": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
         };
     }
     static get elementRef() { return "el"; }