@brightspace-ui/core 2.128.4 → 2.129.0

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

@@ -200,9 +200,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			_closing: {
 				type: Boolean
 			},
-			_contentOverflow: {
-				type: Boolean
-			},
 			_dropdownContent: {
 				type: Boolean,
 				attribute: 'dropdown-content',
@@ -262,7 +259,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._bottomOverflow = false;
 		this._topOverflow = false;
 		this._closing = false;
-		this._contentOverflow = false;
 		this._hasHeader = false;
 		this._hasFooter = false;
 		this._showBackdrop = false;
@@ -704,7 +700,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 					&& headerFooterHeight < this.maxHeight
 					? this.maxHeight - headerFooterHeight - 2
 					: availableHeight - headerFooterHeight;
-				this.__toggleOverflowY(contentRect.height + headerFooterHeight > availableHeight);
 
 				// ensure the content height has updated when the __toggleScrollStyles event handler runs
 				await this.updateComplete;
@@ -723,16 +718,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		await adjustPosition();
 	}
 
-	__toggleOverflowY(isOverflowing) {
-		if (!this.__content) {
-			return;
-		}
-		if (!this._contentHeight) {
-			return;
-		}
-		this._contentOverflow = isOverflowing || this.__content.scrollHeight > this._contentHeight;
-	}
-
 	__toggleScrollStyles() {
 		/* scrollHeight incorrect in IE by 4px second time opened */
 		this._bottomOverflow = this.__content.scrollHeight - (this.__content.scrollTop + this.__content.clientHeight) >= 5;
@@ -809,7 +794,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyles = {
@@ -845,7 +829,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: this._contentHeight ? `${this._contentHeight}px` : '',
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyle = {
@@ -951,7 +934,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		const contentStyle = {
 			...contentWidthStyle,
 			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
 		};
 
 		const closeButtonStyles = {

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

@@ -120,6 +120,7 @@ export const dropdownContentStyles = css`
 		box-sizing: border-box;
 		max-width: 100%;
 		outline: none;
+		overflow-y: auto;
 		padding: 1rem;
 	}
 

package/components/expand-collapse/expand-collapse-content.js

@@ -119,17 +119,17 @@ class ExpandCollapseContent extends LitElement {
 				));
 			}
 			if (reduceMotion || firstUpdate) {
-				this._state = states.EXPANDED;
-				this._height = 'auto';
-				this._eventPromiseResolve();
+				this._setExpanded();
 			} else {
 				this._state = states.PREEXPANDING;
 				await this.updateComplete;
 				await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
 				if (this._state === states.PREEXPANDING) {
 					this._state = states.EXPANDING;
-					const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
-					if (content) this._height = `${content.scrollHeight}px`;
+					const content = this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner');
+					const contentHeight = content?.scrollHeight;
+					if (contentHeight) this._height = `${contentHeight}px`;
+					if (contentHeight === 0) this._setExpanded();
 				}
 			}
 		} else {
@@ -159,14 +159,17 @@ class ExpandCollapseContent extends LitElement {
 
 	_onTransitionEnd() {
 		if (this._state === states.EXPANDING) {
-			this._state = states.EXPANDED;
-			this._height = 'auto';
-			this._eventPromiseResolve();
+			this._setExpanded();
 		} else if (this._state === states.COLLAPSING) {
 			this._state = states.COLLAPSED;
 			this._eventPromiseResolve();
 		}
 	}
 
+	_setExpanded() {
+		this._state = states.EXPANDED;
+		this._height = 'auto';
+		this._eventPromiseResolve();
+	}
 }
 customElements.define('d2l-expand-collapse-content', ExpandCollapseContent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.128.4",
+  "version": "2.129.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -45,13 +45,14 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.3",
+    "@brightspace-ui/testing": "^0.7",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@open-wc/testing": "^3",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
     "@rollup/plugin-replace": "^5",
     "@web/dev-server": "^0.2",
+    "@web/test-runner": "^0.16",
     "axe-core": "^4",
     "chalk": "^5",
     "eslint": "^8",

package/tools/web-test-runner-helpers.js

@@ -1,12 +0,0 @@
-import { sendKeys, sendMouse } from '@web/test-runner-commands';
-
-export const focusWithKeyboard = async(element) => {
-	await sendKeys({ press: 'Tab' });
-	element.focus({ focusVisible: true });
-};
-
-export const focusWithMouse = async(element) => {
-	const { x, y } = element.getBoundingClientRect();
-	await sendMouse({ type: 'click', position: [Math.ceil(x), Math.ceil(y)] });
-	await sendMouse({ type: 'move', position: [0, 0] });
-};