@brightspace-ui/core 2.124.0 → 2.126.0

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

@@ -13,8 +13,9 @@ class FilterSearchDemo extends LitElement {
 
 	constructor() {
 		super();
-		this._fullData = Array.from(initialData);
-		this._fullDataSingle = Array.from(initialData);
+		this._fullData = JSON.parse(JSON.stringify(initialData));
+		this._fullDataSingle = JSON.parse(JSON.stringify(initialData));
+		this._fullDataInitialSubset = JSON.parse(JSON.stringify(initialData));
 	}
 
 	render() {
@@ -40,6 +41,11 @@ class FilterSearchDemo extends LitElement {
 						<d2l-filter-dimension-set-value key="${value.key}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
 					`)}
 				</d2l-filter-dimension-set>
+				<d2l-filter-dimension-set key="event-initial-subset" text="Event on Search - Initial Subset" search-type="manual" header-text="Related Roles at D2L" selected-first>
+					${this._fullDataInitialSubset.map(value => html`
+						<d2l-filter-dimension-set-value key="${value.key}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
+					`)}
+				</d2l-filter-dimension-set>
 				<d2l-filter-dimension-set key="auto" text="Automatic Search" search-type="automatic">
 					<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
 					<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
@@ -60,7 +66,12 @@ class FilterSearchDemo extends LitElement {
 		e.detail.dimensions.forEach(dimension => {
 			if (!dimension.dimensionKey.includes('event')) return;
 
-			const dataToUpdate = dimension.dimensionKey === 'event-single' ? this._fullDataSingle : this._fullData;
+			const dataToUpdateMap = {
+				'event': this._fullData,
+				'event-single': this._fullDataSingle,
+				'event-initial-subset': this._fullDataInitialSubset,
+			};
+			const dataToUpdate = dataToUpdateMap[dimension.dimensionKey];
 			if (dimension.cleared) {
 				dataToUpdate.forEach(value => value.selected = false);
 			} else {
@@ -71,6 +82,7 @@ class FilterSearchDemo extends LitElement {
 		if (e.detail.allCleared) {
 			console.log('(All dimensions cleared)'); // eslint-disable-line no-console
 		}
+		this.requestUpdate();
 	}
 
 	_handleFirstOpen(e) {
@@ -81,20 +93,43 @@ class FilterSearchDemo extends LitElement {
 	_handleSearch(e) {
 		if (!e.detail.key.includes('event')) return;
 
-		const keysToDisplay = [];
-		this._fullData.forEach(value => {
-			if (value.text.toLowerCase().indexOf(e.detail.value.toLowerCase()) > -1) {
-				keysToDisplay.push(value.key);
-			}
-		});
+		let keysToDisplay = [];
+		if (e.detail.key === 'event-initial-subset') keysToDisplay = this._performInitialSubsetSearch(e.detail.value);
+		else {
+			this._fullData.forEach(value => {
+				if (value.text.toLowerCase().indexOf(e.detail.value.toLowerCase()) > -1) {
+					keysToDisplay.push(value.key);
+				}
+			});
+		}
 
 		setTimeout(() => {
-			e.detail.searchCompleteCallback(keysToDisplay);
+			e.detail.searchCompleteCallback({ keysToDisplay: keysToDisplay });
 			// eslint-disable-next-line no-console
 			console.log(`Filter dimension "${e.detail.key}" searched: ${e.detail.value}`);
 		}, 2000);
 
 	}
 
+	_performInitialSubsetSearch(searchValue) {
+		const initialSubset = ['admin', 'instructor'];
+		let keysToDisplay = [];
+		if (searchValue === '') {
+			keysToDisplay = initialSubset;
+			this._fullDataInitialSubset.forEach(value => {
+				if (value.selected) {
+					if (!keysToDisplay.includes(value.key)) keysToDisplay.push(value.key);
+				}
+			});
+		} else {
+			this._fullDataInitialSubset.forEach(value => {
+				if (value.text.toLowerCase().indexOf(searchValue.toLowerCase()) > -1) {
+					keysToDisplay.push(value.key);
+				}
+			});
+		}
+		return keysToDisplay;
+	}
+
 }
 customElements.define('d2l-filter-search-demo', FilterSearchDemo);

package/components/filter/filter.js

@@ -590,10 +590,13 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
-	_dispatchDimensionFirstOpenEvent(key) {
-		if (!this._openedDimensions.includes(key)) {
-			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: key } }));
-			this._openedDimensions.push(key);
+	_dispatchDimensionFirstOpenEvent(dimension) {
+		if (!this._openedDimensions.includes(dimension.key)) {
+			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: dimension.key } }));
+			if (dimension.searchType === 'manual') {
+				this._search(dimension);
+			}
+			this._openedDimensions.push(dimension.key);
 		}
 	}
 
@@ -636,7 +639,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._dimensions.forEach(dimension => {
 			if (dimension.searchType !== 'none' && dimension.searchValue !== '') {
 				dimension.searchValue = '';
-				this._performDimensionSearch(dimension);
+				this._search(dimension);
 			}
 			this._performDimensionClear(dimension);
 		});
@@ -675,7 +678,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				}
 				this._activeFiltersSubscribers.updateSubscribers();
 			} else if (prop === 'values') {
-				if (dimension.searchValue) shouldSearch = true;
+				if (dimension.searchValue || dimension.searchType === 'manual') shouldSearch = true;
 				shouldRecount = true;
 				shouldResizeDropdown = true;
 				this._activeFiltersSubscribers.updateSubscribers();
@@ -718,7 +721,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const dimension = this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
 		if (dimension.introductoryText) announce(dimension.introductoryText);
 		if (dimension.selectedFirst) this._updateDimensionShouldBubble(dimension);
-		this._dispatchDimensionFirstOpenEvent(this._activeDimensionKey);
+		this._dispatchDimensionFirstOpenEvent(dimension);
 	}
 
 	_handleDropdownClose(e) {
@@ -730,8 +733,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	_handleDropdownOpen(e) {
 		this.opened = true;
 		if (this._dimensions.length === 1) {
-			this._dispatchDimensionFirstOpenEvent(this._dimensions[0].key);
-			if (this._dimensions[0].introductoryText) announce(this._dimensions[0].introductoryText);
+			const dimension = this._dimensions[0];
+			this._dispatchDimensionFirstOpenEvent(dimension);
+			if (dimension.introductoryText) announce(dimension.introductoryText);
 		}
 		this._stopPropagation(e);
 	}
@@ -752,30 +756,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		if (dimension.selectedFirst) {
 			this._updateDimensionShouldBubble(dimension);
 		}
-
-		if (dimension.searchType === 'automatic' || searchValue === '') {
-			this._performDimensionSearch(dimension);
-		} else if (dimension.searchType === 'manual') {
-			dimension.loading = true;
-			this.requestUpdate();
-
-			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-search', {
-				bubbles: false,
-				composed: false,
-				detail: {
-					key: dimension.key,
-					value: searchValue,
-					searchCompleteCallback: function(keysToDisplay) {
-						requestAnimationFrame(() => {
-							dimension.searchKeysToDisplay = keysToDisplay;
-							this._performDimensionSearch(dimension);
-							dimension.loading = false;
-							this.requestUpdate();
-						});
-					}.bind(this)
-				}
-			}));
-		}
+		this._search(dimension);
 	}
 
 	_handleSlotChange(e) {
@@ -861,7 +842,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
 				dimension.values.forEach(value => {
-					if (dimension.searchValue === '') {
+					if (
+						(dimension.searchType === 'automatic' && dimension.searchValue === '')
+						|| dimension.displayAllKeys
+					) {
 						value.hidden = false;
 						return;
 					}
@@ -885,6 +869,33 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		}
 	}
 
+	_search(dimension) {
+		if (dimension.searchType === 'automatic') {
+			this._performDimensionSearch(dimension);
+		} else if (dimension.searchType === 'manual') {
+			dimension.loading = true;
+			this.requestUpdate();
+
+			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-search', {
+				bubbles: false,
+				composed: false,
+				detail: {
+					key: dimension.key,
+					value: dimension.searchValue,
+					searchCompleteCallback: function({ keysToDisplay = [], displayAllKeys = false } = {}) {
+						requestAnimationFrame(() => {
+							dimension.displayAllKeys = displayAllKeys;
+							dimension.searchKeysToDisplay = keysToDisplay;
+							this._performDimensionSearch(dimension);
+							dimension.loading = false;
+							this.requestUpdate();
+						});
+					}.bind(this)
+				}
+			}));
+		}
+	}
+
 	_setDimensionChangeEvent(dimension, change, dimensionCleared) {
 		if (!this._changeEventsToDispatch.has(dimension.key)) {
 			this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, cleared: false, changes: new Map() });

package/package.json

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