@brightspace-ui/core 2.29.1 → 2.29.4

package/components/filter/README.md

@@ -161,7 +161,7 @@ The filter will announce changes to filter selections, search results, and when
 
 ## Filter Dimension: Set [d2l-filter-dimension-set]
 
-The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#filter-dimension%3A-set-value-%5Bd2l-filter-dimension-set-value%5D), this will give you a selectable list of filter values.
+The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#d2l-filter-dimension-set-value), this will give you a selectable list of filter values.
 
 <!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
 ```html
@@ -198,8 +198,24 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 <!-- docs: end hidden content -->
 
 ## Filter Dimension: Set Value [d2l-filter-dimension-set-value]
-This component is built to be used alongside the [d2l-filter-dimension-set](#filter-dimension%3A-set-%5Bd2l-filter-dimension-set%5D) component, this will give you a selectable list of filter values.
 
+This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component, this will give you a selectable list of filter values.
+
+<!-- docs: demo live name:d2l-filter-dimension-set-value align:start autoOpen:true autoSize:false size:large -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/filter/filter.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
+</script>
+<d2l-filter>
+  <d2l-filter-dimension-set key="course" text="Course" >
+    <d2l-filter-dimension-set-value key="art" text="Art" selected></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+</d2l-filter>
+```
+<!-- docs: start hidden content -->
 ### Properties
 
 | Property | Type | Description |
@@ -208,6 +224,7 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#fil
 | `key` | String, required | Unique identifier within a dimension for the value |
 | `text` | String, required | Text for the value in the list |
 | `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
+<!-- docs: end hidden content -->
 
 ## Tags for Applied Filters [d2l-filter-tags]
 

package/components/tooltip/README.md

@@ -7,20 +7,31 @@ Tooltips display additional information when users focus or hover on a point of
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 
   window.addEventListener('load', function () {
     setTimeout(function() {
-      var tooltip = document.querySelector('#tooltip');
+      const tooltip = document.querySelector('#tooltip');
+      const helpTooltip = document.querySelector('#help-tooltip');
+
       tooltip.showing = true;
+      helpTooltip.showing = true;
     }, 20);
   });
 </script>
+
 <d2l-button id="tooltip-button">Hover here</d2l-button>
 <d2l-tooltip id="tooltip" for="tooltip-button">
   Tooltip message example
 </d2l-tooltip>
+
+<d2l-tooltip-help id="help-tooltip" text="Hover here">
+  Tooltip message example
+</d2l-tooltip-help>
 ```
 
+Note: there is a [known defect](https://rally1.rallydev.com/#/?detail=/defect/641656338755&fdp=true) for tooltips, where they are sometimes rendered offset by some amount unexpectedly.
+
 ## Accessibility
 
 **Interactive Target Elements:**
@@ -69,7 +80,16 @@ The `d2l-tooltip` component is used to display additional information when users
   import '@brightspace-ui/core/components/inputs/input-text.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
-
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
 <d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="Text Input" label-hidden style="max-width:250px;"></d2l-input-text>
 <d2l-tooltip for="tooltip-error" state="error">
 	Your error message will display here
@@ -121,6 +141,16 @@ In the following example to constrain the tooltip to the dashed boundary we can
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
 <style>
   .boundary {
     border: 1px dashed #cdd5dc;
@@ -163,15 +193,24 @@ The `d2l-tooltip-help` component is used to display additional information when
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:small -->
+<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 </script>
-
-<p class="d2l-body-standard">
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip-help');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
+<p class="d2l-body-compact">
   This is some sample text.
-  <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+  <d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
 </p>
 ```
 

package/components/tooltip/tooltip-help.js

@@ -25,6 +25,10 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			 * @type {'top'|'bottom'|'left'|'right'}
 			 */
 			position: { type: String },
+			/**
+			 * @ignore
+			 */
+			showing: { type: Boolean, reflect: true },
 			/**
 			 * REQUIRED: Text that will render as the Help Tooltip opener
 			 * @type {string}
@@ -44,6 +48,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			#d2l-tooltip-help-text {
 				background: none;
 				border: none;
+				cursor: text;
 				padding: 0;
 				text-decoration-color: var(--d2l-color-galena);
 				text-decoration-line: underline;
@@ -75,6 +80,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 		super();
 
 		this.inheritFontStyle = false;
+		this.showing = false;
 	}
 
 	static get focusElementSelector() {
@@ -97,7 +103,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
 				${this.text}
 			</button>
-			<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}">
+			<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}" ?showing="${this.showing}">
 				<slot></slot>
 			</d2l-tooltip>
 		`;

package/custom-elements.json

@@ -10049,6 +10049,11 @@
           "description": "Allows this component to inherit certain font properties",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "showing",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [

package/helpers/mathjax.js

@@ -4,7 +4,7 @@
  */
 
 const mathjaxContextAttribute = 'data-mathjax-context';
-const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.2.1';
+const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.1.2';
 
 const mathjaxFontMappings = new Map([
 	['MJXTEX', 'MathJax_Main-Regular'],
@@ -50,7 +50,7 @@ export class HtmlBlockMathRenderer {
 
 		const mathJaxConfig = {
 			deferTypeset: true,
-			renderLatex: isLatexSupported || false,
+			renderLatex: isLatexSupported,
 			outputScale: context.outputScale || 1
 		};
 
@@ -60,25 +60,32 @@ export class HtmlBlockMathRenderer {
 		// 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.setAttribute('style', 'display: block; height: 0.5rem;');
-		});
-
-		await window.MathJax.startup.promise;
-		await window.MathJax.typesetPromise([elem]);
+		const lineBreakStyle = 'display: block; height: 0.5rem;';
+
+		// If we're opting out of deferred rendering, we need to rely
+		// on the global MathJax install for rendering.
+		if (options.noDeferredRendering) {
+			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+				elm.setAttribute('style', lineBreakStyle);
+			});
+
+			await window.MathJax.startup.promise;
+			window.MathJax.typesetShadow(elem.getRootNode(), elem);
+			return elem;
+		}
 
-		// If we're opting out of deferred rendering, we can rely
-		// on the global MathJax styles for rendering.
-		if (options.noDeferredRendering) return elem;
+		const inner = elem.innerHTML.replace(/<mspace linebreak="newline">/gi, `<mspace linebreak="newline" style="${lineBreakStyle}">`);
 
-		const styleElm = window.MathJax.chtmlStylesheet().cloneNode(true);
-		styleElm.id = 'd2l-mathjax-styles';
+		const temp = document.createElement('div');
+		temp.style.display = 'none';
+		temp.attachShadow({ mode: 'open' });
+		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${inner}</mjx-body></mjx-doc></div>`;
 
-		if (!elem.querySelector(`#${styleElm.id}`)) {
-			elem.appendChild(styleElm);
-		}
+		elem.appendChild(temp);
+		await window.MathJax.startup.promise;
+		window.MathJax.typesetShadow(temp.shadowRoot);
 
-		return elem;
+		return temp.shadowRoot.firstChild;
 	}
 
 }
