@brightspace-ui/labs 2.45.0 → 2.46.1

package/package.json

@@ -111,8 +111,7 @@
     "lodash-es": "^4",
     "mobx": "^5",
     "parse-srt": "^1.0.0-alpha",
-    "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2"
   },
-  "version": "2.45.0"
+  "version": "2.46.1"
 }

package/src/components/media-player/media-player-audio-bars.js

@@ -1,5 +1,4 @@
 import { css, html, LitElement } from 'lit';
-import ResizeObserver from 'resize-observer-polyfill';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const AUDIO_BARS_GRADIENTS = [

package/src/components/media-player/media-player.js

@@ -23,7 +23,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
 import parseSRT from 'parse-srt/src/parse-srt.js';
-import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -168,8 +167,10 @@ class MediaPlayer extends LocalizeLabsElement(RtlMixin(LitElement)) {
 			}
 
 			#d2l-labs-media-player-video-poster {
+				background-color: #000000;
 				cursor: pointer;
-				height: auto;
+				height: 100%;
+				object-fit: contain;
 				position: absolute;
 				width: 100%;
 				z-index: 1;

package/src/components/navigation/navigation-immersive.js

@@ -5,7 +5,6 @@ import { css, html, LitElement } from 'lit';
 import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { navigationSharedStyle } from './navigation-shared-styles.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-width: 615px)');

package/src/utilities/reactive-store/README.md

@@ -2,7 +2,7 @@
 
 A simple data store that will automatically notify subscribers when any of its properties changes.
 
-It's designed to work as a state store for Lit based apps and mimics Lit's component class API.
+It's designed to work as a state store for Lit based apps and mimics Lit's component class API, but it can just as easily support many non-Lit contexts.
 
 ## Usage Examples
 
