@brightspace-ui/core 3.60.1 → 3.62.0

package/components/filter/demo/filter.html

@@ -172,7 +172,12 @@
 						<d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
 						<d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
 						<d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
-						<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time"></d2l-filter-dimension-set-date-time-range-value>
+						<d2l-filter-dimension-set-date-time-range-value key="custom2" text="Custom Date Range with Time" start-value="2024-10-12T12:00:00Z"></d2l-filter-dimension-set-date-time-range-value>
+					</d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="role" text="Role" selected-first>
+						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
 					</d2l-filter-dimension-set>
 				</d2l-filter>
 			</template>

package/components/filter/filter.js

@@ -257,13 +257,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-filter-dimension-data-change', this._handleDimensionDataChange);
-
-		// Prevent these events from bubbling out of the filter
-		this.addEventListener('d2l-hierarchical-view-hide-complete', this._stopPropagation);
-		this.addEventListener('d2l-hierarchical-view-hide-start', this._stopPropagation);
-		this.addEventListener('d2l-hierarchical-view-show-complete', this._stopPropagation);
-		this.addEventListener('d2l-hierarchical-view-show-start', this._stopPropagation);
-		this.addEventListener('d2l-hierarchical-view-resize', this._stopPropagation);
 	}
 
 	render() {

package/components/focus-trap/focus-trap.js

@@ -34,16 +34,6 @@ class FocusTrap extends FocusMixin(LitElement) {
 		`;
 	}
 
-	static #exemptSelectors = [
-		'.d2l-focus-trap-exempt',
-		'.equatio-toolbar-wrapper',
-		'.equatio-toolbar-shadow-root-container'
-	].join(', ');
-
-	static #isExempt(target) {
-		return !!target?.closest(this.#exemptSelectors);
-	}
-
 	constructor() {
 		super();
 		this.trap = false;
@@ -91,6 +81,12 @@ class FocusTrap extends FocusMixin(LitElement) {
 		}
 	}
 
+	static #exemptSelectors = [
+		'.d2l-focus-trap-exempt',
+		'.equatio-toolbar-wrapper',
+		'.equatio-toolbar-shadow-root-container'
+	].join(', ');
+
 	_focusFirst() {
 		const focusable = this.shadowRoot &&
 			getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
@@ -147,6 +143,10 @@ class FocusTrap extends FocusMixin(LitElement) {
 		this._focusFirst();
 	}
 
+	static #isExempt(target) {
+		return !!target?.closest(this.#exemptSelectors);
+	}
+
 }
 
 customElements.define('d2l-focus-trap', FocusTrap);

package/components/hierarchical-view/demo/hierarchical-view.html

@@ -7,6 +7,11 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../hierarchical-view.js';
+			import '../../dropdown/dropdown-menu.js';
+			import '../../dropdown/dropdown-button.js';
+			import '../../menu/menu.js';
+			import '../../menu/menu-item.js';
+
 		</script>
 		<style>
 			#view1, #view2a, #view2b, #view3, #view4 {
@@ -77,6 +82,30 @@
 									<div class="buttons">
 										<button id="btn-parent-view-2a">view 1 (parent)</button>
 										<button id="btn-view-3">view 3</button>
+										<d2l-dropdown-button text="Open!" primary>
+											<d2l-dropdown-menu >
+											  <d2l-menu label="Astronomy" root-view >
+												<d2l-menu-item text="Introduction"></d2l-menu-item>
+												<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
+												<d2l-menu-item text="The Solar System">
+													<d2l-menu>
+														<d2l-menu-item text="Formation"></d2l-menu-item>
+														<d2l-menu-item text="Modern Solar System"></d2l-menu-item>
+														<d2l-menu-item text="Future Solar System"></d2l-menu-item>
+														<d2l-menu-item text="The Planets"></d2l-menu-item>
+														<d2l-menu-item text="The Sun"></d2l-menu-item>
+														<d2l-menu-item text="Solar &amp; Lunar Eclipses"></d2l-menu-item>
+														<d2l-menu-item text="Meteors &amp; Meteorites"></d2l-menu-item>
+														<d2l-menu-item text="Asteroids"></d2l-menu-item>
+														<d2l-menu-item text="Comets"></d2l-menu-item>
+													</d2l-menu>
+													</d2l-menu-item>
+													<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
+													<d2l-menu-item text="The Night Sky"></d2l-menu-item>
+													<d2l-menu-item text="The Universe"></d2l-menu-item>
+												</d2l-menu>
+											</d2l-dropdown-menu>
+										</d2l-dropdown-button>
 									</div>
 									view 2a
 									<div class="info">min-height: 400</div>

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -14,15 +14,16 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			/**
 			 * @ignore
 			 */
-			childView: { type: Boolean, reflect: true, attribute: 'child-view' },
+			hierarchicalView: { type: Boolean },
 			/**
 			 * @ignore
 			 */
-			hierarchicalView: { type: Boolean },
+			rootView: { type: Boolean, attribute: 'root-view' },
 			/**
 			 * @ignore
 			 */
-			shown: { type: Boolean, reflect: true }
+			shown: { type: Boolean, reflect: true },
+			_childView: { type: Boolean, reflect: true, attribute: 'child-view' },
 		};
 	}
 
@@ -49,6 +50,9 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 				display: inline-block;
 				vertical-align: top; /* DE37329: required to prevent extra spacing caused by inline-block */
 			}
+			.d2l-hierarchical-view-content {
+				position: relative;
+			}
 			.d2l-hierarchical-view-content.d2l-child-view-show {
 				-webkit-animation: show-child-view-animation forwards 300ms linear;
 				animation: show-child-view-animation 300ms forwards linear;
@@ -65,31 +69,29 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 				.d2l-hierarchical-view-content.d2l-child-view-show {
 					-webkit-animation: none;
 					animation: none;
-					-webkit-transform: translate(-100%, 0);
-					transform: translate(-100%, 0);
+					left: -100%;
 				}
 				.d2l-hierarchical-view-content.d2l-child-view-hide {
 					-webkit-animation: none;
 					animation: none;
-					-webkit-transform: translate(0, 0);
-					transform: translate(0, 0);
+					left: 0;
 				}
 			}
 			@keyframes show-child-view-animation {
-				0% { transform: translate(0, 0); }
-				100% { transform: translate(-100%, 0); }
+				0% { left: 0; }
+				100% { left: -100%; }
 			}
 			@-webkit-keyframes show-child-view-animation {
-				0% { -webkit-transform: translate(0, 0); }
-				100% { -webkit-transform: translate(-100%, 0); }
+				0% { left: 0; }
+				100% { left: -100%; }
 			}
 			@keyframes hide-child-view-animation {
-				0% { transform: translate(-100%, 0); }
-				100% { transform: translate(0, 0); }
+				0% { left: -100%; }
+				100% { left: 0; }
 			}
 			@-webkit-keyframes hide-child-view-animation {
-				0% { -webkit-transform: translate(-100%, 0); }
-				100% { -webkit-transform: translate(0, 0); }
+				0% { left: -100%; }
+				100% { left: 0; }
 			}
 		`;
 	}
@@ -97,10 +99,11 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	constructor() {
 		super();
 
-		/** @ignore */
-		this.childView = false;
 		/** @ignore */
 		this.hierarchicalView = true;
+		/** @ignore */
+		this.rootView = false;
+		this._childView = false;
 		this.__focusPrevious = false;
 		this.__intersectionObserver = null;
 		this.__isAutoSized = false;
@@ -111,7 +114,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this.__isChildView();
+		this.__updateRootView();
 
 		if (typeof(IntersectionObserver) === 'function') {
 			this.__intersectionObserver = new IntersectionObserver((entries) => {
@@ -135,7 +138,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			}
 			this.__startResizeObserver();
 
-			if (!this.childView) {
+			if (!this._childView) {
 				this.addEventListener('focus', this.__focusCapture, true);
 				this.addEventListener('focusout', this.__focusOutCapture, true);
 				this.__onWindowResize = this.__onWindowResize.bind(this);
@@ -167,7 +170,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 		const stopPropagation = e => {
 			// only stop for child views, so that Esc from root view can close dropdown
-			if (!this.childView) return;
+			if (!this._childView) return;
 			e.stopPropagation();
 		};
 
@@ -178,8 +181,14 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		this.addEventListener('keyup', stopPropagation);
 		this.addEventListener('keypress', stopPropagation);
 
-		this.__isChildView();
+		this.__updateRootView();
 
+		if (!this.rootView) return;
+		this.addEventListener('d2l-hierarchical-view-hide-complete', this.__stopPropagation);
+		this.addEventListener('d2l-hierarchical-view-hide-start', this.__stopPropagation);
+		this.addEventListener('d2l-hierarchical-view-show-complete', this.__stopPropagation);
+		this.addEventListener('d2l-hierarchical-view-show-start', this.__stopPropagation);
+		this.addEventListener('d2l-hierarchical-view-resize', this.__stopPropagation);
 	}
 
 	getActiveView() {
@@ -198,13 +207,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	}
 
 	getRootView() {
-		if (!this.childView) {
+		if (this.rootView || !this._childView) {
 			return this;
 		}
 		const rootView = findComposedAncestor(
 			this.parentNode,
 			(node) => {
-				return node.hierarchicalView && !node.childView;
+				return node.rootView;
 			}
 		);
 		return rootView;
@@ -228,7 +237,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	}
 
 	isActive() {
-		if ((this.childView && !this.shown) || !this.shadowRoot) {
+		if ((this._childView && !this.shown) || !this.shadowRoot) {
 			return false;
 		} else {
 			const content = this.shadowRoot.querySelector('.d2l-hierarchical-view-content');
@@ -289,7 +298,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	}
 
 	__autoSize(view) {
-		if (this.__isAutoSized || this.childView) return;
+		if (this.__isAutoSized || this._childView) return;
 		requestAnimationFrame(() => {
 
 			if (view.offsetParent === null) return;
@@ -420,17 +429,6 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		}
 	}
 
-	__isChildView() {
-		const parentView = findComposedAncestor(
-			this.parentNode,
-			(node) => { return node.hierarchicalView; }
-		);
-
-		if (parentView) {
-			this.childView = true;
-		}
-	}
-
 	__onHideStart(e) {
 		// re-enable focusable ancestor
 		this.__resetAncestorTabIndicies(e.detail.sourceView);
@@ -484,7 +482,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 	}
 
 	__onKeyDown(e) {
-		if (this.childView && e.keyCode === escapeKeyCode) {
+		if (this._childView && e.keyCode === escapeKeyCode) {
 			e.stopPropagation();
 			this.hide();
 			return;
@@ -498,7 +496,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		const rootTarget = e.composedPath()[0];
 		if (rootTarget === this || !rootTarget.hierarchicalView) return;
 
-		if (this.childView && !this.shown) {
+		if (this._childView && !this.shown) {
 			/* deep link scenario */
 			this.show(e.detail.data, e.detail.sourceView);
 		}
@@ -562,6 +560,10 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		this.__resizeObserver.observe(content);
 	}
 
+	__stopPropagation(e) {
+		e.stopPropagation();
+	}
+
 	__updateAncestorTabIndicies(view, sourceAttribute, targetAttribute) {
 		const rootView = this.getRootView();
 		let node = getComposedParent(view);
@@ -577,4 +579,15 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		}
 	}
 
+	__updateRootView() {
+		if (!this.hasAttribute('root-view')) {
+			const parentView = findComposedAncestor(
+				this.parentNode,
+				(node) => { return node.hierarchicalView; }
+			);
+			this.rootView = !parentView;
+		}
+		this._childView = !this.rootView;
+	}
+
 };

package/components/inputs/input-time.js

@@ -373,7 +373,8 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 						class="d2l-input-time-menu"
 						@d2l-menu-item-change="${this._handleDropdownChange}"
 						id="${this._dropdownId}"
-						role="listbox">
+						role="listbox"
+						root-view>
 						${menuItems}
 					</d2l-menu>
 					<div class="d2l-input-time-timezone d2l-body-small" id="${dropdownIdTimezone}" slot="footer">${this._timezone}</div>

package/components/menu/menu.js

@@ -128,7 +128,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 		changedProperties.forEach((oldValue, propName) => {
 			if (propName === 'label') this._labelChanged();
 
-			if (propName === 'childView' && this.childView) {
+			if (propName === 'rootView' && !this.rootView) {
 				const items = this.shadowRoot.querySelector('.d2l-menu-items');
 				items.insertBefore(this._createReturnItem(), items.childNodes[0]);
 
@@ -276,7 +276,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 			return;
 		}
 
-		if (this.childView && e.keyCode === keyCodes.LEFT) {
+		if (!this.rootView && e.keyCode === keyCodes.LEFT) {
 			e.stopPropagation();
 			this.hide();
 			return;
@@ -343,7 +343,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 	}
 
 	_onViewResize(e) {
-		if (this.childView) return;
+		if (!this.rootView) return;
 
 		const eventDetails = {
 			bubbles: true,

package/mixins/loading-complete/loading-complete-mixin.js

@@ -2,13 +2,6 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
 
-	#loadingCompleteResolve;
-
-	// eslint-disable-next-line sort-class-members/sort-class-members
-	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
-		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
-		: Promise.resolve();
-
 	get loadingComplete() {
 		return this.getLoadingComplete();
 	}
@@ -27,4 +20,11 @@ export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends su
 		return this.#loadingCompletePromise;
 	}
 
+	#loadingCompleteResolve;
+
+	// eslint-disable-next-line sort-class-members/sort-class-members
+	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
+		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
+		: Promise.resolve();
+
 });

package/mixins/localize/localize-mixin.js

@@ -5,8 +5,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinBaseClass extends getLocalizeClass(superclass) {
 
-	#updatedProperties = new Map();
-
 	constructor() {
 		super();
 		super.constructor.setLocalizeMarkup(localizeMarkup);
@@ -63,6 +61,8 @@ export const _LocalizeMixinBase = dedupeMixin(superclass => class LocalizeMixinB
 		this.requestUpdate('localize');
 	}
 
+	#updatedProperties = new Map();
+
 });
 
 export const LocalizeMixin = superclass => class extends _LocalizeMixinBase(superclass) {

package/package.json

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