Disable page scrollbar when popups are opened

packages/hash/design-system/src/dialog.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+import { Dialog as MuiDialog, DialogProps } from "@mui/material";
+import { useScrollLock } from "./use-scroll-lock";
+
+/**
+ * Custom Popover re-implementing MUI's troublesome scroll-lock mechanism.
+ */
+export const Dialog: FunctionComponent<DialogProps> = ({
+  disableScrollLock = false,
+  ...props
+}) => {
+  useScrollLock(!disableScrollLock && props.open);
+  return <MuiDialog disableScrollLock {...props} />;
+};

packages/hash/design-system/src/menu.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+import { Menu as Muimenu, MenuProps } from "@mui/material";
+import { useScrollLock } from "./use-scroll-lock";
+
+/**
+ * Custom Popover re-implementing MUI's troublesome scroll-lock mechanism.
+ */
+export const Menu: FunctionComponent<MenuProps> = ({
+  disableScrollLock = false,
+  ...props
+}) => {
+  useScrollLock(!disableScrollLock && props.open);
+  return <Muimenu disableScrollLock {...props} />;
+};

packages/hash/design-system/src/ui.ts

@@ -2,6 +2,7 @@ import "./theme-override.d";
 
 export * from "./avatar";
 export * from "./button";
+export * from "./dialog";
 export * from "./icon-button";
 export * from "./loading-spinner";
 export * from "./popover";
@@ -10,6 +11,7 @@ export * from "./text-field";
 export * from "./form-inline";
 export * from "./chip";
 export * from "./chip-group";
+export * from "./menu";
 export * from "./menu-item";
 export * from "./menu-checkbox-item";
 export * from "./select";

packages/hash/design-system/src/use-scroll-lock.ts

