@brightspace-ui/core 3.9.1 → 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}
@@ -285,6 +293,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._verticalOffset = defaultVerticalOffset;
 
 		this.__reposition = this.__reposition.bind(this);
+		this.__onAncestorMutation = this.__onAncestorMutation.bind(this);
 		this.__onResize = this.__onResize.bind(this);
 		this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
 		this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
@@ -458,10 +467,16 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			return (value === 'scroll' || value === 'auto');
 		};
 
-		let node = this;
 		this.__removeRepositionHandlers();
+
+		this._ancestorMutationObserver ??= new MutationObserver(this.__onAncestorMutation);
+		const mutationConfig = { attributes: true, childList: true, subtree: true };
+
+		let node = this;
 		this._scrollablesObserved = [];
 		while (node) {
+
+			// observe scrollables
 			let observeScrollable = false;
 			if (node.nodeType === Node.ELEMENT_NODE) {
 				observeScrollable = isScrollable(node, 'overflow-y') || isScrollable(node, 'overflow-x');
@@ -472,6 +487,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				this._scrollablesObserved.push(node);
 				node.addEventListener('scroll', this.__reposition);
 			}
+
+			// observe mutations on each DOM scope (excludes sibling scopes... can only do so much)
+			if (node.nodeType === Node.DOCUMENT_NODE || (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && node.host)) {
+				this._ancestorMutationObserver.observe(node, mutationConfig);
+			}
+
 			node = getComposedParent(node);
 		}
 
@@ -528,6 +549,13 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeader = e.target.assignedNodes().length !== 0;
 	}
 
+	__onAncestorMutation(mutations) {
+		const opener = this.__getOpener();
+		// ignore mutations that are within this dropdown
+		const reposition = !!mutations.find(mutation => !isComposedAncestor(opener, mutation.target));
+		if (reposition) this.__reposition();
+	}
+
 	__onAutoCloseClick(e) {
 		if (!this.opened || this.noAutoClose) {
 			return;
@@ -791,12 +819,13 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 	__removeRepositionHandlers() {
 		if (!this._fixedPositioning) return;
-		if (!this._scrollablesObserved) return;
 
-		this._scrollablesObserved.forEach(node => {
+		this._scrollablesObserved?.forEach(node => {
 			node.removeEventListener('scroll', this.__reposition);
 		});
 		this._scrollablesObserved = null;
+
+		this._ancestorMutationObserver?.disconnect();
 	}
 
 	__reposition() {

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);
 		}
@@ -137,7 +149,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	willUpdate(changedProperties) {
-		if (changedProperties.has('preferFixedPositioning')) {
+		if (this._fixedPositioning === undefined || changedProperties.has('preferFixedPositioning')) {
 			this._fixedPositioning = (window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) && this.preferFixedPositioning);
 		}
 	}
@@ -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.1",
+  "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",