@@ -94,7 +101,6 @@ export function loadMathJax(mathJaxConfig) {
 
 	window.MathJax = {
 		chtml: {
-			adaptiveCSS: false,
 			scale: (mathJaxConfig && mathJaxConfig.outputScale) || 1
 		},
 		options: {
@@ -104,6 +110,100 @@ export function loadMathJax(mathJaxConfig) {
 		},
 		loader: { load: loadOptions },
 		startup: {
+			ready: () => {
+
+				// Setup for using MathJax for typesetting math in shadowDOM
+				// https://github.com/mathjax/MathJax/issues/2195
+
+				//
+				//  Get some MathJax objects from the MathJax global
+				//
+				//  (Ideally, you would turn this into a custom component, and
+				//  then these could be handled by normal imports, but this is
+				//  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;
+
+				//
+				//  Extend HTMLAdaptor to handle shadowDOM as the document
+				//
+				class ShadowAdaptor extends HTMLAdaptor {
+					body(doc) {
+						return doc.body || (doc.firstChild || {}).lastChild || doc;
+					}
+					create(kind, ns) {
+						const document = (this.document.createElement ? this.document : this.window.document);
+						return (ns ?
+							document.createElementNS(ns, kind) :
+							document.createElement(kind));
+					}
+					head(doc) {
+						return doc.head || (doc.firstChild || {}).firstChild || doc;
+					}
+					root(doc) {
+						return doc.documentElement || doc.firstChild || doc;
+					}
+					text(text) {
+						const document = (this.document.createTextNode ? this.document : this.window.document);
+						return document.createTextNode(text);
+					}
+				}
+
+				//
+				//  Extend HTMLHandler to handle shadowDOM as document
+				//
+				class ShadowHandler extends HTMLHandler {
+					create(document, options) {
+						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)) {
+							const child = document;
+							document = adaptor.parse('', 'text/html');
+							adaptor.append(adaptor.body(document), child);
+						}
+						//
+						//  We can't use super.create() here, since that doesn't
+						//  handle shadowDOM correctly, so call HTMLHandler's parent class
+						//  directly instead.
+						//
+						return AbstractHandler.create.call(this, document, options);
+					}
+				}
+
+				//
+				//  Register the new handler and adaptor
+				//
+				startup.registerConstructor('HTMLHandler', ShadowHandler);
+				startup.registerConstructor('browserAdaptor', () => new ShadowAdaptor(window));
+
+				//
+				//  A service function that creates a new MathDocument from the
+				//  shadow root with the configured input and output jax, and then
+				//  renders the document.  The MathDocument is returned in case
+				//  you need to rerender the shadowRoot later.
+				//
+				window.MathJax.typesetShadow = function(root, elem) {
+					const InputJax = startup.getInputJax();
+					const OutputJax = startup.getOutputJax();
+					const html = mathjax.document(root, { InputJax, OutputJax });
+
+					if (elem) html.options.elements = [elem];
+
+					html.render().typeset();
+					return html;
+				};
+
+				//
+				//  Now do the usual startup now that the extensions are in place
+				//
+				window.MathJax.startup.defaultReady();
+			},
 			// Defer typesetting if the config is present and deferring is set
 			typeset: !(mathJaxConfig && mathJaxConfig.deferTypeset)
 		}

package/package.json

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