@brightspace-ui/core 3.334.1 → 3.336.0

package/components/popover/popover-mixin.js

@@ -60,6 +60,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	static properties = {
 		_async: { type: Boolean },
 		_asyncState: { state: true },
+		_autoWidth: { state: true },
 		_contentHeight: { state: true },
 		_location: { type: String, reflect: true, attribute: '_location' },
 		_margin: { state: true },
@@ -325,6 +326,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			|| properties?.position?.location === positionLocations.inlineEnd) this._margin = 0;
 		else this._margin = 18;
 		this._async = properties?.async ?? false;
+		this._autoWidth = properties?.autoWidth ?? false;
 		this._maxHeight = properties?.maxHeight;
 		this._maxWidth = properties?.maxWidth;
 		this._minHeight = properties?.minHeight;
@@ -819,7 +821,6 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	#getLocation(spaceAround, spaceAroundScroll, spaceRequired) {
-
 		const preferred = this._preferredPosition;
 		if (!preferred.allowFlip) {
 			return preferred.location;
@@ -1024,13 +1025,13 @@ export const PopoverMixin = superclass => class extends superclass {
 					if (this._preferredPosition.span === positionSpans.end) {
 						position.left = openerRect.left + xAdjustment;
 					} else {
-						position.right = (openerRect.right * -1) + xAdjustment;
+						position.right = this.clientWidth - openerRect.right + xAdjustment;
 					}
 				} else {
 					if (this._preferredPosition.span === positionSpans.end) {
 						position.right = window.innerWidth - openerRect.right + xAdjustment - SCROLLBAR_WIDTH;
 					} else {
-						position.left = (window.innerWidth - openerRect.left - xAdjustment - SCROLLBAR_WIDTH) * -1;
+						position.left = this.clientWidth - (window.innerWidth - openerRect.left - xAdjustment - SCROLLBAR_WIDTH);
 					}
 				}
 			} else {
@@ -1053,9 +1054,9 @@ export const PopoverMixin = superclass => class extends superclass {
 
 			if (this._location === positionLocations.inlineStart) {
 				if (!this._rtl) {
-					position.right = (openerRect.left - this._offset + 7) * -1; // 7 minor adjustment to position pointer at edge of content
+					position.right = this.clientWidth - (openerRect.left - this._offset + 7); // 7 minor adjustment to position pointer at edge of content
 				} else {
-					position.left = (window.innerWidth - openerRect.right + 7 - this._offset - SCROLLBAR_WIDTH) * -1; // 7 minor adjustment to position pointer at edge of content
+					position.left = this.clientWidth - (window.innerWidth - openerRect.right + 7 - this._offset - SCROLLBAR_WIDTH); // 7 minor adjustment to position pointer at edge of content
 				}
 			} else {
 				if (!this._rtl) {
@@ -1099,9 +1100,9 @@ export const PopoverMixin = superclass => class extends superclass {
 
 			if (this._location === positionLocations.inlineStart) {
 				if (!this._rtl) {
-					position.right = (openerRect.left - this._offset) * -1;
+					position.right = this.clientWidth - (openerRect.left - this._offset);
 				} else {
-					position.left = (window.innerWidth - openerRect.right - this._offset - SCROLLBAR_WIDTH) * -1;
+					position.left = this.clientWidth - (window.innerWidth - openerRect.right - this._offset - SCROLLBAR_WIDTH);
 				}
 			} else {
 				if (!this._rtl) {
@@ -1202,6 +1203,12 @@ export const PopoverMixin = superclass => class extends superclass {
 			minWidth: this._minWidth ? `${this._minWidth}px` : undefined,
 			width: this._width ? `${this._width + 2}px` : undefined
 		};
+		if (this._autoWidth) {
+			// if auto-width is set, max-width is set to the available space (i.e. this._width or window width)
+			const isInline = this._location === positionLocations.inlineStart || this._location === positionLocations.inlineEnd;
+			widthStyle.maxWidth = isInline ? widthStyle.width : `${window.innerWidth - 2 * inlineMargin}px`;
+			widthStyle.width = 'auto';
+		}
 
 		const contentStyle = {
 			maxHeight: this._contentHeight ? `${this._contentHeight}px` : undefined,

package/components/tooltip/tooltip.js

@@ -64,6 +64,11 @@ class Tooltip extends PopoverMixin(LitElement) {
 		 * @type {'start'|'end'}
 		 */
 		align: { type: String, reflect: true },
+		/**
+		 * Let the tooltip adjust to the content width
+		 * @type {boolean}
+		 */
+		autoWidth: { type: Boolean, attribute: 'auto-width', reflect: true },
 		/**
 		 * ADVANCED: Announce the tooltip innerText when applicable (for use with custom elements)
 		 * @type {boolean}
@@ -152,6 +157,13 @@ class Tooltip extends PopoverMixin(LitElement) {
 			padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
 			white-space: normal;
 		}
+		:host([auto-width]) {
+			width: auto;
+		}
+		:host([auto-width]) .d2l-tooltip-content {
+			max-width: none;
+			overflow: visible;
+		}
 		::slotted(ul),
 		::slotted(ol) {
 			padding-inline-start: 1rem;
@@ -167,6 +179,7 @@ class Tooltip extends PopoverMixin(LitElement) {
 	constructor() {
 		super();
 		this.announced = false;
+		this.autoWidth = false;
 		this.closeOnClick = false;
 		this.delay = 300;
 		this.disableFocusLock = false;
@@ -232,9 +245,9 @@ class Tooltip extends PopoverMixin(LitElement) {
 
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
-
-		if (changedProperties.has('align') || changedProperties.has('forceShow') || changedProperties.has('offset') || changedProperties.has('positionLocation')) {
+		if (['align', 'forceShow', 'offset', 'positionLocation', 'autoWidth'].some(prop => changedProperties.has(prop))) {
 			super.configure({
+				autoWidth: this.autoWidth,
 				maxWidth: '350',
 				minWidth: '48',
 				noAutoClose: this.forceShow,

package/custom-elements.json

@@ -17927,6 +17927,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "auto-width",
+          "description": "Let the tooltip adjust to the content width",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "close-on-click",
           "description": "ADVANCED: Causes the tooltip to close when its target is clicked",
@@ -18005,6 +18011,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "autoWidth",
+          "attribute": "auto-width",
+          "description": "Let the tooltip adjust to the content width",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "closeOnClick",
           "attribute": "close-on-click",

package/helpers/README.md

@@ -275,6 +275,20 @@ requestIdleCallback((deadline) => {
 }, { timeout: 1000 });
 ```
 
+## Trusted Types
+
+The Trusted Types module provides a polyfill for the browser's TrustedTypes API along with Trusted Type policies. These policies provide a `createHTML` method for creating TrustedHTML objects that can be passed to injection sinks like `innerHTML`.
+
+```js
+import { markdownHtmlPolicy, safeHtmlPolicy } from '@brightspace-ui/core/helpers/trusted-types.js';
+
+// filters HTML string and returns TrustedHTML
+const result = safeHtmlPolicy.createHTML(html);
+
+// filters HTML string for Markdown supported elements and returns TrustedHTML
+const result = markdownHtmlPolicy.createHTML(html);
+```
+
 ## UniqueId
 
 A simple helper that returns a unique id.

package/helpers/trusted-types.js

@@ -0,0 +1,21 @@
+import DOMPurify from 'dompurify';
+
+if (typeof globalThis.trustedTypes === 'undefined') {
+	globalThis.trustedTypes = { createPolicy: (name, rules) => rules };
+}
+
+export const safeHtmlPolicy = globalThis.trustedTypes.createPolicy('safe-html', {
+	createHTML: (input) => DOMPurify.sanitize(input, {
+		TRUSTED_TYPES_POLICY: null
+	})
+});
+
+export const markdownHtmlPolicy = globalThis.trustedTypes.createPolicy('markdown-html', {
+	createHTML: (input) => DOMPurify.sanitize(input, {
+		ALLOWED_TAGS: ['a', 'blockquote', 'br', 'code', 'em', 'li', 'ol', 'p', 'pre', 'strong', 'ul'],
+		ALLOWED_ATTR: ['class', 'href', 'start', 'title'],
+		ALLOW_ARIA_ATTR: false,
+		ALLOW_DATA_ATTR: false,
+		TRUSTED_TYPES_POLICY: null
+	})
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.334.1",
+  "version": "3.336.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -76,6 +76,7 @@
     "@brightspace-ui/intl": "^3",
     "@brightspace-ui/lms-context-provider": "^1",
     "@open-wc/dedupe-mixin": "^2",
+    "dompurify": "^3.4.17",
     "ifrau": "^0.42",
     "lit": "^3",
     "prismjs": "^1"