@@ -10,7 +10,7 @@ import { useLayoutEffect } from "react";
 export const useScrollLock = (active: boolean) =>
   useLayoutEffect(() => {
     document.documentElement.style.cssText = active
-      ? "position: fixed; overflow-y: hidden; width: 100%"
+      ? "position: fixed; overflow-y: auto; width: 100%"
       : "";
     return () => {
       document.documentElement.style.cssText = "";

packages/hash/frontend/.eslintrc.json

@@ -10,11 +10,6 @@
       "error",
       {
         "paths": [
-          {
-            "name": "@mui/material",
-            "importNames": ["Link"],
-            "message": "Please use the custom wrapper component in src/shared/ui component instead to ensure Next.js and MUI compatibility."
-          },
           {
             "name": "next",
             "importNames": ["Link"],
@@ -36,14 +31,14 @@
               "Chip",
               "Popover",
               "TextField",
-              "Select"
+              "Select",
+              "Dialog",
+              "Menu",
+              "Link",
+              "Button",
+              "MenuItem"
             ],
-            "message": "Please use the custom wrapper component in '@hashintel/hash-design-system' instead."
-          },
-          {
-            "name": "@mui/material",
-            "importNames": ["Button", "MenuItem"],
-            "message": "Please use the custom wrapper component in src/shared/ui instead."
+            "message": "Please use the custom wrapper component from src/shared/ui for Link, Button and MenuItem and from '@hashintel/hash-design-system' for every other component."
           }
         ]
       }

packages/hash/frontend/src/blocks/page/BlockContextMenu/BlockContextMenu.tsx

@@ -2,7 +2,7 @@ import { useRef, forwardRef, useMemo, ForwardRefRenderFunction } from "react";
 
 import { useKey } from "rooks";
 
-import { Box, Divider, Menu, Typography } from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import { bindMenu } from "material-ui-popup-state";
 import { PopupState } from "material-ui-popup-state/hooks";
 import { format } from "date-fns";
@@ -20,7 +20,7 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import { BlockEntity } from "@hashintel/hash-shared/entity";
 
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { getBlockDomId } from "../BlockView";
 import { BlockSuggesterProps } from "../createSuggester/BlockSuggester";
 

packages/hash/frontend/src/blocks/page/createErrorPlugin.tsx

@@ -1,8 +1,8 @@
-import { Box, Dialog, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { Schema } from "prosemirror-model";
 import { Plugin, PluginKey, Transaction } from "prosemirror-state";
 import { FunctionComponent } from "react";
-import { Button } from "@hashintel/hash-design-system";
+import { Button, Dialog } from "@hashintel/hash-design-system";
 import { ensureMounted } from "../../lib/dom";
 import { RenderPortal } from "./usePortals";
 

packages/hash/frontend/src/components/ConfirmationAlert.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent, ReactNode } from "react";
-import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import { Dialog } from "@hashintel/hash-design-system";
 import { Button } from "../shared/ui";
 
 type ConfirmationAlertProps = {

packages/hash/frontend/src/shared/layout/layout-with-header/account-dropdown.tsx

@@ -1,19 +1,12 @@
 import { useMemo, FunctionComponent } from "react";
-import {
-  Box,
-  Typography,
-  Divider,
-  Tooltip,
-  Menu,
-  ListItemText,
-} from "@mui/material";
+import { Box, Typography, Divider, Tooltip, ListItemText } from "@mui/material";
 
 import {
   usePopupState,
   bindMenu,
   bindTrigger,
 } from "material-ui-popup-state/hooks";
-import { Avatar } from "@hashintel/hash-design-system";
+import { Avatar, Menu } from "@hashintel/hash-design-system";
 import { UserFieldsFragment } from "../../../graphql/apiTypes.gen";
 import { MenuItem } from "../../ui";
 import { HeaderIconButton } from "./shared/header-icon-button";

packages/hash/frontend/src/shared/layout/layout-with-header/actions-dropdown.tsx

@@ -5,7 +5,6 @@ import {
   ListItemSecondaryAction,
   listItemSecondaryActionClasses,
   ListItemText,
-  Menu,
   useTheme,
 } from "@mui/material";
 import { useKeys } from "rooks";
@@ -16,7 +15,7 @@ import {
   bindMenu,
   bindTrigger,
 } from "material-ui-popup-state/hooks";
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { MenuItem } from "../../ui";
 import { HeaderIconButton } from "./shared/header-icon-button";
 import { useCreatePage } from "../../../components/hooks/useCreatePage";

packages/hash/frontend/src/shared/layout/layout-with-header/notifications-dropdown.tsx

@@ -1,13 +1,13 @@
 import { FunctionComponent, useState } from "react";
 import { faBell } from "@fortawesome/free-solid-svg-icons";
-import { Box, ListItemText, Menu, Typography, useTheme } from "@mui/material";
+import { Box, ListItemText, Typography, useTheme } from "@mui/material";
 import {
   usePopupState,
   bindMenu,
   bindTrigger,
 } from "material-ui-popup-state/hooks";
 
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { MenuItem } from "../../ui";
 import { HeaderIconButton } from "./shared/header-icon-button";
 

packages/hash/frontend/src/shared/layout/layout-with-sidebar/account-entity-type-list/entity-type-menu.tsx

@@ -5,9 +5,9 @@ import {
   IconDefinition,
 } from "@fortawesome/free-solid-svg-icons";
 import pluralize from "pluralize";
-import { ListItemIcon, ListItemText, Menu } from "@mui/material";
+import { ListItemIcon, ListItemText } from "@mui/material";
 import { bindMenu, PopupState } from "material-ui-popup-state/core";
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { MenuItem } from "../../../ui";
 
 type EntityTypeMenuProps = {

packages/hash/frontend/src/shared/layout/layout-with-sidebar/account-entity-type-list/sort-actions-dropdown.tsx

@@ -4,7 +4,6 @@ import {
   Box,
   ListItemIcon,
   ListItemText,
-  Menu,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -14,7 +13,7 @@ import {
   faQuestionCircle,
   IconDefinition,
 } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { MenuItem } from "../../../ui";
 
 export type SortType = "asc" | "desc" | "recent" | "most_used" | "least_used";

packages/hash/frontend/src/shared/layout/layout-with-sidebar/account-page-list/page-menu.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent, useMemo, useState } from "react";
-import { ListItemIcon, ListItemText, Menu } from "@mui/material";
+import { ListItemIcon, ListItemText } from "@mui/material";
 import { bindMenu, PopupState } from "material-ui-popup-state/hooks";
 import { faArchive, faLink } from "@fortawesome/free-solid-svg-icons";
 import { faFileAlt } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { useArchivePage } from "../../../../components/hooks/useArchivePage";
 import { useRouteAccountInfo } from "../../../routing";
 import { useCreatePage } from "../../../../components/hooks/useCreatePage";

packages/hash/frontend/src/shared/layout/layout-with-sidebar/workspace-switcher.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent, useRef, useMemo } from "react";
 import {
   Box,
   Typography,
-  Menu,
   Divider,
   ListItemText,
   ListItemAvatar,
@@ -14,7 +13,7 @@ import {
   bindTrigger,
   bindMenu,
 } from "material-ui-popup-state/hooks";
-import { Avatar, FontAwesomeIcon } from "@hashintel/hash-design-system";
+import { Avatar, Menu, FontAwesomeIcon } from "@hashintel/hash-design-system";
 import { useUser } from "../../../components/hooks/useUser";
 import { useLogout } from "../../../components/hooks/useLogout";
 import { Button, MenuItem } from "../../ui";