@brightspace-ui/core 2.118.2 → 2.118.4

package/components/collapsible-panel/README.md

@@ -87,7 +87,7 @@ The collapsible panel is a container that can show or hide additional content. I
 
 ## Collapsible Panel [d2l-collapsible-panel]
 
-The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `header`, `summary`, `actions`, and a default slot for the expanded content.
+The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `before`, `header`, `summary`, `actions`, and a default slot for the expanded content.
 
 <!-- docs: demo live name:d2l-collapsible-panel -->
 ```html
@@ -205,7 +205,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-<!-- docs: demo -->
+<!-- docs: demo live name:d2l-collapsible-panel-summary-item -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';

package/components/list/list-item-drag-drop-mixin.js

@@ -381,7 +381,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_dispatchListItemsMove(sourceItems, targetItem, moveLocation, keyboardActive) {
 		if (!keyboardActive) keyboardActive = false;
-		const rootList = this._getRootList();
+		const rootList = this.getRootList();
 		/** @ignore */
 		rootList.dispatchEvent(new CustomEvent('d2l-list-items-move', {
 			detail: {
@@ -408,13 +408,13 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_dispatchMoveListItemFirst(moveToRoot) {
-		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const list = (moveToRoot ? this.getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
 		const items = list.getItems();
 		this._dispatchListItemsMove([this], items[0], moveLocations.above, true);
 	}
 
 	_dispatchMoveListItemLast(moveToRoot) {
-		const list = (moveToRoot ? this._getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
+		const list = (moveToRoot ? this.getRootList() : findComposedAncestor(this, node => node.tagName === 'D2L-LIST'));
 		const items = list.getItems();
 		this._dispatchListItemsMove([this], items[items.length - 1], moveLocations.below, true);
 	}
@@ -483,7 +483,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_dispatchMoveRootItem(moveAbove) {
-		const rootList = this._getRootList();
+		const rootList = this.getRootList();
 		const items = rootList.getItems();
 		const currentIndex = items.indexOf(this);
 		if (moveAbove && currentIndex !== 0) {
@@ -610,7 +610,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			return dragImage;
 		};
 
-		const rootList = this._getRootList(this);
+		const rootList = this.getRootList(this);
 		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
 		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
 			const lazyLoadListItems = this._getFlattenedListItems().lazyLoadListItems;
@@ -750,8 +750,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		}
 
 		// assert that both the source and target are from the same list - may allow this in the future
-		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0]._getRootList();
-		if (this._getRootList() !== targetRoot) return;
+		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0].getRootList();
+		if (this.getRootList() !== targetRoot) return;
 
 		dragState.addDropTarget(this);
 		this._draggingOver = true;

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

@@ -283,7 +283,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	_focusNextRow(previous = false, num = 1) {
 
-		let listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+		const curListItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+		let listItem = curListItem;
 
 		while (num > 0) {
 			const tempListItem = (previous ? this._getPreviousFlattenedListItem(listItem) : this._getNextFlattenedListItem(listItem));
@@ -301,7 +302,9 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			if (!listItem._tryFocus()) {
 				// ultimate fallback to generic method for getting next/previous focusable
 				const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
-				if (nextFocusable) nextFocusable.focus();
+				if (nextFocusable && this._isContainedInSameRootList(curListItem, nextFocusable)) {
+					nextFocusable.focus();
+				}
 			}
 		}
 
@@ -442,9 +445,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			this.shadowRoot.querySelector(`.d2l-cell[data-cell-num="${this._cellNum}"]`);
 	}
 
+	_isContainedInSameRootList(item, node) {
+		const rootList = item?.getRootList?.(item);
+		return isComposedAncestor(rootList, node);
+	}
+
 	_onKeydown(event) {
 		if (!this.gridActive) return;
-
 		let node = null;
 		let preventDefault = true;
 		switch (event.keyCode) {

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

@@ -440,6 +440,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._tryFocus();
 	}
 
+	getRootList(node) {
+		if (!node) node = this;
+		let rootList;
+		while (node) {
+			if (node.tagName === 'D2L-LIST') rootList = node;
+			node = getComposedParent(node);
+		}
+		return rootList;
+	}
+
 	async highlight() {
 		if (this._highlight) return;
 		const elem = this.shadowRoot.querySelector('[slot="outside-control-container"]');
@@ -487,7 +497,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 	_getListItems(listItems, lazyLoadListItems, listItem) {
 		if (!listItem) {
-			const rootList = this._getRootList();
+			const rootList = this.getRootList();
 			const rootListItems = rootList.getItems();
 			rootListItems.forEach(listItem => this._getListItems(listItems, lazyLoadListItems, listItem));
 		} else {
@@ -544,16 +554,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		}
 	}
 
-	_getRootList(node) {
-		if (!node) node = this;
-		let rootList;
-		while (node) {
-			if (node.tagName === 'D2L-LIST') rootList = node;
-			node = getComposedParent(node);
-		}
-		return rootList;
-	}
-
 	_isListItem(node) {
 		if (!node) node = this;
 		return node.role === 'rowgroup' || node.role === 'listitem';

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -24,7 +24,9 @@ const keyCodes = Object.freeze({
 	LEFT: 37,
 	UP: 38,
 	RIGHT: 39,
-	DOWN: 40
+	DOWN: 40,
+	ENTER: 13,
+	SPACE: 32
 });
 
 function isMobile() {
@@ -303,27 +305,36 @@ class MobileKeyboardResizer extends Resizer {
 		if (!this.isMobile) {
 			return;
 		}
-		if (e.keyCode !== keyCodes.UP && e.keyCode !== keyCodes.DOWN) {
+		if (e.keyCode !== keyCodes.UP && e.keyCode !== keyCodes.DOWN && e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) {
 			return;
 		}
 		let secondaryHeight;
-		if (this.panelSize === 0) {
-			if (e.keyCode === keyCodes.UP) {
-				secondaryHeight = this.contentBounds.minHeight;
+		if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
+			if (this.panelSize === 0) {
+				secondaryHeight = this._restoreSize || this.contentBounds.minHeight;
 			} else {
+				this._restoreSize = this.panelSize;
 				secondaryHeight = 0;
 			}
 		} else {
-			const delta = (this.contentBounds.maxHeight - this.contentBounds.minHeight) / (this._steps - 1);
-			const direction = e.keyCode === keyCodes.UP ? 1 : -1;
-			const desiredHeight = this.panelSize + delta * direction;
-			const desiredSteppedHeight = this.contentBounds.minHeight + delta * Math.round((desiredHeight - this.contentBounds.minHeight) / delta);
-
-			const actualSecondaryHeight = this.clampHeight(desiredSteppedHeight);
-			if (desiredSteppedHeight < actualSecondaryHeight) {
-				secondaryHeight = 0;
+			if (this.panelSize === 0) {
+				if (e.keyCode === keyCodes.UP) {
+					secondaryHeight = this.contentBounds.minHeight;
+				} else {
+					secondaryHeight = 0;
+				}
 			} else {
-				secondaryHeight = actualSecondaryHeight;
+				const delta = (this.contentBounds.maxHeight - this.contentBounds.minHeight) / (this._steps - 1);
+				const direction = e.keyCode === keyCodes.UP ? 1 : -1;
+				const desiredHeight = this.panelSize + delta * direction;
+				const desiredSteppedHeight = this.contentBounds.minHeight + delta * Math.round((desiredHeight - this.contentBounds.minHeight) / delta);
+
+				const actualSecondaryHeight = this.clampHeight(desiredSteppedHeight);
+				if (desiredSteppedHeight < actualSecondaryHeight) {
+					secondaryHeight = 0;
+				} else {
+					secondaryHeight = actualSecondaryHeight;
+				}
 			}
 		}
 		this.dispatchResize(secondaryHeight, true);