@brightspace-ui/core 2.187.0 → 2.187.1

package/components/backdrop/backdrop.js

@@ -1,14 +1,13 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
-import { getUniqueId } from '../../helpers/uniqueId.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-const scrollKeys = [];
+const modals = new Set();
 let scrollOverflow = null;
 
 /**
@@ -84,10 +83,7 @@ class Backdrop extends LitElement {
 
 	disconnectedCallback() {
 		// allow body scrolling, show hidden elements, if backdrop is removed from the DOM
-		if (this._bodyScrollKey) {
-			allowBodyScroll(this._bodyScrollKey);
-			this._bodyScrollKey = null;
-		}
+		allowBodyScroll(this);
 		if (this._hiddenElements) {
 			showAccessible(this._hiddenElements);
 			this._hiddenElements = null;
@@ -108,7 +104,7 @@ class Backdrop extends LitElement {
 		if (this.shown) {
 
 			if (this._state === null) {
-				this._bodyScrollKey = preventBodyScroll();
+				preventBodyScroll(this);
 				this._hiddenElements = hideAccessible(this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`));
 			}
 			this._state = 'showing';
@@ -117,8 +113,7 @@ class Backdrop extends LitElement {
 
 			const hide = () => {
 				if (!this.shown) {
-					allowBodyScroll(this._bodyScrollKey);
-					this._bodyScrollKey = null;
+					allowBodyScroll(this);
 					showAccessible(this._hiddenElements);
 					this._hiddenElements = null;
 					this._state = null;
@@ -135,19 +130,25 @@ class Backdrop extends LitElement {
 		}
 
 	}
-
 }
 
-export function allowBodyScroll(key) {
-	const index = scrollKeys.indexOf(key);
-	if (index === -1) return;
-	scrollKeys.splice(index, 1);
-	if (scrollKeys.length === 0) {
+export function allowBodyScroll(modal) {
+	if (!modals.has(modal)) return;
+	modals.delete(modal);
+	if (!modals.size) {
 		document.body.style.overflow = scrollOverflow;
 		scrollOverflow = null;
 	}
 }
 
+export function preventBodyScroll(modal) {
+	if (!modals.size) {
+		scrollOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+	}
+	modals.add(modal);
+}
+
 function hideAccessible(target) {
 
 	const hiddenElements = [];
@@ -184,16 +185,6 @@ function hideAccessible(target) {
 	return hiddenElements;
 }
 
-export function preventBodyScroll() {
-	if (scrollKeys.length === 0) {
-		scrollOverflow = document.body.style.overflow;
-		document.body.style.overflow = 'hidden';
-	}
-	const key = getUniqueId();
-	scrollKeys.push(key);
-	return key;
-}
-
 function showAccessible(elems) {
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];

package/components/dialog/demo/dialog.html

@@ -206,6 +206,29 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (native)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openNative">Show Dialog</d2l-button>
+					<d2l-dialog id="dialogNative" title-text="Dialog Title">
+						<div>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#dialogNative')._useNative = true;
+						document.querySelector('#openNative').addEventListener('click', () => {
+							document.querySelector('#dialogNative').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-mixin.js

@@ -313,8 +313,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._focusOpener();
 		this._state = null;
 		this.opened = false;
-		allowBodyScroll(this._bodyScrollKey);
-		this._bodyScrollKey = null;
+		if (this._useNative) allowBodyScroll(this);
 		if (this._action === undefined) this._action = abortAction;
 		/** Dispatched with the action value when the dialog is closed for any reason */
 		this.dispatchEvent(new CustomEvent(
@@ -416,8 +415,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			return node.classList && node.classList.contains('d2l-dialog-outer');
 		});
 
-		// native dialog backdrop does not prevent body scrolling
-		this._bodyScrollKey = preventBodyScroll();
+		if (this._useNative) preventBodyScroll(this);
 
 		// focus first focusable child prior to auto resize (fixes screen reader hiccups)
 		this._focusInitial();

package/package.json

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