@brightspace-ui/core 3.184.0 → 3.184.2

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

@@ -22,7 +22,7 @@ const FullData = [
 			{ key: 'stats', selected:false, text: 'Statistics' },
 			{ key: 'writerscraft', selected:true, text: 'Writer\'s Craft' },
 		],
-		initialCount: 6
+		loadCount: 6
 	},
 	{
 		key: 'role',
@@ -32,7 +32,7 @@ const FullData = [
 			{ key: 'instructor', selected:false, text: 'Instructor' },
 			{ key: 'student', selected:false, text: 'Student' }
 		],
-		initialCount: 2
+		loadCount: 2
 	},
 	{
 		key: 'dep',
@@ -42,7 +42,7 @@ const FullData = [
 			{ key: 'spanish', selected:false, text: 'Spanish' },
 			{ key: 'science', selected:false, text: 'Science' }
 		],
-		initialCount: 2
+		loadCount: 2
 	},
 	{
 		key: 'grad',
@@ -52,7 +52,7 @@ const FullData = [
 			{ key: '2', selected:false, text: '2nd Grade' },
 			{ key: '3', selected:false, text: '3rd Grade' }
 		],
-		initialCount: 2
+		loadCount: 2
 	}
 	,
 	{
@@ -63,7 +63,7 @@ const FullData = [
 			{ key: '2', selected:false, text: '2nd City' },
 			{ key: '3', selected:false, text: '3rd City' }
 		],
-		initialCount: 2
+		loadCount: 2
 	}
 ];
 
