@brightspace-ui/core 3.11.0 → 3.13.0

package/components/filter/filter.js

@@ -8,6 +8,7 @@ import '../dropdown/dropdown-menu.js';
 import '../empty-state/empty-state-action-button.js';
 import '../empty-state/empty-state-action-link.js';
 import '../empty-state/empty-state-simple.js';
+import '../expand-collapse/expand-collapse-content.js';
 import '../hierarchical-view/hierarchical-view.js';
 import '../inputs/input-search.js';
 import '../list/list.js';
@@ -132,12 +133,20 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			}
 
 			.d2l-filter-dimension-set-value {
+				align-items: center;
 				color: var(--d2l-color-ferrite);
 				display: flex;
 				gap: 0.45rem;
 				line-height: unset;
 				overflow: hidden;
 			}
+			.d2l-filter-dimension-set-value d2l-icon {
+				flex-shrink: 0;
+			}
+			d2l-expand-collapse-content[expanded] {
+				padding-block: 0.5rem;
+				padding-inline: 0.2rem;
+			}
 
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
@@ -577,11 +586,22 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				?hidden="${item.hidden}"
 				key="${item.key}"
 				label="${item.text}"
+				?no-primary-action="${item.additionalContent && item.selected}"
 				selectable
 				?selected="${item.selected}">
-				<div class="d2l-filter-dimension-set-value d2l-body-compact">
-					<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
-					${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+				<div>
+					<div class="d2l-filter-dimension-set-value d2l-body-compact">
+						<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
+						${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+						${item.additionalContent
+		? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}"></d2l-icon>`
+		: nothing}
+					</div>
+					${item.additionalContent ? html`
+						<d2l-expand-collapse-content ?expanded="${item.selected}">
+							${item.additionalContent()}
+						</d2l-expand-collapse-content>
+					` : nothing}
 				</div>
 			</d2l-list-item>
 		`;

package/mixins/interactive/interactive-mixin.js

@@ -1,3 +1,4 @@
+import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -7,11 +8,6 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../../components/offscreen/offscreen.js';
 import { RtlMixin } from '../rtl/rtl-mixin.js';
 
-const keyCodes = {
-	ENTER: 13,
-	ESCAPE: 27
-};
-
 export function isInteractiveDescendant(node) {
 	if (!node) return false;
 	return !!findComposedAncestor(node, node => {
@@ -41,6 +37,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	constructor() {
 		super();
+		this._dismissibleId = null;
 		this._focusingToggle = false;
 		this._hasInteractiveAncestor = false;
 		this._interactive = false;
@@ -55,6 +52,14 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		this._hasInteractiveAncestor = (parentGrid !== null);
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		if (!this._dismissibleId) return;
+		clearDismissible(this._dismissibleId);
+		this._dismissibleId = null;
+	}
+
 	focus() {
 		if (!this.shadowRoot) return;
 		if (this._hasInteractiveAncestor && !this._interactive) this.shadowRoot.querySelector('.interactive-toggle').focus();
@@ -97,20 +102,29 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	_handleInteractiveContentFocusIn() {
 		this._interactive = true;
+		this._dismissibleId = setDismissible(async() => {
+			await this._handleInteractiveExit();
+		});
 	}
 
 	_handleInteractiveContentFocusOut(e) {
 		if (isComposedAncestor(this.shadowRoot.querySelector('.interactive-container-content'), e.relatedTarget)) return;
 		// focus moved out of the interactive content
 		this._interactive = false;
+		if (this._dismissibleId) {
+			clearDismissible(this._dismissibleId);
+			this._dismissibleId = null;
+		}
+	}
+
+	async _handleInteractiveExit() {
+		this._interactive = false;
+		await this.updateComplete;
+		this.shadowRoot.querySelector('.interactive-toggle').focus();
 	}
 
 	async _handleInteractiveKeyDown(e) {
-		if (this._interactive && e.keyCode === keyCodes.ESCAPE) {
-			this._interactive = false;
-			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-toggle').focus();
-		}
+		if (this._interactive && e.keyCode === 9) e.stopPropagation(); // tab
 	}
 
 	_handleInteractiveToggleBlur() {
@@ -129,9 +143,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	async _handleInteractiveTrapEndFocus() {
 		// focus moved to trap-end either forwards from contents or backwards from outside - focus interactive toggle
-		this._interactive = false;
-		await this.updateComplete;
-		this.shadowRoot.querySelector('.interactive-toggle').focus();
+		await this._handleInteractiveExit();
 	}
 
 	async _handleInteractiveTrapStartFocus(e) {
@@ -141,9 +153,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 			if (nextFocusable) nextFocusable.focus();
 		} else {
 			// focus moved to trap-start backwards from within contents - toggle to non-interactive and apply focus
-			this._interactive = false;
-			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-toggle').focus();
+			await this._handleInteractiveExit();
 		}
 	}
 

package/package.json

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