fix Dialog and Drawer scroll lock

.changeset/blue-frogs-visit.md

@@ -0,0 +1,5 @@
+---
+"@stratakit/mui": patch
+---
+
+Fixed an issue where the viewport was still scrollable when a `Dialog` or `Drawer` was open.

packages/mui/src/~components.css

@@ -17,6 +17,7 @@
 @import "./~components/MuiCard.css";
 @import "./~components/MuiCheckbox.css";
 @import "./~components/MuiChip.css";
+@import "./~components/MuiDrawer.css";
 @import "./~components/MuiDialog.css";
 @import "./~components/MuiDivider.css";
 @import "./~components/MuiForm.css";

packages/mui/src/~components/MuiDialog.css

@@ -3,6 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
+/**
+ * Prevents the viewport from scrolling when a Dialog is open.
+ * This is necessary because the equivalent JS doesn't work when Dialog is rendered in a portal container.
+ */
+:is(html, body):where(:has(.MuiDialog-root:not(.MuiModal-root.MuiModal-hidden))) {
+	overflow: clip;
+}
+
 .MuiDialog-paper {
 	--✨min-inset: var(--stratakit-space-x4);
 

packages/mui/src/~components/MuiDrawer.css

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * Prevents the viewport from scrolling when a Drawer is open.
+ * This is necessary because the equivalent JS doesn't work when Drawer is rendered in a portal container.
+ */
+:is(html, body):where(:has(.MuiDrawer-root:not(.MuiModal-root.MuiModal-hidden))) {
+	overflow: clip;
+}

packages/mui/src/~createTheme.tsx

@@ -335,7 +335,12 @@ function createTheme(args: CreateThemeArgs) {
 				},
 			},
 			MuiContainer: { defaultProps: { component: Role.div } },
-			MuiDialog: { defaultProps: { component: Role.div } },
+			MuiDialog: {
+				defaultProps: {
+					component: Role.div,
+					disableScrollLock: true, // Handled in MuiDialog.css instead.
+				},
+			},
 			MuiDialogContentText: {
 				defaultProps: {
 					component: Role.p,
@@ -349,7 +354,12 @@ function createTheme(args: CreateThemeArgs) {
 				},
 			},
 			MuiDivider: { defaultProps: { component: MuiDivider } },
-			MuiDrawer: { defaultProps: { component: Role.div } },
+			MuiDrawer: {
+				defaultProps: {
+					component: Role.div,
+					disableScrollLock: true, // Handled in MuiDrawer.css instead.
+				},
+			},
 			MuiFab: {
 				defaultProps: {
 					component: MuiButtonBase,