@brightspace-ui/core 3.219.5 → 3.219.7

package/components/dropdown/dropdown-tabs.js

@@ -1,127 +1,59 @@
 import { css, LitElement } from 'lit';
-import { DropdownPopoverMixin, usePopoverMixin } from './dropdown-popover-mixin.js';
-import { DropdownContentMixin } from './dropdown-content-mixin.js';
-import { dropdownContentStyles } from './dropdown-content-styles.js';
-
-if (usePopoverMixin) {
-
-	/**
-	 * A container for a "d2l-tabs" component. It provides additional support on top of "d2l-dropdown-content" for automatic resizing when the tab changes.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownTabs extends DropdownPopoverMixin(LitElement) {
-
-		static get styles() {
-			return [super.styles, css`
-				::slotted(d2l-tabs) {
-					margin-bottom: 0;
-				}
-			`];
-		}
-
-		firstUpdated(changedProperties) {
-			super.firstUpdated(changedProperties);
-
-			this.addEventListener('d2l-dropdown-open', this.#handleOpen);
-			this.addEventListener('d2l-menu-resize', this.#handleMenuResize);
-			this.addEventListener('d2l-tab-panel-selected', this.#handleTabSelected);
-		}
-
-		#initializingHeight;
-
-		#handleMenuResize(e) {
-
-			const tabs = this.shadowRoot?.querySelector('.dropdown-content > slot')
-				.assignedNodes()
-				.filter(node => node.hasAttribute && node.tagName === 'D2L-TABS')[0];
-
-			if (!tabs) return;
-			const tabListRect = tabs.getTabListRect();
-
-			// need to include height of tablist, dropdown padding, tab margins
-			const rect = {
-				height: e.detail.height + tabListRect.height + 52,
-				width: e.detail.width
-			};
-			this.position(rect, { updateLocation: this.#initializingHeight });
-			this.#initializingHeight = false;
-		}
-
-		#handleOpen(e) {
-			if (e.target !== this) return;
-			this.#initializingHeight = true;
-		}
-
-		#handleTabSelected() {
-			this.position();
-		}
-
+import { DropdownPopoverMixin } from './dropdown-popover-mixin.js';
+
+/**
+ * A container for a "d2l-tabs" component. It provides additional support on top of "d2l-dropdown-content" for automatic resizing when the tab changes.
+ * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
+ * @slot header - Sticky container at the top of the dropdown
+ * @slot footer - Sticky container at the bottom of the dropdown
+ * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ */
+class DropdownTabs extends DropdownPopoverMixin(LitElement) {
+
+	static get styles() {
+		return [super.styles, css`
+			::slotted(d2l-tabs) {
+				margin-bottom: 0;
+			}
+		`];
 	}
-	customElements.define('d2l-dropdown-tabs', DropdownTabs);
-
-} else {
 
-	/**
-	 * A container for a "d2l-tabs" component. It provides additional support on top of "d2l-dropdown-content" for automatic resizing when the tab changes.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownTabs extends DropdownContentMixin(LitElement) {
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
 
-		static get styles() {
-			return [ dropdownContentStyles, css`
-				::slotted(d2l-tabs) {
-					margin-bottom: 0;
-				}
-			`];
-		}
-
-		firstUpdated(changedProperties) {
-			super.firstUpdated(changedProperties);
+		this.addEventListener('d2l-dropdown-open', this.#handleOpen);
+		this.addEventListener('d2l-menu-resize', this.#handleMenuResize);
+		this.addEventListener('d2l-tab-panel-selected', this.#handleTabSelected);
+	}
 
-			this.addEventListener('d2l-dropdown-open', this._onOpen);
-			this.addEventListener('d2l-menu-resize', this._onMenuResize);
-			this.addEventListener('d2l-tab-panel-selected', this._onTabSelected);
-		}
+	#initializingHeight;
 
-		render() {
-			return this._renderContent();
-		}
+	#handleMenuResize(e) {
 
-		_getTabsElement() {
-			if (!this.shadowRoot) return undefined;
-			return this.shadowRoot.querySelector('.d2l-dropdown-content-container > slot')
-				.assignedNodes()
-				.filter(node => node.hasAttribute && node.tagName === 'D2L-TABS')[0];
-		}
+		const tabs = this.shadowRoot?.querySelector('.dropdown-content > slot')
+			.assignedNodes()
+			.filter(node => node.hasAttribute && node.tagName === 'D2L-TABS')[0];
 
-		_onMenuResize(e) {
-			const tabs = this._getTabsElement();
-			const tabListRect = tabs.getTabListRect();
-			// need to include height of tablist, dropdown padding, tab margins
-			const rect = {
-				height: e.detail.height + tabListRect.height + 52,
-				width: e.detail.width
-			};
-			this.__position(rect, { updateAboveBelow: this._initializingHeight });
-			this._initializingHeight = false;
-		}
+		if (!tabs) return;
+		const tabListRect = tabs.getTabListRect();
 
-		_onOpen(e) {
-			if (e.target !== this) return;
-			this._initializingHeight = true;
-		}
+		// need to include height of tablist, dropdown padding, tab margins
+		const rect = {
+			height: e.detail.height + tabListRect.height + 52,
+			width: e.detail.width
+		};
+		this.position(rect, { updateLocation: this.#initializingHeight });
+		this.#initializingHeight = false;
+	}
 
-		_onTabSelected() {
-			this.__position();
-		}
+	#handleOpen(e) {
+		if (e.target !== this) return;
+		this.#initializingHeight = true;
+	}
 
+	#handleTabSelected() {
+		this.position();
 	}
-	customElements.define('d2l-dropdown-tabs', DropdownTabs);
 
 }
+customElements.define('d2l-dropdown-tabs', DropdownTabs);

package/components/filter/filter.js

@@ -821,8 +821,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 		let shouldUpdate = false,
 			shouldSearch = false,
-			shouldRecount = false,
-			shouldResizeDropdown = false;
+			shouldRecount = false;
 		changes.forEach((newValue, prop) => {
 			if (toUpdate[prop] === newValue) return;
 
@@ -841,10 +840,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			} else if (prop === 'values') {
 				if (dimension.searchValue || dimension.searchType === 'manual') shouldSearch = true;
 				shouldRecount = true;
-				shouldResizeDropdown = true;
 				this._activeFiltersSubscribers.updateSubscribers();
-			} else if (prop === 'loading') {
-				shouldResizeDropdown = true;
 			} else if (prop === 'text') {
 				this._activeFiltersSubscribers.updateSubscribers();
 			}
@@ -853,10 +849,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		if (shouldSearch) this._performDimensionSearch(dimension);
 		if (shouldRecount) this._setFilterCounts(dimension);
 		if (shouldUpdate) this.requestUpdate();
-		if (shouldResizeDropdown) {
-			// todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
-			this._requestDropdownResize();
-		}
 		if (e.detail.dispatchChangeEvent) this._dispatchChangeEventValueDataChange(dimension, value, e.detail.valueKey);
 	}
 
@@ -1070,20 +1062,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				break;
 		}
 
-		// todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
-		this._requestDropdownResize();
 		this.requestUpdate();
 	}
 
-	// todo: remove this method when removing GAUD-7472-dropdown-popover flag (d2l-filter calls requestRepositionNextResize)
-	_requestDropdownResize() {
-		const singleDimension = this._dimensions.length === 1;
-		if (singleDimension && this.opened) {
-			const dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
-			dropdown.requestRepositionNextResize(this.shadowRoot.querySelector('.d2l-filter-container'));
-		}
-	}
-
 	_search(dimension) {
 		if (dimension.searchType === 'automatic') {
 			this._performDimensionSearch(dimension);

package/components/table/table-col-sort-button.js

@@ -10,7 +10,6 @@ import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { usePopoverMixin } from '../dropdown/dropdown-popover-mixin.js';
 
 /**
  * Button for sorting a table column in ascending/descending order.
@@ -185,7 +184,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		if (this._hasDropdownItems) {
 			return html`<d2l-dropdown>
 					${button}
-					<d2l-dropdown-menu no-pointer align="start" vertical-offset="${usePopoverMixin ? '0' : '4'}">
+					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0">
 						<d2l-menu label="${ifDefined(this._label)}" @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>

package/components/table/table-wrapper.js

@@ -4,17 +4,13 @@ import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { cssSizes } from '../inputs/input-checkbox.js';
 import { getComposedParent } from '../../helpers/dom.js';
-import { getFlag } from '../../helpers/flags.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
-import { usePopoverMixin as useDropdownPopover } from '../dropdown/dropdown-popover-mixin.js';
 import { usePopoverMixin as useTooltipPopover } from '../tooltip/tooltip.js';
 
-export const isUsingNativePopover = isPopoverSupported && useDropdownPopover && useTooltipPopover;
-
-const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
+export const isUsingNativePopover = isPopoverSupported && useTooltipPopover;
 
 export const tableStyles = css`
 	.d2l-table {
@@ -228,22 +224,17 @@ export const tableStyles = css`
 	}
 
 	/* sticky + scroll-wrapper */
-	${colSyncFix ? css`
-		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper]:not([_no-scroll-width]) .d2l-table {
-			display: flex;
-			flex-direction: column;
-		}
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper]:not([_no-scroll-width]) .d2l-table {
+		display: flex;
+		flex-direction: column;
+	}
 
-		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > thead {
-			display: table-header-group;
-		}
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > thead {
+		display: table-header-group;
+	}
 
-		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > tbody {
-			display: table-row-group;
-		}` : css`
-		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table {
-			display: block;
-		}`
+	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > tbody {
+		display: table-row-group;
 	}
 
 	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > thead {
@@ -392,7 +383,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this._controlsMutationObserver = null;
 		this._controlsScrolled = false;
 		this._controlsScrolledMutationObserver = null;
-		this._noScrollWidth = colSyncFix;
+		this._noScrollWidth = true;
 		this._table = null;
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
@@ -598,7 +589,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 
 		if (!this._tableResizeObserver) this._tableResizeObserver = new ResizeObserver(entries => this._syncColumnWidths(entries));
 		this._tableResizeObserver.observe(this._table);
-		colSyncFix && this.querySelectorAll('tr:first-child *').forEach(el => this._tableResizeObserver.observe(el));
+		this.querySelectorAll('tr:first-child *').forEach(el => this._tableResizeObserver.observe(el));
 
 		this._handleTableChange();
 	}
@@ -633,7 +624,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 
 		if (updates.count) this._updateItemShowingCount();
 		if (updates.classNames) this._applyClassNames();
-		colSyncFix && await Promise.all([...updateList, ...this.querySelectorAll('d2l-table-col-sort-button')].map(n => n.updateComplete));
+		await Promise.all([...updateList, ...this.querySelectorAll('d2l-table-col-sort-button')].map(n => n.updateComplete));
 		if (updates.syncWidths) this._syncColumnWidths();
 		if (updates.sticky) this._updateStickyTops();
 	}
@@ -652,12 +643,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
 
-		if (colSyncFix) {
-			const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
-			setTimeout(() => {
-				this._noScrollWidth = this.clientWidth === maxScrollWidth;
-			});
-		}
+		const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+		setTimeout(() => {
+			this._noScrollWidth = this.clientWidth === maxScrollWidth;
+		});
 		if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
 
 		const candidateRowHeadCells = [];