@brightspace-ui/core 2.58.0 → 2.59.0

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/package.json

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