Check styles declaration against MUI Theme with TypeScript

package.json

@@ -11,7 +11,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.123.0",
+        "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.124.0.tgz",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",

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;

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

@@ -7,12 +7,13 @@
 import React, { useRef, useState } from 'react';
 import { Badge, Grid, IconButton } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     iconSize: {
         fontSize: '1rem',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface CustomMenuProps<T> {
     Menu: React.FC<T | DialogMenuProps>;

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

@@ -8,14 +8,15 @@ import { IconButton } from '@mui/material';
 import { SortParams } from './hooks/use-custom-aggrid-sort';
 import { ArrowDownward, ArrowUpward } from '@mui/icons-material';
 import React from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { useCustomAggridSort } from './hooks/use-custom-aggrid-sort';
 import { SortWay } from '../../types/custom-aggrid-types';
 
 const styles = {
     iconSize: {
         fontSize: '1rem',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridSortProps {
     colId: string;

src/components/custom-aggrid/display-rounding.tsx

@@ -7,14 +7,15 @@
 import { useIntl } from 'react-intl';
 import { Box, FormHelperText } from '@mui/material';
 import React from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     exponent: {
         position: 'relative',
         bottom: '1ex',
         fontSize: '80%',
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * displays a rounding precision like this : 'Rounded to 10^decimalAfterDot' or as a decimal number if decimalAfterDot <= 4

src/components/custom-aggrid/rowindex-cell-renderer.tsx

@@ -13,6 +13,7 @@ import { setCalculationSelections } from '../../redux/actions';
 import { AppState } from '../../redux/reducer';
 import { CustomCellRendererProps } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CalculationRowType, CalculationType } from '../spreadsheet-view/types/calculation.type';
 import { isCalculationRow } from '../spreadsheet-view/utils/calculation-utils';
 
@@ -29,7 +30,7 @@ const styles = {
         minWidth: 'auto',
         minHeight: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 export const RowIndexCellRenderer = (props: CustomCellRendererProps) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

src/components/dialogs/commons/grid-section.tsx

@@ -4,16 +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, SxProps, Theme, Tooltip } from '@mui/material';
+import { Box, Grid, Tooltip } from '@mui/material';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { InfoOutlined } from '@mui/icons-material';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type SxStyle } from '@gridsuite/commons-ui';
 
 export interface GridSectionProps {
     title: string;
     heading?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: number;
-    customStyle?: SxProps<Theme>;
+    customStyle?: SxStyle;
     tooltipEnabled?: boolean;
     tooltipMessage?: string;
     isLiteralText?: boolean;

src/components/dialogs/dialog-utils.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FilledTextFieldProps, StandardTextFieldProps, Theme } from '@mui/material';
+import { FilledTextFieldProps, StandardTextFieldProps } from '@mui/material';
 import {
     AMPERE,
     KILO_AMPERE,
@@ -15,6 +15,7 @@ import {
     MEGA_VOLT_AMPERE,
     MEGA_WATT,
     MICRO_SIEMENS,
+    type MuiStyles,
     OHM,
     PERCENTAGE,
     SIEMENS,
@@ -29,12 +30,12 @@ export const styles = {
         fontSize: 18,
         maxWidth: 'none',
     },
-    button: (theme: Theme) => ({
+    button: (theme) => ({
         justifyContent: 'flex-start',
         fontSize: 'small',
         marginTop: theme.spacing(1),
     }),
-    paddingButton: (theme: Theme) => ({
+    paddingButton: (theme) => ({
         paddingLeft: theme.spacing(2),
     }),
     formDirectoryElements1: {
@@ -47,7 +48,7 @@ export const styles = {
         borderRadius: '4px',
         overflow: 'hidden',
     },
-    formDirectoryElementsError: (theme: Theme) => ({
+    formDirectoryElementsError: (theme) => ({
         borderColor: theme.palette.error.main,
     }),
     formDirectoryElements2: {
@@ -65,7 +66,7 @@ export const styles = {
     addDirectoryElements: {
         marginTop: '-5px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const MicroSusceptanceAdornment = {
     position: 'end',