@brightspace-ui/labs 2.36.0 → 2.36.2

package/package.json

@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.36.0"
+  "version": "2.36.2"
 }

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

@@ -1447,10 +1447,11 @@ class MediaPlayer extends LocalizeLabsElement(RtlMixin(LitElement)) {
 				</div>
 			`;
 
-		// format of the thumbnail is [url]/th<height>w<height>i<interval>-<hash>.[png|jpg]
-		const matches = this.thumbnails.match(/th(\d+)w(\d+)i(\d+)[^/]*$/i);
-		if (matches && matches.length !== 4) return; // no matches
-		const [ , thumbHeight, thumbWidth, interval] = matches;
+		// format of the thumbnail is either [url]/timelineThumbnails-h<height>w<height>i<interval>-<hash>.[png|jpg]
+		// or [url]/th<height>w<height>i<interval>-<hash>.[png|jpg]
+		const matches = this.thumbnails.match(/(timelineThumbnails-|t)h(\d+)w(\d+)i(\d+)[^/]*$/i);
+		if (matches && matches.length !== 5) return; // no matches
+		const [ , , thumbHeight, thumbWidth, interval] = matches;
 
 		const width = this._thumbnailsImage.width;
 		const height = this._thumbnailsImage.height;

package/src/components/ou-filter/tree-filter.js

@@ -755,17 +755,20 @@ class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
 	_renderChildren(id, parentName, indentLevel = 0) {
 		parentName = parentName || this.localize('components:ouFilter:treeFilter:nodeName:root');
 
-		if (id === undefined || this.tree.getChildIdsForDisplay(id).length === 0) {
-			return html`<d2l-empty-state-simple
-				slot="tree"
-				description="${this.localize('components:ouFilter:treeSelector:noFiltersAvailable')}"
-			>
-			</d2l-empty-state-simple>`;
+		const emptyState = html`<d2l-empty-state-simple
+			slot="tree"
+			description="${this.localize('components:ouFilter:treeSelector:noFiltersAvailable')}"
+		></d2l-empty-state-simple>`;
+
+		if (id === undefined) {
+			return emptyState;
 		}
 
 		if (!this.tree.isPopulated(id)) {
 			// request children; in the meantime we can render whatever we have
 			this._requestChildren(id);
+		} else if (this.tree.getChildIdsForDisplay(id).length === 0) {
+			return emptyState;
 		}
 
 		return [

package/src/utilities/router/README.md

@@ -184,6 +184,15 @@ import { navigate } from '@brightspace-ui/labs/utilities/lit-router';
 navigate('/my-app/new-place');
 ```
 
+navigate can also be used to pass data between views. This is useful for sharing state objects between views without needing to make additional server calls. If the data you are sharing with a view is part of the state of the next view consider using a search param instead.
+
+```js
+import { navigate } from '@brightspace-ui/labs/utilities/lit-router';
+
+navigate(`/users?userId=${userId}`, { data: { /* sharing the user object here so I don't need to fetch it again */ } });
+```
+
+
 To redirect to a page and replace the previous browser history item the new one, use `redirect(path)`:
 
 ```js
@@ -224,4 +233,4 @@ describe('Page Routing', () => {
 
 This issue is resolved by default but the fix can be bypassed (for backwards compatibility) by setting the `disableRouteOrderFix` option to `true`.
 
-Bypassing the fix causes a warning to appear in the dev console. To resolve the warning, remove the `disaableRouteOrderFix` option and thoroughly test your routing. If your routes contain wildcards (`*`, typically for 404s), you may need to register them last.
+Bypassing the fix causes a warning to appear in the dev console. To resolve the warning, remove the `disaableRouteOrderFix` option and thoroughly test your routing. If your routes contain wildcards (`*`, typically for 404s), you may need to register them last.

package/src/utilities/router/router.js

@@ -3,6 +3,7 @@ import page from 'page';
 let activePage = page;
 let _lastOptions = {};
 let _lastContext = {};
+let passedData = undefined;
 
 export const _createReducedContext = pageContext => ({
 	params: pageContext.params,
@@ -12,7 +13,9 @@ export const _createReducedContext = pageContext => ({
 	hash: pageContext.hash,
 	route: pageContext.routePath,
 	title: pageContext.title,
+	loaderData: pageContext.loaderData,
 	options: {},
+	passedData,
 });
 
 const _storeCtx = () => {
@@ -27,7 +30,9 @@ const _handleRouteView = (context, next, r) => {
 		const reducedContext = _createReducedContext(context);
 		context.view = (host, options) => {
 			reducedContext.options = options || {};
-			return r.view.call(host, reducedContext);
+			const resultingView = r.view.call(host, reducedContext);
+			passedData = undefined;
+			return resultingView;
 		};
 		context.handled = true;
 
@@ -47,7 +52,7 @@ const _handleRouteLoader = r => (context, next) => {
 	}
 
 	if (r.loader) {
-		r.loader().then(() => {
+		r.loader(context).then(() => {
 			_handleRouteView(context, next, r);
 		});
 	} else if (r.pattern && r.to) {
@@ -118,7 +123,9 @@ const addMiddleware = callback => {
 
 // Triggers navigation to the specified route path.
 // Creates a new entry in the browser's history stack.
-export const navigate = path => {
+// data in the options object is available to the next view in ctx.passedData
+export const navigate = (path, options) => {
+	passedData = options?.data;
 	activePage.show(path);
 };