@brightspace-ui/core 3.269.3 → 3.269.5

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/custom-elements.json

@@ -6489,7 +6489,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",

package/mixins/rtl/rtl-mixin.js

@@ -14,26 +14,25 @@ export const RtlMixin = dedupeMixin(superclass => class extends superclass {
 	constructor() {
 		super();
 		this._localeSettings = getDocumentLocaleSettings();
-		this._handleLanguageChange = this._handleLanguageChange.bind(this);
-		this._handleLanguageChange();
+		this.#handleLanguageChange();
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._localeSettings.addChangeListener(this._handleLanguageChange);
+		this._localeSettings.addChangeListener(this.#handleLanguageChange);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._localeSettings.removeChangeListener(this._handleLanguageChange);
+		this._localeSettings.removeChangeListener(this.#handleLanguageChange);
 	}
 
-	_handleLanguageChange() {
+	#handleLanguageChange = () => {
 		const dir = document.documentElement.getAttribute('dir');
 		// avoid reflecting "ltr" for better performance
 		if (dir && (dir !== 'ltr' || this.dir === 'rtl')) {
 			this.dir = dir;
 		}
-	}
+	};
 
 });

package/package.json

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