@brightspace-ui/core 3.60.1 → 3.61.0

package/components/filter/demo/filter.html

@@ -16,7 +16,7 @@
 		import './filter-load-more-demo.js';
 	</script>
 	<script>
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => false } } } } };
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
@@ -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/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' },
 		};
 	}
 
@@ -97,10 +98,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 +113,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 +137,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 +169,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 +180,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 +206,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 +236,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 +297,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 +428,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 +481,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 +495,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 +559,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 +578,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/package.json

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