@@ -400,15 +400,26 @@ This map serves a similar function to the `changedProperties` map that [Lit prov
 
 Note that `changedProperties` is unique for each instance of the Consumer class and is explicitly tied to the hosting component's update cycle.
 
+#### `dependentProperties`
+
+A Set containing all the property names of the properties that the Consumer instance is watching for changes. This Set can be modified in order to specify which property changes from the store actually trigger a re-render. The host component will only re-render if one or more of the properties named in this Set change.
+
+By default, this Set will initialize with all properties from the store. However, if the Consumer's `detectDependentProperties` option is set to true, this Set will initialize with no properties.
+
+Additionally, the initial properties in this Set can be overriden by using the Consumer's `dependentProperties` option.
+
 ### Instance Methods
 
-#### `constructor(host)`
+#### `constructor(host, options = {})`
 
 The constructor for the Consumer class accepts the following parameters:
 
-| Parameter Name | Type | Description | Required |
-|---|---|---|---|
-| `host` | LitElement | The host Lit element that the Consumer is to be connected to. | True |
+| Parameter Name | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `host` | LitElement | The host Lit element that the Consumer is to be connected to. | True | |
+| `options` | Object | An object containing various initialization options. | False | `{}` |
+| `options.dependentProperties` | Array | An array of strings where each string is the name of a property from the store. Each property listed here will be used to initialize the Consumer instance's `dependentProperties` Set. | False | If the `detectDependentProperties` option is set to false, this array will defult with all properties from the store. Otherwise, this array will default to an empty array. |
+| `options.detectDependentProperties` | Boolean | If this options is set to true, store properties will be automatically added to the `dependentProperties` Set whenever they're accessed through their corresponding getter or setter on the Consumer instance. | False | `false` |
 
 ## The context `Provider` class
 
@@ -438,16 +449,27 @@ This map serves a similar function to the `changedProperties` map that [Lit prov
 
 Note that `changedProperties` is unique for each instance of the `Provider` class and is explicitly tied to the hosting component's update cycle.
 
+#### `dependentProperties`
+
+A Set containing all the property names of the properties that the context `Provider` instance is watching for changes. This Set can be modified in order to specify which property changes from the store actually trigger a re-render. The host component will only re-render if one or more of the properties named in this Set change.
+
+By default, this Set will initialize with all properties from the store. However, if the context `Provider`'s `detectDependentProperties` option is set to true, this Set will initialize with no properties.
+
+Additionally, the initial properties in this Set can be overriden by using the context `Provider`'s `dependentProperties` option.
+
 ### Instance Methods
 
-#### `constructor(host, store = new StoreClass())`
+#### `constructor(host, options = {})`
 
 The constructor for the context `Provider` class accepts the following parameters:
 
 | Parameter Name | Type | Description | Required | Default Value |
 |---|---|---|---|---|
 | `host` | LitElement instance | The host Lit element that the `Provider` is to be connected to. | True | |
-| `store` | ReactiveStore instance | The instance of your store that you wish to provide to descendant context `Consumer` classes. Note that if no store instance is passed to this parameter, an instance of your store will be instantiated to be used. | True | `new StoreClass()` |
+| `options` | Object | An object containing various initialization options. | False | `{}` |
+| `options.store` | ReactiveStore instance | The instance of your store that you wish to provide to descendant context `Consumer` classes. Note that if no store instance is passed to this parameter, an instance of your store will be instantiated to be used. | False | `new StoreClass()` |
+| `options.dependentProperties` | Array | An array of strings where each string is the name of a property from the store. Each property listed here will be used to initialize the context `Provider` instance's `dependentProperties` Set. | False | If the `detectDependentProperties` option is set to false, this array will defult with all properties from the store. Otherwise, this array will default to an empty array. |
+| `options.detectDependentProperties` | Boolean | If this options is set to true, store properties will be automatically added to the `dependentProperties` Set whenever they're accessed through their corresponding getter or setter on the context `Provider` instance. | False | `false` |
 
 ## The context `Consumer` class
 
@@ -479,12 +501,23 @@ This map serves a similar function to the `changedProperties` map that [Lit prov
 
 Note that `changedProperties` is unique for each instance of the context `Consumer` class and is explicitly tied to the hosting component's update cycle.
 
+#### `dependentProperties`
+
+A Set containing all the property names of the properties that the context `Consumer` instance is watching for changes. This Set can be modified in order to specify which property changes from the store actually trigger a re-render. The host component will only re-render if one or more of the properties named in this Set change.
+
+By default, this Set will initialize with all properties from the store. However, if the context `Consumer`'s `detectDependentProperties` option is set to true, this Set will initialize with no properties.
+
+Additionally, the initial properties in this Set can be overriden by using the context `Consumer`'s `dependentProperties` option.
+
 ### Instance Methods
 
 #### `constructor(host)`
 
 The constructor for the context `Consumer` class accepts the following parameters:
 
-| Parameter Name | Type | Description | Required |
-|---|---|---|---|
-| `host` | LitElement instance | The host Lit element that the `Consumer` is to be connected to. | True |
+| Parameter Name | Type | Description | Required | Default value |
+|---|---|---|---|---|
+| `host` | LitElement instance | The host Lit element that the `Consumer` is to be connected to. | True | |
+| `options` | Object | An object containing various initialization options. | False | `{}` |
+| `options.dependentProperties` | Array | An array of strings where each string is the name of a property from the store. Each property listed here will be used to initialize the context `Consumer` instance's `dependentProperties` Set. | False | If the `detectDependentProperties` option is set to false, this array will defult with all properties from the store. Otherwise, this array will default to an empty array. |
+| `options.detectDependentProperties` | Boolean | If this options is set to true, store properties will be automatically added to the `dependentProperties` Set whenever they're accessed through their corresponding getter or setter on the context `Consumer` instance. | False | `false` |

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

@@ -7,9 +7,19 @@ import { combinedPropertiesSymbol } from './constants.js';
 import StoreReactor from './store-reactor.js';
 
 export class ContextProvider {
-	constructor(host, StoreClass, store = new StoreClass()) {
+	constructor(host, StoreClass, options = {}) {
+		const {
+			detectDependentProperties = false,
+			dependentProperties = detectDependentProperties ? [] : undefined,
+			store = new StoreClass(),
+			...restOptions
+		} = options;
+
 		const properties = StoreClass[combinedPropertiesSymbol];
-		const storeReactor = new StoreReactor(host, store, properties);
+		const storeReactor = new StoreReactor(host, store, {
+			dependentProperties,
+			...restOptions,
+		});
 		new LitContextProvider(host, {
 			context: createContext(StoreClass),
 			initialValue: store,
@@ -18,6 +28,10 @@ export class ContextProvider {
 		return new Proxy(store, {
 			get(target, prop) {
 				if (prop in storeReactor) return storeReactor[prop];
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.get(target, prop);
 			},
 			set(target, prop, value) {
@@ -25,13 +39,23 @@ export class ContextProvider {
 					storeReactor[prop] = value;
 					return true;
 				}
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.set(target, prop, value);
 			}
 		});
 	}
 }
 export class ContextConsumer {
-	constructor(host, StoreClass) {
+	constructor(host, StoreClass, options = {}) {
+		const {
+			detectDependentProperties = false,
+			dependentProperties = detectDependentProperties ? [] : undefined,
+			...restOptions
+		} = options;
+
 		const properties = StoreClass[combinedPropertiesSymbol];
 		const target = {
 			store: {},
@@ -41,13 +65,20 @@ export class ContextConsumer {
 			context: createContext(StoreClass),
 			callback: (store) => {
 				target.store = store;
-				target.storeReactor = new StoreReactor(host, store, properties);
+				target.storeReactor = new StoreReactor(host, store, {
+					dependentProperties,
+					...restOptions,
+				});
 			},
 		});
 
 		return new Proxy(target, {
 			get({ store, storeReactor }, prop) {
 				if (prop in storeReactor) return storeReactor[prop];
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.get(store, prop);
 			},
 			set({ store, storeReactor }, prop, value) {
@@ -55,6 +86,10 @@ export class ContextConsumer {
 					storeReactor[prop] = value;
 					return true;
 				}
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.set(store, prop, value);
 			}
 		});
@@ -64,13 +99,13 @@ export class ContextConsumer {
 export function createContextControllers(StoreClass) {
 	return {
 		Provider: class extends ContextProvider {
-			constructor(host, store = new StoreClass()) {
-				super(host, StoreClass, store);
+			constructor(host, options) {
+				super(host, StoreClass, options);
 			}
 		},
 		Consumer: class extends ContextConsumer {
-			constructor(host) {
-				super(host, StoreClass);
+			constructor(host, options) {
+				super(host, StoreClass, options);
 			}
 		},
 	};

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

@@ -24,8 +24,8 @@ export default class ReactiveStore {
 	createConsumer() {
 		const store = this;
 		return class extends StoreConsumer {
-			constructor(host) {
-				super(host, store);
+			constructor(host, options) {
+				super(host, store, options);
 			}
 		};
 	}

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

@@ -2,12 +2,26 @@ import { combinedPropertiesSymbol } from './constants.js';
 import StoreReactor from './store-reactor.js';
 
 export default class StoreConsumer {
-	constructor(host, store, properties = store.constructor[combinedPropertiesSymbol]) {
-		const storeReactor = new StoreReactor(host, store, properties);
+	constructor(host, store, options = {}) {
+		const {
+			detectDependentProperties = false,
+			dependentProperties = detectDependentProperties ? [] : undefined,
+			...restOptions
+		} = options;
+
+		const properties = store.constructor[combinedPropertiesSymbol];
+		const storeReactor = new StoreReactor(host, store, {
+			dependentProperties,
+			...restOptions,
+		});
 
 		return new Proxy(store, {
 			get(target, prop) {
 				if (prop in storeReactor) return storeReactor[prop];
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.get(target, prop);
 			},
 			set(target, prop, value) {
@@ -15,6 +29,10 @@ export default class StoreConsumer {
 					storeReactor[prop] = value;
 					return true;
 				}
+
+				if (detectDependentProperties && prop in properties)
+					storeReactor.dependentProperties.add(prop);
+
 				return Reflect.set(target, prop, value);
 			}
 		});

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

@@ -3,11 +3,18 @@ import { combinedPropertiesSymbol } from './constants.js';
 export default class StoreReactor {
 	changedProperties;
 
-	constructor(host, store, properties = store.constructor[combinedPropertiesSymbol]) {
+	constructor(host, store, options = {}) {
 		this.#host = host;
 		this.#host.addController(this);
 		this.#store = store;
 
+		const properties = store.constructor[combinedPropertiesSymbol];
+
+		const {
+			dependentProperties = Object.keys(properties),
+		} = options;
+
+		this.dependentProperties = new Set(dependentProperties);
 		this.changedProperties = new Map();
 
 		this.#store.subscribe(this.#onPropertyChange);
@@ -27,12 +34,13 @@ export default class StoreReactor {
 		prevValue,
 		forceUpdate = false,
 	}) => {
-		if (!forceUpdate && !this.changedProperties.has(property)) this.changedProperties.set(property, prevValue);
+		if (forceUpdate) return this.#requestUpdate();
 
-		this.#host.requestUpdate();
-		this.#host.updateComplete.then(() => {
-			this.changedProperties.clear();
-		});
+		// If the property has changed multiple times within the same update cycle, we want to
+		// preserve the value from before the first change.
+		if (!this.changedProperties.has(property)) this.changedProperties.set(property, prevValue);
+
+		if (this.dependentProperties.has(property)) this.#requestUpdate();
 	};
 
 	#initializeChangedProperties(properties) {
@@ -41,11 +49,16 @@ export default class StoreReactor {
 			if (this.#store[property] === undefined) return;
 
 			this.changedProperties.set(property, undefined);
-			shouldUpdate = true;
+
+			if (this.dependentProperties.has(property)) {
+				shouldUpdate = true;
+			}
 		});
 
-		if (!shouldUpdate) return;
+		if (shouldUpdate) this.#requestUpdate();
+	}
 
+	#requestUpdate() {
 		this.#host.requestUpdate();
 		this.#host.updateComplete.then(() => {
 			this.changedProperties.clear();