@momentum-design/components 0.134.7 → 0.134.8

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

@@ -58,9 +58,26 @@ declare class Tooltip extends Popover {
      */
     private setTooltipType;
     /**
-     * Updates the tooltip id if it is empty.
+     * Cached auto-generated id so that if the consumer (or a React wrapper that re-passes props
+     * on every render) clears the id we restore the same value instead of minting a fresh UUID
+     * on every cycle.
      */
-    private onIdUpdated;
+    private autoGeneratedId;
+    /**
+     * Ensures the tooltip has a non-empty id. Called from `willUpdate` so the assignment is folded
+     * into the in-flight update cycle (no extra render pass, no risk of an update loop).
+     *
+     * - If the consumer provides an explicit id, we drop the cached auto id so a future clear can
+     *   regenerate a fresh one.
+     * - If the id is empty, we reuse the cached auto id when present, otherwise generate one.
+     */
+    private ensureId;
+    /**
+     * Writes the appropriate aria attribute on the trigger element based on the current tooltipType.
+     * Used when only the id changed (tooltipType-driven aria updates are handled in
+     * `onTooltipTypeUpdated`).
+     */
+    private syncTriggerAriaForId;
     /**
      * Updates the placement attribute if it is not a valid placement.
      * Overriding the default from Popover
@@ -72,7 +89,7 @@ declare class Tooltip extends Popover {
      */
     private onTooltipTypeUpdated;
     protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
-    update(changedProperties: PropertyValues<this>): Promise<void>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     show(): void;
     static styles: Array<CSSResult>;
 }

package/dist/components/tooltip/tooltip.component.js

@@ -63,6 +63,12 @@ class Tooltip extends Popover {
          * @default false
          */
         this.onlyShowWhenTriggerOverflows = DEFAULTS.ONLY_SHOW_WHEN_TRIGGER_OVERFLOWS;
+        /**
+         * Cached auto-generated id so that if the consumer (or a React wrapper that re-passes props
+         * on every render) clears the id we restore the same value instead of minting a fresh UUID
+         * on every cycle.
+         */
+        this.autoGeneratedId = null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -99,26 +105,42 @@ class Tooltip extends Popover {
         this.setAttribute('tooltip-type', Object.values(TOOLTIP_TYPES).includes(type) ? type : DEFAULTS.TOOLTIP_TYPE);
     }
     /**
-     * Updates the tooltip id if it is empty.
+     * Ensures the tooltip has a non-empty id. Called from `willUpdate` so the assignment is folded
+     * into the in-flight update cycle (no extra render pass, no risk of an update loop).
+     *
+     * - If the consumer provides an explicit id, we drop the cached auto id so a future clear can
+     *   regenerate a fresh one.
+     * - If the id is empty, we reuse the cached auto id when present, otherwise generate one.
      */
-    async onIdUpdated() {
-        // Set tooltip ID if not set.
-        if (this.id.length === 0) {
-            this.id = `mdc-tooltip-${uuidv4()}`;
-        }
-        await this.updateComplete;
-        // Update the aria props on the trigger component to updated tooltip id.
-        if (this.triggerElement) {
-            switch (this.tooltipType) {
-                case TOOLTIP_TYPES.DESCRIPTION:
-                    this.triggerElement.setAttribute('aria-describedby', this.id);
-                    break;
-                case TOOLTIP_TYPES.LABEL:
-                    this.triggerElement.setAttribute('aria-labelledby', this.id);
-                    break;
-                default:
-                    break;
+    ensureId() {
+        if (this.id.length > 0) {
+            if (this.autoGeneratedId && this.id !== this.autoGeneratedId) {
+                this.autoGeneratedId = null;
             }
+            return;
+        }
+        if (!this.autoGeneratedId) {
+            this.autoGeneratedId = `mdc-tooltip-${uuidv4()}`;
+        }
+        this.id = this.autoGeneratedId;
+    }
+    /**
+     * Writes the appropriate aria attribute on the trigger element based on the current tooltipType.
+     * Used when only the id changed (tooltipType-driven aria updates are handled in
+     * `onTooltipTypeUpdated`).
+     */
+    syncTriggerAriaForId() {
+        if (!this.triggerElement)
+            return;
+        switch (this.tooltipType) {
+            case TOOLTIP_TYPES.DESCRIPTION:
+                this.triggerElement.setAttribute('aria-describedby', this.id);
+                break;
+            case TOOLTIP_TYPES.LABEL:
+                this.triggerElement.setAttribute('aria-labelledby', this.id);
+                break;
+            default:
+                break;
         }
     }
     /**
@@ -181,17 +203,26 @@ class Tooltip extends Popover {
         }
         await super.isOpenUpdated(oldValue, newValue);
     }
-    async update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('id')) {
-            await this.onIdUpdated();
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        // Ensure an id exists before render. Assigning `this.id` inside willUpdate is folded into
+        // the current update cycle, so there is no extra render and no loop risk (the previous
+        // implementation set the id from inside `update()` and awaited `updateComplete`, which
+        // produced an infinite re-render loop under @lit/react wrappers that keep clearing the id).
+        const idChanged = changedProperties.has('id');
+        if (idChanged) {
+            this.ensureId();
         }
         if (changedProperties.has('placement')) {
             this.onPlacementUpdated();
         }
         if (changedProperties.has('tooltipType')) {
+            // onTooltipTypeUpdated also refreshes the trigger aria attribute, so it covers the id sync.
             this.onTooltipTypeUpdated(changedProperties);
         }
+        else if (idChanged) {
+            this.syncTriggerAriaForId();
+        }
     }
     show() {
         if (this.onlyShowWhenTriggerOverflows && this.triggerElement && hasOverflowMixin(this.triggerElement)) {

package/dist/custom-elements.json

@@ -53149,6 +53149,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "autoGeneratedId",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "Cached auto-generated id so that if the consumer (or a React wrapper that re-passes props\non every render) clears the id we restore the same value instead of minting a fresh UUID\non every cycle."
+            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -53338,6 +53348,17 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "ensureId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Ensures the tooltip has a non-empty id. Called from `willUpdate` so the assignment is folded\ninto the in-flight update cycle (no extra render pass, no risk of an update loop).\n\n- If the consumer provides an explicit id, we drop the cached auto id so a future clear can\n  regenerate a fresh one.\n- If the id is empty, we reuse the cached auto id when present, otherwise generate one."
+            },
             {
               "kind": "field",
               "name": "focusBackToTrigger",
@@ -53558,17 +53579,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "onIdUpdated",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "description": "Updates the tooltip id if it is empty."
-            },
             {
               "kind": "field",
               "name": "onlyShowWhenTriggerOverflows",
@@ -53761,6 +53771,17 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "syncTriggerAriaForId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Writes the appropriate aria attribute on the trigger element based on the current tooltipType.\nUsed when only the id changed (tooltipType-driven aria updates are handled in\n`onTooltipTypeUpdated`)."
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",

package/package.json

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