@brightspace-ui/labs 2.11.4 → 2.11.6

package/package.json

@@ -79,5 +79,5 @@
     "@lit/context": "^1.1.3",
     "lit": "^3"
   },
-  "version": "2.11.4"
+  "version": "2.11.6"
 }

package/src/components/navigation/README.md

@@ -8,9 +8,9 @@ Add the `d2l-labs-navigation` component, and provide sub elements `d2l-labs-navi
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation.js';
-  import '@brightspace-ui/labs/navigation/navigation-main-header.js';
-  import '@brightspace-ui/labs/navigation/navigation-main-footer.js';
+  import '@brightspace-ui/labs/components/navigation/navigation.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-main-header.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-main-footer.js';
 </script>
 
 <d2l-labs-navigation>
@@ -35,7 +35,7 @@ Please note that overridding the `left` slot will prevent the Back link from dis
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation-immersive.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-immersive.js';
 </script>
 
 <d2l-labs-navigation-immersive back-link-href="https://www.d2l.com" back-link-text="Back to D2L">
@@ -63,7 +63,7 @@ Optionally:
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation-band.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-band.js';
 </script>
 
 <d2l-labs-navigation-band></d2l-labs-navigation-band>
@@ -83,7 +83,7 @@ Add the `d2l-labs-navigation-main-header` component, and provide elements for th
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation-main-header.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-main-header.js';
 </script>
 
 <d2l-labs-navigation-main-header>
@@ -105,7 +105,7 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation-main-footer.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-main-footer.js';
 </script>
 
 <d2l-labs-navigation-main-footer>
@@ -164,7 +164,7 @@ Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon a
 
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/navigation/navigation-iterator.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
 </script>
 
 <d2l-labs-navigation-iterator></d2l-labs-navigation-iterator>

package/src/utilities/reactive-store/constants.js

@@ -0,0 +1 @@
+export const combinedPropertiesSymbol = Symbol('combinedProperties');

package/src/utilities/reactive-store/context-controllers.js

@@ -3,11 +3,12 @@ import {
 	ContextConsumer as LitContextConsumer,
 	ContextProvider as LitContextProvider
 } from '@lit/context';
+import { combinedPropertiesSymbol } from './constants.js';
 import StoreReactor from './store-reactor.js';
 
 export class ContextProvider {
 	constructor(host, StoreClass, store = new StoreClass()) {
-		const { properties } = StoreClass;
+		const properties = StoreClass[combinedPropertiesSymbol];
 		const storeReactor = new StoreReactor(host, store, properties);
 		new LitContextProvider(host, {
 			context: createContext(StoreClass),
@@ -31,7 +32,7 @@ export class ContextProvider {
 }
 export class ContextConsumer {
 	constructor(host, StoreClass) {
-		const { properties } = StoreClass;
+		const properties = StoreClass[combinedPropertiesSymbol];
 		const target = {
 			store: {},
 			storeReactor: {},

package/src/utilities/reactive-store/reactive-store.js

@@ -1,3 +1,4 @@
+import { combinedPropertiesSymbol } from './constants.js';
 import { createContextControllers } from './context-controllers.js';
 import PubSub from '../pub-sub/pub-sub.js';
 import StoreConsumer from './store-consumer.js';
@@ -13,7 +14,11 @@ export default class ReactiveStore {
 		this._pubSub = new PubSub();
 		this._state = {};
 
-		this.#defineProperties(this.constructor.prototype);
+		this.#defineProperties();
+	}
+
+	static get [combinedPropertiesSymbol]() {
+		return getCombinedProperties(this.prototype);
 	}
 
 	createConsumer() {
@@ -37,12 +42,8 @@ export default class ReactiveStore {
 		this._pubSub.unsubscribe(callback);
 	}
 
-	#defineProperties(proto) {
-		if (!(proto instanceof ReactiveStore)) return;
-		this.#defineProperties(Object.getPrototypeOf(proto));
-
-		const { properties } = proto.constructor;
-		if (!properties) return;
+	#defineProperties() {
+		const properties = this.constructor[combinedPropertiesSymbol];
 
 		Object.keys(properties).forEach((property) => {
 			Object.defineProperty(this, property, {
@@ -62,3 +63,11 @@ export default class ReactiveStore {
 		});
 	}
 }
+
+function getCombinedProperties(proto) {
+	if (!(proto instanceof ReactiveStore)) return {};
+	return {
+		...getCombinedProperties(Object.getPrototypeOf(proto)),
+		...(proto.constructor.properties ?? {})
+	};
+}

package/src/utilities/reactive-store/store-consumer.js

@@ -1,7 +1,8 @@
+import { combinedPropertiesSymbol } from './constants.js';
 import StoreReactor from './store-reactor.js';
 
 export default class StoreConsumer {
-	constructor(host, store, properties = store.constructor.properties) {
+	constructor(host, store, properties = store.constructor[combinedPropertiesSymbol]) {
 		const storeReactor = new StoreReactor(host, store, properties);
 
 		return new Proxy(store, {

package/src/utilities/reactive-store/store-reactor.js

@@ -1,7 +1,9 @@
+import { combinedPropertiesSymbol } from './constants.js';
+
 export default class StoreReactor {
 	changedProperties;
 
-	constructor(host, store, properties = store.constructor.properties) {
+	constructor(host, store, properties = store.constructor[combinedPropertiesSymbol]) {
 		this.#host = host;
 		this.#host.addController(this);
 		this.#store = store;