@brightspace-ui/core 1.177.1 → 1.178.0

package/components/filter/README.md

@@ -26,7 +26,7 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener for the filter |
 
 **Events:**
-* `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple changes)
+* `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple dimensions and multiple changes in each)
 * `d2l-filter-dimension-first-open`: dispatched when a dimension is opened for the first time (if there is only one dimension, this will be dispatched when the dropdown is first opened)
 * `d2l-filter-dimension-search`: dispatched when a dimension that supports searching and has the "manual" search-type is searched
 

package/components/filter/demo/filter-search-demo.js

@@ -50,16 +50,19 @@ class FilterSearchDemo extends LitElement {
 	}
 
 	_handleFilterChange(e) {
-		(e.detail.changes.length === 1) ?
-			console.log(`Filter selection changed for dimension "${e.detail.changes[0].dimension}":`, e.detail.changes[0].value) : // eslint-disable-line no-console
-			console.log('Batch filter selection changed:', e.detail.changes); // eslint-disable-line no-console
+		(e.detail.dimensions.length === 1) ?
+			console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
+			console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
 
-		e.detail.changes.forEach(change => {
-			if (change.dimension === 'event') {
-				this._fullData.find(value => value.key === change.value.key).selected = change.value.selected;
-			} else if (change.dimension === 'event-single') {
-				this._fullDataSingle.find(value => value.key === change.value.key).selected = change.value.selected;
-			}
+		e.detail.dimensions.forEach(dimension => {
+			if (!dimension.dimensionKey.includes('event')) return;
+			dimension.changes.forEach(change => {
+				if (dimension.dimensionKey === 'event') {
+					this._fullData.find(value => value.key === change.valueKey).selected = change.selected;
+				} else if (change.dimension === 'event-single') {
+					this._fullDataSingle.find(value => value.key === change.valueKey).selected = change.selected;
+				}
+			});
 		});
 	}
 

package/components/filter/demo/filter.html

@@ -112,9 +112,9 @@
 
 	<script type="module">
 		document.addEventListener('d2l-filter-change', e => {
-			(e.detail.changes.length === 1) ?
-				console.log(`Filter selection changed for dimension "${e.detail.changes[0].dimension}":`, e.detail.changes[0].value) : // eslint-disable-line no-console
-				console.log('Batch filter selection changed:', e.detail.changes); // eslint-disable-line no-console
+			(e.detail.dimensions.length === 1) ?
+				console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
+				console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
 		});
 
 		document.addEventListener('d2l-filter-dimension-first-open', e => {

package/components/filter/filter.js

@@ -333,22 +333,31 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 	}
 
-	_dispatchChangeEvent(eventKey, eventDetail) {
-		this._changeEventsToDispatch.set(eventKey, eventDetail);
+	_dispatchChangeEvent(dimension, change) {
+		this._setDimensionChangeEvent(dimension, change);
 
 		if (!this._changeEventTimeout) {
 			this._changeEventTimeout = setTimeout(() => {
-				this.dispatchEvent(new CustomEvent('d2l-filter-change', {
-					bubbles: true,
-					composed: false,
-					detail: { changes: Array.from(this._changeEventsToDispatch.values()) }
-				}));
-				this._changeEventsToDispatch = new Map();
-				this._changeEventTimeout = null;
+				this._dispatchChangeEventNow();
 			}, 200);
 		}
 	}
 
+	_dispatchChangeEventNow() {
+		const dimensions = Array.from(this._changeEventsToDispatch.values());
+		dimensions.forEach(dimension => {
+			dimension.changes = Array.from(dimension.changes.values());
+		});
+
+		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
+			bubbles: true,
+			composed: false,
+			detail: { dimensions: dimensions }
+		}));
+		this._changeEventsToDispatch = new Map();
+		this._changeEventTimeout = null;
+	}
+
 	_dispatchDimensionFirstOpenEvent(key) {
 		if (!this._openedDimensions.includes(key)) {
 			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: key } }));
@@ -385,7 +394,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			this._totalAppliedCount--;
 		}
 
-		this._dispatchChangeEvent(`${dimensionKey}-${valueKey}`, { dimension: dimensionKey, value: { key: valueKey, selected: selected } });
+		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
 	}
 
 	_handleDimensionDataChange(e) {
@@ -538,6 +547,19 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this.requestUpdate();
 	}
 
+	_setDimensionChangeEvent(dimension, change) {
+		if (!this._changeEventsToDispatch.has(dimension.key)) {
+			this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, changes: new Map() });
+		}
+		const dimensionChanges = this._changeEventsToDispatch.get(dimension.key);
+
+		switch (dimension.type) {
+			case 'd2l-filter-dimension-set':
+				dimensionChanges.changes.set(change.valueKey, change);
+				break;
+		}
+	}
+
 	_setFilterCounts(dimensionToRecount) {
 		this._totalAppliedCount = 0;
 

package/package.json

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