@brightspace-ui/core 3.21.2 → 3.21.4

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -70,7 +70,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
-		this._minWidth = 375;
+		this._minWidth = 390;
 		this._noSearchSupport = true;
 
 		this._handleDateChange = this._handleDateChange.bind(this);

package/components/filter/filter.js

@@ -149,6 +149,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				margin-inline-start: -2rem;
 				padding-block: 0.5rem;
 			}
+			d2l-list-item.expanding-content {
+				overflow-y: hidden;
+			}
 
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
@@ -605,7 +608,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		: nothing}
 					</div>
 					${item.additionalContent ? html`
-						<d2l-expand-collapse-content ?expanded="${item.selected}">
+						<d2l-expand-collapse-content 
+							?expanded="${item.selected}" 
+							@d2l-expand-collapse-content-collapse="${this._handleExpandCollapse}"
+							@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}">
 							${item.additionalContent()}
 						</d2l-expand-collapse-content>
 					` : nothing}
@@ -841,6 +847,15 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		));
 	}
 
+	async _handleExpandCollapse(e) {
+		const eventPromise = e.target.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
+		const parentListItem = e.target.closest('d2l-list-item');
+		parentListItem.classList.add('expanding-content');
+
+		await eventPromise;
+		parentListItem.classList.remove('expanding-content');
+	}
+
 	_handleSearch(e) {
 		const dimension = this._getActiveDimension();
 		const searchValue = e.detail.value.trim();

package/components/inputs/input-date-time-range-to.js

@@ -41,65 +41,48 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 			:host([top-margin]) {
 				margin-top: calc(0.9rem - 7px);
 			}
+			:host(:not([display-to])) .d2l-input-date-time-range-to-to {
+				display: none;
+			}
 
+			/* flex case (not wrapped) */
 			.d2l-input-date-time-range-to-container {
+				column-gap: 1.5rem;
 				display: flex;
 				flex-wrap: wrap;
-				margin-bottom: -1.2rem;
 			}
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container {
+				column-gap: 0.9rem;
+			}
+			.d2l-input-date-time-range-end-container {
+				display: flex;
+			}
+			.d2l-input-date-time-range-end-container ::slotted(*) {
+				align-self: flex-end;
+			}
+
+			/* block case (wrapped) */
 			.d2l-input-date-time-range-to-container-block.d2l-input-date-time-range-to-container {
 				display: block;
+				margin-bottom: -1.2rem;
 			}
-
-			.d2l-input-date-time-range-start-container {
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
 				margin-bottom: 1.2rem;
-				margin-right: 1.5rem;
-			}
-			:host([dir="rtl"]) .d2l-input-date-time-range-start-container {
-				margin-left: 1.5rem;
-				margin-right: 0;
+				margin-inline: 0;
 			}
-			:host([display-to]) .d2l-input-date-time-range-start-container {
+			:host([display-to]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
 				margin-bottom: 0.6rem;
 			}
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block) > .d2l-input-date-time-range-start-container {
-				margin-right: 0.9rem;
-			}
-			:host([display-to][dir="rtl"]) div:not(.d2l-input-date-time-range-to-container-block) > .d2l-input-date-time-range-start-container {
-				margin-left: 0.9rem;
-				margin-right: 0;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container,
-			:host([dir="rtl"]) .d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-start-container {
-				margin-left: 0;
-				margin-right: 0;
-			}
-
-			:host(:not([display-to])) .d2l-input-date-time-range-to-to {
-				display: none;
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
+				display: block;
+				margin-bottom: 1.2rem;
 			}
-			.d2l-input-date-time-range-to-to {
+			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-to-to {
 				display: inline-block;
 				margin-bottom: 0.6rem;
-				margin-right: 0.9rem;
 				margin-top: auto;
 				vertical-align: top;
 			}
-			:host([dir="rtl"]) .d2l-input-date-time-range-to-to {
-				margin-left: 0.9rem;
-				margin-right: 0;
-			}
-
-			.d2l-input-date-time-range-end-container {
-				display: flex;
-				margin-bottom: 1.2rem;
-			}
-			.d2l-input-date-time-range-to-container-block .d2l-input-date-time-range-end-container {
-				display: block;
-			}
-			.d2l-input-date-time-range-end-container ::slotted(*) {
-				align-self: flex-end;
-			}
 		`];
 	}
 
@@ -131,10 +114,10 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 				<div class="d2l-input-date-time-range-start-container">
 					<slot name="left"></slot>
 				</div>
-				<div class="d2l-input-date-time-range-end-container">
 					<div class="d2l-body-small d2l-skeletize d2l-input-date-time-range-to-to">
 						${this.localize('components.input-date-time-range-to.to')}
 					</div>
+				<div class="d2l-input-date-time-range-end-container">
 					<slot name="right"></slot>
 				</div>
 			</div>

package/components/popover/demo/popover.html

@@ -25,9 +25,9 @@
 					<d2l-button-subtle id="close1" text="Close"></d2l-button-subtle>
 				</d2l-test-popover>
 				<script>
-					const popover = document.querySelector('#popover1');
-					document.querySelector('#open1').addEventListener('click', () => popover.opened = true);
-					document.querySelector('#close1').addEventListener('click', () => popover.opened = false);
+					const popover1 = document.querySelector('#popover1');
+					document.querySelector('#open1').addEventListener('click', () => popover1.opened = !popover1.opened);
+					document.querySelector('#close1').addEventListener('click', () => popover1.opened = false);
 				</script>
 			</template>
 		</d2l-demo-snippet>

package/components/popover/popover-mixin.js

@@ -1,5 +1,8 @@
 import '../colors/colors.js';
+import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
+import { getComposedActiveElement, getPreviousFocusableAncestor } from '../../helpers/focus.js';
+import { isComposedAncestor } from '../../helpers/dom.js';
 
 const isSupported = ('popover' in HTMLElement.prototype);
 
@@ -15,7 +18,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
-			_useNativePopover: { type: Boolean, reflect: true, attribute: 'popover' }
+			/**
+			 * Whether to disable auto-close/light-dismiss
+			 * @type {boolean}
+			 */
+			noAutoClose: { type: Boolean, reflect: true, attribute: 'no-auto-close' },
+			_useNativePopover: { type: String, reflect: true, attribute: 'popover' }
 		};
 	}
 
@@ -62,34 +70,110 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
+		this.noAutoClose = false;
 		this.opened = false;
-		this._useNativePopover = isSupported;
+		this._useNativePopover = isSupported ? 'manual' : undefined;
+		this._handleAutoCloseClick = this._handleAutoCloseClick.bind(this);
+		this._handleAutoCloseFocus = this._handleAutoCloseFocus.bind(this);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.opened) this._addAutoCloseHandlers();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this._removeAutoCloseHandlers();
+		this._clearDismissible();
 	}
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (changedProperties.has('opened')) {
 
+			if (this._useNativePopover) {
+				if (this.opened) this.showPopover();
+				else this.hidePopover();
+			}
+
+			this._previousFocusableAncestor = this.opened ? getPreviousFocusableAncestor(this, false, false) : null;
+
 			if (this.opened) {
+				this._opener = getComposedActiveElement();
+				this._addAutoCloseHandlers();
+				this._dismissibleId = setDismissible(() => this._close());
 				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
 			} else if (changedProperties.get('opened') !== undefined) {
+				this._removeAutoCloseHandlers();
+				this._clearDismissible();
 				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
 			}
 
-			if (this._useNativePopover) {
-				if (this.opened) this.showPopover();
-				else this.hidePopover();
-			}
+		}
+	}
+
+	_addAutoCloseHandlers() {
+		this.addEventListener('blur', this._handleAutoCloseFocus, { capture: true });
+		document.body.addEventListener('focus', this._handleAutoCloseFocus, { capture: true });
+		document.addEventListener('click', this._handleAutoCloseClick, { capture: true });
+	}
+
+	_clearDismissible() {
+		if (!this._dismissibleId) return;
+		clearDismissible(this._dismissibleId);
+		this._dismissibleId = null;
+	}
+
+	_close() {
+		const hide = () => {
+			this.opened = false;
+		};
+
+		hide();
+	}
 
+	_handleAutoCloseClick(e) {
+
+		if (!this.opened || this.noAutoClose) return;
+
+		const rootTarget = e.composedPath()[0];
+		if (isComposedAncestor(this.shadowRoot.querySelector('.content'), rootTarget)
+			|| (this._opener !== document.body && isComposedAncestor(this._opener, rootTarget))) {
+			return;
 		}
+
+		this._close();
+	}
+
+	_handleAutoCloseFocus() {
+
+		// todo: try to use relatedTarget instead - this logic is largely copied as-is from dropdown simply to mitigate risk of this fragile code
+		setTimeout(() => {
+			// we ignore focusable ancestors othrwise the popover will close when user clicks empty space inside the popover
+			if (!this.opened
+				|| this.noAutoClose
+				|| !document.activeElement
+				|| document.activeElement === this._previousFocusableAncestor
+				|| document.activeElement === document.body) {
+				return;
+			}
+
+			const activeElement = getComposedActiveElement();
+			if (isComposedAncestor(this.shadowRoot.querySelector('.content'), activeElement)
+				|| activeElement === this._opener) {
+				return;
+			}
+
+			this._close();
+		}, 0);
+
+	}
+
+	_removeAutoCloseHandlers() {
+		this.removeEventListener('blur', this._handleAutoCloseFocus, { capture: true });
+		document.body?.removeEventListener('focus', this._handleAutoCloseFocus, { capture: true }); // DE41322: document.body can be null in some scenarios
+		document.removeEventListener('click', this._handleAutoCloseClick, { capture: true });
 	}
 
 	_renderPopover() {

package/custom-elements.json

@@ -10717,6 +10717,12 @@
       "name": "d2l-test-popover",
       "path": "./components/popover/test/popover.js",
       "attributes": [
+        {
+          "name": "no-auto-close",
+          "description": "Whether to disable auto-close/light-dismiss",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the popover is open or not",
@@ -10725,6 +10731,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "noAutoClose",
+          "attribute": "no-auto-close",
+          "description": "Whether to disable auto-close/light-dismiss",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/lang/en.js

@@ -29,8 +29,8 @@ export default {
 	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} day} other {Last {num} days}}",
 	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} to {endValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Start: {startValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "End: {endValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Start Date: {startValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "End Date: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/package.json

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