@brightspace-ui/core 3.176.5 → 3.176.7

package/components/dropdown/demo/dropdown-menu-demo-view.js

@@ -0,0 +1,37 @@
+import '../../colors/colors.js';
+import '../../button/button-subtle.js';
+import { css, html, LitElement } from 'lit';
+import { HierarchicalViewMixin } from '../../hierarchical-view/hierarchical-view-mixin.js';
+import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
+
+class DemoView extends LocalizeCoreElement(HierarchicalViewMixin(LitElement)) {
+
+	static get styles() {
+		return [ super.styles,
+			css`
+				:host {
+					box-sizing: border-box;
+					color: var(--d2l-color-ferrite);
+					cursor: default;
+				}
+				.d2l-hierarchical-view-content {
+					padding: 12px;
+				}
+			`
+		];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-hierarchical-view-content">
+				<div>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+				<div>
+					<d2l-button-subtle text="${this.localize('components.pager-load-more.action')}"></d2l-button-subtle>
+				</div>
+			</div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-dropdown-menu-demo-view', DemoView);

package/components/dropdown/demo/dropdown-menu.html

@@ -13,6 +13,7 @@
 		import '../../menu/menu-item-radio.js';
 		import '../dropdown.js';
 		import '../dropdown-menu.js';
+		import './dropdown-menu-demo-view.js';
 	</script>
 </head>
 
@@ -201,6 +202,24 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Custom View</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-dropdown>
+					<button class="d2l-dropdown-opener">Open it!</button>
+					<d2l-dropdown-menu>
+						<d2l-menu label="Astronomy">
+							<d2l-menu-item text="Introduction"></d2l-menu-item>
+							<d2l-menu-item text="Searching for the Heavens">
+								<d2l-dropdown-menu-demo-view></d2l-dropdown-menu-demo-view>
+							</d2l-menu-item>
+							<d2l-menu-item text="The Solar System"></d2l-menu-item>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

package/components/dropdown/dropdown-popover-mixin.js

@@ -351,7 +351,9 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeaderSlotContent = e.target.assignedNodes().length !== 0;
 	}
 
-	#handlePopoverClose() {
+	#handlePopoverClose(e) {
+		// ignore popover close events from nested popovers
+		if (e.target !== this) return;
 		setTimeout(() => {
 			this.opened = false;
 
@@ -365,7 +367,9 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter', { detail:{ applyFocus: e.detail.applyFocus } }));
 	}
 
-	#handlePopoverOpen() {
+	#handlePopoverOpen(e) {
+		// ignore popover open events from nested popovers
+		if (e.target !== this) return;
 		this.opened = true;
 
 		if (!this.noAutoFit && this.#contentElement) {

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

@@ -1,12 +1,15 @@
 import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { css } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const __nativeFocus = document.createElement('div').focus;
 const escapeKeyCode = 27;
 
+const useResizeFix = getFlag('GAUD-8969-hierarchical-view-resize', true);
+
 export const HierarchicalViewMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -523,7 +526,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		}
 
 		if (e.detail.isSource && this.__getParentViewFromEvent(e) === this) {
-			e.detail.sourceView.__dispatchViewResize();
+			if (useResizeFix) {
+				requestAnimationFrame(() => {
+					e.detail.sourceView.__dispatchViewResize();
+				});
+			} else {
+				e.detail.sourceView.__dispatchViewResize();
+			}
 		}
 
 	}

package/custom-elements.json

@@ -2679,6 +2679,10 @@
         }
       ]
     },
+    {
+      "name": "d2l-dropdown-menu-demo-view",
+      "path": "./components/dropdown/demo/dropdown-menu-demo-view.js"
+    },
     {
       "name": "d2l-dropdown-button-subtle",
       "path": "./components/dropdown/dropdown-button-subtle.js",

package/package.json

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