@brightspace-ui/core 3.148.8 → 3.148.10

package/components/list/demo/demo-list-nav.js

@@ -123,14 +123,14 @@ class ListDemoNav extends LitElement {
 
 		this.requestUpdate();
 		await this.updateComplete;
-		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			setTimeout(() => {
+			setTimeout(async() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				await newItem.waitForUpdateComplete();
 				newItem.activateDragHandle();
-			}, 50);
+			});
 		}
 	}
 

package/components/list/demo/demo-list-nested-iterations-helper.js

@@ -8,7 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 class ListNestedIterationsHelper extends LitElement {
 	static get properties() {
 		return {
-			isDraggable: { attribute: 'is-draggable', type: Boolean }
+			isDraggable: { attribute: 'is-draggable', type: Boolean },
+			separators: { type: String }
 		};
 	}
 
@@ -109,7 +110,7 @@ class ListNestedIterationsHelper extends LitElement {
 
 	_createList(parentOptions, childrenOptions) {
 		return html`
-			<d2l-list>
+			<d2l-list separators=${ifDefined(this.separators)}>
 				${this._getParentItems(parentOptions, this._getChildItems(childrenOptions))}
 			</d2l-list>
 		`;
@@ -133,7 +134,7 @@ class ListNestedIterationsHelper extends LitElement {
 				<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.isDraggable}" ?expandable="${childOptions[1] && i !== 1}" color="${ifDefined((childOptions[2] && i === 0) || childOptions[3] ? '#ff0000' : undefined)}">
 					<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
 					${i === 1 || !childOptions[1] ? nothing : html`
-						<d2l-list slot="nested">
+						<d2l-list slot="nested" separators=${ifDefined(this.separators)}>
 							<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.isDraggable}" color="${ifDefined(childOptions[3] ? '#00ff00' : undefined)}">
 								<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
 							</d2l-list-item>
@@ -155,7 +156,7 @@ class ListNestedIterationsHelper extends LitElement {
 				<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.isDraggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}" color="${ifDefined((parentOptions[2] && i === 0) || parentOptions[3] ? '#ff0000' : undefined)}">
 					<d2l-list-item-content>${parentText}</d2l-list-item-content>
 					${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
-						<d2l-list slot="nested">${nested}</d2l-list>
+						<d2l-list slot="nested" separators=${ifDefined(this.separators)}>${nested}</d2l-list>
 					`}
 				</d2l-list-item>
 			`);

package/components/list/demo/demo-list-nested.js

@@ -134,14 +134,14 @@ class ListDemoNested extends LitElement {
 
 		this.requestUpdate();
 		await this.updateComplete;
-		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			setTimeout(() => {
+			setTimeout(async() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				await newItem.waitForUpdateComplete();
 				newItem.activateDragHandle();
-			}, 50);
+			});
 		}
 
 	}

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

@@ -6,7 +6,7 @@ import './list-item-placement-marker.js';
 import '../tooltip/tooltip.js';
 import '../expand-collapse/expand-collapse-content.js';
 import { css, html, nothing, unsafeCSS } from 'lit';
-import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
+import { findComposedAncestor, getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/interactive.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '../../helpers/composeMixins.js';
@@ -24,6 +24,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
 let tabPressed = false;
 let tabListenerAdded = false;
@@ -150,8 +151,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			:host(:first-of-type) [slot="control-container"]::before,
 			[slot="control-container"]::after,
-			:host([_list-item-new-styles][expandable][expanded]:not(:last-of-type))::after,
-			:host([_list-item-new-styles][_has-nested-list]:not([expandable]):not(:last-of-type))::after {
+			:host([_list-item-new-styles]:not([_separators="none"])[expandable][expanded]:not(:last-of-type))::after,
+			:host([_list-item-new-styles]:not([_separators="none"])[_has-nested-list]:not([expandable]):not(:last-of-type))::after {
 				border-top: 1px solid var(--d2l-color-mica);
 				content: "";
 				position: absolute;
@@ -594,6 +595,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._siblingHasColor = siblingHasColor;
 	}
 
+	async waitForUpdateComplete() {
+		const predicate = () => true;
+		const composedChildren = getComposedChildren(this, predicate);
+		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
+	}
+
 	_getFlattenedListItems(listItem) {
 		const listItems = new Map();
 		const lazyLoadListItems = new Map();

package/custom-elements.json

@@ -8421,6 +8421,10 @@
       "name": "d2l-demo-list-nested-iterations-helper",
       "path": "./components/list/demo/demo-list-nested-iterations-helper.js",
       "attributes": [
+        {
+          "name": "separators",
+          "type": "string"
+        },
         {
           "name": "is-draggable",
           "type": "boolean",
@@ -8428,6 +8432,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "separators",
+          "attribute": "separators",
+          "type": "string"
+        },
         {
           "name": "isDraggable",
           "attribute": "is-draggable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.148.8",
+  "version": "3.148.10",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@brightspace-ui/intl": "^3",
     "@brightspace-ui/lms-context-provider": "^1",
-    "@open-wc/dedupe-mixin": "^1",
+    "@open-wc/dedupe-mixin": "^2",
     "ifrau": "^0.41",
     "lit": "^3",
     "prismjs": "^1",