@brightspace-ui/core 3.24.1 → 3.25.0

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

@@ -51,7 +51,8 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 				display: flex;
 				flex-wrap: wrap;
 			}
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container {
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container,
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container .d2l-input-date-time-range-end-container {
 				column-gap: 0.9rem;
 			}
 			.d2l-input-date-time-range-end-container {
@@ -114,10 +115,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/popover-mixin.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
-import { getComposedActiveElement, getPreviousFocusableAncestor } from '../../helpers/focus.js';
+import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
 const isSupported = ('popover' in HTMLElement.prototype);
@@ -13,16 +13,9 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {
-			/**
-			 * Whether the popover is open or not
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * Whether to disable auto-close/light-dismiss
-			 * @type {boolean}
-			 */
-			noAutoClose: { type: Boolean, reflect: true, attribute: 'no-auto-close' },
+			_noAutoClose: { state: true },
+			_noAutoFocus: { state: true },
+			_opened: { type: Boolean, reflect: true, attribute: '_opened' },
 			_useNativePopover: { type: String, reflect: true, attribute: 'popover' }
 		};
 	}
@@ -55,7 +48,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			:host(:not([popover])) {
 				z-index: 998; /* position on top of floating buttons */
 			}
-			:host([opened]) {
+			:host([_opened]) {
 				display: inline-block;
 			}
 
@@ -65,6 +58,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				border-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
 				box-shadow: var(--d2l-popover-shadow, var(--d2l-popover-default-shadow));
 				box-sizing: border-box;
+				outline: none;
 			}
 
 			@keyframes d2l-popover-animation {
@@ -72,8 +66,8 @@ export const PopoverMixin = superclass => class extends superclass {
 				100% { opacity: 1; transform: translate(0, 0); }
 			}
 			@media (prefers-reduced-motion: no-preference) {
-				:host([opened]) {
-					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 6000ms ease;
+				:host([_opened]) {
+					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 300ms ease;
 				}
 			}
 		`;
@@ -81,8 +75,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
-		this.noAutoClose = false;
-		this.opened = false;
+		this.configure();
 		this._useNativePopover = isSupported ? 'manual' : undefined;
 		this._handleAutoCloseClick = this._handleAutoCloseClick.bind(this);
 		this._handleAutoCloseFocus = this._handleAutoCloseFocus.bind(this);
@@ -90,7 +83,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.opened) this._addAutoCloseHandlers();
+		if (this._opened) this._addAutoCloseHandlers();
 	}
 
 	disconnectedCallback() {
@@ -101,29 +94,57 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has('opened')) {
+		if (changedProperties.has('_opened')) {
 
 			if (this._useNativePopover) {
-				if (this.opened) this.showPopover();
+				if (this._opened) this.showPopover();
 				else this.hidePopover();
 			}
 
-			this._previousFocusableAncestor = this.opened ? getPreviousFocusableAncestor(this, false, false) : null;
+			this._previousFocusableAncestor = this._opened ? getPreviousFocusableAncestor(this, false, false) : null;
+
+			if (this._opened) {
 
-			if (this.opened) {
 				this._opener = getComposedActiveElement();
 				this._addAutoCloseHandlers();
-				this._dismissibleId = setDismissible(() => this._close());
+				this._dismissibleId = setDismissible(() => this.close());
+				this._focusContent(this);
 				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
-			} else if (changedProperties.get('opened') !== undefined) {
+
+			} else if (changedProperties.get('_opened') !== undefined) {
+
 				this._removeAutoCloseHandlers();
 				this._clearDismissible();
+				this._focusOpener();
 				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
+
 			}
 
 		}
 	}
 
+	close() {
+		this._opened = false;
+		return this.updateComplete;
+	}
+
+	configure(properties) {
+		this._noAutoClose = properties?.noAutoClose ?? false;
+		this._noAutoFocus = properties?.noAutoFocus ?? false;
+		this._opened = properties?.opened ?? false;
+	}
+
+	open(applyFocus = true) {
+		this._applyFocus = applyFocus !== undefined ? applyFocus : true;
+		this._opened = true;
+		return this.updateComplete;
+	}
+
+	toggleOpen(applyFocus = true) {
+		if (this._opened) return this.close();
+		else return this.open(!this._noAutoFocus && applyFocus);
+	}
+
 	_addAutoCloseHandlers() {
 		this.addEventListener('blur', this._handleAutoCloseFocus, { capture: true });
 		document.body.addEventListener('focus', this._handleAutoCloseFocus, { capture: true });
@@ -136,25 +157,42 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._dismissibleId = null;
 	}
 
-	_close() {
-		const hide = () => {
-			this.opened = false;
-		};
+	_focusContent(container) {
+		if (this._noAutoFocus || this._applyFocus === false) return;
+
+		const focusable = getFirstFocusableDescendant(container);
+		if (focusable) {
+			// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
+			requestAnimationFrame(() => focusable.focus());
+		} else {
+			const content = this._getContentContainer();
+			content.setAttribute('tabindex', '-1');
+			content.focus();
+		}
+	}
+
+	_focusOpener() {
+		if (!document.activeElement) return;
+		if (!isComposedAncestor(this, getComposedActiveElement())) return;
+
+		this?._opener.focus();
+	}
 
-		hide();
+	_getContentContainer() {
+		return this.shadowRoot.querySelector('.content');
 	}
 
 	_handleAutoCloseClick(e) {
 
-		if (!this.opened || this.noAutoClose) return;
+		if (!this._opened || this._noAutoClose) return;
 
 		const rootTarget = e.composedPath()[0];
-		if (isComposedAncestor(this.shadowRoot.querySelector('.content'), rootTarget)
+		if (isComposedAncestor(this._getContentContainer(), rootTarget)
 			|| (this._opener !== document.body && isComposedAncestor(this._opener, rootTarget))) {
 			return;
 		}
 
-		this._close();
+		this.close();
 	}
 
 	_handleAutoCloseFocus() {
@@ -162,8 +200,8 @@ export const PopoverMixin = superclass => class extends superclass {
 		// 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
+			if (!this._opened
+				|| this._noAutoClose
 				|| !document.activeElement
 				|| document.activeElement === this._previousFocusableAncestor
 				|| document.activeElement === document.body) {
@@ -171,12 +209,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 
 			const activeElement = getComposedActiveElement();
-			if (isComposedAncestor(this.shadowRoot.querySelector('.content'), activeElement)
+			if (isComposedAncestor(this._getContentContainer(), activeElement)
 				|| activeElement === this._opener) {
 				return;
 			}
 
-			this._close();
+			this.close();
 		}, 0);
 
 	}

package/custom-elements.json

@@ -10723,6 +10723,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "no-auto-focus",
+          "description": "Whether to disable auto-focus on the first focusable element when opened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the popover is open or not",
@@ -10738,6 +10744,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noAutoFocus",
+          "attribute": "no-auto-focus",
+          "description": "Whether to disable auto-focus on the first focusable element when opened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/package.json

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