@brightspace-ui/core 2.180.8 → 2.181.0

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

@@ -172,8 +172,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			}
 
 			await this.updateComplete;
-
-			container.focus();
+			// delay the focus to allow focusin to fire
+			setTimeout(() => container.focus());
 		});
 
 		this.addEventListener('keydown', this._handleKeydown);

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

@@ -1,10 +1,10 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
+import { getOffsetParent, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
-import { getOffsetParent } from '../../helpers/dom.js';
 import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -109,6 +109,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._listContainerObserver = null;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
+		this._refocus = null;
 	}
 
 	disconnectedCallback() {
@@ -197,7 +198,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 				aria-roledescription="${this.localize('components.tag-list.role-description')}"
 				@d2l-tag-list-item-clear="${this._handleItemDeleted}"
 				@d2l-tag-list-item-tooltip-show="${this._handleKeyboardTooltipShown}">
-				<slot @slotchange="${this._handleSlotChange}"></slot>
+				<slot @slotchange="${this._handleSlotChange}" @focusout="${this._handleSlotFocusOut}" @focusin="${this._handleSlotFocusIn}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
 					class="${classMap(clearableClasses)}"
@@ -219,9 +220,10 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 					<d2l-button-subtle aria-hidden="true" slim text="${this.localize('components.tag-list.num-hidden', { count: '##' })}" class="d2l-tag-list-hidden-button"></d2l-button-subtle>
 					${this.arrowKeysContainer(list)}
 				</div>
-			`, this.localize('components.tag-list.interactive-label', { count: this._items ? this._items.length : 0 }),
+			`,
+			this.localize('components.tag-list.interactive-label', { count: this._items ? this._items.length : 0 }),
 			() => {
-				if (this._items && this._items.length > 0) this._items[0].focus();
+				this._items?.[0]?.focus?.();
 			}
 		);
 	}
@@ -350,9 +352,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		const itemIndex = children.indexOf(rootTarget);
 
 		if (children.length <= 1) return;
-		const focusableElem = children[itemIndex - 1] || children[itemIndex + 1];
 
-		setTimeout(() => focusableElem.focus(), this.clearFocusTimeout);
+		setTimeout(() => {
+			const focusableElem = children[itemIndex - 1] || (children[itemIndex] === e.target ? children[itemIndex + 1] : children[itemIndex]);
+			focusableElem.focus();
+		}, this.clearFocusTimeout);
 	}
 
 	_handleKeyboardTooltipShown() {
@@ -406,7 +410,22 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._items[0].setAttribute('keyboard-tooltip-item', true);
 		if (this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-shown', true);
 		await this.updateComplete;
-		refocus.focus?.();
+		if (this._refocus?.classList.contains('d2l-tag-list-button')) {
+			this._refocus = this.shadowRoot.querySelector('.d2l-tag-list-button');
+		}
+		await this._refocus?.updateComplete;
+		(this._refocus || refocus).focus?.();
+		this._refocus = null;
+	}
+
+	_handleSlotFocusIn() {
+		this._items[0].setAttribute('tabindex', '-1');
+	}
+
+	_handleSlotFocusOut(e) {
+		if (!isComposedAncestor(e.currentTarget, e.relatedTarget)) {
+			this._items[0].setAttribute('tabindex', '0');
+		}
 	}
 
 	async _toggleHiddenTagVisibility(e) {
@@ -417,10 +436,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		const isMoreButton = e.target.classList.contains('d2l-tag-list-button-show-more');
 		await this.updateComplete;
 		if (isMoreButton) {
-			this._items[this._chompIndex].focus();
+			this._refocus = this._items[this._chompIndex];
 		} else {
-			this.shadowRoot.querySelector('.d2l-tag-list-button')?.focus();
+			this._refocus = this.shadowRoot.querySelector('.d2l-tag-list-button');
 		}
+		this._refocus.focus();
 	}
 }
 

package/mixins/loading-complete/README.md

@@ -0,0 +1,47 @@
+# LoadingCompleteMixin
+
+The `LoadingCompleteMixin` contains boilerplate code for [`getLoadingComplete`](https://github.com/BrightspaceUI/testing#waiting-for-asynchronous-components). It simplifies fixture setup for custom components in automated tests, and provides a `loadingComplete` promise that can be used internally.
+
+## Usage
+Apply the mixin and call `resolveLoadingComplete()` once your component has finished loading
+
+```js
+import { LoadingCompleteMixin } from '@brightspace-ui/core/mixins/loading-complete/loading-complete-mixin.js';
+
+class MyComponent extends LoadingCompleteMixin(LitElement) {
+
+	connectedCallback() {
+		this._fetchMyData().then(this.resolveLoadingComplete);
+	}
+
+}
+```
+
+To make use of the `loadingComplete` promise, simply `await` it where needed:
+
+```js
+async removeSkeleton() {
+	await this.loadingComplete;
+	this.skeleton = false;
+}
+```
+
+If for any reason `resolveLoadingComplete` is never called, `loadingComplete` won't resolve and any consumers will hang.
+
+### `getLoadingComplete`
+
+In some cases, instead of finding one spot to call `resolveLoadingComplete`, you may find it easier to `await` a set of promises in a custom `getLoadingComplete` method.
+
+You'll also need to use this method if you're working in a general-use mixin rather than directly in a component.
+
+```js
+class MyComponent extends LoadingCompleteMixin(LitElement) {
+
+	async getLoadingComplete() {
+		await super.getLoadingComplete();
+		await this._myCustomIconImport;
+		await Promise.all(this._allMyDataPromises);
+	}
+}
+```
+Note that the work to generate these promises should have already started, before `firstUpdated`, and we simply `await` them here.

package/mixins/loading-complete/loading-complete-mixin.js

@@ -0,0 +1,30 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+export const LoadingCompleteMixin = dedupeMixin((superclass) => class extends superclass {
+
+	#loadingCompleteResolve;
+
+	// eslint-disable-next-line sort-class-members/sort-class-members
+	#loadingCompletePromise = !Object.prototype.hasOwnProperty.call(this.constructor.prototype, 'getLoadingComplete')
+		? new Promise(resolve => this.#loadingCompleteResolve = resolve)
+		: Promise.resolve();
+
+	get loadingComplete() {
+		return this.getLoadingComplete();
+	}
+
+	get resolveLoadingComplete() {
+		return () => {
+			if (this.#loadingCompleteResolve) {
+				this.#loadingCompleteResolve();
+				this.#loadingCompleteResolve = null;
+			}
+		};
+	}
+
+	async getLoadingComplete() {
+		await super.getLoadingComplete?.();
+		return this.#loadingCompletePromise;
+	}
+
+});

package/package.json

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