@brightspace-ui/core 3.33.1 → 3.35.0

package/components/html-block/html-block.js

@@ -216,7 +216,10 @@ class HtmlBlock extends LitElement {
 
 		const contextValsPromise = contextKeysPromise.then(contextKeys => {
 			return Promise.allSettled(contextKeys.map(key => {
-				return tryGet(key, undefined, ctx => this._context.set(key, ctx));
+				return tryGet(key, undefined, ctx => {
+					this._context.set(key, ctx);
+					this.updated(new Map([['_context']]));
+				});
 			}));
 		});
 
@@ -234,24 +237,17 @@ class HtmlBlock extends LitElement {
 			'd2l-html-block-compact': this.compact
 		};
 
-		if (this._embedsFeatureEnabled()) {
-			return html`
-				<div class="${classMap(renderContainerClasses)}">
-					${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
-				</div>
-				${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
-			`;
-		} else {
-			return html`
-				<div class="${classMap(renderContainerClasses)}"></div>
-				${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
-			`;
-		}
+		return html`
+			<div class="${classMap(renderContainerClasses)}">
+				${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
+			</div>
+			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
+		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if ((changedProperties.has('html') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
+		if ((changedProperties.has('embeds') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 	}
@@ -260,10 +256,6 @@ class HtmlBlock extends LitElement {
 		return this._renderersProcessedPromise;
 	}
 
-	_embedsFeatureEnabled() {
-		return window.D2L?.LP?.Web?.UI?.Flags.Flag('shield-7574-enable-embed-rendering-framework', true);
-	}
-
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
@@ -272,6 +264,7 @@ class HtmlBlock extends LitElement {
 	async _processEmbeds() {
 		const htmlFragment = document.createRange().createContextualFragment(this.html);
 		await renderEmbeds(htmlFragment);
+		this.updated(new Map([['embeds']]));
 		return htmlFragment;
 	}
 
@@ -315,7 +308,6 @@ class HtmlBlock extends LitElement {
 
 	async _updateRenderContainer() {
 		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		if (!this._embedsFeatureEnabled()) renderContainer.innerHTML = this.html;
 		await this._processRenderers(renderContainer);
 	}
 

package/components/table/demo/table-test.js

@@ -41,6 +41,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	static get properties() {
 		return {
 			paging: { type: Boolean, reflect: true },
+			multiLine: { type: Boolean, attribute: 'multi-line' },
 			showButtons: { type: Boolean, attribute: 'show-buttons' },
 			stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
 			visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
@@ -72,6 +73,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	constructor() {
 		super();
 
+		this.multiLine = false;
 		this.paging = false;
 		this.showButtons = false;
 		this.stickyControls = false;
@@ -99,11 +101,25 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 
 				<table class="d2l-table">
 					<thead>
-						<tr>
-							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-							${this._renderDoubleSortButton('Location')}
-							${columns.map(columnHeading => this._renderSortButton(columnHeading))}
-						</tr>
+						${this.multiLine ? html`
+							<tr>
+								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								${this._renderDoubleSortButton('Location')}
+								<th scope="col" colspan="${columns.length}" sticky>
+									Metrics
+								</th>
+							</tr>
+							<tr>
+								<th scope="col" sticky></th>
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+							</tr>
+						` : html`
+							<tr>
+								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								${this._renderDoubleSortButton('Location')}
+								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
+							</tr>
+						`}
 					</thead>
 					<tbody>
 						<tr class="d2l-table-header">
@@ -182,7 +198,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_renderDoubleSortButton(name) {
 		const noSort = this._sortField?.toLowerCase() !== 'city' && this._sortField?.toLowerCase() !== 'country';
 		return html`
-			<th scope="col">
+			<th rowspan="${this.multiLine ? 2 : 1}" scope="col">
 				<d2l-table-col-sort-button
 					?desc="${this._sortDesc}"
 					?nosort="${noSort}">${name}

package/components/table/demo/table.html

@@ -80,6 +80,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Multi-line with scroll-wrapper + sticky</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-test-table multi-line sticky-headers sticky-controls sticky-headers-scroll-wrapper style="width: 400px;"></d2l-test-table>
+				</template>
+			</d2l-demo-snippet>
+
 			<div style="margin-bottom: 1000px;"></div>
 		</d2l-demo-page>
 	</body>

package/components/table/table-wrapper.js

@@ -599,16 +599,87 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		const body = this._table.querySelector('tbody');
 		if (!head || !body) return;
 
-		const firstRowHead = head.rows[0];
-		const firstRowBody = body.rows[0];
-		if (!firstRowHead || !firstRowBody || firstRowHead.cells.length !== firstRowBody.cells.length) return;
+		const candidateRowHeadCells = [];
 
-		for (let i = 0; i < firstRowHead.cells.length; i++) {
-			const headCell = firstRowHead.cells[i];
-			const bodyCell = firstRowBody.cells[i];
-			const bodyStyle = getComputedStyle(bodyCell);
+		// Max length of one of our body rows, which we'll try to map to our candidate head cells.
+		const maxRowBodyLength = Math.max(...([...body.rows].map(row => row.cells.length)));
+
+		const headCellsMap = [];
+		for (let i = 0; i < head.rows.length; i++) {
+			headCellsMap[i] = [];
+		}
+
+		// Build a map of which cells "exist" in each head row so we can pick out
+		// a candidate in each column to sync widths with.
+		for (let rowIndex = 0; rowIndex < head.rows.length; rowIndex++) {
+			const rowMap = headCellsMap[rowIndex];
+
+			let spanOffset = 0;
+			for (let colIndex = 0; colIndex < maxRowBodyLength; colIndex++) {
+				if (rowMap[colIndex] === null) {
+					spanOffset++;
+					continue;
+				}
+
+				const cell = head.rows[rowIndex].cells[colIndex - spanOffset];
+				rowMap[colIndex] = cell;
+
+				if (!cell) continue;
+
+				const colSpan = cell.colSpan;
+				const rowSpan = cell.rowSpan;
+
+				for (let offset = 1; offset < colSpan; offset++) {
+					rowMap[colIndex + offset] = null;
+				}
+
+				for (let offset = 1; offset < rowSpan; offset++) {
+					headCellsMap[rowIndex + offset][colIndex] = null;
+				}
+			}
+		}
+
+		// Pick out a single head cell for each column to sync widths.
+		for (let i = 0; i < maxRowBodyLength; i++) {
+			let candidateCell;
+			for (const rowMap of headCellsMap) {
+				const cell = rowMap[i];
+
+				if (cell && cell.colSpan === 1) {
+					candidateCell = cell;
+					break;
+				}
+			}
+
+			// This does not support heads without at least one single-column
+			// spanning cell in each column.
+			if (!candidateCell) return;
+
+			candidateRowHeadCells[i] = candidateCell;
+		}
+
+		// Pick the body row with the most cells (and no colspans) to measure against
+		const candidateRowBody = [...body.rows].find(row => {
+			return row.cells.length === maxRowBodyLength
+				&& ![...row.cells].find(cell => cell.colSpan > 1);
+		});
+
+		if (candidateRowHeadCells.length === 0 || !candidateRowBody) return;
+
+		let candidateRowBodyLength = 0;
+		for (const cell of candidateRowBody.cells) {
+			candidateRowBodyLength += cell.colSpan;
+		}
+
+		if (candidateRowHeadCells.length !== candidateRowBodyLength) return;
+
+		for (let i = 0; i < candidateRowHeadCells.length; i++) {
+			const headCell = candidateRowHeadCells[i];
 			const headStyle = getComputedStyle(headCell);
 
+			const bodyCell = candidateRowBody.cells[i];
+			const bodyStyle = getComputedStyle(bodyCell);
+
 			if (headCell.clientWidth > bodyCell.clientWidth) {
 				const headOverallWidth = parseFloat(headStyle.width) + parseFloat(headStyle.paddingLeft) + parseFloat(headStyle.paddingRight);
 				bodyCell.style.minWidth = `${headOverallWidth - parseFloat(bodyStyle.paddingLeft) - parseFloat(bodyStyle.paddingRight)}px`;

package/custom-elements.json

@@ -11944,6 +11944,11 @@
       "name": "d2l-test-table",
       "path": "./components/table/demo/table-test.js",
       "attributes": [
+        {
+          "name": "multi-line",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "paging",
           "type": "boolean",
@@ -12001,6 +12006,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "multiLine",
+          "attribute": "multi-line",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "paging",
           "attribute": "paging",

package/package.json

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