@brightspace-ui/core 1.242.4 → 1.242.7

package/components/dialog/dialog-mixin.js

@@ -14,7 +14,8 @@ import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.j
 window.D2L = window.D2L || {};
 window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 
-window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined);
+window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined)
+	&& (navigator.vendor && navigator.vendor.toLowerCase().indexOf('apple') === -1);
 if (window.D2L.DialogMixin.preferNative === undefined) {
 	window.D2L.DialogMixin.preferNative = true;
 }

package/components/html-block/README.md

@@ -77,25 +77,23 @@ Examples are provided to display how user-authored math can be embedded within y
   import '@brightspace-ui/core/components/icons/icon.js';
 </script>
 <d2l-html-block>
-  <div class="mathml-container">
-    <math xmlns="http://www.w3.org/1998/Math/MathML">
-      <msqrt>
-        <mn>3</mn>
-        <mi>x</mi>
-        <mo>&#x2212;</mo>
-        <mn>1</mn>
-      </msqrt>
-      <mo>+</mo>
-      <mo stretchy="false">(</mo>
-      <mn>1</mn>
-      <mo>+</mo>
+  <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <msqrt>
+      <mn>3</mn>
       <mi>x</mi>
-      <msup>
-        <mo stretchy="false">)</mo>
-        <mn>2</mn>
-      </msup>
-    </math>
-  </div>
+      <mo>&#x2212;</mo>
+      <mn>1</mn>
+    </msqrt>
+    <mo>+</mo>
+    <mo stretchy="false">(</mo>
+    <mn>1</mn>
+    <mo>+</mo>
+    <mi>x</mi>
+    <msup>
+      <mo stretchy="false">)</mo>
+      <mn>2</mn>
+    </msup>
+  </math>
 </d2l-html-block>
 ```
 
@@ -120,8 +118,6 @@ Examples are provided to display how user-authored math can be embedded within y
   document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: true });<!-- docs: end hidden content -->
 </script>
 <d2l-html-block>
-  <div class="latex-container">
     $$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
-  </div>
 </d2l-html-block>
 ```

package/components/html-block/demo/html-block.html

@@ -141,6 +141,18 @@
 								</mfrac>
 							</mrow>
 							<mtext>.</mtext>
+							<mspace linebreak="newline"></mspace>
+							<msup>
+								<mi>e</mi>
+								<mrow>
+									<mi>i</mi>
+									<mi>π<!-- π --></mi>
+								</mrow>
+							</msup>
+							<mo>+</mo>
+							<mn>1</mn>
+							<mo>=</mo>
+							<mn>0</mn>
 						</math>
 						<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 							<msup>

package/components/html-block/html-block.js

@@ -130,6 +130,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			 * @type {Boolean}
 			 */
 			compact: { type: Boolean },
+			/**
+			 * Whether to display the HTML in inline mode
+			 */
+			inline: { type: Boolean },
 			/**
 			 * Whether to disable deferred rendering of the user-authored HTML. Do *not* set this
 			 * unless your HTML relies on script executions that may break upon stamping.
@@ -149,18 +153,21 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				position: relative;
 				text-align: left;
 			}
-			:host([hidden]) {
-				display: none;
-			}
+			:host([hidden]),
 			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
 				display: none;
 			}
+			:host([inline]),
+			:host([inline]) div.d2l-html-block-rendered {
+				display: inline;
+			}
 		`];
 	}
 
 	constructor() {
 		super();
 		this.compact = false;
+		this.inline = false;
 		this.noDeferredRendering = false;
 
 		const rendererContextAttributes = getRenderers().reduce((attrs, currentRenderer) => {

package/custom-elements.json

@@ -3467,6 +3467,12 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "no-deferred-rendering",
           "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.",
@@ -3482,6 +3488,13 @@
           "type": "Boolean",
           "default": "false"
         },
+        {
+          "name": "inline",
+          "attribute": "inline",
+          "description": "Whether to display the HTML in inline mode",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "noDeferredRendering",
           "attribute": "no-deferred-rendering",

package/helpers/mathjax.js

@@ -64,14 +64,21 @@ export class HtmlBlockMathRenderer {
 			return elem;
 		}
 
+		// 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
+		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', '<mspace linebreak="newline" style="display: block; height: 0.5rem;">');
+
 		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>${elem.innerHTML}</mjx-body></mjx-doc></div>`;
+		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${inner}</mjx-body></mjx-doc></div>`;
 
 		elem.appendChild(temp);
 		await window.MathJax.startup.promise;
 		window.MathJax.typesetShadow(temp.shadowRoot);
+
 		return temp.shadowRoot.firstChild;
 	}
 

package/package.json

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