@brightspace-ui/core 1.231.0 → 1.231.1

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

@@ -273,6 +273,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
 		this.__toggleScrollStyles = this.__toggleScrollStyles.bind(this);
 		this._handleMobileResize = this._handleMobileResize.bind(this);
+		this.__disconnectResizeObserver = this.__disconnectResizeObserver.bind(this);
 	}
 
 	get opened() {
@@ -312,6 +313,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 		clearDismissible(this.__dismissibleId);
 		this.__dismissibleId = null;
+
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
@@ -374,6 +377,17 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 	}
 
+	/**
+	 * Waits for the next resize when elem has a height > 0px,
+	 * then calls the __position function.
+	*/
+	requestRepositionNextResize(elem) {
+		if (!elem) return;
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
+		this.__resizeObserver = new ResizeObserver(this.__disconnectResizeObserver);
+		this.__resizeObserver.observe(elem);
+	}
+
 	async resize() {
 		if (!this.opened) {
 			return;
@@ -403,6 +417,20 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 	}
 
+	__disconnectResizeObserver(entries) {
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			if (this.__resizeObserver && entry.contentRect.height !== 0) {
+				this.__resizeObserver.disconnect();
+				// wrap in rAF for Firefox
+				requestAnimationFrame(() => {
+					if (this.opened) this.__position();
+				});
+				break;
+			}
+		}
+	}
+
 	__getContentBottom() {
 		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
 	}

package/components/filter/demo/filter.html

@@ -90,7 +90,20 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="course" text="Course" loading select-all>
+						<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
+					
 				</d2l-filter>
 				<d2l-filter>
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>

package/components/filter/filter.js

@@ -256,7 +256,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		let dimensionHTML;
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
-				dimensionHTML = html`<div aria-live="polite">${this._createSetDimension(dimension)}</div>`;
+				dimensionHTML = html`
+				<div aria-live="polite" class="d2l-filter-container">
+					${this._createSetDimension(dimension)}
+				</div>`;
 				break;
 		}
 
@@ -519,7 +522,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		let shouldUpdate = false,
 			shouldSearch = false,
-			shouldRecount = false;
+			shouldRecount = false,
+			shouldResizeDropdown = false;
 		changes.forEach((newValue, prop) => {
 			if (toUpdate[prop] === newValue) return;
 
@@ -538,13 +542,23 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				shouldResizeDropdown = true;
 				this._activeFiltersSubscribers.updateSubscribers();
+			} else if (prop === 'loading') {
+				shouldResizeDropdown = true;
 			}
 		});
 
 		if (shouldSearch) this._performDimensionSearch(dimension);
 		if (shouldRecount) this._setFilterCounts(dimension);
-		if (shouldUpdate) this.requestUpdate();
+		if (shouldUpdate)  this.requestUpdate();
+		if (shouldResizeDropdown) {
+			const singleDimension = this._dimensions.length === 1;
+			if (singleDimension && this.opened) {
+				const dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
+				dropdown.requestRepositionNextResize(this.shadowRoot.querySelector('.d2l-filter-container'));
+			}
+		}
 	}
 
 	_handleDimensionHide() {

package/package.json

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