@brightspace-ui/core 3.147.4 → 3.147.5

package/components/tooltip/tooltip.js

@@ -14,6 +14,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', false);
+const useMutationObserver = getFlag('GAUD-8203-tooltip-mutation-observer', true);
 
 const contentBorderSize = 1;
 const contentHorizontalPadding = 15;
@@ -192,6 +193,7 @@ if (usePopoverMixin) {
 			this.#handleTargetFocusBound = this.#handleTargetFocus.bind(this);
 			this.#handleTargetMouseEnterBound = this.#handleTargetMouseEnter.bind(this);
 			this.#handleTargetMouseLeaveBound = this.#handleTargetMouseLeave.bind(this);
+			this.#handleTargetMutationBound = this.#handleTargetMutation.bind(this);
 			this.#handleTargetResizeBound = this.#handleTargetResize.bind(this);
 			this.#handleTargetTouchEndBound = this.#handleTargetTouchEnd.bind(this);
 			this.#handleTargetTouchStartBound = this.#handleTargetTouchStart.bind(this);
@@ -284,6 +286,7 @@ if (usePopoverMixin) {
 		#handleTargetFocusBound;
 		#handleTargetMouseEnterBound;
 		#handleTargetMouseLeaveBound;
+		#handleTargetMutationBound;
 		#handleTargetResizeBound;
 		#handleTargetTouchEndBound;
 		#handleTargetTouchStartBound;
@@ -299,6 +302,7 @@ if (usePopoverMixin) {
 		#showing;
 		#target;
 		#targetSizeObserver;
+		#targetMutationObserver;
 
 		#adaptPositionLocation(val) {
 			switch (val) {
@@ -332,6 +336,12 @@ if (usePopoverMixin) {
 
 			this.#targetSizeObserver = new ResizeObserver(this.#handleTargetResizeBound);
 			this.#targetSizeObserver.observe(this.#target);
+
+			if (useMutationObserver) {
+				this.#targetMutationObserver = new MutationObserver(this.#handleTargetMutationBound);
+				this.#targetMutationObserver.observe(this.#target, { attributes: true, attributeFilter: ['id'] });
+				this.#targetMutationObserver.observe(this.#target.parentNode, { childList: true });
+			}
 		}
 
 		#findTarget() {
@@ -341,7 +351,7 @@ if (usePopoverMixin) {
 			if (this.for) {
 				const targetSelector = `#${cssEscape(this.for)}`;
 				target = ownerRoot.querySelector(targetSelector);
-				target = target || ownerRoot?.host?.querySelector(targetSelector);
+				target = (target || ownerRoot?.host?.querySelector(targetSelector)) ?? null;
 			} else {
 				const parentNode = this.parentNode;
 				target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
@@ -402,6 +412,13 @@ if (usePopoverMixin) {
 			setTimeout(() => this.#updateShowing(), 100); // delay to allow for mouseenter to fire if hovering on tooltip
 		}
 
+		#handleTargetMutation([m]) {
+			if (!this.#target.isConnected || (m.target === this.#target && m.attributeName === 'id')) {
+				this.#targetMutationObserver.disconnect();
+				this._updateTarget();
+			}
+		}
+
 		#handleTargetResize() {
 			this.#resizeRunSinceTruncationCheck = true;
 			if (!this.showing) return;
@@ -453,6 +470,11 @@ if (usePopoverMixin) {
 				this.#targetSizeObserver.disconnect();
 				this.#targetSizeObserver = null;
 			}
+
+			if (this.#targetMutationObserver) {
+				this.#targetMutationObserver.disconnect();
+				this.#targetMutationObserver = null;
+			}
 		}
 
 		async #showingChanged(newValue, dispatch) {
@@ -954,6 +976,7 @@ if (usePopoverMixin) {
 			this._onTargetMouseEnter = this._onTargetMouseEnter.bind(this);
 			this._onTargetMouseLeave = this._onTargetMouseLeave.bind(this);
 			this._onTargetResize = this._onTargetResize.bind(this);
+			this._onTargetMutation = this._onTargetMutation.bind(this);
 			this._onTargetClick = this._onTargetClick.bind(this);
 			this._onTargetTouchStart = this._onTargetTouchStart.bind(this);
 			this._onTargetTouchEnd = this._onTargetTouchEnd.bind(this);
@@ -1069,13 +1092,12 @@ if (usePopoverMixin) {
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
 
-			changedProperties.forEach((_, prop) => {
-				if (prop === 'for') {
-					this._updateTarget();
-				} else if (prop === 'forceShow') {
-					this._updateShowing();
-				}
-			});
+			if (changedProperties.has('for')) {
+				this._updateTarget();
+			}
+			if (changedProperties.has('forceShow')) {
+				this._updateShowing();
+			}
 		}
 
 		hide() {
@@ -1192,6 +1214,12 @@ if (usePopoverMixin) {
 
 			this._targetSizeObserver = new ResizeObserver(this._onTargetResize);
 			this._targetSizeObserver.observe(this._target);
+
+			if (useMutationObserver) {
+				this._targetMutationObserver = new MutationObserver(this._onTargetMutation);
+				this._targetMutationObserver.observe(this._target, { attributes: true, attributeFilter: ['id'] });
+				this._targetMutationObserver.observe(this._target.parentNode, { childList: true });
+			}
 		}
 
 		_computeAvailableSpaces(targetRect, spaceAround) {
@@ -1260,7 +1288,7 @@ if (usePopoverMixin) {
 			if (this.for) {
 				const targetSelector = `#${cssEscape(this.for)}`;
 				target = ownerRoot.querySelector(targetSelector);
-				target = target || ownerRoot?.host?.querySelector(targetSelector);
+				target = (target || ownerRoot?.host?.querySelector(targetSelector)) ?? null;
 			} else {
 				const parentNode = this.parentNode;
 				target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
@@ -1391,6 +1419,13 @@ if (usePopoverMixin) {
 			setTimeout(() => this._updateShowing(), 100); // delay to allow for mouseenter to fire if hovering on tooltip
 		}
 
+		_onTargetMutation([m]) {
+			if (!this._target?.isConnected || (m.target === this._target && m.attributeName === 'id')) {
+				this._targetMutationObserver?.disconnect();
+				this._updateTarget();
+			}
+		}
+
 		_onTargetResize() {
 			this._resizeRunSinceTruncationCheck = true;
 			if (!this.showing) {
@@ -1426,6 +1461,11 @@ if (usePopoverMixin) {
 				this._targetSizeObserver.disconnect();
 				this._targetSizeObserver = null;
 			}
+
+			if (this._targetMutationObserver) {
+				this._targetMutationObserver.disconnect();
+				this._targetMutationObserver = null;
+			}
 		}
 
 		async _showingChanged(newValue, dispatch) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.147.4",
+  "version": "3.147.5",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",