@brightspace-ui/core 2.62.0 → 2.64.0

package/components/demo/demo-snippet.js

@@ -1,6 +1,8 @@
 import './code-view.js';
-import '../button/button-icon.js';
+import '../button/button-subtle.js';
 import '../switch/switch.js';
+import '../dropdown/dropdown.js';
+import '../dropdown/dropdown-content.js';
 import { css, html, LitElement } from 'lit';
 
 class DemoSnippet extends LitElement {
@@ -8,13 +10,14 @@ class DemoSnippet extends LitElement {
 	static get properties() {
 		return {
 			codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
-			fullWidth: { type: Boolean, reflect: true },
+			fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' },
 			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 },
+			_settingsPeek: { state: true },
 			_skeletonOn: { type: Boolean, reflect: false }
 		};
 	}
@@ -40,14 +43,18 @@ class DemoSnippet extends LitElement {
 			}
 			.d2l-demo-snippet-demo-wrapper.fullscreen {
 				background-color: white;
+				height: fit-content;
 				inset: 0;
-				overflow: auto;
-				position: fixed;
+				position: absolute;
 				z-index: 2;
 			}
 			.d2l-demo-snippet-demo {
 				flex: 1 1 auto;
 				position: relative;
+				translate: 0; /* create stacking context to prevent demos from leaking outside their containers */
+			}
+			:host([full-width]) .d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo {
+				width: 100vw;
 			}
 			:host([overflow-hidden]) .d2l-demo-snippet-demo {
 				overflow: hidden;
@@ -68,6 +75,27 @@ class DemoSnippet extends LitElement {
 				position: sticky;
 				top: 0;
 			}
+			d2l-dropdown.settings-dropdown {
+				background-color: white;
+				border-radius: 6px;
+				box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
+				position: fixed;
+				right: 1rem;
+				top: -0.25rem;
+				translate: 0 -1.5rem;
+			}
+			@media (prefers-reduced-motion: no-preference) {
+				d2l-dropdown.settings-dropdown {
+					transition: translate 0.15s, box-shadow 0.15s;
+				}
+			}
+			d2l-dropdown.settings-dropdown.peek,
+			d2l-dropdown.settings-dropdown:hover,
+			d2l-dropdown.settings-dropdown:focus-within,
+			d2l-dropdown.settings-dropdown:has(d2l-button-subtle[active]) {
+				box-shadow: 0 -1px 0 1px white;
+				translate: 0;
+			}
 			d2l-code-view {
 				border: none;
 				border-top-left-radius: 0;
@@ -78,7 +106,7 @@ class DemoSnippet extends LitElement {
 			:host([code-view-hidden]) d2l-code-view {
 				display: none;
 			}
-		`;
+`;
 	}
 
 	constructor() {
@@ -97,6 +125,16 @@ class DemoSnippet extends LitElement {
 	render() {
 		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;
+		const switches = html`
+			<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}`;
+		const settings = this.fullWidth && this._fullscreen ? html`
+			<d2l-dropdown class="settings-dropdown ${this._settingsPeek ? 'peek' : ''}">
+				<d2l-button-subtle primary icon="tier1:gear" text="Settings" class="d2l-dropdown-opener"></d2l-button-subtle>
+				<d2l-dropdown-content>${switches}</d2l-dropdown-content>
+			</d2l-dropdown>` : html`<div class="d2l-demo-snippet-settings">${switches}</div>`;
+
 		return html`
 			<div class="d2l-demo-snippet-demo-wrapper ${this._fullscreen ? 'fullscreen' : ''}">
 				<div class="d2l-demo-snippet-demo" dir="${dirAttr}">
@@ -105,11 +143,7 @@ class DemoSnippet extends LitElement {
 						<slot></slot>
 					</div>
 				</div>
-				<div class="d2l-demo-snippet-settings">
-					<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>
+				${settings}
 			</div>
 			<d2l-code-view language="html" hide-language>${this._code}</d2l-code-view>
 		`;
@@ -201,10 +235,14 @@ class DemoSnippet extends LitElement {
 		this._applyAttr('dir', this._dir, true);
 	}
 
-	_handleFullscreenChange(e) {
+	async _handleFullscreenChange(e) {
 		this._fullscreen = e.target.on;
+		this._settingsPeek = this._fullscreen;
 		const event = new CustomEvent('d2l-demo-snippet-fullscreen-toggle', { bubbles: true, composed: true });
 		this.dispatchEvent(event);
+		await this.updateComplete;
+		await new Promise(r => setTimeout(r, 1000));
+		this._settingsPeek = false;
 	}
 
 	_handleSkeletonChange(e) {

package/custom-elements.json

@@ -1436,7 +1436,7 @@
           "type": "boolean"
         },
         {
-          "name": "fullWidth",
+          "name": "full-width",
           "type": "boolean",
           "default": "false"
         }
@@ -1459,7 +1459,7 @@
         },
         {
           "name": "fullWidth",
-          "attribute": "fullWidth",
+          "attribute": "full-width",
           "type": "boolean",
           "default": "false"
         }

package/helpers/mathjax.js

@@ -30,9 +30,6 @@ const mathjaxFontMappings = new Map([
 	['MJXTEX-VB', 'MathJax_Vector-Bold']
 ]);
 
-let mathJaxLoaded;
-let renderingPromise = Promise.resolve();
-
 class HtmlBlockMathRenderer {
 
 	get contextAttributes() {
@@ -45,34 +42,13 @@ class HtmlBlockMathRenderer {
 		if (contextVal === undefined) return elem;
 
 		const context = JSON.parse(contextVal) || {};
-		const isLatexSupported = context.renderLatex;
-
-		if (!elem.querySelector('math') && !(isLatexSupported && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
 
-		const mathJaxConfig = {
+		await typesetMath(elem, {
 			deferTypeset: true,
-			renderLatex: isLatexSupported,
-			outputScale: context.outputScale || 1
-		};
-
-		await loadMathJax(mathJaxConfig);
-
-		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
-		// This work-around should be removed when linebreaks are natively supported.
-		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
-		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-		elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
-			elm.style.display = 'block';
-			elm.style.height = '0.5rem';
+			renderLatex: context.renderLatex,
+			outputScale: context.outputScale || 1,
+			window: window
 		});
-
-		// If we're using deferred rendering, we need to create a document structure
-		// within the element so MathJax can appropriately process math.
-		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
-
-		await window.MathJax.startup.promise;
-		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
-		await renderingPromise;
 	}
 
 }
@@ -83,9 +59,12 @@ export function createHtmlBlockRenderer() {
 
 export function loadMathJax(mathJaxConfig) {
 
-	if (mathJaxLoaded) return mathJaxLoaded;
+	const win = (mathJaxConfig && mathJaxConfig.window) || window;
 
-	window.MathJax = {
+	win.D2L = win.D2L || {};
+	if (win.D2L.mathJaxLoaded) return win.D2L.mathJaxLoaded;
+
+	win.MathJax = {
 		chtml: {
 			adaptiveCSS: false,
 			scale: (mathJaxConfig && mathJaxConfig.outputScale) || 1
@@ -110,11 +89,11 @@ export function loadMathJax(mathJaxConfig) {
 				//  just an example and so we use an expedient method of
 				//  accessing these for now.)
 				//
-				const mathjax = window.MathJax._.mathjax.mathjax;
-				const HTMLAdaptor = window.MathJax._.adaptors.HTMLAdaptor.HTMLAdaptor;
-				const HTMLHandler = window.MathJax._.handlers.html.HTMLHandler.HTMLHandler;
-				const AbstractHandler = window.MathJax._.core.Handler.AbstractHandler.prototype;
-				const startup = window.MathJax.startup;
+				const mathjax = win.MathJax._.mathjax.mathjax;
+				const HTMLAdaptor = win.MathJax._.adaptors.HTMLAdaptor.HTMLAdaptor;
+				const HTMLHandler = win.MathJax._.handlers.html.HTMLHandler.HTMLHandler;
+				const AbstractHandler = win.MathJax._.core.Handler.AbstractHandler.prototype;
+				const startup = win.MathJax.startup;
 
 				const getFirstChild = doc => {
 					const child = doc.firstChild;
@@ -155,7 +134,7 @@ export function loadMathJax(mathJaxConfig) {
 						const adaptor = this.adaptor;
 						if (typeof(document) === 'string') {
 							document = adaptor.parse(document, 'text/html');
-						} else if ((document instanceof adaptor.window.HTMLElement || document instanceof adaptor.window.DocumentFragment) && !(document instanceof window.ShadowRoot)) {
+						} else if ((document instanceof adaptor.window.HTMLElement || document instanceof adaptor.window.DocumentFragment) && !(document instanceof win.ShadowRoot)) {
 							const child = document;
 							document = adaptor.parse('', 'text/html');
 							adaptor.append(adaptor.body(document), child);
@@ -173,7 +152,7 @@ export function loadMathJax(mathJaxConfig) {
 				//  Register the new handler and adaptor
 				//
 				startup.registerConstructor('HTMLHandler', ShadowHandler);
-				startup.registerConstructor('browserAdaptor', () => new ShadowAdaptor(window));
+				startup.registerConstructor('browserAdaptor', () => new ShadowAdaptor(win));
 
 				//
 				//  A service function that creates a new MathDocument from the
@@ -181,7 +160,7 @@ export function loadMathJax(mathJaxConfig) {
 				//  renders the document.  The MathDocument is returned in case
 				//  you need to rerender the shadowRoot later.
 				//
-				window.MathJax.typesetShadow = async function(root, elem) {
+				win.MathJax.typesetShadow = async function(root, elem) {
 					const InputJax = startup.getInputJax();
 					const OutputJax = startup.getOutputJax();
 					const html = mathjax.document(root, { InputJax, OutputJax });
@@ -195,15 +174,15 @@ export function loadMathJax(mathJaxConfig) {
 				//
 				//  Now do the usual startup now that the extensions are in place
 				//
-				window.MathJax.startup.defaultReady();
+				win.MathJax.startup.defaultReady();
 			},
 			// Defer typesetting if the config is present and deferring is set
 			typeset: !(mathJaxConfig && mathJaxConfig.deferTypeset)
 		}
 	};
 
-	if (mathJaxConfig && mathJaxConfig.deferTypeset && !document.head.querySelector('#d2l-mathjax-fonts') && !document.head.querySelector('#MJX-CHTML-styles')) {
-		const styleElem = document.createElement('style');
+	if (mathJaxConfig && mathJaxConfig.deferTypeset && !win.document.head.querySelector('#d2l-mathjax-fonts') && !win.document.head.querySelector('#MJX-CHTML-styles')) {
+		const styleElem = win.document.createElement('style');
 		styleElem.id = 'd2l-mathjax-fonts';
 
 		let fontImportStyles = '';
@@ -216,11 +195,11 @@ export function loadMathJax(mathJaxConfig) {
 		});
 
 		styleElem.textContent = fontImportStyles;
-		document.head.appendChild(styleElem);
+		win.document.head.appendChild(styleElem);
 	}
 
-	mathJaxLoaded = new Promise(resolve => {
-		const script = document.createElement('script');
+	win.D2L.mathJaxLoaded = new Promise(resolve => {
+		const script = win.document.createElement('script');
 		script.async = 'async';
 		script.onload = resolve;
 
@@ -229,9 +208,44 @@ export function loadMathJax(mathJaxConfig) {
 			: 'mml-chtml';
 
 		script.src = `${mathjaxBaseUrl}/${component}.js`;
-		document.head.appendChild(script);
+		win.document.head.appendChild(script);
+	});
+
+	return win.D2L.mathJaxLoaded;
+
+}
+
+export async function typesetMath(elem, options) {
+	if (!elem.querySelector('math') && !(options.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
+
+	const win = options.window;
+
+	const mathJaxConfig = {
+		deferTypeset: options.deferTypeset,
+		renderLatex: options.renderLatex,
+		outputScale: options.outputScale || 1,
+		window: win
+	};
+
+	await loadMathJax(mathJaxConfig);
+
+	// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
+	// This work-around should be removed when linebreaks are natively supported.
+	// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
+	// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
+	elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+		elm.style.display = 'block';
+		elm.style.height = '0.5rem';
 	});
 
-	return mathJaxLoaded;
+	// If we're using deferred rendering, we need to create a document structure
+	// within the element so MathJax can appropriately process math.
+	if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
+
+	await win.MathJax.startup.promise;
+	win.D2L = win.D2L || {};
 
+	if (!win.D2L.renderingPromise) win.D2L.renderingPromise = Promise.resolve();
+	win.D2L.renderingPromise = win.D2L.renderingPromise.then(() => win.MathJax.typesetShadow(elem.getRootNode(), elem));
+	await win.D2L.renderingPromise;
 }

package/package.json

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