@brightspace-ui/core 3.177.1 → 3.178.0

package/components/filter/demo/filter-load-more-demo.js

@@ -1,6 +1,7 @@
 import '../filter.js';
 import '../filter-dimension-set.js';
 import '../filter-dimension-set-value.js';
+import '../filter-overflow-group.js';
 import { html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -32,11 +33,48 @@ const FullData = [
 			{ key: 'student', selected:false, text: 'Student' }
 		],
 		initialCount: 2
+	},
+	{
+		key: 'dep',
+		text: 'Department',
+		values: [
+			{ key: 'english', selected:false, text: 'English' },
+			{ key: 'spanish', selected:false, text: 'Spanish' },
+			{ key: 'science', selected:false, text: 'Science' }
+		],
+		initialCount: 2
+	},
+	{
+		key: 'grad',
+		text: 'Grade Level',
+		values: [
+			{ key: '1', selected:false, text: '1st Grade' },
+			{ key: '2', selected:false, text: '2nd Grade' },
+			{ key: '3', selected:false, text: '3rd Grade' }
+		],
+		initialCount: 2
+	}
+	,
+	{
+		key: 'city',
+		text: 'City',
+		values: [
+			{ key: '1', selected:false, text: '1st City' },
+			{ key: '2', selected:false, text: '2nd City' },
+			{ key: '3', selected:false, text: '3rd City' }
+		],
+		initialCount: 2
 	}
 ];
 
 class FilterLoadMoreDemo extends LitElement {
 
+	static get properties() {
+		return {
+			useOverflowGroup: { type: Boolean, attribute: 'use-overflow-group' }
+		};
+	}
+
 	constructor() {
 		super();
 		const dimensions = [];
@@ -60,8 +98,16 @@ class FilterLoadMoreDemo extends LitElement {
 	}
 
 	render() {
+		if (this.useOverflowGroup) return html`<d2l-filter-overflow-group min-to-show="0">
+			${repeat(this._dimensions, dimension => dimension.key, dimension => html`<d2l-filter
+				@d2l-filter-change="${this._handleFilterChange}"
+				@d2l-filter-dimension-load-more=${this._handleLoadMore}
+				@d2l-filter-dimension-search=${this._handleSearch}>
+				${this._renderDimensionSet(dimension)}
+			</d2l-filter>`)}
+		</d2l-filter-overflow-group>`;
 		return html`
-			<d2l-filter 
+			<d2l-filter
 				@d2l-filter-change="${this._handleFilterChange}"
 				@d2l-filter-dimension-load-more=${this._handleLoadMore}
 				@d2l-filter-dimension-search=${this._handleSearch}>

package/components/filter/demo/filter-overflow-group.html

@@ -10,6 +10,7 @@
 		import '../../filter/filter-dimension-set-value.js';
 		import '../../filter/filter-overflow-group.js';
 		import '../../filter/filter-tags.js';
+		import './filter-load-more-demo.js';
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
@@ -233,6 +234,13 @@
 				<d2l-filter-tags filter-ids="filter1 filter2 filter3 filter4 filter5 filter6" label="Applied Filters:"></d2l-filter-tags>
 			</template>
 		</d2l-demo-snippet>
+
+		<h2>Filter Overflow Group with Load More and Search</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-load-more-demo use-overflow-group></d2l-filter-load-more-demo>
+			</template>
+		</d2l-demo-snippet>
 	</d2l-demo-page>
 </body>
 </html>

package/components/filter/filter-overflow-group.js

@@ -4,11 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
-function createFilterItem(node) {
-	const dimensionSets = node.querySelectorAll('d2l-filter-dimension-set');
-	const clones = Array.from(dimensionSets).map((set) => set.cloneNode(true));
-	return clones;
-}
+const updateEvents = ['d2l-filter-dimension-load-more', 'd2l-filter-dimension-search'];
 
 /**
  * A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container
@@ -23,6 +19,7 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 			 * @type {boolean}
 			 */
 			tags: { type: Boolean },
+			_openedDimensions: { state: true },
 			_filterIds: { state: true }
 		};
 	}
@@ -39,10 +36,18 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 		super();
 
 		this._filterIds = '';
+		this._openedDimensions = [];
+		this._updateFilterData = this._updateFilterData.bind(this);
+		this._handleSlottedFilterChange = this._handleSlottedFilterChange.bind(this);
+		this._handleSlottedDimensionFirstOpen = this._handleSlottedDimensionFirstOpen.bind(this);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		for (const event of updateEvents)
+			this.addEventListener(event, this._updateFilterData);
+		this.addEventListener('d2l-filter-change', this._handleSlottedFilterChange);
+		this.addEventListener('d2l-filter-dimension-first-open', this._handleSlottedDimensionFirstOpen);
 
 		if (!this.tags) return;
 
@@ -51,10 +56,12 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 		this.appendChild(this._filterTags);
 	}
 
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-
-		this.addEventListener('d2l-filter-change', this._handleFilterChange);
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const event of updateEvents)
+			this.removeEventListener(event, this._updateFilterData);
+		this.removeEventListener('d2l-filter-change', this._handleSlottedFilterChange);
+		this.removeEventListener('d2l-filter-dimension-first-open', this._handleSlottedDimensionFirstOpen);
 	}
 
 	updated(changedProperties) {
@@ -79,30 +86,83 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 			node.setAttribute('data-filter-tags-subscribed', 'data-filter-tags-subscribed');
 		}
 
-		return createFilterItem(node);
+		return node._dimensions;
 	}
 
 	getOverflowContainer(overflowItems) {
+		const newDimensions = overflowItems.reduce((p, n) => p.concat(n), []).map(dim => {
+			return { ...dim, values: dim.values.map(v => ({ ...v })) };
+		});
+
+		/* eslint-disable lit/no-private-properties */
 		return html`
-			<d2l-filter class="${OVERFLOW_CLASS} vdiff-target" @d2l-filter-change="${this._handleFilterChange}">
-				${overflowItems}
+			<d2l-filter
+				class="${OVERFLOW_CLASS} vdiff-target"
+				_ignoreSlotChanges
+				._openedDimensions=${this._openedDimensions}
+				._dimensions=${newDimensions}
+				@d2l-filter-change="${this.#handleFilterChange}"
+				@d2l-filter-dimension-load-more="${this.#handleFilterLoadMore}"
+				@d2l-filter-dimension-search="${this.#handleFilterSearch}"
+				@d2l-filter-dimension-first-open="${this.#handleFirstOpen}">
 			</d2l-filter>
 		`;
+		/* eslint-enable lit/no-private-properties */
+	}
+
+	_handleSlottedDimensionFirstOpen(e) {
+		this._openedDimensions.push(e.detail.key);
+		this.requestUpdate();
 	}
 
-	_handleFilterChange(e) {
-		const target = (e.target.classList && e.target.classList.contains(OVERFLOW_CLASS)) ? this : e.target;
+	_handleSlottedFilterChange(e) {
 		e.detail.dimensions.forEach((dimension) => {
-			const filterSet = target.querySelector(`d2l-filter-dimension-set[key=${dimension.dimensionKey}`);
-			if (!filterSet) return;
 			dimension.changes.forEach((change) => {
-				const filterSetValue = filterSet.querySelector(`d2l-filter-dimension-set-value[key=${change.valueKey}]`);
+				const filterSetValue = this.querySelector(`d2l-filter-dimension-set[key=${dimension.dimensionKey}] > d2l-filter-dimension-set-value[key="${change.valueKey}"]`);
 				if (!filterSetValue) return;
 				filterSetValue.selected = change.selected;
 			});
 		});
 	}
 
+	async _updateFilterData() {
+		await Promise.all([...this.querySelectorAll('d2l-filter')].map(f => f.updateComplete));
+		this.requestUpdate();
+	}
+
+	#handleFilterChange(e) {
+		e.detail.dimensions.forEach((dimension) => {
+			this.#runOnFilterDimension(dimension.dimensionKey, filter => {
+				filter.requestFilterChangeEvent(e.detail.allCleared, [dimension]);
+			});
+		});
+	}
+
+	#handleFilterLoadMore(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterLoadMoreEvent(e.detail.key, e.detail.value, e.detail.loadMoreCompleteCallback);
+		});
+	}
+
+	#handleFilterSearch(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterSearchEvent(e.detail.key, e.detail.value, e.detail.searchCompleteCallback);
+		});
+	}
+
+	#handleFirstOpen(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterDimensionFirstOpenEvent(e.detail.key);
+		});
+	}
+
+	#runOnFilterDimension(key, callback) {
+		const dimension = this.querySelector(`d2l-filter-dimension-set[key=${key}]`);
+		const filter = dimension?.parentNode;
+		if (filter?.tagName !== 'D2L-FILTER') return;
+		callback(filter);
+	}
+
 }
 
 customElements.define('d2l-filter-overflow-group', FilterOverflowGroup);

package/components/filter/filter.js

@@ -93,6 +93,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
 			_displayKeyboardTooltip: { state: true },
+			_ignoreSlotChanges: { type: Boolean },
 			_minWidth: { type: Number, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
 		};
@@ -228,6 +229,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
 		this._displayKeyboardTooltip = false;
+		this._ignoreSlotChanges = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
@@ -332,7 +334,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		`;
 	}
 
-	update(changedProperties) {
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
 		if (
 			changedProperties.has('opened')
 			&& this.opened
@@ -341,13 +344,70 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		) {
 			this._updateDimensionShouldBubble(this._dimensions[0]);
 		}
-		super.update(changedProperties);
+		if (changedProperties.has('_dimensions')) {
+			this._setFilterCounts();
+			this._activeFiltersSubscribers.updateSubscribers();
+		}
+	}
+
+	requestFilterChangeEvent(allCleared, dimensions) {
+		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
+			bubbles: true,
+			composed: false,
+			detail: { allCleared, dimensions }
+		}));
 	}
 
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
 
