@brightspace-ui/core 1.188.1 → 1.189.0

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

@@ -82,7 +82,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		if (this.selectable) {
 			if (!this.key) console.warn('ListItemCheckboxMixin requires a key.');
 		} else {
-			this._labelRequired = false;
+			this.labelRequired = false;
 		}
 		if (!this.key) this.setSelected(undefined, true);
 	}
@@ -124,21 +124,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}
 	}
 
-	_onNestedSlotChange(e) {
-		if (!this.selectable) return;
-
-		const nestedList = e.target.assignedNodes().find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
-		if (this._selectionProvider === nestedList) return;
-
-		if (this._selectionProvider && this._selectionProvider !== nestedList) {
-			this._selectionProvider.unsubscribeObserver(this);
-			this._selectionProvider = null;
-		}
-
-		if (nestedList) {
-			this._selectionProvider = nestedList;
-			this._selectionProvider.subscribeObserver(this);
-		}
+	_onSelectionProviderConnected(e) {
+		e.stopPropagation();
+		this._updateNestedSelectionProvider();
 	}
 
 	_renderCheckbox() {
@@ -169,4 +157,29 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 			</div>
 			` : nothing;
 	}
+
+	_updateNestedSelectionProvider() {
+		if (!this.selectable) return;
+
+		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
+		let nestedNodes = nestedSlot.assignedNodes();
+		if (nestedNodes.length === 0) {
+			nestedNodes = [...nestedSlot.childNodes];
+		}
+
+		const nestedList = nestedNodes.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
+
+		if (this._selectionProvider === nestedList) return;
+
+		if (this._selectionProvider && this._selectionProvider !== nestedList) {
+			this._selectionProvider.unsubscribeObserver(this);
+			this._selectionProvider = null;
+		}
+
+		if (nestedList) {
+			this._selectionProvider = nestedList;
+			this._selectionProvider.subscribeObserver(this);
+		}
+	}
+
 };

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

@@ -333,7 +333,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		this._hovering = false;
 	}
 
-	_renderListItem({ illustration, content, actions } = {}) {
+	_renderListItem({ illustration, content, actions, nested } = {}) {
 		const classes = {
 			'd2l-visible-on-ancestor-target': true,
 			'd2l-list-item-content-extend-separators': this._extendSeparators,
@@ -388,8 +388,8 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 						class="d2l-list-item-actions-container">
 						<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 					</div>
-					<div slot="nested">
-						<slot name="nested" @slotchange="${this._onNestedSlotChange}"></slot>
+					<div slot="nested" @d2l-selection-provider-connected="${this._onSelectionProviderConnected}">
+						<slot name="nested">${nested}</slot>
 					</div>
 				</d2l-list-item-generic-layout>
 				<div class="d2l-list-item-active-border"></div>

package/components/selection/selection-mixin.js

@@ -59,6 +59,10 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		this.addEventListener('d2l-selection-change', this._handleSelectionChange);
 		this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
 		this.addEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
+		requestAnimationFrame(() => {
+			this.dispatchEvent(new CustomEvent('d2l-selection-provider-connected', { bubbles: true, composed: true }));
+		});
+
 	}
 
 	disconnectedCallback() {