@brightspace-ui/core 2.6.0 → 2.6.3

package/components/list/demo/list-drag-and-drop.js

@@ -167,7 +167,7 @@ class ListDemoDragAndDrop extends LitElement {
 		await this.updateComplete;
 
 		if (e.detail.keyboardActive) {
-			requestAnimationFrame(() => {
+			setTimeout(() => {
 				if (!this.shadowRoot) return;
 				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
 				newItem.activateDragHandle();

package/components/list/list-item-drag-handle.js

@@ -262,23 +262,12 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 	}
 
-	_onInactiveKeyDown(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
-			e.preventDefault();
-		}
-	}
-
-	_onPreventDefault(e) {
-		e.preventDefault();
-	}
-
 	_renderDragger() {
 		return html`
 			<button
 				class="d2l-list-item-drag-handle-dragger-button"
 				@click="${this._onInactiveKeyboard}"
-				@keyup="${this._onInactiveKeyboard}"
-				@keydown="${this._onInactiveKeyDown}"
+				@keydown="${this._onInactiveKeyboard}"
 				aria-label="${this._defaultLabel}"
 				?disabled="${this.disabled}">
 				<d2l-icon icon="tier1:dragger" class="d2l-button-icon"></d2l-icon>
@@ -295,8 +284,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				@focusin="${this._onFocusInKeyboardButton}"
 				@focusout="${this._onFocusOutKeyboardButton}"
 				id="${this._buttonId}"
-				@keydown="${this._onPreventDefault}"
-				@keyup="${this._onActiveKeyboard}">
+				@keydown="${this._onActiveKeyboard}">
 				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
 				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
 			</button>

package/components/list/list-item-generic-layout.js

@@ -172,7 +172,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	firstUpdated() {
 		this.addEventListener('keydown', this._onKeydown.bind(this));
-		this.addEventListener('keyup', this._onKeyup.bind(this));
 		this.addEventListener('focusin', this._setFocusInfo.bind(this));
 	}
 
@@ -408,30 +407,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	}
 
 	_onKeydown(event) {
-		if (!this.gridActive) return;
-		let preventDefault = true;
-		switch (event.keyCode) {
-			case keyCodes.ENTER:
-			case keyCodes.SPACE:
-			case keyCodes.RIGHT:
-			case keyCodes.LEFT:
-			case keyCodes.UP:
-			case keyCodes.DOWN:
-			case keyCodes.HOME:
-			case keyCodes.END:
-			case keyCodes.PAGEUP:
-			case keyCodes.PAGEDOWN:
-				break;
-			default:
-				preventDefault = false;
-		}
-		if (preventDefault) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-	}
-
-	_onKeyup(event) {
 		if (!this.gridActive) return;
 		let node = null;
 		let preventDefault = true;

package/components/list/list-item-mixin.js

@@ -74,7 +74,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
 			_hovering: { type: Boolean, reflect: true },
+			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
+			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
 			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true }
@@ -163,8 +165,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content ::slotted(*) {
 				margin-top: 0.05rem;
 			}
-			:host([_hovering]) .d2l-list-item-content,
-			:host([_focusing]) .d2l-list-item-content {
+			:host([_hovering-primary-action]) .d2l-list-item-content,
+			:host([_focusing-primary-action]) .d2l-list-item-content {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 				--d2l-list-item-content-text-decoration: underline;
 			}
@@ -511,11 +513,19 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		hasDisplayedKeyboardTooltip = true;
 	}
 
+	_onFocusInPrimaryAction() {
+		this._focusingPrimaryAction = true;
+	}
+
 	_onFocusOut() {
 		this._focusing = false;
 		this._displayKeyboardTooltip = false;
 	}
 
+	_onFocusOutPrimaryAction() {
+		this._focusingPrimaryAction = false;
+	}
+
 	_onFullscreenWithin(e) {
 		if (e.detail.state) this._fullscreenWithinCount += 1;
 		else this._fullscreenWithinCount -= 1;
@@ -527,6 +537,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	}
 
 	_onMouseEnterPrimaryAction() {
+		this._hoveringPrimaryAction = true;
 		this._hovering = true;
 	}
 
@@ -535,6 +546,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	}
 
 	_onMouseLeavePrimaryAction() {
+		this._hoveringPrimaryAction = false;
 		this._hovering = false;
 	}
 
@@ -572,6 +584,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
+					@focusin="${this._onFocusInPrimaryAction}"
+					@focusout="${this._onFocusOutPrimaryAction}"
 					@mouseenter="${this._onMouseEnterPrimaryAction}"
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}

package/components/tag-list/README.md

@@ -1,6 +1,5 @@
-
 # Tag List
-*This component is in progress and the api is not yet stable.*
+*This component is in progress. The API is generally stable but the ability to clear tags is currently a WIP.*
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 
@@ -12,9 +11,14 @@ Tag lists are used to present a list of compact, discrete pieces of information.
 </script>
 
 <d2l-tag-list description="Example Tags">
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Excepteur sint"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Cillum"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Saunt in culpa"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Laboris nisi"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 
@@ -30,9 +34,10 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 </script>
 
 <d2l-tag-list description="Example Tags">
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
-  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 

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

@@ -26,6 +26,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			 */
 			description: { type: String },
 			_chompIndex: { type: Number },
+			_lines: { type: Number },
 			_showHiddenTags: { type: Boolean }
 		};
 	}
@@ -122,7 +123,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		`;
 
 		const outerContainerStyles = {
-			maxHeight: this._showHiddenTags ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
+			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
 		};
 
 		return html`

package/custom-elements.json

@@ -4918,7 +4918,8 @@
           "type": "number"
         },
         {
-          "name": "trailingZeroes"
+          "name": "trailingZeroes",
+          "type": "boolean"
         },
         {
           "name": "value",
@@ -8322,7 +8323,7 @@
     {
       "name": "d2l-overflow-group",
       "path": "./components/overflow-group/overflow-group.js",
-      "description": "A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container",
+      "description": "\nA component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container",
       "attributes": [
         {
           "name": "auto-show",
@@ -8449,7 +8450,7 @@
     {
       "name": "d2l-scroll-wrapper",
       "path": "./components/scroll-wrapper/scroll-wrapper.js",
-      "description": "Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.",
+      "description": "\nWraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.",
       "attributes": [
         {
           "name": "hide-actions",

package/package.json

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

package/tools/mathjax-test-context.js

@@ -0,0 +1,4 @@
+document.documentElement.dataset.mathjaxContext = JSON.stringify({
+	outputScale: 1.1,
+	renderLatex: true
+});