@brightspace-ui/core 3.24.0 → 3.25.0

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

@@ -49,9 +49,6 @@ export const dropdownContentStyles = css`
 		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
-	:host([_fixed-positioning][opened-above]) {
-		bottom: 0;
-	}
 
 	:host([data-mobile][opened]:not([mobile-tray])) {
 		animation: var(--d2l-dropdown-animation-name) 300ms ease;
@@ -64,6 +61,11 @@ export const dropdownContentStyles = css`
 		top: auto;
 	}
 
+	:host([_fixed-positioning][opened-above]),
+	:host([_fixed-positioning][data-mobile][opened-above]:not([mobile-tray])) {
+		bottom: 0;
+	}
+
 	.d2l-dropdown-content-pointer {
 		clip: rect(-5px, 21px, 8px, -7px);
 		display: inline-block;

package/components/filter/README.md

@@ -301,7 +301,7 @@ The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get th
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable filter value which expands to allow the user to select a date range using either the `d2l-input-date-time-range` or `d2l-input-date-range` component (depending on the `type` of the component). Selection triggers the `d2l-filter-change` event, with `start-value` and `end-value` (in UTC) being included in the changes for the `selected` item.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value align:start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -311,9 +311,12 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 </script>
 <d2l-filter>
   <d2l-filter-dimension-set key="dates" text="Dates">
-    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours"></d2l-filter-dimension-set-date-text-value>
-    <d2l-filter-dimension-set-date-text-value key="14days" range="14days"></d2l-filter-dimension-set-date-text-value>
-    <d2l-filter-dimension-set-date-time-range-value key="custom" selected></d2l-filter-dimension-set-date-time-range-value>
+    <d2l-filter-dimension-set-value key="60days" text="Last 60 days"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour"></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
+    <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>
 </d2l-filter>
 ```

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' }
 		};
 	}
@@ -30,6 +23,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	static get styles() {
 		return css`
 			:host {
+				--d2l-popover-default-animation-name: d2l-popover-animation;
 				--d2l-popover-default-background-color: #ffffff;
 				--d2l-popover-default-border-color: var(--d2l-color-mica);
 				--d2l-popover-default-border-radius: 0.3rem;
@@ -54,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;
 			}
 
@@ -64,14 +58,24 @@ 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 {
+				0% { opacity: 0; transform: translate(0, -10px); }
+				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)) 300ms ease;
+				}
 			}
 		`;
 	}
 
 	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);
@@ -79,7 +83,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.opened) this._addAutoCloseHandlers();
+		if (this._opened) this._addAutoCloseHandlers();
 	}
 
 	disconnectedCallback() {
@@ -90,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 });
@@ -125,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() {
@@ -151,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) {
@@ -160,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.0",
+  "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",