@brightspace-ui/core 3.123.0 → 3.123.2

package/components/collapsible-panel/collapsible-panel.js

@@ -7,6 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { isComposedAncestor } from '../../helpers/dom.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
@@ -84,6 +85,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			 * @type {boolean}
 			 */
 			noSticky: { attribute: 'no-sticky', type: Boolean },
+			_clicked: { state: true },
 			_focused: { state: true },
 			_hasBefore: { state: true },
 			_hasSummary: { state: true },
@@ -321,6 +323,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		this.paddingType = 'default';
 		this.type = 'default';
 		this.noSticky = false;
+		this._clicked = false;
 		this._focused = false;
 		this._group = undefined;
 		this._groupSubscription = new EventSubscriberController(this, 'collapsible-panel-group', {
@@ -346,7 +349,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	render() {
 		const classes = {
 			'd2l-collapsible-panel': true,
-			'focused': this._focused,
+			'focused': this._focused && !this._clicked,
 			'has-summary': this._hasSummary,
 			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
@@ -414,13 +417,6 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		));
 	}
 
-	_handleHeaderClick(e) {
-		if (this.expanded) {
-			this._toggleExpand();
-			e.stopPropagation();
-		}
-	}
-
 	_handleHeaderSecondaryClick(e) {
 		const header = this.shadowRoot.querySelector('.d2l-collapsible-panel-header-secondary');
 		if (e.target !== header) {
@@ -429,10 +425,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	}
 
 	_handlePanelClick(e) {
-		if (!this.expanded) {
-			this._toggleExpand();
-			e.stopPropagation();
-		}
+		this._clicked = e.detail && e.detail > 0; // detect if click event is from a mouse
+		const content = this.shadowRoot.querySelector('.d2l-collapsible-panel-content');
+		if (e.target !== content && !isComposedAncestor(content, e.target)) this._toggleExpand();
 	}
 
 	_handleSummarySlotChange(e) {
@@ -442,6 +437,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	_onBlur() {
 		this._focused = false;
+		this._clicked = false;
 	}
 
 	_onFocus() {
@@ -450,7 +446,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	_renderHeader() {
 		return html`
-			<div class="d2l-collapsible-panel-header" @click="${this._handleHeaderClick}">
+			<div class="d2l-collapsible-panel-header">
 				<div class="d2l-collapsible-panel-before">
 					<slot name="before" @slotchange="${this._handleBeforeSlotChange}"></slot>
 				</div>
@@ -488,7 +484,6 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				class="d2l-collapsible-panel-opener"
 				aria-expanded="${this.expanded}"
 				type="button"
-				@click="${this._handleHeaderClick}"
 				@focus="${this._onFocus}"
 				@blur="${this._onBlur}"
 				aria-label="${ifDefined(this.expandCollapseLabel)}">${this.panelTitle}</button>

package/components/dialog/demo/dialog.html

@@ -329,6 +329,36 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Simple dialog with longer loading content</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button>Show Dialog</d2l-button>
+					<d2l-dialog title-text="Fullscreen Title">
+					</d2l-dialog>
+					<d2l-dropdown style="display: none; padding: 30px;">
+						<button class="d2l-dropdown-opener">Open!</button>
+						<d2l-dropdown-content>
+							<a href=" " style="display: block;">A Link</a>
+							Some content... Click me!
+						</d2l-dropdown-content>
+					</d2l-dropdown>
+
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button').addEventListener('click', () => {
+								demo.querySelector('d2l-dialog').opened = true;
+								setTimeout(() => {
+									demo.querySelector('d2l-dropdown').style.display = 'block';
+									demo.querySelector('d2l-dialog').appendChild(demo.querySelector('d2l-dropdown'));
+									demo.querySelector('d2l-dialog').resize();
+								}, 1000);
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

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

@@ -569,7 +569,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			const activeElement = getComposedActiveElement();
 
 			if (isComposedAncestor(this, activeElement)
-				|| isComposedAncestor(this.__getOpener(), activeElement)) {
+				|| isComposedAncestor(this.__getOpener(), activeElement)
+				|| activeElement === this.__previousFocusableAncestor) {
 				return;
 			}
 			this.close();

package/components/popover/popover-mixin.js

@@ -954,7 +954,9 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 
 			const activeElement = getComposedActiveElement();
-			if (isComposedAncestor(this, activeElement) || isComposedAncestor(this._opener, activeElement)) {
+			if (isComposedAncestor(this, activeElement)
+				|| isComposedAncestor(this._opener, activeElement)
+				|| activeElement === this._previousFocusableAncestor) {
 				return;
 			}
 

package/package.json

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