@brightspace-ui/core 2.180.6 → 2.180.8

package/components/menu/README.md

@@ -138,6 +138,10 @@ This `d2l-menu-item-link` is used for navigating. It gives users the ability to
 | `href` | String, required | The URL the menu item link navigates to |
 | `text` | String, required | Text displayed by the menu item |
 | `disabled` | Boolean | Disables the menu item |
+
+### Slots
+
+* `supporting`: Allows supporting information to be displayed on the right-most side of the menu item
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -181,6 +185,10 @@ The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up
 | `disabled` | Boolean | Disables the menu item |
 | `selected` | Boolean | Thie will set the item to be selected by default |
 
+### Slots
+
+* `supporting`: Allows supporting information to be displayed on the right-most side of the menu item
+
 ### Events
 
 * `d2l-menu-item-change`: dispatched when the selected menu item changes
@@ -227,6 +235,10 @@ The `d2l-menu-item-radio` component is used for selection. It can be wired-up to
 | `disabled` | Boolean | Disables the menu item |
 | `selected` | Boolean | This will set the item to be seelcted by default |
 
+### Slots
+
+* `supporting`: Allows supporting information to be displayed on the right-most side of the menu item
+
 ### Events
 
 * `d2l-menu-item-change`: dispatched when the selected menu item changes

package/components/menu/menu-item-checkbox.js

@@ -6,6 +6,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A menu item component used for selection. Multiple checkboxes can be selected at once.
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
 class MenuItemCheckbox extends RtlMixin(MenuItemSelectableMixin(LitElement)) {
 
@@ -27,7 +28,7 @@ class MenuItemCheckbox extends RtlMixin(MenuItemSelectableMixin(LitElement)) {
 	render() {
 		return html`
 			<d2l-icon icon="tier1:check"></d2l-icon>
-	<div class="d2l-menu-item-text">${this.text}</div>
+			<div class="d2l-menu-item-text">${this.text}</div>
 			<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
 		`;
 	}

package/components/menu/menu-item-link.js

@@ -6,6 +6,7 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
 class MenuItemLink extends MenuItemMixin(LitElement) {
 

package/components/menu/menu-item-radio.js

@@ -6,6 +6,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A menu item component used for radio selection. Only one radio item in a given d2l-menu may be selected at once (i.e., selecting one option will deselect the other selected "d2l-menu-item-radio" item).
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
 class MenuItemRadio extends RtlMixin(MenuItemRadioMixin(LitElement)) {
 

package/components/tooltip/tooltip.js

@@ -582,18 +582,17 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._openDir = space.dir;
 
 		// Compute the x and y position of the tooltip relative to its target
-		let parentTop;
-		let parentLeft;
+		let offsetTop, offsetLeft;
 		if (offsetParent && offsetParent.tagName !== 'BODY') {
-			const parentRect = offsetParent.getBoundingClientRect();
-			parentTop = parentRect.top + offsetParent.clientTop;
-			parentLeft = parentRect.left + offsetParent.clientLeft;
+			const offsetRect = offsetParent.getBoundingClientRect();
+			offsetTop = offsetRect.top + offsetParent.clientTop - offsetParent.scrollTop;
+			offsetLeft = offsetRect.left + offsetParent.clientLeft - offsetParent.scrollLeft;
 		} else {
-			parentTop = -document.documentElement.scrollTop;
-			parentLeft = -document.documentElement.scrollLeft;
+			offsetTop = -document.documentElement.scrollTop;
+			offsetLeft = -document.documentElement.scrollLeft;
 		}
-		const top = targetRect.top - parentTop;
-		const left = targetRect.left - parentLeft;
+		const top = targetRect.top - offsetTop;
+		const left = targetRect.left - offsetLeft;
 
 		let positionRect;
 		if (this._isAboveOrBelow()) {
@@ -699,18 +698,18 @@ class Tooltip extends RtlMixin(LitElement) {
 		});
 
 		if (this.boundary && offsetParent) {
-			const parentRect = offsetParent.getBoundingClientRect();
+			const offsetRect = offsetParent.getBoundingClientRect();
 			if (!isNaN(this.boundary.left)) {
-				spaceAround.left = Math.min(targetRect.left - parentRect.left - this.boundary.left, spaceAround.left);
+				spaceAround.left = Math.min(targetRect.left - offsetRect.left - this.boundary.left, spaceAround.left);
 			}
 			if (!isNaN(this.boundary.right)) {
-				spaceAround.right = Math.min(parentRect.right - targetRect.right - this.boundary.right, spaceAround.right);
+				spaceAround.right = Math.min(offsetRect.right - targetRect.right - this.boundary.right, spaceAround.right);
 			}
 			if (!isNaN(this.boundary.top)) {
-				spaceAround.above = Math.min(targetRect.top - parentRect.top - this.boundary.top, spaceAround.above);
+				spaceAround.above = Math.min(targetRect.top - offsetRect.top - this.boundary.top, spaceAround.above);
 			}
 			if (!isNaN(this.boundary.bottom)) {
-				spaceAround.below = Math.min(parentRect.bottom - targetRect.bottom - this.boundary.bottom, spaceAround.below);
+				spaceAround.below = Math.min(offsetRect.bottom - targetRect.bottom - this.boundary.bottom, spaceAround.below);
 			}
 		}
 		const isRTL = this.getAttribute('dir') === 'rtl';
@@ -729,8 +728,9 @@ class Tooltip extends RtlMixin(LitElement) {
 		if (this.for) {
 			const targetSelector = `#${cssEscape(this.for)}`;
 			target = ownerRoot.querySelector(targetSelector);
-			target = target || (ownerRoot && ownerRoot.host && ownerRoot.host.querySelector(targetSelector));
+			target = target || ownerRoot?.host?.querySelector(targetSelector);
 		} else {
+			console.warn('<d2l-tooltip>: missing required attribute "for"');
 			const parentNode = this.parentNode;
 			target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
 		}

package/custom-elements.json

@@ -9487,6 +9487,12 @@
           "name": "d2l-menu-item-visibility-change",
           "description": "Dispatched when the visibility of the menu item changes"
         }
+      ],
+      "slots": [
+        {
+          "name": "supporting",
+          "description": "Allows supporting information to be displayed on the right-most side of the menu item"
+        }
       ]
     },
     {
@@ -9578,6 +9584,12 @@
           "name": "d2l-menu-item-visibility-change",
           "description": "Dispatched when the visibility of the menu item changes"
         }
+      ],
+      "slots": [
+        {
+          "name": "supporting",
+          "description": "Allows supporting information to be displayed on the right-most side of the menu item"
+        }
       ]
     },
     {
@@ -9660,6 +9672,12 @@
           "name": "d2l-menu-item-visibility-change",
           "description": "Dispatched when the visibility of the menu item changes"
         }
+      ],
+      "slots": [
+        {
+          "name": "supporting",
+          "description": "Allows supporting information to be displayed on the right-most side of the menu item"
+        }
       ]
     },
     {

package/package.json

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