@limetech/lime-elements 37.15.0 → 37.15.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [37.15.1](https://github.com/Lundalogik/lime-elements/compare/v37.15.0...v37.15.1) (2024-04-10)
+
+
+### Bug Fixes
+
+
+* **tooltip:** avoid tooltip sometimes getting stuck showing ([1e8e45b](https://github.com/Lundalogik/lime-elements/commit/1e8e45b06bd4c0f91b931005489f84d076b81d1d)), closes [#2898](https://github.com/Lundalogik/lime-elements/issues/2898)
+
 ## [37.15.0](https://github.com/Lundalogik/lime-elements/compare/v37.14.1...v37.15.0) (2024-04-05)
 
 

package/dist/cjs/limel-portal_3.cjs.entry.js

@@ -2008,6 +2008,36 @@ const Portal = class {
 };
 Portal.style = portalCss;
 
+function getOwnerElement(id, startingPoint) {
+  let element = startingPoint;
+  do {
+    element = element.parentNode;
+  } while (element &&
+    element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
+    element.nodeType !== Node.DOCUMENT_NODE);
+  return element === null || element === void 0 ? void 0 : element.getElementById(id);
+}
+
+const DEFAULT_DELAY_FOR_SHOWING = 500;
+class TooltipTimer {
+  constructor(showCallback, hideCallback, delayForShowing = DEFAULT_DELAY_FOR_SHOWING) {
+    this.timerHandle = null;
+    this.showCallback = showCallback;
+    this.hideCallback = hideCallback;
+    this.delayForShowing = delayForShowing;
+  }
+  showAfterDelay() {
+    if (!this.timerHandle) {
+      this.timerHandle = setTimeout(this.showCallback, this.delayForShowing);
+    }
+  }
+  hide() {
+    clearTimeout(this.timerHandle);
+    this.timerHandle = null;
+    this.hideCallback();
+  }
+}
+
 const tooltipCss = ":host(limel-tooltip){position:absolute;pointer-events:none}";
 
 const DEFAULT_MAX_LENGTH = 50;
@@ -2015,14 +2045,10 @@ const Tooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showTooltip = () => {
-      const tooltipDelay = 500;
-      this.showTooltipTimeoutHandle = window.setTimeout(() => {
-        this.open = true;
-      }, tooltipDelay);
+      this.tooltipTimer.showAfterDelay();
     };
     this.hideTooltip = () => {
-      clearTimeout(this.showTooltipTimeoutHandle);
-      this.open = false;
+      this.tooltipTimer.hide();
     };
     this.elementId = undefined;
     this.label = undefined;
@@ -2032,9 +2058,10 @@ const Tooltip = class {
     this.open = undefined;
     this.portalId = randomString.createRandomString();
     this.tooltipId = randomString.createRandomString();
+    this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
   }
   connectedCallback() {
-    this.ownerElement = this.getOwnerElement();
+    this.ownerElement = getOwnerElement(this.elementId, this.host);
     this.setOwnerAriaLabel();
     this.addListeners();
   }
@@ -2066,15 +2093,6 @@ const Tooltip = class {
     (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
     (_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
   }
-  getOwnerElement() {
-    let element = this.host;
-    do {
-      element = element.parentNode;
-    } while (element &&
-      element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
-      element.nodeType !== Node.DOCUMENT_NODE);
-    return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
-  }
   get host() { return index.getElement(this); }
 };
 Tooltip.style = tooltipCss;