@brightspace-ui/core 3.88.4 → 3.89.0

package/components/popover/popover-mixin.js

@@ -63,7 +63,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				--d2l-popover-default-border-color: var(--d2l-color-mica);
 				--d2l-popover-default-border-radius: 0.3rem;
 				--d2l-popover-default-foreground-color: var(--d2l-color-ferrite);
-				--d2l-popover-default-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+				--d2l-popover-default-shadow-color: rgba(0, 0, 0, 0.15);
 				background-color: transparent; /* override popover default */
 				border: none; /* override popover */
 				box-sizing: border-box;
@@ -75,8 +75,17 @@ export const PopoverMixin = superclass => class extends superclass {
 				overflow: visible; /* override popover */
 				padding: 0; /* override popover */
 				position: fixed; /* normalize popover */
+				text-align: start;
 				width: fit-content; /* normalize popover */
 			}
+			:host([theme="dark"]) {
+				--d2l-popover-default-animation-name: d2l-popover-animation-dark;
+				--d2l-popover-default-background-color: #333536; /* tungsten @ 70% */
+				--d2l-popover-default-border-color: var(--d2l-color-tungsten);
+				--d2l-popover-default-foreground-color: var(--d2l-color-sylvite);
+				--d2l-popover-default-shadow-color: rgba(0, 0, 0, 1);
+				opacity: 0.9;
+			}
 			:host([hidden]) {
 				display: none;
 			}
@@ -99,8 +108,9 @@ export const PopoverMixin = superclass => class extends superclass {
 				background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
 				border: 1px solid var(--d2l-popover-border-color, var(--d2l-popover-default-border-color));
 				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-shadow: 0 2px 12px 0 var(--d2l-popover-shadow-color, var(--d2l-popover-default-shadow-color));
 				box-sizing: border-box;
+				display: flex;
 				max-width: 370px;
 				min-width: 70px;
 				width: 100vw;
@@ -109,6 +119,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				box-sizing: border-box;
 				display: inline-block;
 				max-width: 100%;
+				min-width: inherit;
 				outline: none;
 				overflow-y: auto;
 			}
@@ -142,6 +153,10 @@ export const PopoverMixin = superclass => class extends superclass {
 				0% { opacity: 0; transform: translate(0, -10px); }
 				100% { opacity: 1; transform: translate(0, 0); }
 			}
+			@keyframes d2l-popover-animation-dark {
+				0% { opacity: 0; transform: translate(0, -10px); }
+				100% { opacity: 0.9; 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;
@@ -259,6 +274,8 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		await this.updateComplete; // wait before applying focus to opener
 		this.#focusOpener();
+
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
 
 	}
@@ -290,7 +307,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._trapFocus = properties?.trapFocus ?? false;
 	}
 
