@brightspace-ui/core 3.37.0 → 3.39.0

package/components/form/demo/form-panel-demo.js

@@ -5,6 +5,7 @@ import '../../expand-collapse/expand-collapse-content.js';
 import '../../inputs/input-number.js';
 import '../../inputs/input-text.js';
 import '../form.js';
+import '../../collapsible-panel/collapsible-panel.js';
 import { css, html, LitElement } from 'lit';
 import { heading3Styles } from '../../typography/styles.js';
 import { inputStyles } from '../../inputs/input-styles.js';
@@ -63,36 +64,38 @@ class FormPanelDemo extends LitElement {
 
 	render() {
 		return html`
-			<div class="d2l-form-panel-demo-panel">
-				<div class="d2l-form-panel-demo-header" @click=${this._toggleExpandCollapse}>
-					<h3 class="d2l-form-panel-demo-text d2l-heading-3">Personal Information</h3>
-					<d2l-button-icon
-						aria-expanded=${this._expanded ? 'true' : 'false'}
-						icon=${this._expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}
-						@click=${this._toggleExpandCollapse}>
-					</d2l-button-icon>
-				</div>
-				<hr>
-				<d2l-expand-collapse-content ?expanded=${this._expanded}>
-					<d2l-form @d2l-form-invalid=${this._onInvalid} @d2l-form-submit=${this._onSubmit}>
-						<div class="d2l-form-panel-demo-container">
-							<d2l-input-text label="First Name" name="first-name" required minlength="4" maxlength="15"></d2l-input-text>
-						</div>
-						<div class="d2l-form-panel-demo-container">
-							<d2l-input-text label="Middle Name" name="middle-name" minlength="4" maxlength="8"></d2l-input-text>
-						</div>
-						<div class="d2l-form-panel-demo-container">
-							<d2l-input-text label="Last Name" name="last-name" required minlength="4" maxlength="15"></d2l-input-text>
-						</div>
-						<div class="d2l-form-panel-demo-container">
-							<d2l-input-number label="Age" name="age" required min="18" max="23"></d2l-input-number>
-						</div>
-					</d2l-form>
-				</d2l-expand-collapse-content>
-			</div>
+			<d2l-collapsible-panel
+				panel-title="Personal Information"
+				type="subtle"
+				?expanded=${this._expanded}
+				@d2l-collapsible-panel-expand=${this._onExpand}
+				@d2l-collapsible-panel-collapse=${this._onCollapse}>
+				<d2l-form @d2l-form-invalid=${this._onInvalid} @d2l-form-submit=${this._onSubmit}>
+					<div class="d2l-form-panel-demo-container">
+						<d2l-input-text label="First Name" name="first-name" required minlength="4" maxlength="15"></d2l-input-text>
+					</div>
+					<div class="d2l-form-panel-demo-container">
+						<d2l-input-text label="Middle Name" name="middle-name" minlength="4" maxlength="8"></d2l-input-text>
+					</div>
+					<div class="d2l-form-panel-demo-container">
+						<d2l-input-text label="Last Name" name="last-name" required minlength="4" maxlength="15"></d2l-input-text>
+					</div>
+					<div class="d2l-form-panel-demo-container">
+						<d2l-input-number label="Age" name="age" required min="18" max="23"></d2l-input-number>
+					</div>
+				</d2l-form>
+			</d2l-collapsible-panel>
 		`;
 	}
 
+	_onCollapse() {
+		this._expanded = false;
+	}
+
+	_onExpand() {
+		this._expanded = true;
+	}
+
 	_onInvalid() {
 		this._expanded = true;
 	}
@@ -101,11 +104,5 @@ class FormPanelDemo extends LitElement {
 		// eslint-disable-next-line no-console
 		console.log(e.detail.formData);
 	}
-
-	_toggleExpandCollapse(e) {
-		e.stopPropagation();
-		this._expanded = !this._expanded;
-	}
-
 }
 customElements.define('d2l-form-panel-demo', FormPanelDemo);

package/components/table/table-wrapper.js

@@ -259,6 +259,11 @@ export const tableStyles = css`
 	}
 `;
 
+const SELECTORS = {
+	headers: 'tr.d2l-table-header, tr[header], thead tr',
+	items: ':not(thead) > tr:not(.d2l-table-header):not([header])',
+};
+
 /**
  * Wraps a native <table> element, providing styling and scroll buttons for overflow.
  * @slot - Content to wrap
@@ -486,7 +491,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 	}
 
 	_getItems() {
-		return this._table?.querySelectorAll(':not(thead) > tr:not(.d2l-table-header):not([header])') || [];
+		return this._table?.querySelectorAll(SELECTORS.items) || [];
 	}
 
 	_getItemShowingCount() {
@@ -574,13 +579,37 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._handleTableChange();
 	}
 
-	async _handleTableChange() {
+	async _handleTableChange(mutationRecords) {
+		const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('table-update-filter-GAUD-6955', true) ?? true;
+		const updates = { count: true, classNames: true, sticky: true, syncWidths: true };
+		if (flag) {
+			if (mutationRecords) {
+				for (const key in updates) updates[key] = false;
+				for (const { type, removedNodes, addedNodes, target, attributeName } of mutationRecords) {
+					if (type === 'attributes') {
+						updates.classNames = attributeName === 'selected';
+						continue;
+					}
+
+					updates.sticky ||= target.matches(SELECTORS.headers);
+					const affectedNodes = [...removedNodes, ...addedNodes];
+					for (const node of affectedNodes) {
+						if (!(node instanceof Element)) continue;
+						updates.classNames ||= node.matches('tr');
+						updates.syncWidths ||= node.matches('tr');
+						updates.sticky ||= node.matches(SELECTORS.headers);
+						updates.count ||= node.matches(SELECTORS.items);
+					}
+				}
+			}
+		}
+
 		await new Promise(resolve => requestAnimationFrame(resolve));
 
-		this._updateItemShowingCount();
-		this._applyClassNames();
-		this._syncColumnWidths();
-		this._updateStickyTops();
+		if (updates.count) this._updateItemShowingCount();
+		if (updates.classNames) this._applyClassNames();
+		if (updates.syncWidths) this._syncColumnWidths();
+		if (updates.sticky) this._updateStickyTops();
 	}
 
 	_registerMutationObserver(observerName, callback, target, options) {
@@ -721,7 +750,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		if (!this._table || !this.stickyHeaders || this.stickyHeadersScrollWrapper) return;
 
-		const stickyRows = Array.from(this._table.querySelectorAll('tr.d2l-table-header, tr[header], thead tr'));
+		const stickyRows = Array.from(this._table.querySelectorAll(SELECTORS.headers));
 		stickyRows.forEach(r => {
 			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
 			const ths = Array.from(r.querySelectorAll('th'));

package/package.json

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