@brightspace-ui/core 2.58.0 → 2.59.1

package/components/dialog/README.md

@@ -32,13 +32,14 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 * Label primary actions with clear and predictable language. Use verbs like, “Add” or “Save” that indicate the outcome of a dialog rather than, “OK” or “Close”
 * Keep dialog titles concise
 * Maintain a language relationship between the action that triggered the dialog, dialog title, and dialog primary button.
+* When it is necessary to stack multiple dialogs, ensure the stacked dialog is nested within the DOM of the dialog containing the opener
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
 * Don’t use a dialog when you could reasonably use an alternative that preserves user context, like expanding options inline
 * Don’t use a dialog to show error, success, or warning messages. Use an inline or toast alert instead.
 * Avoid creating large, complex dialogs
-* Avoid invoking a dialog from another dialog (nested dialogs)
+* Avoid opening a dialog from within other dialogs (stacking dialogs)
 * Avoid a title length that could easily wrap to two lines
 <!-- docs: end donts -->
 <!-- docs: end best practices -->

package/components/selection/selection-observer-mixin.js

@@ -28,9 +28,14 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	connectedCallback() {
 		super.connectedCallback();
+		this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
+
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
 		requestAnimationFrame(() => {
-			if (this.selectionFor) return;
+			if (this.selectionFor) {
+				this._handleSelectionFor();
+				return this._provider?.subscribeObserver(this);
+			}
 
 			const evt = new CustomEvent('d2l-selection-observer-subscribe', {
 				bubbles: true,
@@ -44,34 +49,57 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this._selectionForObserver) this._selectionForObserver.disconnect();
-		if (this._provider) this._provider.unsubscribeObserver(this);
+		this._disconnectSelectionForObserver();
+		this._disconnectProvider();
+		this.removeEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
 	}
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
-		if (!changedProperties.has('selectionFor')) return;
+		if (changedProperties.has('selectionFor')) this._handleSelectionFor();
+	}
+
+	_disconnectProvider() {
+		if (!this._provider) return;
+		this._provider.unsubscribeObserver(this);
+		this._provider = undefined;
+	}
 
-		if (this._selectionForObserver) this._selectionForObserver.disconnect();
-		if (this._provider) this._provider.unsubscribeObserver(this);
+	_disconnectSelectionForObserver() {
+		if (!this._selectionForObserver) return;
+		this._selectionForObserver.disconnect();
+		this._selectionForObserver = undefined;
+	}
 
+	_handleSelectionFor() {
+		this._disconnectSelectionForObserver();
 		this._updateProvider();
 
-		this._selectionForObserver = new MutationObserver(() => {
-			this._updateProvider();
-		});
+		if (this.selectionFor) {
+			this._selectionForObserver = new MutationObserver(() => this._updateProvider());
 
-		this._selectionForObserver.observe(this.getRootNode(), {
-			childList: true,
-			subtree: true
-		});
+			this._selectionForObserver.observe(this.getRootNode(), {
+				childList: true,
+				subtree: true
+			});
+		}
+	}
+
+	_handleSelectionObserverSubscribe(e) {
+		if (e.target !== this && this._provider) {
+			e.stopPropagation();
+			e.detail.provider = this._provider;
+			const target = e.composedPath()[0];
+			this._provider.subscribeObserver(target);
+		}
 	}
 
 	_updateProvider() {
-		const selectionComponent = this.getRootNode().querySelector(`#${cssEscape(this.selectionFor)}`);
+		const selectionComponent = this.selectionFor ? this.getRootNode().querySelector(`#${cssEscape(this.selectionFor)}`) : undefined;
 		if (this._provider === selectionComponent) return;
 
+		this._disconnectProvider();
 		this._provider = selectionComponent;
 		if (this._provider) {
 			this._provider.subscribeObserver(this);

package/custom-elements.json

@@ -10001,6 +10001,37 @@
         }
       ]
     },
+    {
+      "name": "d2l-test-selection-observer",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ]
+    },
+    {
+      "name": "d2l-test-selection-observer-shadow",
+      "path": "./components/selection/test/selection-component.js"
+    },
     {
       "name": "d2l-test-skeleton-box",
       "path": "./components/skeleton/demo/skeleton-test-box.js",

package/helpers/announce.js

@@ -25,9 +25,13 @@ export function announce(message) {
 	/* Need to give browser enough time to create the live region so that it will
 	treat the change as an update. Firefox sometimes ignores changes if the region
 	and update are made too quickly in succession. RequestAnimationFrame is not
-	sufficient here. */
+	sufficient here. Also, for some strange reason, sometimes VO will not announce
+	duplicate messages even if we remove the child so we also append a non-breaking space. */
 	const elem = [...container.childNodes].find((c) => c.textContent === message);
-	if (elem) elem.parentNode.removeChild(elem);
+	if (elem) {
+		elem.parentNode.removeChild(elem);
+		message = message.concat('\u00A0');
+	}
 	setTimeout(() => {
 		container.appendChild(document.createTextNode(message));
 	}, 200);

package/package.json

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