@brightspace-ui/core 2.180.0 → 2.180.1

package/components/more-less/demo/more-less.html

@@ -13,6 +13,16 @@
 
 		<d2l-demo-page page-title="d2l-more-less">
 
+						<h2>More-less with custom blur color</h2>
+
+						<d2l-demo-snippet>
+							<template>
+								<d2l-more-less blur-color="#f00">
+									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
+								</d2l-more-less>
+							</template>
+						</d2l-demo-snippet>
+
 			<h2>More-less collapsed</h2>
 
 			<d2l-demo-snippet>
@@ -50,7 +60,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-more-less blur-color="#f00">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
 					</d2l-more-less>
 				</template>
 			</d2l-demo-snippet>

package/components/more-less/more-less.js

@@ -2,12 +2,16 @@ import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getComposedActiveElement } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 400;
+
 /**
  * A component used to minimize the display of long content, while providing a way to reveal the full content.
  * @slot - Default content placed inside of the component
@@ -61,7 +65,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 				overflow: hidden;
 			}
 			.d2l-more-less-transition {
-				transition: max-height 400ms cubic-bezier(0, 0.7, 0.5, 1);
+				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
 			}
 			.d2l-more-less-blur {
 				display: none;
@@ -234,25 +238,49 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.expanded = true;
 	}
 
-	__focusIn() {
+	async __focusIn(e) {
 		if (this.inactive || this.expanded) {
 			return;
 		}
 
-		this.__expand();
-		this.__autoExpanded = true;
+		const target = e.composedPath()[0] || e.target;
+
+		if (isSafari) {
+			target.scrollIntoViewIfNeeded?.();
+			setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
+		}
+
+		if (this.__content.scrollTop) {
+			this.__content.scrollTo({ top: 0, behavior: 'instant' });
+			this.__expand();
+			this.__autoExpanded = true;
+			await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
+			if (target.getRootNode().activeElement === target) {
+				target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+			}
+		}
 	}
 
-	__focusOut(e) {
+	async __focusOut({ relatedTarget }) {
+
 		if (this.inactive
 			|| !this.__autoExpanded
-			|| isComposedAncestor(this.__content, e.relatedTarget)
+			|| isComposedAncestor(this.__content, relatedTarget)
 		) {
 			return;
 		}
 
 		this.__shrink();
 		this.__autoExpanded = false;
+
+		relatedTarget && await new Promise(r => relatedTarget.addEventListener('focus', r, { once: true }));
+		const target = getComposedActiveElement();
+
+		await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
+		const activeElement = getComposedActiveElement();
+		if (target === activeElement) {
+			target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+		}
 	}
 
 	__init_measureBaseHeight() {
@@ -315,14 +343,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	}
 
 	__reactToChanges() {
-		if (!this.__transitionAdded) {
-			this.__reactToChanges_setupTransition();
-		} else {
-			this.__adjustToContent();
-		}
-	}
-
-	__reactToChanges_setupTransition() {
 		this.__transitionAdded = true;
 		this.__adjustToContent();
 	}
@@ -342,6 +362,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.__transitionAdded = true;
 		this.__maxHeight = this.height;
 		this.expanded = false;
+		this.__content.scrollTo({ top: 0, behavior: 'instant' });
 	}
 
 	__startObserving() {

package/package.json

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