Fix MUI import in ESM library mode (#745)

Tristan-WorkGH · web-flow · commit f22f5813e8dd · 2025-04-07T12:33:54.000+02:00
* Fix `@mui/icons-material` imports
* Fix `@mui/material` imports
* Fix MUI theme augmentation
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -23,6 +23,16 @@
         "react/require-default-props": "off",
         "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
         "import/prefer-default-export": "off",
+        // some libraries in ESM don't play nicely with ESBuild and need to only import from root
+        "no-restricted-imports": [
+            "warn",
+            {
+                "patterns": [{
+                        "group": ["@mui/*/*", "!@mui/material/colors"],
+                        "message": "Deep imports from MUI libraries are forbidden. Import only from the library root."
+                    }]
+            }
+        ],
         // extend https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/imports.js
         "import/no-extraneous-dependencies": [
             "error",
diff --git a/demo/src/app.jsx b/demo/src/app.jsx
@@ -24,7 +24,7 @@ import {
     ThemeProvider,
     Typography,
 } from '@mui/material';
-import CommentIcon from '@mui/icons-material/Comment';
+import { Comment as CommentIcon } from '@mui/icons-material';
 import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -172,7 +172,7 @@ const style = {
 };
 
 /**
- * @param {import('@mui/material/styles').Theme} theme Theme from ThemeProvider
+ * @param {import('@mui/material').Theme} theme Theme from ThemeProvider
  */
 const TreeViewFinderCustomStyles = (theme) => ({
     icon: {
diff --git a/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx b/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { DragIndicator as DragIndicatorIcon } from '@mui/icons-material';
 import { Checkbox, IconButton, ListItemIcon, ListItemText, Theme } from '@mui/material';
 import { OverflowableText } from '../overflowableText';
 import { DraggableClickableCheckBoxItemProps } from './checkBoxList.type';
diff --git a/src/components/checkBoxList/DraggableClickableRowItem.tsx b/src/components/checkBoxList/DraggableClickableRowItem.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { DragIndicator as DragIndicatorIcon } from '@mui/icons-material';
 import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material';
 import { OverflowableText } from '../overflowableText';
 import { DraggableClickableRowItemProps } from './checkBoxList.type';
diff --git a/src/components/customAGGrid/customAggrid.style.ts b/src/components/customAGGrid/customAggrid.style.ts
@@ -4,13 +4,12 @@
  * 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 type { Theme } from '@mui/material';
-import type { SystemStyleObject } from '@mui/system';
+import type { SxProps, Theme } from '@mui/material';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';
 
 export const styles = {
-    grid: (theme: Theme): SystemStyleObject<Theme> => ({
+    grid: (theme) => ({
         width: 'auto',
         height: '100%',
         position: 'relative',
@@ -49,4 +48,4 @@ export const styles = {
             borderRight: 'none',
         },
     },
-};
+} as const satisfies Record<string, SxProps<Theme>>;
diff --git a/src/components/dialogs/popupConfirmationDialog/PopupConfirmationDialog.tsx b/src/components/dialogs/popupConfirmationDialog/PopupConfirmationDialog.tsx
@@ -5,12 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import { DialogContentText } from '@mui/material';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 
diff --git a/src/components/inputs/SelectClearable.tsx b/src/components/inputs/SelectClearable.tsx
@@ -6,8 +6,7 @@
  */
 
 import { useIntl } from 'react-intl';
-import { Autocomplete, TextField } from '@mui/material';
-import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
+import { Autocomplete, type AutocompleteProps, TextField } from '@mui/material';
 import { FieldLabel } from './reactHookForm/utils/FieldLabel';
 
 type SelectOption = { id: string; label?: string };
diff --git a/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx b/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
@@ -6,7 +6,7 @@
  */
 
 import { Chip, FormControl, Grid, IconButton, Theme, Tooltip } from '@mui/material';
-import FolderIcon from '@mui/icons-material/Folder';
+import { Folder as FolderIcon } from '@mui/icons-material';
 import { useCallback, useMemo, useState } from 'react';
 import { FieldValues, useController, useFieldArray } from 'react-hook-form';
 import { useIntl } from 'react-intl';
diff --git a/src/components/inputs/reactHookForm/agGridTable/BottomRightButtons.tsx b/src/components/inputs/reactHookForm/agGridTable/BottomRightButtons.tsx
@@ -4,14 +4,16 @@
  * 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 { Box, Grid, Tooltip } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import { ArrowCircleDown, ArrowCircleUp, Upload } from '@mui/icons-material';
-import AddIcon from '@mui/icons-material/ControlPoint';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Grid, IconButton, styled, Tooltip } from '@mui/material';
+import {
+    ArrowCircleDown,
+    ArrowCircleUp,
+    ControlPoint as AddIcon,
+    Delete as DeleteIcon,
+    Upload,
+} from '@mui/icons-material';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { styled } from '@mui/material/styles';
 import { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
 import { ErrorInput } from '../errorManagement/ErrorInput';
 import { FieldErrorAlert } from '../errorManagement/FieldErrorAlert';
diff --git a/src/components/inputs/reactHookForm/agGridTable/csvUploader/CsvUploader.tsx b/src/components/inputs/reactHookForm/agGridTable/csvUploader/CsvUploader.tsx
@@ -5,18 +5,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
+import {
+    Alert,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Grid,
+} from '@mui/material';
 import { RECORD_SEP, UNIT_SEP, useCSVReader } from 'react-papaparse';
-import Button from '@mui/material/Button';
 import React, { useMemo, useState } from 'react';
-import Grid from '@mui/material/Grid';
 import { FormattedMessage, useIntl } from 'react-intl';
 import CsvDownloader from 'react-csv-downloader';
-import Alert from '@mui/material/Alert';
-import { DialogContentText } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { FieldConstants } from '../../../../../utils/constants/fieldConstants';
 import { CancelButton } from '../../utils/CancelButton';
diff --git a/src/components/inputs/reactHookForm/booleans/BooleanInput.tsx b/src/components/inputs/reactHookForm/booleans/BooleanInput.tsx
@@ -5,19 +5,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ChangeEvent, useCallback } from 'react';
+import { type ChangeEvent, type JSX, useCallback } from 'react';
 import { useIntl } from 'react-intl';
-import { Checkbox, CheckboxProps, FormControlLabel, Switch, SwitchProps } from '@mui/material';
+import { Checkbox, FormControlLabel, Switch } from '@mui/material';
 import { useController } from 'react-hook-form';
 
-export interface BooleanInputProps {
+type InputTypes = typeof Switch | typeof Checkbox;
+type InputProps<TInput> = TInput extends (props: infer Props) => JSX.Element ? Props : never;
+
+export type BooleanInputProps<TInput extends InputTypes> = {
     name: string;
     label?: string;
-    formProps?: SwitchProps | CheckboxProps;
-    Input: typeof Switch | typeof Checkbox;
-}
-
-export function BooleanInput({ name, label, formProps, Input }: BooleanInputProps) {
+    formProps?: InputProps<TInput>;
+    Input: TInput;
+};
+
+export function BooleanInput<TInput extends InputTypes>({
+    name,
+    label,
+    formProps,
+    Input,
+}: Readonly<BooleanInputProps<TInput>>) {
     const {
         field: { onChange, value, ref },
     } = useController<Record<string, boolean>>({ name });
@@ -34,12 +42,10 @@ export function BooleanInput({ name, label, formProps, Input }: BooleanInputProp
     const CustomInput = (
         <Input
             checked={value}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => handleChangeValue(e)}
+            onChange={handleChangeValue}
             inputRef={ref}
-            inputProps={{
-                'aria-label': 'primary checkbox',
-            }}
-            {...formProps}
+            inputProps={{ 'aria-label': 'primary checkbox' }}
+            {...(formProps as any)}
         />
     );
 
diff --git a/src/components/inputs/reactHookForm/text/DescriptionField.tsx b/src/components/inputs/reactHookForm/text/DescriptionField.tsx
@@ -8,9 +8,8 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Button, SxProps, Theme } from '@mui/material';
-import AddIcon from '@mui/icons-material/ControlPoint';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { useFormContext } from 'react-hook-form'; // Import useFormContext
+import { ControlPoint as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import { useFormContext } from 'react-hook-form';
 import { FieldConstants } from '../../../../utils';
 import { ExpandingTextField } from './ExpandingTextField';
 
diff --git a/src/components/inputs/reactHookForm/text/UniqueNameInput.tsx b/src/components/inputs/reactHookForm/text/UniqueNameInput.tsx
@@ -7,14 +7,19 @@
 
 import { ChangeEvent, useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { InputAdornment, SxProps, TextFieldProps, Theme } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
+import {
+    CircularProgress,
+    InputAdornment,
+    type SxProps,
+    TextField,
+    type TextFieldProps,
+    type Theme,
+} from '@mui/material';
+import { Check as CheckIcon } from '@mui/icons-material';
 import { useController, useFormContext } from 'react-hook-form';
-import CircularProgress from '@mui/material/CircularProgress';
-import TextField from '@mui/material/TextField';
 import { UUID } from 'crypto';
 import { useDebounce } from '../../../../hooks';
-import { FieldConstants, ElementType } from '../../../../utils';
+import { ElementType, FieldConstants } from '../../../../utils';
 import { elementAlreadyExists } from '../../../../services';
 
 export interface UniqueNameInputProps {
diff --git a/src/components/inputs/reactQueryBuilder/AddButton.tsx b/src/components/inputs/reactQueryBuilder/AddButton.tsx
@@ -7,7 +7,7 @@
 
 import { ActionWithRulesAndAddersProps } from 'react-querybuilder';
 import { Button } from '@mui/material';
-import AddIcon from '@mui/icons-material/ControlPoint';
+import { ControlPoint as AddIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 
 interface ActionWithRulesAndAddersWithLabelProps extends ActionWithRulesAndAddersProps {
diff --git a/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx b/src/components/inputs/reactQueryBuilder/AutocompleteWithFavorites.tsx
@@ -5,9 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Autocomplete, Box, TextField, Theme } from '@mui/material';
+import { Autocomplete, type AutocompleteProps, Box, TextField, type Theme } from '@mui/material';
 import { useMemo } from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
 
 const styles = {
     favBox: (theme: Theme) => ({
diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -6,12 +6,10 @@
  */
 
 import { useCallback, useEffect, useMemo } from 'react';
-import Grid from '@mui/material/Grid';
-import { Autocomplete, FormControl, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material';
+import { Autocomplete, FormControl, Grid, MenuItem, Select, type SelectChangeEvent, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
 import { useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';
-
 import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
diff --git a/src/components/inputs/reactQueryBuilder/RemoveButton.tsx b/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
@@ -6,8 +6,8 @@
  */
 
 import { ActionWithRulesProps } from 'react-querybuilder';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton } from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import { useController } from 'react-hook-form';
 
 import { recursiveRemove } from '../../filter/expert/expertFilterUtils';
diff --git a/src/components/inputs/reactQueryBuilder/ValueEditor.tsx b/src/components/inputs/reactQueryBuilder/ValueEditor.tsx
@@ -8,12 +8,11 @@
 import { ValueEditorProps } from 'react-querybuilder';
 import { useCallback } from 'react';
 import { MaterialValueEditor } from '@react-querybuilder/material';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { CountryValueEditor } from './CountryValueEditor';
 import { TranslatedValueEditor } from './TranslatedValueEditor';
 import { TextValueEditor } from './TextValueEditor';
-
 import { DataType } from '../../filter/expert/expertFilter.type';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { Substation, VoltageLevel } from '../../../utils/types/equipmentTypes';
diff --git a/src/components/snackbarProvider/SnackbarProvider.tsx b/src/components/snackbarProvider/SnackbarProvider.tsx
@@ -7,7 +7,7 @@
 
 import { useRef } from 'react';
 import { IconButton, styled, Theme } from '@mui/material';
-import ClearIcon from '@mui/icons-material/Clear';
+import { Clear as ClearIcon } from '@mui/icons-material';
 import { SnackbarProvider as OrigSnackbarProvider, SnackbarKey, SnackbarProviderProps } from 'notistack';
 
 const StyledOrigSnackbarProvider = styled(OrigSnackbarProvider)(() => ({
diff --git a/src/components/topBar/MessageBanner.tsx b/src/components/topBar/MessageBanner.tsx
@@ -5,12 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ReactNode, useState } from 'react';
-import { Box, type Theme } from '@mui/material';
+import { Box, type SxProps, type Theme } from '@mui/material';
 import { Close as CloseIcon, WarningAmber as WarningAmberIcon } from '@mui/icons-material';
-import type { SystemStyleObject } from '@mui/system';
 
 const styles = {
-    banner: (theme: Theme): SystemStyleObject<Theme> => ({
+    banner: (theme) => ({
         left: 0,
         width: '100%',
         backgroundColor: '#f6b26b',
@@ -23,15 +22,15 @@ const styles = {
         justifyContent: 'flex-start',
         alignItems: 'center',
     }),
-    icon: (theme: Theme): SystemStyleObject<Theme> => ({
+    icon: (theme) => ({
         paddingRight: theme.spacing(0.75),
         color: 'red',
         marginTop: theme.spacing(0.5),
     }),
     message: {
         flexGrow: 1,
     },
-    button: (theme: Theme): SystemStyleObject<Theme> => ({
+    button: (theme) => ({
         backgroundColor: '#f6b26b',
         border: 'none',
         cursor: 'pointer',
@@ -47,7 +46,7 @@ const styles = {
             height: '100%',
         },
     }),
-};
+} as const satisfies Record<string, SxProps<Theme>>;
 
 export interface MessageBannerProps {
     children: ReactNode;
diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts
@@ -4,11 +4,12 @@
  * 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 '@mui/material/Switch';
+
+import '@mui/material'; // dunno why we need to import like that for module augmentation to work
 
 // used to customize mui theme
 // https://mui.com/material-ui/customization/theming/#typescript
-declare module '@mui/material/styles/createTheme' {
+declare module '@mui/material/styles' {
     interface Theme {
         aggrid: {
             theme: string;
@@ -20,9 +21,3 @@ declare module '@mui/material/styles/createTheme' {
         };
     }
 }
-
-declare module '@mui/material/Switch' {
-    interface SwitchPropsSizeOverrides {
-        large: true;
-    }
-}
