@brightspace-ui/core 2.55.4 → 2.56.1

package/components/demo/demo-page.js

@@ -3,6 +3,7 @@ import './code-view.js';
 import '../colors/colors.js';
 import '../typography/typography.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { heading2Styles } from '../typography/styles.js';
 
 document.body.classList.add('d2l-typography');
@@ -20,7 +21,8 @@ class DemoPage extends LitElement {
 
 	static get properties() {
 		return {
-			pageTitle: { type: String, attribute: 'page-title' }
+			pageTitle: { type: String, attribute: 'page-title' },
+			_noScroll: { state: true }
 		};
 	}
 
@@ -31,6 +33,11 @@ class DemoPage extends LitElement {
 				display: block;
 				padding: 30px;
 			}
+			main.no-scroll {
+				height: 0;
+				overflow: hidden;
+				padding: 0;
+			}
 			.d2l-heading-2 {
 				margin-top: 0;
 			}
@@ -41,6 +48,7 @@ class DemoPage extends LitElement {
 				line-height: 1.2rem;
 				margin: 1.5rem 0 1.5rem 0;
 			}
+
 			.d2l-demo-page-content > ::slotted(d2l-code-view),
 			.d2l-demo-page-content > ::slotted(d2l-demo-snippet) {
 				margin-bottom: 36px;
@@ -56,14 +64,28 @@ class DemoPage extends LitElement {
 	}
 
 	render() {
+		const classes = {
+			'no-scroll': this._noScroll
+		};
 		return html`
-			<main>
+			<main class="${classMap(classes)}">
 				<h1 class="d2l-heading-2">${this.pageTitle}</h1>
-				<div class="d2l-demo-page-content"><slot></slot></div>
+				<div class="d2l-demo-page-content" @d2l-demo-snippet-fullscreen-toggle="${this._handleFullscreenToggle}"><slot></slot></div>
 			</main>
 		`;
 	}
 
+	async _handleFullscreenToggle() {
+		if (this._noScroll) {
+			this._noScroll = false;
+			await this.updateComplete;
+			document.documentElement.scrollTop = this._previousScrollTop;
+		}
+		else {
+			this._previousScrollTop = document.documentElement.scrollTop;
+			this._noScroll = true;
+		}
+	}
 }
 
 customElements.define('d2l-demo-page', DemoPage);

package/components/demo/demo-snippet.js

@@ -8,11 +8,12 @@ class DemoSnippet extends LitElement {
 	static get properties() {
 		return {
 			codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
-			fullscreen: { type: Boolean, reflect: true },
+			fullWidth: { type: Boolean, reflect: true },
 			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
 			overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
 			_code: { type: String },
 			_dir: { type: String, attribute: false },
+			_fullscreen: { state: true },
 			_hasSkeleton: { type: Boolean, attribute: false },
 			_skeletonOn: { type: Boolean, reflect: false }
 		};
@@ -31,12 +32,19 @@ class DemoSnippet extends LitElement {
 			:host([hidden]) {
 				display: none;
 			}
-			:host([fullscreen]) {
+			:host([full-width]) {
 				max-width: unset;
 			}
 			.d2l-demo-snippet-demo-wrapper {
 				display: flex;
 			}
+			.d2l-demo-snippet-demo-wrapper.fullscreen {
+				background-color: white;
+				inset: 0;
+				overflow: auto;
+				position: fixed;
+				z-index: 2;
+			}
 			.d2l-demo-snippet-demo {
 				flex: 1 1 auto;
 				position: relative;
@@ -47,7 +55,8 @@ class DemoSnippet extends LitElement {
 			.d2l-demo-snippet-demo-padding {
 				padding: 18px;
 			}
-			:host([no-padding]) .d2l-demo-snippet-demo-padding {
+			:host([no-padding]) .d2l-demo-snippet-demo-padding,
+			.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo-padding {
 				padding: 0;
 			}
 			.d2l-demo-snippet-settings {
@@ -55,6 +64,10 @@ class DemoSnippet extends LitElement {
 				flex: 0 0 auto;
 				padding: 6px;
 			}
+			.d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-settings {
+				position: sticky;
+				top: 0;
+			}
 			d2l-code-view {
 				border: none;
 				border-top-left-radius: 0;
@@ -70,8 +83,9 @@ class DemoSnippet extends LitElement {
 
 	constructor() {
 		super();
-		this.fullscreen = false;
+		this.fullWidth = false;
 		this._dir = document.documentElement.dir;
+		this._fullscreen = false;
 		this._hasSkeleton = false;
 		this._skeletonOn = false;
 	}
@@ -84,7 +98,7 @@ class DemoSnippet extends LitElement {
 		const dirAttr = this._dir === 'rtl' ? 'rtl' : 'ltr';
 		const skeleton = this._hasSkeleton ? html`<d2l-switch text="Skeleton" ?on="${this._skeletonOn}" @change="${this._handleSkeletonChange}"></d2l-switch>` : null;
 		return html`
-			<div class="d2l-demo-snippet-demo-wrapper">
+			<div class="d2l-demo-snippet-demo-wrapper ${this._fullscreen ? 'fullscreen' : ''}">
 				<div class="d2l-demo-snippet-demo" dir="${dirAttr}">
 					<div class="d2l-demo-snippet-demo-padding">
 						<slot name="_demo"></slot>
@@ -92,7 +106,8 @@ class DemoSnippet extends LitElement {
 					</div>
 				</div>
 				<div class="d2l-demo-snippet-settings">
-					<d2l-switch text="RTL" ?on="${dirAttr === 'rtl'}" @change="${this._handleDirChange}"></d2l-switch><br>
+					<d2l-switch text="RTL" ?on="${dirAttr === 'rtl'}" @change="${this._handleDirChange}"></d2l-switch><br />
+					<d2l-switch text="Fullscreen" ?on="${this._fullscreen}" @change="${this._handleFullscreenChange}"></d2l-switch><br />
 					${skeleton}
 				</div>
 			</div>
@@ -186,6 +201,12 @@ class DemoSnippet extends LitElement {
 		this._applyAttr('dir', this._dir, true);
 	}
 
+	_handleFullscreenChange(e) {
+		this._fullscreen = e.target.on;
+		const event = new CustomEvent('d2l-demo-snippet-fullscreen-toggle', { bubbles: true, composed: true });
+		this.dispatchEvent(event);
+	}
+
 	_handleSkeletonChange(e) {
 		this._skeletonOn = e.target.on;
 		this._applyAttr('skeleton', this._skeletonOn, false);

package/components/description-list/demo/description-list.html

@@ -14,12 +14,12 @@
 		<d2l-demo-page page-title="d2l-description-list">
 
 			<h2>Short</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-test-dl></d2l-test-dl>
 			</d2l-demo-snippet>
 
 			<h2>Long</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
 			</d2l-demo-snippet>
 
@@ -29,17 +29,17 @@
 			</d2l-demo-snippet>
 
 			<h2>Activity Display</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-test-dl type="activity-display"></d2l-test-dl>
 			</d2l-demo-snippet>
 
 			<h2>Bulk Course Import</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-test-dl type="bulk-course-import"></d2l-test-dl>
 			</d2l-demo-snippet>
 
 			<h2>Slotted content</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-test-dl type="slotted"></d2l-test-dl>
 			</d2l-demo-snippet>
 

package/components/dialog/dialog-mixin.js

@@ -407,14 +407,19 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (!activeElement
 			|| !isComposedAncestor(dialog, activeElement)
 			|| !activeElement.classList.contains('focus-visible')) {
-				this._focusInitial();
+				// wait till the dialog is visible for Safari
+				requestAnimationFrame(() => this._focusInitial());
 			}
 
-			if (!reduceMotion) await animPromise;
+			// if not animating, we need to wait a frame before dispatching due to focus rAF above
+			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
+			else await animPromise;
+
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
 			));
+
 		}, 0);
 
 	}

package/components/tag-list/demo/tag-list.html

@@ -40,7 +40,7 @@
 				});
 
 			</script>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-tag-list description="A bunch of example tags">
 					<d2l-tag-list-item text="Example 1"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
@@ -55,7 +55,7 @@
 			</d2l-demo-snippet>
 
 			<h2>Clearable Tag List</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-tag-list description="A bunch of example tags" clearable>
 					<d2l-tag-list-item text="Example 1"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
@@ -88,7 +88,7 @@
 			</d2l-demo-snippet>
 
 			<h2>Tag List with Interactive</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<div grid>
 					<d2l-tag-list description="A bunch of example tags" clearable>
 						<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
@@ -103,7 +103,7 @@
 			</d2l-demo-snippet>
 
 			<h2>Tag List - Custom Tooltip Description</h2>
-			<d2l-demo-snippet fullscreen>
+			<d2l-demo-snippet full-width>
 				<d2l-tag-list description="A bunch of example tags">
 					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer" description="display text and description value when truncated"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Example Tag 5" description="custom tooltip text - display description only when not truncated"></d2l-tag-list-item>

package/custom-elements.json

@@ -1436,7 +1436,7 @@
           "type": "boolean"
         },
         {
-          "name": "fullscreen",
+          "name": "fullWidth",
           "type": "boolean",
           "default": "false"
         }
@@ -1458,11 +1458,16 @@
           "type": "boolean"
         },
         {
-          "name": "fullscreen",
-          "attribute": "fullscreen",
+          "name": "fullWidth",
+          "attribute": "fullWidth",
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-demo-snippet-fullscreen-toggle"
+        }
       ]
     },
     {

package/helpers/focus.js

@@ -1,4 +1,4 @@
-import { findComposedAncestor, getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling } from './dom.js';
+import { findComposedAncestor, getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
 	a: true,
@@ -175,7 +175,7 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 	if (_isFocusable && !includeHidden) {
 		// only perform visibility check if absolutely necessary
-		if (nodeName !== 'body' && node.offsetParent === null) return false;
+		if (nodeName !== 'body' && !isVisible(node)) return false;
 	}
 
 	return _isFocusable;

package/package.json

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