@@ -77,24 +77,7 @@ class FilterLoadMoreDemo extends LitElement {
 
 	constructor() {
 		super();
-		const dimensions = [];
-		for (const dim of FullData) {
-			const values = {};
-			let selectedCount = 0;
-			for (const v of dim.values) {
-				if (!v.selected) continue;
-				values[v.key] = { ...v };
-				selectedCount++;
-			}
-			const data = {
-				key: dim.key,
-				text: dim.text,
-				values
-			};
-			this._addKeys(data, dim.initialCount - selectedCount);
-			dimensions.push(data);
-		}
-		this._dimensions = dimensions;
+		this._dimensions = FullData.map(dim => ({ ...dim }));
 	}
 
 	render() {
@@ -117,26 +100,22 @@ class FilterLoadMoreDemo extends LitElement {
 	}
 
 	_addKeys(dimension, addCount, searchValue = '') {
-		const dimData = FullData.find(dim => dim.key === dimension.key);
-
-		const keys = [];
-		for (const valKey in dimension.values) {
-			if (this._textIsInSearch(searchValue, dimension.values[valKey].text)) {
-				keys.push(valKey);
-			}
-		}
-		const total = keys.length + addCount;
-		dimension.hasMore = false;
-		for (const v of dimData.values) {
-			if (v.key in dimension.values || !this._textIsInSearch(searchValue, v.text)) continue;
-			if (total <= keys.length) {
-				dimension.hasMore = true;
-				break;
+		dimension.loadCount += addCount;
+		const keys = dimension.values.filter(val => this._textIsInSearch(searchValue, val.text));
+		const selectedKeys = [];
+		const unselectedKeys = [];
+		for (const val of keys) {
+			if (val.selected) {
+				selectedKeys.push(val.key);
+			} else {
+				unselectedKeys.push(val.key);
 			}
-			dimension.values[v.key] = { ...v };
-			keys.push(v.key);
 		}
-		return keys;
+
+		dimension.loadCount = Math.max(selectedKeys.length, dimension.loadCount);
+		dimension.hasMore = keys.length > dimension.loadCount;
+
+		return selectedKeys.concat(unselectedKeys).slice(0, dimension.loadCount);
 	}
 
 	_handleFilterChange(e) {
@@ -171,12 +150,8 @@ class FilterLoadMoreDemo extends LitElement {
 		const dimension = this._dimensions.find(dim => dim.key === dimensionKey);
 		const dimData = FullData.find(dim => dim.key === dimensionKey);
 
-		let selectedCount = 0;
-		for (const valKey in dimension.values) {
-			if (!dimension.values[valKey].selected) delete dimension.values[valKey];
-			else if (this._textIsInSearch(e.detail.value, dimension.values[valKey].text)) selectedCount++;
-		}
-		const keysToDisplay = this._addKeys(dimension, dimData.initialCount - selectedCount, e.detail.value);
+		dimension.loadCount = 0;
+		const keysToDisplay = this._addKeys(dimension, dimData.loadCount, e.detail.value);
 
 		this.requestUpdate();
 		await this.updateComplete;

package/components/filter/filter.js

@@ -887,7 +887,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		const dimensionKey = e.target.parentNode.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._getDimensionByKey(dimensionKey);
 
-		this.requestFilterLoadMoreEvent(dimensionKey, dimension.value, () => {
+		this.requestFilterLoadMoreEvent(dimensionKey, dimension.searchValue, () => {
 			const menu = this.shadowRoot.querySelector('d2l-dropdown-menu');
 			menu ? menu.addEventListener('d2l-dropdown-position', e.detail.complete, { once: true }) : e.detail.complete();
 		});

package/components/more-less/more-less.js

@@ -97,38 +97,22 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__baseHeight = 0;
 		this.__contentId = getUniqueId();
-		this.__resizeObserver = null;
 		this.__content = null;
 		this.__contentSlot = null;
 		this.__autoExpanded = false;
 		this.__shift = false;
-		this.__bound_reactToChanges = null;
-		this.__bound_reactToMutationChanges = null;
 		this.__bound_transitionEvents = null;
+
+		this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
+		this._resizeObserver = new ResizeObserver(this.__reactToChanges.bind(this));
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		if (this.__resizeObserver) {
-			this.__resizeObserver.disconnect();
-			this.__resizeObserver = null;
-		}
-		if (this.__mutationObserver) {
-			this.__mutationObserver.disconnect();
-			this.__mutationObserver = null;
-		}
-
-		this.__content && this.__content.removeEventListener('load', this.__bound_reactToChanges, true);
-		this.__bound_reactToChanges = null;
-		this.__bound_reactToMutationChanges = null;
+		this._resizeObserver.disconnect();
+		this._mutationObserver.disconnect();
 
-		if (this.__contentSlot) {
-			this.__contentSlot.removeEventListener('slotchange', this.__reactToChanges.bind(this));
-			this.__contentSlot.removeEventListener('slotchange', this.__startObserving.bind(this));
-		}
-		this.__content && this.__content.removeEventListener('focusin', this.__focusIn.bind(this));
-		this.__content && this.__content.removeEventListener('focusout', this.__focusOut.bind(this));
 		this.shadowRoot.removeEventListener('transitionstart', this.__bound_transitionEvents);
 		this.shadowRoot.removeEventListener('transitionend', this.__bound_transitionEvents);
 		this.shadowRoot.removeEventListener('transitioncancel', this.__bound_transitionEvents);
@@ -140,7 +124,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
 		this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
-		this.__init_setupListeners();
+		this.__startObserving();
 
 		this.__bound_transitionEvents = this.__transitionEvents.bind(this);
 		this.shadowRoot.addEventListener('transitionstart', this.__bound_transitionEvents);
@@ -155,7 +139,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			'd2l-more-less-transition': this.__transitionAdded
 		};
 		return html`
-			<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ maxHeight: `${this.__maxHeight}` })}>
+			<div
+				id="${this.__contentId}"
+				class=${classMap(contentClasses)}
+				style=${styleMap({ maxHeight: `${this.__maxHeight}` })}
+				@focusin="${this.__focusIn}"
+				@focusout="${this.__focusOut}"
+				@load=${this.__reactToChanges}
+				@slotchange=${this.#handleSlotChange}>
 				<slot></slot>
 			</div>
 			<d2l-button-subtle
@@ -288,10 +279,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	__init_measureBaseHeight() {
 		this.__baseHeight = this.__content.offsetHeight;
 		this.__adjustToContent();
-
-		// react to images and whatnot loading
-		this.__bound_reactToChanges = this.__bound_reactToChanges || this.__reactToChanges.bind(this);
-		this.__content.addEventListener('load', this.__bound_reactToChanges, true);
 	}
 
 	__init_setBaseHeight() {
@@ -302,16 +289,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		});
 	}
 
-	__init_setupListeners() {
-		this.__startObserving();
-		if (this.__contentSlot) {
-			this.__contentSlot.addEventListener('slotchange', this.__reactToChanges.bind(this));
-			this.__contentSlot.addEventListener('slotchange', this.__startObserving.bind(this));
-		}
-		this.__content.addEventListener('focusin', this.__focusIn.bind(this));
-		this.__content.addEventListener('focusout', this.__focusOut.bind(this));
-	}
-
 	__isOwnMutation(mutation) {
 		return mutation.target === this.__content
 			&& (mutation.type === 'style' || mutation.type === 'attributes');
@@ -341,18 +318,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	}
 
 	__startObserving() {
-		this.__bound_reactToChanges = this.__bound_reactToChanges || this.__reactToChanges.bind(this);
-		this.__bound_reactToMutationChanges = this.__bound_reactToMutationChanges || this.__reactToMutationChanges.bind(this);
-		this.__resizeObserver = this.__resizeObserver || new ResizeObserver(this.__bound_reactToChanges);
-		this.__resizeObserver.disconnect();
-		this.__mutationObserver = this.__mutationObserver || new MutationObserver(this.__bound_reactToMutationChanges);
-		this.__mutationObserver.disconnect();
+		this._resizeObserver.disconnect();
+		this._mutationObserver.disconnect();
 
 		if (this.__contentSlot) {
 			const children = getComposedChildren(this.__contentSlot);
 			for (let i = 0; i < children.length; ++i) {
-				this.__resizeObserver.observe(children[i]);
-				this.__mutationObserver.observe(children[i], {
+				this._resizeObserver.observe(children[i]);
+				this._mutationObserver.observe(children[i], {
 					childList: true,
 					subtree: true,
 					characterData: true,
@@ -360,8 +333,8 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 				});
 			}
 		}
-		this.__resizeObserver.observe(this.__content);
-		this.__mutationObserver.observe(this.__content, {
+		this._resizeObserver.observe(this.__content);
+		this._mutationObserver.observe(this.__content, {
 			childList: true,
 			subtree: true,
 			characterData: true,
@@ -383,6 +356,10 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.dispatchEvent(new CustomEvent(e.type, { bubbles: true, composed: true, detail: e.detail }));
 	}
 
+	#handleSlotChange() {
+		this.__reactToChanges();
+		this.__startObserving();
+	}
 }
 
 customElements.define('d2l-more-less', MoreLess);

package/package.json

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