-	async open(applyFocus = true) {
+	async open(opener, applyFocus = true) {
 		if (this._opened) return;
 
 		const ifrauBackdropService = await tryGetIfrauBackdropService();
@@ -306,10 +323,10 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this._previousFocusableAncestor = getPreviousFocusableAncestor(this, false, false);
 
-		this._opener = getComposedActiveElement();
+		this._opener = opener;
 		this.#addAutoCloseHandlers();
 
-		await this.#position();
+		await this.position();
 
 		this._showBackdrop = this._mobile && this._mobileTrayLocation;
 		if (ifrauBackdropService && this._showBackdrop) {
@@ -322,10 +339,99 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this.#addRepositionHandlers();
 
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
 
 	}
 
+	async position(contentRect, options) {
+		if (!this._opener) return;
+
+		options = Object.assign({ updateLocation: true, updateHeight: true }, options);
+
+		const content = this.#getContentContainer();
+
+		if (!this._noAutoFit && options.updateHeight) {
+			this._contentHeight = null;
+		}
+
+		// don't let popover content horizontally overflow viewport
+		this._width = null;
+
+		await this.updateComplete;
+
+		const adjustPosition = async() => {
+
+			const scrollHeight = document.documentElement.scrollHeight;
+			const openerRect = this._opener.getBoundingClientRect();
+			contentRect = contentRect ?? content.getBoundingClientRect();
+
+			const height = this._minHeight ?? Math.min(this._maxHeight ?? Number.MAX_VALUE, contentRect.height);
+
+			const spaceRequired = {
+				height: height + 10,
+				width: contentRect.width
+			};
+
+			// space in viewport
+			const spaceAround = this.#constrainSpaceAround({
+				// allow for opener offset + outer margin
+				above: openerRect.top - this._offset - this._margin,
+				// allow for opener offset + outer margin
+				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
+				// allow for outer margin
+				left: openerRect.left - 20,
+				// allow for outer margin
+				right: document.documentElement.clientWidth - openerRect.right - 15
+			}, spaceRequired, openerRect);
+
+			// space in document
+			const spaceAroundScroll = this.#constrainSpaceAround({
+				above: openerRect.top + document.documentElement.scrollTop,
+				below: scrollHeight - openerRect.bottom - document.documentElement.scrollTop
+			}, spaceRequired, openerRect);
+
+			if (options.updateLocation) {
+				this._location = this.#getLocation(spaceAround, spaceAroundScroll, spaceRequired);
+			}
+
+			this._position = this.#getPosition(spaceAround, openerRect, contentRect);
+			if (!this._noPointer) this._pointerPosition = this.#getPointerPosition(openerRect);
+
+			if (options.updateHeight) {
+
+				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
+				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
+
+				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
+					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
+					this._contentHeight = this._maxHeight !== null && availableHeight > this._maxHeight
+						? this._maxHeight - 2 : availableHeight;
+
+					// ensure the content height has updated when the __toggleScrollStyles event handler runs
+					await this.updateComplete;
+				}
+
+				// todo: handle inline-start and inline-end locations
+
+			}
+
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-popover-position', { bubbles: true, composed: true }));
+
+		};
+
+		const scrollWidth = content.scrollWidth;
+		const availableWidth = window.innerWidth - 40;
+
+		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth);
+
+		await this.updateComplete;
+
+		await adjustPosition();
+
+	}
+
 	renderPopover(content) {
 
 		const mobileTrayLocation = this._mobile ? this._mobileTrayLocation : null;
@@ -392,12 +498,12 @@ export const PopoverMixin = superclass => class extends superclass {
 	async resize() {
 		if (!this._opened) return;
 		this._showBackdrop = this._mobile && this._mobileTrayLocation;
-		await this.#position();
+		await this.position();
 	}
 
-	toggleOpen(applyFocus = true) {
+	toggleOpen(opener, applyFocus = true) {
 		if (this._opened) return this.close();
-		else return this.open(!this._noAutoFocus && applyFocus);
+		else return this.open(opener, (!this._noAutoFocus && applyFocus));
 	}
 
 	#ifrauContextInfo;
@@ -864,7 +970,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	#handleFocusTrapEnter() {
 		this.#focusContent(this.#getContentContainer());
 
-		/** Dispatched when user focus enters the popover (trap-focus option only) */
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-popover-focus-enter', { detail: { applyFocus: this._applyFocus } }));
 	}
 
@@ -872,7 +978,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._mobile = this.#mediaQueryList.matches;
 		if (this._opened) {
 			this._showBackdrop = this._mobile && this._mobileTrayLocation;
-			await this.#position();
+			await this.position();
 		}
 	}
 
@@ -880,94 +986,6 @@ export const PopoverMixin = superclass => class extends superclass {
 		this.resize();
 	}
 
-	async #position(contentRect, options) {
-		if (!this._opener) return;
-
-		options = Object.assign({ updateLocation: true, updateHeight: true }, options);
-
-		const content = this.#getContentContainer();
-
-		if (!this._noAutoFit && options.updateHeight) {
-			this._contentHeight = null;
-		}
-
-		// don't let popover content horizontally overflow viewport
-		this._width = null;
-
-		await this.updateComplete;
-
-		const adjustPosition = async() => {
-
-			const scrollHeight = document.documentElement.scrollHeight;
-			const openerRect = this._opener.getBoundingClientRect();
-			contentRect = contentRect ?? content.getBoundingClientRect();
-
-			const height = this._minHeight ?? Math.min(this._maxHeight ?? Number.MAX_VALUE, contentRect.height);
-
-			const spaceRequired = {
-				height: height + 10,
-				width: contentRect.width
-			};
-
-			// space in viewport
-			const spaceAround = this.#constrainSpaceAround({
-				// allow for opener offset + outer margin
-				above: openerRect.top - this._offset - this._margin,
-				// allow for opener offset + outer margin
-				below: window.innerHeight - openerRect.bottom - this._offset - this._margin,
-				// allow for outer margin
-				left: openerRect.left - 20,
-				// allow for outer margin
-				right: document.documentElement.clientWidth - openerRect.right - 15
-			}, spaceRequired, openerRect);
-
-			// space in document
-			const spaceAroundScroll = this.#constrainSpaceAround({
-				above: openerRect.top + document.documentElement.scrollTop,
-				below: scrollHeight - openerRect.bottom - document.documentElement.scrollTop
-			}, spaceRequired, openerRect);
-
-			if (options.updateLocation) {
-				this._location = this.#getLocation(spaceAround, spaceAroundScroll, spaceRequired);
-			}
-
-			this._position = this.#getPosition(spaceAround, openerRect, contentRect);
-			if (!this._noPointer) this._pointerPosition = this.#getPointerPosition(openerRect);
-
-			if (options.updateHeight) {
-
-				// calculate height available to the popover contents for overflow because that is the only area capable of scrolling
-				const availableHeight = (this._location === 'block-start') ? spaceAround.above : spaceAround.below;
-
-				if (!this._noAutoFit && availableHeight && availableHeight > 0) {
-					// only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
-					this._contentHeight = this._maxHeight !== null && availableHeight > this._maxHeight
-						? this._maxHeight - 2 : availableHeight;
-
-					// ensure the content height has updated when the __toggleScrollStyles event handler runs
-					await this.updateComplete;
-				}
-
-				// todo: handle inline-start and inline-end locations
-
-			}
-
-			/** Dispatched when the popover position finishes adjusting */
-			this.dispatchEvent(new CustomEvent('d2l-popover-position', { bubbles: true, composed: true }));
-
-		};
-
-		const scrollWidth = content.scrollWidth;
-		const availableWidth = window.innerWidth - 40;
-
-		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth);
-
-		await this.updateComplete;
-
-		await adjustPosition();
-
-	}
-
 	#removeAutoCloseHandlers() {
 		this.removeEventListener('blur', this.#handleAutoCloseFocusBound, { capture: true });
 		document.body?.removeEventListener('focus', this.#handleAutoCloseFocusBound, { capture: true }); // DE41322: document.body can be null in some scenarios
@@ -979,7 +997,9 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	#removeRepositionHandlers() {
-		this._openerIntersectionObserver?.unobserve(this._opener);
+		if (this._opener) {
+			this._openerIntersectionObserver?.unobserve(this._opener);
+		}
 		this._scrollablesObserved?.forEach(node => {
 			node.removeEventListener('scroll', this.#repositionBound);
 		});
@@ -992,7 +1012,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		// throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
 		if (!this._repositioning) {
 			requestAnimationFrame(() => {
-				this.#position(undefined, { updateLocation: false, updateHeight: false });
+				this.position(undefined, { updateLocation: false, updateHeight: false });
 				this._repositioning = false;
 			});
 		}

package/custom-elements.json

@@ -2554,7 +2554,7 @@
     {
       "name": "d2l-dropdown-content",
       "path": "./components/dropdown/dropdown-content.js",
-      "description": "A generic container for dropdown content.  It provides behavior such as sizing,  positioning, and managing focus gain/loss.",
+      "description": "A generic container for dropdown content. It provides behavior such as sizing,  positioning, and managing focus gain/loss.",
       "attributes": [
         {
           "name": "align",
@@ -2599,7 +2599,8 @@
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "no-auto-close",
@@ -2715,7 +2716,8 @@
           "name": "opened",
           "attribute": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "noAutoClose",
@@ -2973,7 +2975,8 @@
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "no-auto-close",
@@ -3089,7 +3092,8 @@
           "name": "opened",
           "attribute": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "noAutoClose",
@@ -3347,7 +3351,8 @@
         {
           "name": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "no-auto-close",
@@ -3463,7 +3468,8 @@
           "name": "opened",
           "attribute": "opened",
           "description": "Whether the dropdown is open or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "noAutoClose",
@@ -10681,12 +10687,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "opened",
-          "description": "Whether the popover is open or not",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "trap-focus",
           "description": "Whether to render a d2l-focus-trap around the content",
@@ -10737,6 +10737,10 @@
           "description": "Position the popover to span from the opener edge to this grid line. Default is \"all\" (centered).",
           "type": "'start'|'end'|'all'"
         },
+        {
+          "name": "opened",
+          "type": "boolean | undefined"
+        },
         {
           "name": "noAutoClose",
           "attribute": "no-auto-close",
@@ -10758,13 +10762,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "opened",
-          "attribute": "opened",
-          "description": "Whether the popover is open or not",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "trapFocus",
           "attribute": "trap-focus",
@@ -10772,22 +10769,6 @@
           "type": "boolean",
           "default": "false"
         }
-      ],
-      "events": [
-        {
-          "name": "d2l-popover-close"
-        },
-        {
-          "name": "d2l-popover-open"
-        },
-        {
-          "name": "d2l-popover-focus-enter",
-          "description": "Dispatched when user focus enters the popover (trap-focus option only)"
-        },
-        {
-          "name": "d2l-popover-position",
-          "description": "Dispatched when the popover position finishes adjusting"
-        }
       ]
     },
     {

package/helpers/flags.js

@@ -0,0 +1 @@
+export const getFlag = (key, defaultValue) => window.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;

package/package.json

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