@brightspace-ui/core 3.9.2 → 3.10.0

package/components/dropdown/dropdown-content-mixin.js

@@ -164,6 +164,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				reflect: true,
 				attribute: 'no-pointer'
 			},
+			/**
+			 * Private, set by the opener depending on whether it's intersecting
+			 * @ignore
+			 */
+			offscreen: {
+				type: Boolean,
+				reflect: true
+			},
 			/**
 			 * Whether the dropdown is open or not
 			 * @type {boolean}

package/components/dropdown/dropdown-content-styles.js

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
 import { css } from 'lit';
 
 const pointerLength = 16;
@@ -349,4 +350,7 @@ export const dropdownContentStyles = css`
 		}
 	}
 
+	:host([offscreen]) {
+		${_offscreenStyleDeclarations}
+	}
 `;

package/components/dropdown/dropdown-opener-mixin.js

@@ -1,6 +1,12 @@
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
+const intersectionObserver = new IntersectionObserver(entries => {
+	entries.forEach(entry => {
+		entry.target.__updateContentVisibility(entry.isIntersecting);
+	});
+}, { threshold: 0 }); // 0-1 (0 -> intersection requires any pixel visible, 1 -> intersection requires all pixels visible)
+
 export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -91,6 +97,9 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
 
+		if (this._fixedPositioning && this.dropdownOpened) {
+			intersectionObserver.observe(this);
+		}
 		if (this.openOnHover) {
 			document.body.addEventListener('mouseup', this._onOutsideClick);
 		}
@@ -104,6 +113,9 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.removeEventListener('mouseenter', this.__onMouseEnter);
 		this.removeEventListener('mouseleave', this.__onMouseLeave);
 
+		if (this._fixedPositioning) {
+			intersectionObserver.unobserve(this);
+		}
 		if (this.openOnHover) {
 			document.body.removeEventListener('mouseup', this._onOutsideClick);
 		}
@@ -207,6 +219,10 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onClosed() {
+		if (this._fixedPositioning) {
+			intersectionObserver.unobserve(this);
+		}
+
 		const opener = this.getOpenerElement();
 		if (!opener) {
 			return;
@@ -280,6 +296,10 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		opener.setAttribute('aria-expanded', 'true');
 		opener.setAttribute('active', 'true');
 		this._isFading = false;
+
+		if (this._fixedPositioning) {
+			intersectionObserver.observe(this);
+		}
 	}
 
 	__onOpenerMouseUp(e) {
@@ -301,6 +321,10 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		} else this.toggleOpen(true);
 	}
 
+	__updateContentVisibility(visible) {
+		this.__getContentElement().offscreen = !visible;
+	}
+
 	/* used by open-on-hover option */
 	_closeTimerStart() {
 		if (this.dropdownOpened) return;

package/components/offscreen/offscreen.js

@@ -1,7 +1,10 @@
 import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
-const offscreenStyleDeclarations = css`
+/**
+ * A private helper declarations that should not be used by general consumers
+ */
+export const _offscreenStyleDeclarations = css`
 		direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`}); /* stylelint-disable-line @stylistic/string-quotes */
 		height: 1px;
 		inset-inline-start: -10000px;
@@ -14,7 +17,7 @@ const offscreenStyleDeclarations = css`
 
 export const offscreenStyles = css`
 	.d2l-offscreen {
-		${offscreenStyleDeclarations}
+		${_offscreenStyleDeclarations}
 	}
 `;
 
@@ -26,7 +29,7 @@ class Offscreen extends RtlMixin(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				${offscreenStyleDeclarations}
+				${_offscreenStyleDeclarations}
 			}
 		`;
 	}

package/package.json

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