@brightspace-ui/core 3.17.0 → 3.17.1

package/components/table/table-wrapper.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 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 { PageableMixin } from '../paging/pageable-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -252,6 +253,10 @@ export const tableStyles = css`
 	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > tbody {
 		display: block;
 	}
+
+	[data-popover-count] {
+		z-index: 6 !important; /* if opened above, we want to stack on top of sticky table-controls */
+	}
 `;
 
 /**
@@ -370,9 +375,19 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._tableScrollers = {};
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+
+		this.addEventListener('d2l-dropdown-open', this._handlePopoverOpen);
+		this.addEventListener('d2l-dropdown-close', this._handlePopoverClose);
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
+		this.removeEventListener('d2l-dropdown-open', this._handlePopoverOpen);
+		this.removeEventListener('d2l-dropdown-close', this._handlePopoverClose);
+
 		this._controlsMutationObserver?.disconnect();
 		this._controlsScrolledMutationObserver?.disconnect();
 		this._tableMutationObserver?.disconnect();
@@ -499,6 +514,14 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._handleControlsChange();
 	}
 
+	_handlePopoverClose(e) {
+		this._updateStickyAncestor(e.target, false);
+	}
+
+	_handlePopoverOpen(e) {
+		this._updateStickyAncestor(e.target, true);
+	}
+
 	_handleSlotChange(e) {
 		this._table = e.target.assignedNodes({ flatten: true }).find(
 			node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE' && node.classList.contains('d2l-table'))
@@ -589,6 +612,30 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		}
 	}
 
+	_updateStickyAncestor(node, popoverOpened) {
+		if (!this.stickyHeaders) return;
+
+		node = getComposedParent(node);
+		while (node) {
+			if (node === this) break;
+			if (node.nodeType === Node.ELEMENT_NODE) {
+				const style = window.getComputedStyle(node, null);
+				if (style.getPropertyValue('position') === 'sticky') {
+
+					let popoverCount = Number.parseInt(node.getAttribute('data-popover-count'));
+					if (Number.isNaN(popoverCount)) popoverCount = 0;
+					popoverOpened ? popoverCount++ : popoverCount--;
+
+					if (popoverCount > 0) node.setAttribute('data-popover-count', popoverCount);
+					else node.removeAttribute('data-popover-count');
+
+					return;
+				}
+			}
+			node = getComposedParent(node);
+		}
+	}
+
 	_updateStickyTops() {
 		const hasStickyControls = this._controls && !this._controls.noSticky;
 		let rowTop = hasStickyControls ? this._controls.offsetHeight + 6 : 0; // +6 for the internal `margin-bottom`.

package/package.json

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