@brightspace-ui/core 2.86.4 → 2.86.6

package/components/list/list-item-checkbox-mixin.js

@@ -129,6 +129,12 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		}
 	}
 
+	_onCheckboxKeyDown(e) {
+		// handle the enter key
+		if (e.keyCode !== 13) return;
+		this.selected = !this.selected;
+	}
+
 	_onMouseEnterSelection() {
 		this._hoveringSelection = !this.selectionDisabled;
 	}
@@ -150,24 +156,25 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
-				?selected="${this.selected}"
 				?disabled="${this.selectionDisabled}"
+				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
+				@keydown="${this._onCheckboxKeyDown}"
 				label="${this.label}"
-				?skeleton="${this.skeleton}"
-				.hovering="${this._hoveringSelection}">
+				?selected="${this.selected}"
+				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
 	}
 
 	_renderCheckboxAction(inner) {
 		return this.selectable ? html`
-			<div @click="${this._onCheckboxActionClick}"
+			<div class="d2l-checkbox-action"
+				@click="${this._onCheckboxActionClick}"
 				@mouseenter="${this._onMouseEnterSelection}"
-				@mouseleave="${this._onMouseLeaveSelection}"
-				class="d2l-checkbox-action">
+				@mouseleave="${this._onMouseLeaveSelection}">
 				${inner}
 			</div>
 			` : nothing;

package/components/list/list-item-generic-layout.js

@@ -445,16 +445,10 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	_onKeydown(event) {
 		if (!this.gridActive) return;
+
 		let node = null;
 		let preventDefault = true;
 		switch (event.keyCode) {
-			case keyCodes.ENTER:
-			case keyCodes.SPACE:
-				node = getComposedActiveElement();
-				node.click();
-				// mouseup event is necessary for components like d2l-dropdown-more that control state by listening to this event
-				node.dispatchEvent(new MouseEvent('mouseup', { composed: true }));
-				break;
 			case keyCodes.RIGHT:
 				node = getComposedActiveElement();
 				if (this.dir === 'rtl') {

package/components/list/list-item-link-mixin.js

@@ -49,9 +49,21 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
 	}
 
+	_handleLinkKeyDown(e) {
+		if (e.keyCode !== 32) return;
+		// handle the space key
+		e.preventDefault();
+		e.stopPropagation();
+		this.shadowRoot.querySelector(`#${this._primaryActionId}`).click();
+	}
+
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a aria-labelledby="${labelledBy}"
+			@click="${this._handleLinkClick}"
+			href="${this.actionHref}"
+			id="${this._primaryActionId}"
+			@keydown="${this._handleLinkKeyDown}"></a>`;
 	}
 
 };

package/components/scroll-wrapper/scroll-wrapper.js

@@ -94,7 +94,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 			.d2l-scroll-wrapper-actions {
 				position: -webkit-sticky;
 				position: sticky;
-				top: 0;
+				top: var(--d2l-table-sticky-top, 0);
 				z-index: 4;
 			}
 

package/components/table/table-wrapper.js

@@ -140,11 +140,11 @@ export const tableStyles = css`
 	/* first column that's sticky: offset by size of border-radius so top/bottom border doesn't show through (default style only) */
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		left: var(--d2l-table-border-radius-sticky-offset);
+		left: var(--d2l-table-border-radius-sticky-offset, 0);
 	}
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		right: var(--d2l-table-border-radius-sticky-offset);
+		right: var(--d2l-table-border-radius-sticky-offset, 0);
 	}
 
 	/* non-header sticky cells */
@@ -233,7 +233,7 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 			}
 			.d2l-sticky-headers-backdrop {
 				position: sticky;
-				top: calc(var(--d2l-table-sticky-top) + var(--d2l-table-border-radius));
+				top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
 				width: 100%;
 				z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
 			}
@@ -418,15 +418,15 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	}
 
 	_updateStickyTops() {
-		if (!this._table || !this.stickyHeaders) return;
-
 		const hasStickyControls = this._controls && !this._controls.noSticky;
 		let rowTop = hasStickyControls ? this._controls.offsetHeight + 6 : 0; // +6 for the internal `margin-bottom`.
 		this.style.setProperty('--d2l-table-sticky-top', `${rowTop}px`);
 
+		if (!this._table || !this.stickyHeaders) return;
+
 		const stickyRows = Array.from(this._table.querySelectorAll('tr.d2l-table-header, tr[header], thead tr'));
 		stickyRows.forEach(r => {
-			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset))`;
+			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
 			const ths = Array.from(r.querySelectorAll('th'));
 			ths.forEach(th => th.style.top = thTop);
 

package/custom-elements.json

@@ -8181,11 +8181,6 @@
           "default": "false"
         }
       ],
-      "events": [
-        {
-          "name": "mouseup"
-        }
-      ],
       "slots": [
         {
           "name": "outside-control",

package/package.json

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