@brightspace-ui/core 3.286.0 → 3.286.2

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

@@ -186,9 +186,17 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeaderSlotContent = false;
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.disconnect();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.#contentElement = this.shadowRoot?.querySelector('.dropdown-content');
+		if (this.#contentElement) {
+			this.#resizeObserver.observe(this.#contentElement);
+		}
 		this.addEventListener('d2l-popover-open', this.#handlePopoverOpen);
 		this.addEventListener('d2l-popover-close', this.#handlePopoverClose);
 		this.addEventListener('d2l-popover-position', this.#handlePopoverPosition);
@@ -291,6 +299,9 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	#contentElement;
+	#resizeObserver = new ResizeObserver(() => {
+		this.#toggleScrollStyles();
+	});
 
 	#adaptMobileTrayLocation(val) {
 		switch (val) {

package/components/page/page.js

@@ -11,8 +11,8 @@ const VALID_STATE_STORAGE_KEY = /^[a-z0-9_-]+$/i;
 export const panelStateStorageKey = key => `d2l-page-panel-state-${key}`;
 
 const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
-const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
-const PANEL_MIN_WIDTH = 320;
+export const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
+export const PANEL_MIN_WIDTH = 320;
 
 export const SIDE_NAV_DEFAULT_WIDTH = 334;
 export const supportingDefaultWidth = contentWidth => Math.floor(contentWidth / 3);

package/helpers/README.md

@@ -89,6 +89,10 @@ findComposedAncestor(node, predicate);
 // includes optional predicate for filtering child elements
 getComposedChildren(element, predicate = () => true);
 
+//gets the composed next ancestor sibling by walking the composed ancestors
+// includes optional predicate for filtering elements
+getComposedNextAncestorElementSibling(node, { predicate });
+
 // gets the composed next element sibling considing how children are distributed into slots
 // includes optional predicate for filtering elements
 getComposedNextElementSibling(node, { predicate });
@@ -96,6 +100,10 @@ getComposedNextElementSibling(node, { predicate });
 // gets the composed parent (including shadow host & insertion points)
 getComposedParent(node);
 
+//gets the composed previous ancestor sibling by walking the composed ancestors
+// includes optional predicate for filtering elements
+getComposedPreviousAncestorElementSibling(node, { predicate });
+
 // gets the composed previous element sibling considing how children are distributed into slots
 // includes optional predicate for filtering elements
 getComposedPreviousElementSibling(node, { predicate });
@@ -103,14 +111,6 @@ getComposedPreviousElementSibling(node, { predicate });
 // returns the first visible ancestor of the given node
 getFirstVisibleAncestor(node)
 
-// returns the next composed sibling at least one dom level up
-// includes optional predicate for filtering elements
-getNextAncestorSibling(node, predicate = () => true);
-
-// returns the previous composed sibling at least one dom level up
-// includes optional predicate for filtering elements
-getPreviousAncestorSibling(node, predicate = () => true);
-
 // browser consistent implementation of HTMLElement.offsetParent
 getOffsetParent(node);
 

package/helpers/dom.js

@@ -1,3 +1,5 @@
+import { getFlag } from './flags.js';
+
 // needed for legacy-Edge, after it's removed use CSS.escape directly
 export function cssEscape(val) {
 	if (window.CSS && window.CSS.escape) {
@@ -148,6 +150,22 @@ function getComposedElementSibling(node, { direction = 'next', predicate } = {})
 	return null;
 }
 
+export function getComposedNextAncestorElementSibling(node, { predicate } = {}) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
+	let parentNode = getComposedParent(node);
+
+	while (parentNode) {
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const nextParentSibling = focusableFixFlag ? getComposedNextElementSibling(parentNode, { predicate }) : parentNode.nextElementSibling;
+		if (nextParentSibling) return nextParentSibling;
+		parentNode = getComposedParent(parentNode);
+	}
+
+	return null;
+}
+
 export function getComposedNextElementSibling(node, { predicate } = {}) {
 	return getComposedElementSibling(node, { direction: 'next', predicate });
 }
@@ -175,32 +193,24 @@ export function getComposedParent(node) {
 
 }
 
-export function getComposedPreviousElementSibling(node, { predicate } = {}) {
-	return getComposedElementSibling(node, { direction: 'previous', predicate });
-}
+export function getComposedPreviousAncestorElementSibling(node, { predicate } = {}) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
 
-export function getNextAncestorSibling(node, predicate = () => true) {
 	let parentNode = getComposedParent(node);
 
 	while (parentNode) {
-		const nextParentSibling = parentNode.nextElementSibling;
-		if (nextParentSibling && predicate(nextParentSibling)) return nextParentSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const previousParentSibling = focusableFixFlag ? getComposedPreviousElementSibling(parentNode, { predicate }) : parentNode.previousElementSibling;
+		if (previousParentSibling) return previousParentSibling;
 		parentNode = getComposedParent(parentNode);
 	}
 
 	return null;
 }
 
-export function getPreviousAncestorSibling(node, predicate = () => true) {
-	let parentNode = getComposedParent(node);
-
-	while (parentNode) {
-		const previousParentSibling = parentNode.previousElementSibling;
-		if (previousParentSibling && predicate(previousParentSibling)) return previousParentSibling;
-		parentNode = getComposedParent(parentNode);
-	}
-
-	return null;
+export function getComposedPreviousElementSibling(node, { predicate } = {}) {
+	return getComposedElementSibling(node, { direction: 'previous', predicate });
 }
 
 export function getOffsetParent(node) {

package/helpers/focus.js

@@ -1,5 +1,15 @@
 import { css, unsafeCSS } from 'lit';
-import { getComposedChildren, getComposedParent, getFirstVisibleAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
+import {
+	getComposedChildren,
+	getComposedNextAncestorElementSibling,
+	getComposedNextElementSibling,
+	getComposedParent,
+	getComposedPreviousAncestorElementSibling,
+	getComposedPreviousElementSibling,
+	getFirstVisibleAncestor,
+	isVisible
+} from './dom.js';
+import { getFlag } from './flags.js';
 
 const focusableElements = {
 	a: true,
@@ -123,6 +133,9 @@ export function getLastFocusableDescendant(node, includeHidden) {
 }
 
 export function getPreviousFocusable(node, includeHidden) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
 	if (!node) return null;
 
 	if (includeHidden === undefined) includeHidden = false;
@@ -135,14 +148,15 @@ export function getPreviousFocusable(node, includeHidden) {
 			if (focusable) return focusable;
 		}
 
-		const previousSibling = node.previousElementSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const previousSibling = focusableFixFlag ? getComposedPreviousElementSibling(node) : node.previousElementSibling;
 		if (previousSibling) {
 			const siblingFocusable = _getPreviousFocusable(previousSibling, false, false);
 			if (siblingFocusable) return siblingFocusable;
 			return null;
 		}
 
-		const previousAncestorSibling = getPreviousAncestorSibling(node);
+		const previousAncestorSibling = getComposedPreviousAncestorElementSibling(node);
 		if (previousAncestorSibling) {
 			const parentSibingFocusable = _getPreviousFocusable(previousAncestorSibling, false, false);
 			if (parentSibingFocusable) return parentSibingFocusable;
@@ -157,6 +171,8 @@ export function getPreviousFocusable(node, includeHidden) {
 
 export function getNextFocusable(node, includeHidden, ignore, ignoreChildren) {
 
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
 	if (!node) return null;
 
 	if (includeHidden === undefined) includeHidden = false;
@@ -171,14 +187,15 @@ export function getNextFocusable(node, includeHidden, ignore, ignoreChildren) {
 			if (focusable) return focusable;
 		}
 
-		const nextSibling = node.nextElementSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const nextSibling = focusableFixFlag ? getComposedNextElementSibling(node) : node.nextElementSibling;
 		if (nextSibling) {
 			const siblingFocusable = _getNextFocusable(nextSibling, false, false);
 			if (siblingFocusable) return siblingFocusable;
 			return null;
 		}
 
-		const nextParentSibling = getNextAncestorSibling(node);
+		const nextParentSibling = getComposedNextAncestorElementSibling(node);
 		if (nextParentSibling) {
 			const parentSibingFocusable = _getNextFocusable(nextParentSibling, false, false);
 			if (parentSibingFocusable) return parentSibingFocusable;

package/package.json

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