Check styles declaration against MUI Theme with TypeScript (#3267)

Author: Tristan-WorkGH

src/components/breadcrumbs/root-network-select.tsx

@@ -5,15 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, ListItemText, MenuItem, Select, Theme } from '@mui/material';
+import { Box, ListItemText, MenuItem, Select } from '@mui/material';
 import { UUID } from 'crypto';
 import { RemoveRedEye, VisibilityOff } from '@mui/icons-material';
 import { RootNetworkMetadata } from '../graph/menus/network-modifications/network-modification-menu.type';
 import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    selectRoot: (theme: Theme) => ({
+    selectRoot: (theme) => ({
         height: theme.spacing(4),
         width: theme.spacing(15),
         paddingTop: theme.spacing(1),
@@ -22,7 +22,7 @@ const styles = {
     selectInput: { display: 'flex', gap: 1, alignItems: 'center' },
     selectItem: { gap: 1 },
     hiddenItem: { display: 'none' },
-};
+} as const satisfies MuiStyles;
 
 interface RootNetworkSelectProps {
     currentRootNetworkUuid: UUID | null;

src/components/breadcrumbs/study-path-breadcrumbs.tsx

@@ -7,6 +7,7 @@
 
 import { MoreHoriz } from '@mui/icons-material';
 import { Box, Breadcrumbs as MuiBreadcrumbs, Tooltip } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CurrentTreeNode } from '../graph/tree-node.type';
 import { useSelector } from 'react-redux';
 import { AppState } from '../../redux/reducer';
@@ -21,7 +22,7 @@ const styles = {
         alignItems: 'center',
         flexWrap: 'nowrap',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface StudyPathBreadcrumbsProps {
     studyName: string | undefined;

src/components/custom-aggrid/cell-renderers.tsx

@@ -6,16 +6,14 @@
  */
 
 import { Box, Checkbox, Tooltip } from '@mui/material';
-import { Theme } from '@mui/material/styles';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-
 import { isBlankOrEmpty } from 'components/utils/validation-functions';
 import { ICellRendererParams } from 'ag-grid-community';
 import { CustomCellRendererProps } from 'ag-grid-react';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    tableCell: (theme: Theme) => ({
+    tableCell: (theme) => ({
         fontSize: 'small',
         cursor: 'inherit',
         display: 'flex',
@@ -35,7 +33,7 @@ const styles = {
     numericValue: {
         marginLeft: 'inherit',
     },
-};
+} as const satisfies MuiStyles;
 
 export const BooleanCellRenderer = (props: any) => {
     const isChecked = props.value;

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx

@@ -12,7 +12,7 @@ import { useIntl } from 'react-intl';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { BooleanFilterValue } from './utils/aggrid-filters-utils';
 import { CustomAggridFilterParams, FILTER_DATA_TYPES, FILTER_TEXT_COMPARATORS } from './custom-aggrid-filter.type';
 
@@ -22,7 +22,7 @@ const styles = {
         maxWidth: '40%',
         paddingRight: '0px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const CustomAggridBooleanFilter: FunctionComponent<CustomAggridFilterParams> = ({
     api,

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx

@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React from 'react';
-import { Select, MenuItem } from '@mui/material';
-import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
+import { MenuItem, Select, type SelectChangeEvent } from '@mui/material';
 import { useIntl } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     input: {
         minWidth: '250px',
         maxWidth: '40%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridComparatorSelectorProps {
     value: string;

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx

@@ -8,6 +8,7 @@ import { ChangeEvent, FunctionComponent, useCallback, useEffect, useState } from
 import { Grid, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import ClearIcon from '@mui/icons-material/Clear';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomAggridComparatorSelector } from './custom-aggrid-comparator-selector';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
@@ -33,7 +34,7 @@ const styles = {
             MozAppearance: 'textfield',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 const CustomAggridDurationFilter: FunctionComponent<CustomAggridFilterParams> = ({ api, colId, filterParams }) => {
     const intl = useIntl();

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx

@@ -6,6 +6,7 @@
  */
 import React, { ComponentType, MouseEvent, useMemo, useState } from 'react';
 import { Popover } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomFilterIcon } from './custom-filter-icon';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
 import { CustomAggridAutocompleteFilterParams } from './custom-aggrid-autocomplete-filter';
@@ -19,7 +20,7 @@ const styles = {
     autoCompleteInput: {
         width: '30%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridFilterWrapperParams<F extends CustomAggridFilterParams> {
     filterComponent: ComponentType<F>;

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx

@@ -5,11 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { useMemo } from 'react';
-import { TextField, Grid, InputAdornment, IconButton } from '@mui/material';
+import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
 import { DisplayRounding } from '../display-rounding';
 import { useIntl } from 'react-intl';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { FILTER_DATA_TYPES } from './custom-aggrid-filter.type';
 
 const styles = {
@@ -25,7 +25,7 @@ const styles = {
             MozAppearance: 'textfield',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridTextFilterProps {
     value: unknown;

src/components/custom-aggrid/custom-aggrid-filters/custom-filter-icon.tsx

@@ -7,26 +7,21 @@
 import React, { MouseEventHandler } from 'react';
 import { Badge, Grid, IconButton } from '@mui/material';
 import { FilterAlt } from '@mui/icons-material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
 
 const styles = {
-    iconSize: {
-        fontSize: '1rem',
-    },
-};
+    iconSize: { fontSize: '1rem' },
+    gridRoot: { overflow: 'visible' },
+} as const satisfies MuiStyles;
 
 interface CustomFilterIconProps {
     handleShowFilter: MouseEventHandler<HTMLButtonElement> | undefined;
     selectedFilterData: unknown;
 }
 
 export const CustomFilterIcon = ({ handleShowFilter, selectedFilterData }: CustomFilterIconProps) => (
-    <Grid
-        item
-        sx={{
-            overflow: 'visible',
-        }}
-    >
+    <Grid item sx={styles.gridRoot}>
         <Grid item>
             <IconButton size={'small'} onClick={handleShowFilter}>
                 <Badge

src/components/custom-aggrid/custom-aggrid-header.tsx

@@ -7,6 +7,7 @@
 
 import React, { ComponentType, useCallback, useState } from 'react';
 import { Grid } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomAggridFilter } from './custom-aggrid-filters/custom-aggrid-filter';
 import { CustomAggridSort } from './custom-aggrid-sort';
 import { SortParams, useCustomAggridSort } from './hooks/use-custom-aggrid-sort';
@@ -19,7 +20,7 @@ const styles = {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomHeaderComponentProps<F extends CustomAggridFilterParams, T> extends CustomHeaderProps {
     displayName: string;