[charts] Flatten imports from @mui/utils and @mui/system (#15603)

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>

Author: alexfauquette

.eslintrc.js

@@ -59,21 +59,22 @@ const RESTRICTED_TOP_LEVEL_IMPORTS = [
 const buildPackageRestrictedImports = (packageName, root, allowRootImports = true) => [
   {
     files: [`packages/${root}/src/**/*{.ts,.tsx,.js}`],
-    excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
+    excludedFiles: [
+      '*.d.ts',
+      '*.spec.ts',
+      '*.spec.tsx',
+      '**.test.tx',
+      '**.test.tsx',
+      `packages/${root}/src/index{.ts,.tsx,.js}`,
+    ],
     rules: {
       'no-restricted-imports': [
         'error',
         {
-          paths: [
-            {
-              name: packageName,
-              message: 'Use relative import instead',
-            },
-            {
-              name: '@mui/material',
-              message: 'Use @mui/utils or a more specific import instead',
-            },
-          ],
+          paths: RESTRICTED_TOP_LEVEL_IMPORTS.map((pkName) => ({
+            name: pkName,
+            message: 'Use relative import instead',
+          })),
           patterns: [
             // TODO move rule into main repo to allow deep @mui/monorepo imports
             {

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart';
+import { BarPlotProps, BarChartProps, BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
@@ -12,7 +12,6 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useBarChartProps } from '@mui/x-charts/internals';
-import { BarPlotProps } from '@mui/x-charts';
 import { ChartContainerPro } from '../ChartContainerPro';
 import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
 import { useZoom } from '../context/ZoomProvider/useZoom';

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -5,7 +5,7 @@ import type {} from '../typeOverloads';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ChartContainerProps } from '@mui/x-charts/ChartContainer';
 import { ResizableContainer } from '@mui/x-charts/internals';
-import { ChartsSurface } from '@mui/x-charts';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { ChartDataProviderPro } from '../context/ChartDataProviderPro';
 import { ZoomProps } from '../context/ZoomProvider';

packages/x-charts-pro/src/Heatmap/heatmapClasses.ts

@@ -1,7 +1,5 @@
-import {
-  unstable_generateUtilityClass as generateUtilityClass,
-  unstable_generateUtilityClasses as generateUtilityClasses,
-} from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface HeatmapClasses {
   /** Styles applied to the heatmap cells. */

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -10,6 +10,7 @@ import {
   LinePlot,
   LinePlotProps,
   MarkPlot,
+  MarkPlotProps,
 } from '@mui/x-charts/LineChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -20,7 +21,6 @@ import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useLineChartProps } from '@mui/x-charts/internals';
-import { MarkPlotProps } from '@mui/x-charts';
 import { ChartContainerPro } from '../ChartContainerPro';
 import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
 import { useZoom } from '../context/ZoomProvider/useZoom';

packages/x-charts-pro/src/context/CartesianProviderPro/createAxisFilterMapper.ts

@@ -8,7 +8,8 @@ import {
   isDefined,
   getScale,
 } from '@mui/x-charts/internals';
-import { ChartsAxisProps, ScaleName, AxisConfig } from '@mui/x-charts';
+import { ScaleName, AxisConfig } from '@mui/x-charts/models';
+import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ZoomData } from '../ZoomProvider';
 
 type CreateAxisFilterMapperParams = {

packages/x-charts-pro/src/internals/utils/releaseInfo.ts

@@ -1,4 +1,4 @@
-import { ponyfillGlobal } from '@mui/utils';
+import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 
 export const getReleaseInfo = () => {
   const releaseInfo = '__RELEASE_INFO__';

packages/x-charts/src/ChartsAxis/axisClasses.ts

@@ -1,7 +1,5 @@
-import {
-  unstable_generateUtilityClass as generateUtilityClass,
-  unstable_generateUtilityClasses as generateUtilityClasses,
-} from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface ChartsAxisClasses {
   /** Styles applied to the root element. */

packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts

@@ -1,7 +1,5 @@
-import {
-  unstable_generateUtilityClass as generateUtilityClass,
-  unstable_generateUtilityClasses as generateUtilityClasses,
-} from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface ChartsLegendClasses {
   /** Styles applied to the root element. */

packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
 
 /**

packages/x-charts/src/models/axis.ts

@@ -9,7 +9,7 @@ import type {
   ScaleSequential,
   ScaleThreshold,
 } from '@mui/x-charts-vendor/d3-scale';
-import { SxProps } from '@mui/system';
+import { SxProps } from '@mui/system/styleFunctionSx';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';