@brightspace-ui/core 2.37.3 → 2.38.2

package/components/dropdown/dropdown-opener-mixin.js

@@ -174,6 +174,13 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.dropdownOpened = !this.dropdownOpened;
 	}
 
+	__dispatchOpenerClickEvent() {
+		/** Dispatched when the opener is clicked, useful for when no-auto-open is enabled */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-dropdown-opener-click', { bubbles: false, composed: false }
+		));
+	}
+
 	__getContentElement() {
 		if (!this.shadowRoot) return undefined;
 		return this.shadowRoot.querySelector('slot:not([name])').assignedNodes()
@@ -202,6 +209,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	__onKeypress(e) {
 		if (e.srcElement === this || isComposedAncestor(this.getOpenerElement(), e.srcElement)) {
 			if (e.keyCode !== 13 && e.keyCode !== 32) return;
+			this.__dispatchOpenerClickEvent();
 			if (this.noAutoOpen) return;
 			if (!this.openOnHover) {
 				this.toggleOpen(true);
@@ -256,6 +264,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onOpenerMouseUp(e) {
+		this.__dispatchOpenerClickEvent();
 		if (this.noAutoOpen) return;
 		if (this.openOnHover) {
 			// prevent propogation to window and triggering _onOutsideClick

package/components/empty-state/empty-state-action-button.js

@@ -5,6 +5,7 @@ import { css, html, LitElement, nothing } from 'lit';
 /**
  * `d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.
  * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ * @fires d2l-empty-state-illustrated-check - Internal event
  */
 class EmptyStateActionButton extends LitElement {
 

package/components/empty-state/empty-state-styles.js

@@ -20,7 +20,7 @@ export const emptyStateStyles = css`
 
 	.action-slot::slotted(d2l-empty-state-action-button:first-child),
 	.action-slot::slotted(d2l-empty-state-action-link:first-child) {
-		display: inline-block;
+		display: inline;
 	}
 
 `;

package/components/tag-list/tag-list.js

@@ -130,19 +130,19 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 
 		const clearButton = this.shadowRoot.querySelector('d2l-button-subtle.d2l-tag-list-clear-button');
 		this._clearButtonResizeObserver = new ResizeObserver(() => {
-			this._clearButtonWidth = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('width')));
+			this._clearButtonWidth = parseFloat(getComputedStyle(clearButton).getPropertyValue('width'));
 			this._clearButtonHeight = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('height')));
 		});
 		this._clearButtonResizeObserver.observe(clearButton);
 
 		let container = getOffsetParent(this);
-		if (!container || container.tagName === 'BODY') container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		if (!container) container = this.shadowRoot.querySelector('.tag-list-outer-container');
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
 		this._resizeObserver.observe(container);
 
-		const listContainer = this.shadowRoot.querySelector('.tag-list-container');
+		this._listContainer = this.shadowRoot.querySelector('.tag-list-container');
 		this._listContainerObserver = new ResizeObserver(() => requestAnimationFrame(() => this._handleSlotChange()));
-		this._listContainerObserver.observe(listContainer);
+		this._listContainerObserver.observe(this._listContainer);
 	}
 
 	render() {
@@ -248,6 +248,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		 */
 		let isOverflowing = false;
 		let overflowingIndex = 0;
+
 		for (let k = 1; k <= this._lines; k++) {
 			showing.width = 0;
 
@@ -269,7 +270,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 			}
 		}
 
-		if (!isOverflowing && !this.clearable) {
+		if (!isOverflowing && (!this.clearable || this._items.length < CLEAR_ALL_THRESHOLD)) {
 			this._chompIndex = showing.count;
 			return;
 		}
@@ -297,7 +298,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 
 			return {
 				isHidden: computedStyles.display === 'none',
-				width: Math.ceil(parseFloat(computedStyles.width) || 0)
+				width: parseFloat(computedStyles.width) || 0
 			};
 		});
 
@@ -369,8 +370,12 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._hasShownKeyboardTooltip = true;
 	}
 
-	async _handleResize(entries) {
-		this._availableWidth = Math.floor(entries[0].contentRect.width);
+	async _handleResize() {
+		this._contentReady = false;
+		this._chompIndex = 10000;
+		await this.updateComplete;
+
+		this._availableWidth = Math.ceil(this._listContainer.getBoundingClientRect().width);
 		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
 		else if (this._availableWidth < PAGE_SIZE.large && this._availableWidth >= PAGE_SIZE.medium) this._lines = PAGE_SIZE_LINES.medium;
 		else this._lines = PAGE_SIZE_LINES.small;
@@ -380,6 +385,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		} else {
 			this._chomp();
 		}
+		this._contentReady = true;
 	}
 
 	async _handleSlotChange() {
@@ -388,17 +394,21 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		await this.updateComplete;
 
 		this._items = await this._getTagListItems();
+		this._chompIndex = 10000;
 		if (!this._items || this._items.length === 0) {
-			this._chompIndex = 10000;
 			return;
 		}
+		await this.updateComplete;
 
 		this._itemLayouts = this._getItemLayouts(this._items);
 		this._itemHeight = this._items[0].offsetHeight;
 		this._items.forEach((item, index) => {
 			item.setAttribute('tabIndex', index === 0 ? 0 : -1);
 		});
+
+		this._availableWidth = Math.ceil(this._listContainer.getBoundingClientRect().width);
 		this._chomp();
+
 		this._contentReady = true;
 		if (!this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-item', 'keyboard-tooltip-item');
 	}

package/controllers/subscriber/subscriberControllers.js

@@ -151,7 +151,7 @@ export class IdSubscriberController {
 		let registryIds = this._host[this._idPropertyName];
 		if (!registryIds) return;
 
-		registryIds = registryIds.split(' ');
+		registryIds = registryIds.trim().split(' ');
 		registryIds.forEach(registryId => {
 			this._updateRegistry(registryId, 0);
 		});

package/custom-elements.json

@@ -1815,6 +1815,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -1903,6 +1909,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2266,6 +2278,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2629,6 +2647,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -2963,6 +2987,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -3010,7 +3040,8 @@
           "description": "Dispatched when the action button is clicked"
         },
         {
-          "name": "d2l-empty-state-illustrated-check"
+          "name": "d2l-empty-state-illustrated-check",
+          "description": "Internal event"
         }
       ]
     },
@@ -9071,6 +9102,10 @@
         {
           "name": "d2l-selection-observer-subscribe",
           "description": "Internal event"
+        },
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
         }
       ],
       "slots": [

package/package.json

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