+	requestFilterDimensionFirstOpenEvent(dimensionKey) {
+		this._openedDimensions.push(dimensionKey);
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', {
+			bubbles: true,
+			composed: false,
+			detail: { key: dimensionKey }
+		}));
+	}
+
+	requestFilterLoadMoreEvent(key, searchValue, callback = () => {}) {
+		const applySearch = this._getSearchCallback(key);
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-load-more', {
+			detail: {
+				key: key,
+				value: searchValue,
+				loadMoreCompleteCallback: (options) => {
+					applySearch(options);
+					callback(options);
+				}
+			},
+			bubbles: true,
+			composed: false
+		}));
+	}
+
+	requestFilterSearchEvent(key, searchValue, callback = () => {}) {
+		const dimension = this._getDimensionByKey(key);
+		dimension.searchValue = searchValue;
+		dimension.loading = true;
+		this.requestUpdate();
+		const searchCallback = this._getSearchCallback(key);
+
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-search', {
+			bubbles: true,
+			composed: false,
+			detail: {
+				key: dimension.key,
+				value: dimension.searchValue,
+				searchCompleteCallback: (options) => {
+					searchCallback(options);
+					callback(options);
+				}
+			}
+		}));
+	}
+
 	requestFilterValueClear(keyObject) {
 		const dimension = this._getDimensionByKey(keyObject.dimension);
 
@@ -660,11 +720,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			dimension.changes = Array.from(dimension.changes.values());
 		});
 
