@brightspace-ui/core 3.153.0 → 3.153.1

package/components/table/table-wrapper.js

@@ -3,11 +3,14 @@ import '../scroll-wrapper/scroll-wrapper.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 { PageableMixin } from '../paging/pageable-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
+const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
+
 export const tableStyles = css`
 	.d2l-table {
 		border-collapse: separate; /* needed to override reset stylesheets */
@@ -248,8 +251,22 @@ export const tableStyles = css`
 	}
 
 	/* sticky + scroll-wrapper */
-	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table {
-		display: block;
+	${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][_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] .d2l-table > thead {
@@ -318,7 +335,12 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				reflect: true,
 				type: String
 			},
-			_controlsScrolled: { state: true }
+			_controlsScrolled: { state: true },
+			_noScrollWidth: {
+				attribute: '_no-scroll-width',
+				reflect: true,
+				type: Boolean,
+			},
 		};
 	}
 
@@ -383,6 +405,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._controlsMutationObserver = null;
 		this._controlsScrolled = false;
 		this._controlsScrolledMutationObserver = null;
+		this._noScrollWidth = colSyncFix;
 		this._table = null;
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
@@ -582,13 +605,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			this._tableIntersectionObserver.observe(this._table);
 		}
 
-		if (!this._tableResizeObserver) this._tableResizeObserver = new ResizeObserver(() => this._syncColumnWidths());
+		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._handleTableChange();
 	}
 
 	async _handleTableChange(mutationRecords) {
+		const updateList = [];
+
 		const updates = { count: true, classNames: true, sticky: true, syncWidths: true };
 		if (mutationRecords) {
 			for (const key in updates) updates[key] = false;
@@ -601,6 +627,8 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				updates.sticky ||= target.matches(SELECTORS.headers);
 				const affectedNodes = [...removedNodes, ...addedNodes];
 				for (const node of affectedNodes) {
+					updateList.push(target, ...addedNodes);
+
 					if (!(node instanceof Element)) continue;
 					updates.classNames ||= node.matches('tr, td, th');
 					updates.syncWidths ||= node.matches('tr');
@@ -614,6 +642,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		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));
 		if (updates.syncWidths) this._syncColumnWidths();
 		if (updates.sticky) this._updateStickyTops();
 	}
@@ -628,11 +657,14 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 	}
 
 	_syncColumnWidths() {
-		if (!this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper) return;
-
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
-		if (!head || !body) return;
+
+		if (colSyncFix) {
+			const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+			this._noScrollWidth = this.clientWidth === maxScrollWidth;
+		}
+		if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
 
 		const candidateRowHeadCells = [];
 

package/package.json

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