Fix MUI imports (#692)

We currently use Material-UI, not raw components.

Signed-off-by: Tristan Chuine <[email protected]>

demo/src/app.jsx

@@ -16,6 +16,7 @@ import {
     FormGroup,
     Grid,
     IconButton,
+    styled,
     StyledEngineProvider,
     Tab,
     Tabs,
@@ -24,30 +25,22 @@ import {
     Typography,
 } from '@mui/material';
 import CommentIcon from '@mui/icons-material/Comment';
-import { styled } from '@mui/system';
 import { useMatch } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
 import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import translations from './demo_intl';
-
-// eslint-disable-next-line import/no-unresolved
-import PowsyblLogo from '../images/powsybl_logo.svg?react';
+import PowsyblLogo from '../images/powsybl_logo.svg?react'; // eslint-disable-line import/no-unresolved
 import AppPackage from '../../package.json';
-
 import TreeViewFinderConfig from './TreeViewFinderConfig';
-
 import {
     fetchInfiniteTestDataList,
     fetchInfiniteTestDataTree,
     testDataList,
     testDataTree,
 } from '../data/TreeViewFinder';
-
 import searchEquipments from '../data/EquipmentSearchBar';
-
 import FlatParametersTab from './FlatParametersTab';
-
 import InputsTab from './InputsTab';
 import { EquipmentSearchDialog } from './equipment-search';
 import { InlineSearch } from './inline-search';

demo/src/right-resizable-box.jsx

@@ -11,8 +11,7 @@ import { MoreVert as ResizePanelHandleIcon } from '@mui/icons-material';
 import { ResizableBox } from 'react-resizable';
 import { useWindowWidth } from '@react-hook/window-size';
 import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, styled } from '@mui/material';
 import { mergeSx } from '../../src/utils/styles';
 
 const styles = {

package.json

@@ -51,7 +51,6 @@
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
-        "@mui/system": "^5.15.15",
         "@mui/x-tree-view": "^6.17.0",
         "ag-grid-community": "^33.0.3",
         "ag-grid-react": "^33.0.3",

src/components/checkBoxList/checkBoxList.type.ts

@@ -5,10 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
-import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
+import type { ReactElement } from 'react';
+import type { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
+import type { SxProps, Theme } from '@mui/material';
 
 export type CheckBoxListItemSx = {
     checkBoxIcon?: SxProps<Theme>;
@@ -34,7 +33,7 @@ export interface CheckBoxListItemProps<T> {
     sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
-    secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
+    secondaryAction?: (item: T, hover: string) => ReactElement | null;
     getItemId: (item: T) => string;
     disabled?: boolean;
     divider?: boolean;
@@ -54,7 +53,7 @@ export interface CheckBoxListItemsProps<T> {
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
     getItemLabel?: (item: T) => string;
-    secondaryAction?: (item: T, hover: boolean) => React.ReactElement | null;
+    secondaryAction?: (item: T, hover: boolean) => ReactElement | null;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
     selectAllCheckBoxLabel?: string;

src/components/customAGGrid/customAggrid.style.ts

@@ -4,8 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material/styles/createTheme';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+import type { Theme } from '@mui/material';
+import type { SystemStyleObject } from '@mui/system';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';
 

src/components/customAGGrid/customAggrid.tsx

@@ -12,10 +12,9 @@ import { useIntl } from 'react-intl';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community';
-import { Box } from '@mui/system';
-import { SxProps, useTheme } from '@mui/material';
+import { Box, type SxProps, useTheme } from '@mui/material';
 import { mergeSx } from '../../utils/styles';
-import { styles, CUSTOM_AGGRID_THEME } from './customAggrid.style';
+import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style';
 
 interface CustomAGGGridStyleProps {
     shouldHidePinnedHeaderRightBorder?: boolean;

src/components/inputs/reactHookForm/numbers/RangeInput.tsx

@@ -8,8 +8,7 @@ import { useWatch } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { useMemo } from 'react';
 import { type ObjectSchema } from 'yup';
-import { FormControl, Grid, InputLabel } from '@mui/material';
-import { Theme } from '@mui/system';
+import { FormControl, Grid, InputLabel, type Theme } from '@mui/material';
 import { FloatInput } from './FloatInput';
 import yup from '../../../../utils/yupConfig';
 import { MuiSelectInput } from '../selectInputs/MuiSelectInput';

src/components/topBar/MessageBanner.tsx

@@ -5,10 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ReactNode, useState } from 'react';
-import { Box, Theme } from '@mui/material';
+import { Box, type Theme } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+import type { SystemStyleObject } from '@mui/system';
 
 const styles = {
     banner: (theme: Theme): SystemStyleObject<Theme> => ({

src/components/topBar/TopBar.tsx

@@ -19,10 +19,11 @@ import {
     Menu,
     MenuItem,
     MenuList,
-    MenuProps,
+    type MenuProps,
     Paper,
     Popper,
-    Theme,
+    styled,
+    type Theme,
     ToggleButton,
     ToggleButtonGroup,
     Toolbar,
@@ -41,8 +42,6 @@ import {
     Person as PersonIcon,
     WbSunny as WbSunnyIcon,
 } from '@mui/icons-material';
-import { styled } from '@mui/system';
-
 import type { User } from 'oidc-client';
 import { GridLogo, GridLogoProps } from './GridLogo';
 import { AboutDialog, AboutDialogProps } from './AboutDialog';

src/components/topBar/UserInformationDialog.tsx

@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import type { User } from 'oidc-client';
 import { useEffect, useState } from 'react';

src/components/treeViewFinder/TreeViewFinder.tsx

@@ -7,21 +7,18 @@
 
 import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-
-import { styled } from '@mui/system';
-
 import {
     Button,
-    ButtonProps,
+    type ButtonProps,
     Dialog,
     DialogActions,
     DialogContent,
     DialogContentText,
     DialogTitle,
+    type ModalProps,
+    styled,
     Typography,
-    ModalProps,
 } from '@mui/material';
-
 import { TreeItem, TreeView, TreeViewClasses } from '@mui/x-tree-view';
 import {
     Check as CheckIcon,