@brightspace-ui/core 3.290.0 → 3.292.0

package/components/page/page.js

@@ -14,7 +14,7 @@ const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
 export const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
 export const PANEL_MIN_WIDTH = 320;
 
-const DIVIDER_GUTTER_WIDTH = 18;
+export const DIVIDER_GUTTER_WIDTH = 18;
 
 export const SIDE_NAV_DEFAULT_WIDTH = 334;
 export const supportingDefaultWidth = contentWidth => Math.floor(contentWidth / 3);
@@ -463,7 +463,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 					${this.#renderSideNavPanel(sideNavPanelKey)}
 					<main aria-label="${ifDefined(showScrim ? this.localize(scrimMessage) : undefined)}">
 						<div class="main" ?inert="${showScrim}"><slot></slot></div>
-						${showScrim ? html`<div class="scrim"></div>` : nothing}
+						${showScrim ? html`<div class="scrim" @click="${this.#handleScrimClick}"></div>` : nothing}
 					</main>
 					${this.#renderSupportingPanel(supportingPanelKey)}
 				</div>
@@ -483,12 +483,22 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	#stateStorageKey;
 
 	#handleMobileModeChange = (e) => {
-		// TO DO: Collapse supporting panel if needed
+		// TO DO: Collapse supporting-overlay panel when moving from mobile to overlay mode
 		this._inMobileMode = e.matches;
 	};
 
 	#handleOverlayModeChange = (e) => {
-		// TO DO: Collapse side-nav and supporting panel if needed
+		if (!this._inOverlayMode && e.matches) {
+			this._panelState.setCollapsed('side-nav-overlay', true);
+			this._panelState.setCollapsed('supporting-overlay', true);
+		} else if (this._inOverlayMode && !e.matches) {
+			if (!this._panelState.getCollapsed('side-nav-overlay')) {
+				this._panelState.setCollapsed('side-nav', false);
+			}
+			if (!this._panelState.getCollapsed('supporting-overlay')) {
+				this._panelState.setCollapsed('supporting', false);
+			}
+		}
 		this._inOverlayMode = e.matches;
 	};
 
@@ -535,6 +545,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._panelState.setCollapsed(panelKey, collapsed);
 	};
 
+	#handleScrimClick() {
+		this._panelState.setCollapsed('side-nav-overlay', true);
+		this._panelState.setCollapsed('supporting-overlay', true);
+	}
+
 	#handleSlotVisibilityChange(e) {
 		const key = e.target.name;
 		const nodes = e.target.assignedNodes();

package/package.json

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