-		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
-			bubbles: true,
-			composed: false,
-			detail: { allCleared: allCleared, dimensions: dimensions }
-		}));
+		this.requestFilterChangeEvent(allCleared, dimensions);
 		this._changeEventsToDispatch = new Map();
 		clearTimeout(this._changeEventTimeout);
 		this._activeFiltersSubscribers.updateSubscribers();
@@ -678,11 +734,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	_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 } }));
+			this.requestFilterDimensionFirstOpenEvent(dimension.key);
 			if (dimension.searchType === 'manual') {
 				this._search(dimension);
 			}
-			this._openedDimensions.push(dimension.key);
 		}
 	}
 
@@ -694,9 +749,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		return this._dimensions.find(dimension => dimension.key === key);
 	}
 
-	_getSearchCallback(dimension) {
+	_getSearchCallback(key) {
 		return function({ keysToDisplay = [], displayAllKeys = false } = {}) {
 			requestAnimationFrame(() => {
+				const dimension = this._getDimensionByKey(key);
 				dimension.displayAllKeys = displayAllKeys;
 				dimension.searchKeysToDisplay = keysToDisplay;
 				this._performDimensionSearch(dimension);
@@ -830,21 +886,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 	_handleDimensionLoadMore(e) {
 		const dimensionKey = e.target.parentNode.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._getDimensionByKey(dimensionKey);
-		const applySearch = this._getSearchCallback(dimension);
 
-		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-load-more', {
-			detail: {
-				key: dimensionKey,
-				value: dimension.searchValue,
-				loadMoreCompleteCallback: (options) => {
-					applySearch(options);
-					const menu = this.shadowRoot.querySelector('d2l-dropdown-menu');
-					menu ? menu.addEventListener('d2l-dropdown-position', e.detail.complete, { once: true }) : e.detail.complete();
-				}
-			},
-			bubbles: true,
-			composed: false
-		}));
+		this.requestFilterLoadMoreEvent(dimensionKey, dimension.value, () => {
+			const menu = this.shadowRoot.querySelector('d2l-dropdown-menu');
+			menu ? menu.addEventListener('d2l-dropdown-position', e.detail.complete, { once: true }) : e.detail.complete();
+		});
 	}
 
 	_handleDimensionShowComplete() {
@@ -919,6 +965,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	_handleSlotChange(e) {
 		const dimensionNodes = this._getSlottedNodes(e.target);
+		if (this._ignoreSlotChanges) return;
 
 		this._dimensions = dimensionNodes.map(dimension => {
 			const type = dimension.tagName.toLowerCase();
@@ -951,9 +998,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 			return info;
 		});
-
-		this._setFilterCounts();
-		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_handleTooltipHide() {
@@ -1055,15 +1099,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			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: this._getSearchCallback(dimension)
-				}
-			}));
+			this.requestFilterSearchEvent(dimension.key, dimension.searchValue);
 		}
 	}
 

package/custom-elements.json

@@ -4172,7 +4172,20 @@
     },
     {
       "name": "d2l-filter-load-more-demo",
-      "path": "./components/filter/demo/filter-load-more-demo.js"
+      "path": "./components/filter/demo/filter-load-more-demo.js",
+      "attributes": [
+        {
+          "name": "use-overflow-group",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "useOverflowGroup",
+          "attribute": "use-overflow-group",
+          "type": "boolean"
+        }
+      ]
     },
     {
       "name": "d2l-filter-search-demo",

package/package.json

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