@brightspace-ui/core 3.12.0 → 3.13.0

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.12.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",