@momentum-design/components 0.129.36 → 0.129.37

package/dist/components/popover/popover.component.d.ts

@@ -344,8 +344,6 @@ declare class Popover extends Popover_base {
     animationFrame: boolean;
     arrowElement: HTMLElement | null;
     /** @internal */
-    private hoverTimer;
-    /** @internal */
     private isHovered;
     /** @internal */
     private openDelay;
@@ -380,6 +378,7 @@ declare class Popover extends Popover_base {
      * @internal
      */
     get triggerElement(): HTMLElement | null;
+    private timers;
     constructor();
     private parseTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
@@ -452,6 +451,10 @@ declare class Popover extends Popover_base {
      *  This method checks if the trigger element has visible focus or is being hovered.
      */
     private handleFocusIn;
+    /**
+     * Cancels the open delay timer.
+     */
+    private cancelOpenDelay;
     /**
      * Starts the close delay timer.
      * If the popover is not interactive, it will close the popover after the delay.

package/dist/components/popover/popover.component.js

@@ -16,7 +16,8 @@ import { Component } from '../../models';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
-import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
+import { Timers } from '../../utils/controllers/Timers';
+import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TIMEOUTS, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
 import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
@@ -365,8 +366,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.animationFrame = DEFAULTS.ANIMATION_FRAME;
         this.arrowElement = null;
         /** @internal */
-        this.hoverTimer = null;
-        /** @internal */
         this.isHovered = false;
         /** @internal */
         this.openDelay = 0;
@@ -385,6 +384,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * @internal
          */
         this.popoverDepth = 0;
+        this.timers = new Timers(this);
         this.parseTrigger = () => {
             var _a;
             const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
@@ -556,57 +556,77 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 this.show();
             }
         };
+        /**
+         * Cancels the open delay timer.
+         */
+        this.cancelOpenDelay = () => {
+            this.timers.clearTimeout(TIMEOUTS.OPEN);
+        };
         /**
          * Starts the close delay timer.
          * If the popover is not interactive, it will close the popover after the delay.
          */
         this.startCloseDelay = () => {
+            this.cancelOpenDelay();
             if (!this.interactive) {
                 this.hide();
             }
             else {
-                this.hoverTimer = window.setTimeout(() => {
+                const callback = () => {
                     this.visible = false;
-                }, this.closeDelay);
+                };
+                if (this.closeDelay > 0) {
+                    this.timers.setTimeout(TIMEOUTS.HOVER, callback, this.closeDelay);
+                }
+                else {
+                    this.timers.clearTimeout(TIMEOUTS.HOVER);
+                    callback();
+                }
             }
         };
         /**
          * Cancels the close delay timer.
          */
         this.cancelCloseDelay = () => {
-            if (this.hoverTimer) {
-                window.clearTimeout(this.hoverTimer);
-                this.hoverTimer = null;
-            }
+            this.timers.clearTimeout(TIMEOUTS.HOVER);
+            this.timers.clearTimeout(TIMEOUTS.CLOSE);
         };
         /**
          * Shows the popover.
          */
         this.show = () => {
-            if (this.visible || this.shouldSuppressOpening) {
+            if (this.shouldSuppressOpening) {
                 return;
             }
             this.cancelCloseDelay();
+            if (this.visible) {
+                return;
+            }
+            const callback = () => {
+                this.visible = true;
+            };
             if (this.openDelay > 0) {
-                setTimeout(() => {
-                    this.visible = true;
-                }, this.openDelay);
+                this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
             }
             else {
-                this.visible = true;
+                this.timers.clearTimeout(TIMEOUTS.OPEN);
+                callback();
             }
         };
         /**
          * Hides the popover.
          */
         this.hide = () => {
-            if (this.closeDelay) {
-                setTimeout(() => {
-                    this.visible = false;
-                }, this.closeDelay);
+            this.cancelOpenDelay();
+            const callback = () => {
+                this.visible = false;
+            };
+            if (this.closeDelay > 0) {
+                this.timers.setTimeout(TIMEOUTS.CLOSE, callback, this.closeDelay);
             }
             else {
-                this.visible = false;
+                this.timers.clearTimeout(TIMEOUTS.CLOSE);
+                callback();
             }
         };
         /**
@@ -724,8 +744,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.moveElementBackAfterBackdropRemoval(this.triggerElement);
         this.removeBackdrop();
         (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
-        // clean timer if there is one set:
-        this.cancelCloseDelay();
         if (!this.keepConnectedTooltipOpen) {
             if (this.connectedTooltip) {
                 this.connectedTooltip.shouldSuppressOpening = false;

package/dist/components/popover/popover.constants.d.ts

@@ -58,4 +58,9 @@ declare const DEFAULTS: {
     readonly IS_BACKDROP_INVISIBLE: true;
     readonly ANIMATION_FRAME: false;
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };
+declare const TIMEOUTS: {
+    readonly OPEN: "open";
+    readonly HOVER: "hover";
+    readonly CLOSE: "close";
+};
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS, TIMEOUTS };

package/dist/components/popover/popover.constants.js

@@ -60,4 +60,9 @@ const DEFAULTS = {
     IS_BACKDROP_INVISIBLE: true,
     ANIMATION_FRAME: false,
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };
+const TIMEOUTS = {
+    OPEN: 'open',
+    HOVER: 'hover',
+    CLOSE: 'close',
+};
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS, TIMEOUTS };

package/dist/custom-elements.json

@@ -161,8 +161,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -420,8 +420,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -12161,6 +12161,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cancelOpenDelay",
+              "privacy": "private",
+              "description": "Cancels the open delay timer.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "closeButton",
@@ -13163,6 +13173,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "timers",
+              "privacy": "private",
+              "default": "new Timers(this)",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",
@@ -27373,6 +27393,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cancelOpenDelay",
+              "privacy": "private",
+              "description": "Cancels the open delay timer.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "closeAllMenuPopovers",
@@ -28615,6 +28645,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "timers",
+              "privacy": "private",
+              "default": "new Timers(this)",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",
@@ -33841,6 +33881,12 @@
               "privacy": "private",
               "description": "Cancels the close delay timer."
             },
+            {
+              "kind": "field",
+              "name": "cancelOpenDelay",
+              "privacy": "private",
+              "description": "Cancels the open delay timer."
+            },
             {
               "kind": "field",
               "name": "closeButton",
@@ -34687,6 +34733,12 @@
               "attribute": "strategy",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "timers",
+              "privacy": "private",
+              "default": "new Timers(this)"
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",
@@ -49653,6 +49705,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cancelOpenDelay",
+              "privacy": "private",
+              "description": "Cancels the open delay timer.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "closeButton",
@@ -50694,6 +50756,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "timers",
+              "privacy": "private",
+              "default": "new Timers(this)",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",
@@ -51695,6 +51767,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cancelOpenDelay",
+              "privacy": "private",
+              "description": "Cancels the open delay timer.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "closeButton",
@@ -52759,6 +52841,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "timers",
+              "privacy": "private",
+              "default": "new Timers(this)",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",

package/dist/utils/controllers/Timers.d.ts

@@ -0,0 +1,49 @@
+import { ReactiveController, type ReactiveControllerHost } from 'lit';
+/**
+ * Handle setTimeout and setInterval timers for a host, automatically clearing them on disconnect.
+ */
+export declare class Timers implements ReactiveController {
+    private nameToIntervalId;
+    private nameToTimeoutId;
+    constructor(host: ReactiveControllerHost);
+    hostDisconnected(): void;
+    /**
+     * Wrapper around `window.setInterval` that tracks the interval ID for cleanup on disconnect.
+     * If an interval with the same name already exists, it is cleared before setting the new one.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval}
+     * @param name - Name to identify the interval timer
+     * @param handler - Function that is called every `ms` milliseconds
+     * @param ms - Delay in milliseconds between each call to `handler`
+     * @param args - Additional arguments passed to `handler`
+     * @returns The interval ID returned by `window.setInterval`
+     */
+    setInterval<TArgs extends any[]>(name: string, handler: (...args: TArgs) => void, ms?: number, ...args: TArgs): number;
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval}
+     * @param id - The name or ID of the interval to clear
+     */
+    clearInterval(id: string | number): void;
+    /**
+     * Wrapper around `window.setTimeout` that tracks the timeout ID for cleanup on disconnect.
+     * If a timeout with the same name already exists, it is cleared before setting the new one.
+     * When the timeout executes, it removes itself from the tracking map.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout}
+     * @param name - Name to identify the timeout
+     * @param handler - Function that is called after `ms` milliseconds
+     * @param ms - Delay in milliseconds before calling `handler`
+     * @param args - Additional arguments passed to `handler`
+     * @returns The timeout id returned by `window.setTimeout`
+     */
+    setTimeout<TArgs extends any[]>(name: string, handler: (...args: TArgs) => void, ms?: number, ...args: TArgs): number;
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout}
+     * @param id - The name or ID of the timeout to clear
+     */
+    clearTimeout(id: string | number): void;
+    /**
+     * @internal
+     */
+    private getNameAndIdFromIdentifier;
+}

package/dist/utils/controllers/Timers.js

@@ -0,0 +1,96 @@
+/**
+ * Handle setTimeout and setInterval timers for a host, automatically clearing them on disconnect.
+ */
+export class Timers {
+    constructor(host) {
+        this.nameToIntervalId = new Map();
+        this.nameToTimeoutId = new Map();
+        host.addController(this);
+    }
+    hostDisconnected() {
+        [...this.nameToIntervalId.values()].forEach(clearInterval);
+        this.nameToIntervalId.clear();
+        [...this.nameToTimeoutId.values()].forEach(clearTimeout);
+        this.nameToTimeoutId.clear();
+    }
+    /**
+     * Wrapper around `window.setInterval` that tracks the interval ID for cleanup on disconnect.
+     * If an interval with the same name already exists, it is cleared before setting the new one.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval}
+     * @param name - Name to identify the interval timer
+     * @param handler - Function that is called every `ms` milliseconds
+     * @param ms - Delay in milliseconds between each call to `handler`
+     * @param args - Additional arguments passed to `handler`
+     * @returns The interval ID returned by `window.setInterval`
+     */
+    setInterval(name, handler, ms, ...args) {
+        if (this.nameToIntervalId.has(name)) {
+            clearInterval(this.nameToIntervalId.get(name));
+        }
+        const id = window.setInterval(handler, ms, ...args);
+        this.nameToIntervalId.set(name, id);
+        return id;
+    }
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval}
+     * @param id - The name or ID of the interval to clear
+     */
+    clearInterval(id) {
+        const [intervalName, intervalId] = this.getNameAndIdFromIdentifier(this.nameToIntervalId, id);
+        if (intervalId !== undefined) {
+            clearInterval(intervalId);
+        }
+        if (intervalName) {
+            this.nameToIntervalId.delete(intervalName);
+        }
+    }
+    /**
+     * Wrapper around `window.setTimeout` that tracks the timeout ID for cleanup on disconnect.
+     * If a timeout with the same name already exists, it is cleared before setting the new one.
+     * When the timeout executes, it removes itself from the tracking map.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout}
+     * @param name - Name to identify the timeout
+     * @param handler - Function that is called after `ms` milliseconds
+     * @param ms - Delay in milliseconds before calling `handler`
+     * @param args - Additional arguments passed to `handler`
+     * @returns The timeout id returned by `window.setTimeout`
+     */
+    setTimeout(name, handler, ms, ...args) {
+        if (this.nameToTimeoutId.has(name)) {
+            clearTimeout(this.nameToTimeoutId.get(name));
+        }
+        const id = window.setTimeout((...args) => {
+            handler(...args);
+            this.nameToTimeoutId.delete(name);
+        }, ms, ...args);
+        this.nameToTimeoutId.set(name, id);
+        return id;
+    }
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout}
+     * @param id - The name or ID of the timeout to clear
+     */
+    clearTimeout(id) {
+        const [timeoutName, timeoutId] = this.getNameAndIdFromIdentifier(this.nameToTimeoutId, id);
+        if (timeoutId !== undefined) {
+            window.clearTimeout(timeoutId);
+        }
+        if (timeoutName) {
+            this.nameToTimeoutId.delete(timeoutName);
+        }
+    }
+    /**
+     * @internal
+     */
+    getNameAndIdFromIdentifier(map, id) {
+        var _a;
+        if (typeof id === 'number') {
+            const timerId = id;
+            const timerName = (_a = [...map.entries()].find(([, value]) => value === id)) === null || _a === void 0 ? void 0 : _a[0];
+            return [timerName, timerId];
+        }
+        return [id, map.get(id)];
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.36",
+  "version": "0.129.37",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"