@brightspace-ui/labs 2.41.1 → 2.42.0

package/package.json

@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2"
   },
-  "version": "2.41.1"
+  "version": "2.42.0"
 }

package/src/components/ou-filter/tree-filter.js

@@ -592,7 +592,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 		this.isSelectAllVisible = false;
 		this.disabled = false;
 
-		this._needResize = false;
 		this._searchBookmark = null;
 	}
 
@@ -632,13 +631,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 		</div>`;
 	}
 
-	async updated() {
-		if (!this._needResize) return;
-
-		await this.resize();
-		this._needResize = false;
-	}
-
 	/**
 	 * Adds the given children to the given parent. See Tree.addNodes().
 	 * @param parent
@@ -647,7 +639,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 	 * @param bookmark - Opaque data that will be sent in the request-children event if the user asks to load more results
 	 */
 	addChildren(parent, children, hasMore, bookmark) {
-		this._needResize = true;
 		this.tree.addNodes(parent, children, hasMore, bookmark);
 	}
 
@@ -658,7 +649,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 	 * @param {Object}bookmark - Opaque data that will be sent in the search event if the user asks to load more results
 	 */
 	addSearchResults(nodes, hasMore, bookmark) {
-		this._needResize = true;
 		this.tree.addTree(nodes);
 		this.isLoadMoreSearch = hasMore;
 		this._searchBookmark = bookmark;
@@ -669,12 +659,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 		this.shadowRoot.querySelector('d2l-labs-tree-selector').clearSearchAndSelection(generateEvent);
 	}
 
-	async resize() {
-		await this.updateComplete;
-		const treeSelector = this.shadowRoot?.querySelector('d2l-labs-tree-selector');
-		treeSelector && treeSelector.resize();
-	}
-
 	get _isSearch() {
 		return this.searchString.length > 0;
 	}
@@ -715,7 +699,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 
 	_onOpen(event) {
 		event.stopPropagation();
-		this._needResize = true;
 		this.tree.setOpen(event.detail.id, event.detail.isOpen);
 	}
 
@@ -727,7 +710,6 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 
 	_onSearch(event) {
 		event.stopPropagation();
-		this._needResize = true;
 		this.searchString = event.detail.value;
 
 		if (this.tree.isDynamic) {

package/src/components/ou-filter/tree-selector.js

@@ -10,6 +10,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
 import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles';
 
+const MOBILE_BREAKPOINT = 616;
+const DROPDOWN_MOBILE_WIDTH = 320;
+const DROPDOWN_WIDTH = 368;
+
 /**
  * @property {String} name
  * @property {Boolean} isSearch - if true, show "search-results" slot instead of "tree" slot
@@ -26,7 +30,9 @@ class TreeSelector extends LocalizeLabsElement(LitElement) {
 			disabled: { type: Boolean, attribute: 'disabled' },
 			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
 			isSearch: { type: Boolean, attribute: 'search', reflect: true },
-			isSelected: { type: Boolean, attribute: 'selected', reflect: true }
+			isSelected: { type: Boolean, attribute: 'selected', reflect: true },
+			_dropdownMinWidth: { type: Number },
+			_dropdownMaxWidth: { type: Number },
 		};
 	}
 
@@ -89,6 +95,8 @@ class TreeSelector extends LocalizeLabsElement(LitElement) {
 		this._isSearch = false;
 		this.isSelectAllVisible = false;
 		this.disabled = false;
+		this._dropdownMinWidth = DROPDOWN_WIDTH;
+		this._dropdownMaxWidth = DROPDOWN_WIDTH;
 	}
 
 	/**
@@ -99,13 +107,10 @@ class TreeSelector extends LocalizeLabsElement(LitElement) {
 	}
 
 	render() {
-		// Using no-auto-fit on d2l-dropdown-content to avoid having the component jump to the top on every
-		// node open and load. The tradeoff is that the user has to scroll the whole page now.
-		// We have a defect logged to improve this in future.
 		return html`
 			<d2l-dropdown>
-				<d2l-dropdown-button-subtle text="${this.name}" ?disabled=${this.disabled}>
-					<d2l-dropdown-content align="start" no-auto-fit class="vdiff-target">
+				<d2l-dropdown-button-subtle text="${this.name}" ?disabled=${this.disabled} @d2l-dropdown-opener-click="${this._onDropdownOpenerClick}">
+					<d2l-dropdown-content align="start" min-width=${this._dropdownMinWidth} max-width=${this._dropdownMaxWidth} mobile-breakpoint=${MOBILE_BREAKPOINT} class="vdiff-target">
 						<div class="d2l-labs-filter-dropdown-content-header" slot="header">
 							<span>${this.localize('components:ouFilter:treeSelector:filterBy')}</span>
 
@@ -143,12 +148,6 @@ class TreeSelector extends LocalizeLabsElement(LitElement) {
 		this._onClear(generateEvent);
 	}
 
-	async resize() {
-		await this.treeUpdateComplete;
-		const content = this.shadowRoot?.querySelector('d2l-dropdown-content');
-		content && await content.resize();
-	}
-
 	simulateSearch(searchString) {
 		this._onSearch({
 			detail: {
@@ -206,6 +205,12 @@ class TreeSelector extends LocalizeLabsElement(LitElement) {
 		));
 	}
 
+	_onDropdownOpenerClick() {
+		const isMobile = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`).matches;
+		this._dropdownMinWidth = isMobile ? DROPDOWN_MOBILE_WIDTH : DROPDOWN_WIDTH;
+		this._dropdownMaxWidth = isMobile ? DROPDOWN_MOBILE_WIDTH : DROPDOWN_WIDTH;
+	}
+
 	_onSearch(event, generateEvent = true) {
 		if (!generateEvent) {
 			return;