@brightspace-ui/core 3.269.3 → 3.269.4

package/components/demo/demo-page-settings.js

@@ -45,8 +45,6 @@ class DemoPageSettings extends LitElement {
 
 	constructor() {
 		super();
-		this.#handleFlagsKnownBound = this.#handleFlagsKnown.bind(this);
-		this.#handleDocumentLanguageChangeBound = this.#handleDocumentLanguageChange.bind(this);
 		const urlParams = new URLSearchParams(window.location.search);
 		if (urlParams.has('lang')) {
 			const newLanguageCode = urlParams.get('lang');
@@ -64,14 +62,14 @@ class DemoPageSettings extends LitElement {
 
 	connectedCallback() {
 		super.connectedCallback();
-		document.addEventListener('d2l-flags-known', this.#handleFlagsKnownBound);
-		localeSettings.addChangeListener(this.#handleDocumentLanguageChangeBound);
+		document.addEventListener('d2l-flags-known', this.#handleFlagsKnown);
+		localeSettings.addChangeListener(this.#handleDocumentLanguageChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener('d2l-flags-known', this.#handleFlagsKnownBound);
-		localeSettings.removeChangeListener(this.#handleDocumentLanguageChangeBound);
+		document.removeEventListener('d2l-flags-known', this.#handleFlagsKnown);
+		localeSettings.removeChangeListener(this.#handleDocumentLanguageChange);
 	}
 
 	render() {
@@ -133,8 +131,20 @@ class DemoPageSettings extends LitElement {
 		`;
 	}
 
-	#handleDocumentLanguageChangeBound;
-	#handleFlagsKnownBound;
+	#handleDocumentLanguageChange = () => {
+		this._language = localeSettings.language;
+		const url = new URL(window.location.href);
+		if (this._language === 'en-us') {
+			url.searchParams.delete('lang');
+		} else {
+			url.searchParams.set('lang', this._language);
+		}
+		window.history.replaceState({}, '', url.toString());
+	};
+
+	#handleFlagsKnown = () => {
+		this.requestUpdate();
+	};
 
 	#getKnownFlagsSorted() {
 		return new Map([...getKnownFlags().entries()].sort((entry1, entry2) => {
@@ -181,21 +191,6 @@ class DemoPageSettings extends LitElement {
 		window.history.replaceState({}, '', url.toString());
 	}
 
-	#handleDocumentLanguageChange() {
-		this._language = localeSettings.language;
-		const url = new URL(window.location.href);
-		if (this._language === 'en-us') {
-			url.searchParams.delete('lang');
-		} else {
-			url.searchParams.set('lang', this._language);
-		}
-		window.history.replaceState({}, '', url.toString());
-	}
-
-	#handleFlagsKnown() {
-		this.requestUpdate();
-	}
-
 	#handleLanguageChange(e) {
 		const newLanguageCode = e.target[e.target.selectedIndex].value;
 		document.documentElement.dir = newLanguageCode === 'ar-sa' ? 'rtl' : 'ltr';

package/components/page/page.js

@@ -162,7 +162,6 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 			'supporting-mobile': { minSize: DRAWER_MIN_HEIGHT }
 		});
 		this._slotVisibility = {};
-		this.#handleWindowResizeBound = this.#handleWindowResize.bind(this);
 		this.#resizeObserver = new ResizeObserver(entries => {
 			for (const entry of entries) {
 				if (entry.target.classList.contains('header')) {
@@ -194,13 +193,13 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('resize', this.#handleWindowResizeBound);
+		window.addEventListener('resize', this.#handleWindowResize);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver.disconnect();
-		window.removeEventListener('resize', this.#handleWindowResizeBound);
+		window.removeEventListener('resize', this.#handleWindowResize);
 	}
 
 	firstUpdated() {
@@ -238,9 +237,12 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 	}
 
-	#handleWindowResizeBound;
 	#resizeObserver;
 
+	#handleWindowResize = () => {
+		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
+	};
+
 	#getMaxDrawerHeight() {
 		const reservedSpace = this._headerHeight + this._footerHeight + DIVIDER_WIDTH;
 		return Math.max(DRAWER_MIN_HEIGHT, window.innerHeight - reservedSpace);
@@ -266,10 +268,6 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
 	}
 
-	#handleWindowResize() {
-		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());
-	};
-
 	#initializePanelSizes() {
 		const defaultWidth = Math.floor(this._contentWidth / 3);
 		const defaultHeight = Math.floor(window.innerHeight / 2);

package/components/tooltip/tooltip.js

@@ -175,16 +175,6 @@ class Tooltip extends PopoverMixin(LitElement) {
 		this.offset = 10;
 		this.showTruncatedOnly = false;
 		this.state = 'info';
-
-		this.#handleTargetBlurBound = this.#handleTargetBlur.bind(this);
-		this.#handleTargetClickBound = this.#handleTargetClick.bind(this);
-		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);
 	}
 
 	/** @ignore */
@@ -204,7 +194,7 @@ class Tooltip extends PopoverMixin(LitElement) {
 		super.connectedCallback();
 		this.showing = false;
 		this.#addListeners();
-		window.addEventListener('resize', this.#handleTargetResizeBound);
+		window.addEventListener('resize', this.#handleTargetResize);
 
 		requestAnimationFrame(() => this.#updateTarget());
 	}
@@ -214,7 +204,7 @@ class Tooltip extends PopoverMixin(LitElement) {
 		if (activeTooltip === this) activeTooltip = null;
 
 		this.#removeListeners();
-		window.removeEventListener('resize', this.#handleTargetResizeBound);
+		window.removeEventListener('resize', this.#handleTargetResize);
 
 		delayTimeoutId = null;
 
@@ -273,15 +263,6 @@ class Tooltip extends PopoverMixin(LitElement) {
 		return super.position();
 	}
 
-	#handleTargetBlurBound;
-	#handleTargetClickBound;
-	#handleTargetFocusBound;
-	#handleTargetMouseEnterBound;
-	#handleTargetMouseLeaveBound;
-	#handleTargetMutationBound;
-	#handleTargetResizeBound;
-	#handleTargetTouchEndBound;
-	#handleTargetTouchStartBound;
 	#hoverTimeout;
 	#isFocusing = false;
 	#isHovering = false;
@@ -296,6 +277,77 @@ class Tooltip extends PopoverMixin(LitElement) {
 	#targetSizeObserver;
 	#targetMutationObserver;
 
+	#handleTargetBlur = () => {
+		this.#isFocusing = false;
+		this.#updateShowing();
+	};
+
+	#handleTargetClick = () => {
+		if (this.closeOnClick) this.hide();
+	};
+
+	#handleTargetFocus = async() => {
+		if (this.showTruncatedOnly) {
+			await this.#updateTruncating();
+			if (!this.#isTruncating) return;
+		}
+
+		if (this.disableFocusLock) {
+			this.showing = true;
+		} else {
+			this.#isFocusing = true;
+			this.#updateShowing();
+		}
+	};
+
+	#handleTargetMouseEnter = () => {
+		// came from tooltip so keep showing
+		if (this.#mouseLeftTooltip) {
+			this.#isHovering = true;
+			return;
+		}
+
+		this.#hoverTimeout = setTimeout(async() => {
+			if (this.showTruncatedOnly) {
+				await this.#updateTruncating();
+				if (!this.#isTruncating) return;
+			}
+
+			this.#isHovering = true;
+			this.#updateShowing();
+		}, getDelay(this.delay));
+	};
+
+	#handleTargetMouseLeave = () => {
+		clearTimeout(this.#hoverTimeout);
+		this.#isHovering = false;
+		if (this.showing) resetDelayTimeout();
+		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;
+		super.position();
+	};
+
+	#handleTargetTouchEnd = () => {
+		clearTimeout(this.#longPressTimeout);
+	};
+
+	#handleTargetTouchStart = () => {
+		this.#longPressTimeout = setTimeout(() => {
+			this.#target.focus();
+		}, 500);
+	};
+
 	// for testing only!
 	_getTarget() {
 		return this.#target;
@@ -324,19 +376,19 @@ class Tooltip extends PopoverMixin(LitElement) {
 
 		if (!this.#target) return;
 
-		this.#target.addEventListener('mouseenter', this.#handleTargetMouseEnterBound);
-		this.#target.addEventListener('mouseleave', this.#handleTargetMouseLeaveBound);
-		this.#target.addEventListener('focus', this.#handleTargetFocusBound);
-		this.#target.addEventListener('blur', this.#handleTargetBlurBound);
-		this.#target.addEventListener('click', this.#handleTargetClickBound);
-		this.#target.addEventListener('touchstart', this.#handleTargetTouchStartBound, { passive: true });
-		this.#target.addEventListener('touchcancel', this.#handleTargetTouchEndBound);
-		this.#target.addEventListener('touchend', this.#handleTargetTouchEndBound);
+		this.#target.addEventListener('mouseenter', this.#handleTargetMouseEnter);
+		this.#target.addEventListener('mouseleave', this.#handleTargetMouseLeave);
+		this.#target.addEventListener('focus', this.#handleTargetFocus);
+		this.#target.addEventListener('blur', this.#handleTargetBlur);
+		this.#target.addEventListener('click', this.#handleTargetClick);
+		this.#target.addEventListener('touchstart', this.#handleTargetTouchStart, { passive: true });
+		this.#target.addEventListener('touchcancel', this.#handleTargetTouchEnd);
+		this.#target.addEventListener('touchend', this.#handleTargetTouchEnd);
 
-		this.#targetSizeObserver = new ResizeObserver(this.#handleTargetResizeBound);
+		this.#targetSizeObserver = new ResizeObserver(this.#handleTargetResize);
 		this.#targetSizeObserver.observe(this.#target);
 
-		this.#targetMutationObserver = new MutationObserver(this.#handleTargetMutationBound);
+		this.#targetMutationObserver = new MutationObserver(this.#handleTargetMutation);
 		this.#targetMutationObserver.observe(this.#target, { attributes: true, attributeFilter: ['id'] });
 		this.#targetMutationObserver.observe(this.#target.parentNode, { childList: true });
 	}
@@ -361,77 +413,6 @@ class Tooltip extends PopoverMixin(LitElement) {
 		return target;
 	}
 
-	#handleTargetBlur() {
-		this.#isFocusing = false;
-		this.#updateShowing();
-	}
-
-	#handleTargetClick() {
-		if (this.closeOnClick) this.hide();
-	}
-
-	async #handleTargetFocus() {
-		if (this.showTruncatedOnly) {
-			await this.#updateTruncating();
-			if (!this.#isTruncating) return;
-		}
-
-		if (this.disableFocusLock) {
-			this.showing = true;
-		} else {
-			this.#isFocusing = true;
-			this.#updateShowing();
-		}
-	}
-
-	#handleTargetMouseEnter() {
-		// came from tooltip so keep showing
-		if (this.#mouseLeftTooltip) {
-			this.#isHovering = true;
-			return;
-		}
-
-		this.#hoverTimeout = setTimeout(async() => {
-			if (this.showTruncatedOnly) {
-				await this.#updateTruncating();
-				if (!this.#isTruncating) return;
-			}
-
-			this.#isHovering = true;
-			this.#updateShowing();
-		}, getDelay(this.delay));
-	}
-
-	#handleTargetMouseLeave() {
-		clearTimeout(this.#hoverTimeout);
-		this.#isHovering = false;
-		if (this.showing) resetDelayTimeout();
-		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;
-		super.position();
-	}
-
-	#handleTargetTouchEnd() {
-		clearTimeout(this.#longPressTimeout);
-	}
-
-	#handleTargetTouchStart() {
-		this.#longPressTimeout = setTimeout(() => {
-			this.#target.focus();
-		}, 500);
-	}
-
 	#handleTooltipMouseEnter() {
 		if (!this.showing) return;
 		this.#isHoveringTooltip = true;
@@ -456,14 +437,14 @@ class Tooltip extends PopoverMixin(LitElement) {
 
 		if (!this.#target) return;
 
-		this.#target.removeEventListener('mouseenter', this.#handleTargetMouseEnterBound);
-		this.#target.removeEventListener('mouseleave', this.#handleTargetMouseLeaveBound);
-		this.#target.removeEventListener('focus', this.#handleTargetFocusBound);
-		this.#target.removeEventListener('blur', this.#handleTargetBlurBound);
-		this.#target.removeEventListener('click', this.#handleTargetClickBound);
-		this.#target.removeEventListener('touchstart', this.#handleTargetTouchStartBound);
-		this.#target.removeEventListener('touchcancel', this.#handleTargetTouchEndBound);
-		this.#target.removeEventListener('touchend', this.#handleTargetTouchEndBound);
+		this.#target.removeEventListener('mouseenter', this.#handleTargetMouseEnter);
+		this.#target.removeEventListener('mouseleave', this.#handleTargetMouseLeave);
+		this.#target.removeEventListener('focus', this.#handleTargetFocus);
+		this.#target.removeEventListener('blur', this.#handleTargetBlur);
+		this.#target.removeEventListener('click', this.#handleTargetClick);
+		this.#target.removeEventListener('touchstart', this.#handleTargetTouchStart);
+		this.#target.removeEventListener('touchcancel', this.#handleTargetTouchEnd);
+		this.#target.removeEventListener('touchend', this.#handleTargetTouchEnd);
 
 		if (this.#targetSizeObserver) {
 			this.#targetSizeObserver.disconnect();
@@ -550,7 +531,7 @@ class Tooltip extends PopoverMixin(LitElement) {
 				if (!super._opened) super.open(this.#target, false);
 				else super.position();
 			} else if (!targetDisabled && isComposedAncestor(this.#target, getComposedActiveElement())) {
-				this.#handleTargetFocusBound();
+				this.#handleTargetFocus();
 			}
 		}
 		this.#addListeners();

package/package.json

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