@mui/x-data-grid-premium 8.26.1 → 8.27.1

package/CHANGELOG.md

@@ -5,27 +5,156 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## 8.26.1
+## v8.27.1
 
-_Jan 23, 2026_
+<!-- generated comparing v8.27.0..v8.x -->
 
-Release highlight ✨:
+_Feb 13, 2026_
 
-- 🐞 Hotfix for Data Grid Premium type imports
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 CSS bundler support is no longer needed for the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@sai6855
+
+The following team members contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @mj12albert, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.1`
+
+- [DataGrid] Hide column menu icon when there are no items (#21303) @MBilalShafi
+- [DataGrid] Migrate styled imports and remove `index.css` (#21176) @MBilalShafi
+- [DataGrid] Optimize `GridRootStyles` overrides resolver (#21251) @sai6855
+
+#### `@mui/x-data-grid-pro@8.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.1`, plus:
+
+- [DataGridPro] Fix column pinning issue with `restoreState` (#21305) @MBilalShafi
+- [DataGridPro] Fix lazy loading params for page with one row (#21238) @MBilalShafi
+- [DataGridPro] Properly extract parent path (#21301) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.27.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.1`, plus:
+
+- [DataGridPremium] Fix aggregation display when `initialState` has both `sortModel` and `pinnedColumns` (#21152) @mj12albert
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.1`
+
+- [tree view] Fix `apiRef.current.setItemExpansion()` (#21095) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.1`.
+
+### Core
+
+- [internal] Add CLI for translation using LLM (#21299) @cherniavskii
+
+## v8.27.0
+
+_Feb 2, 2026_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Data Grid supports new `longText` [column type](https://mui.com/x/react-data-grid/column-definition/#column-types)
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @siriwatknp
 
 ### Data Grid
 
-#### `@mui/x-data-grid@8.26.1`
+#### `@mui/x-data-grid@8.27.0`
+
+- [DataGrid] Fix virtualization crash by preventing out-of-bounds `focusedVirtualCell` indices (#21123) @cherniavskii
+- [DataGrid] Fix focus steal issue with `<Dialog />` (#21106) @MBilalShafi
+- [DataGrid] Add new `longText` column type (#21103) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.0`.
+
+#### `@mui/x-data-grid-premium@8.27.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.0`, plus:
+
+- [DataGridPremium] Fix focus retention when undo/redo operations are done on the same cell (#21110) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.0`
 
 Internal changes.
 
-#### `@mui/x-data-grid-pro@8.26.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
-Same changes as in `@mui/x-data-grid@8.26.1`.
+Same changes as in `@mui/x-date-pickers@8.27.0`.
 
-#### `@mui/x-data-grid-premium@8.26.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+### Charts
+
+#### `@mui/x-charts@8.27.0`
+
+- [charts] Deprecate `AxisId` class in favour of to `data-axis-id` attribute (#21048) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.27.0`, plus:
+
+- [charts-pro] Add `onItemClick` to the heatmap (#20817) (#21030) @alexfauquette
+
+#### `@mui/x-charts-premium@8.27.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.0`, plus:
+
+- [charts-premium] Fix wrong `defaultSlots` in premium charts (#21052) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.0`, plus:
+
+- [RichTreeViewPro] Do not export `useSimpleTreeViewApiRef()` and `useRichTreeViewApiRef()` from pro package (#21145) @flaviendelangle
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix DataGrid's cell edit renderers (@arminmeh) (#21041) @github-actions[bot]
+
+### Core
+
+- [code-infra] Add `consistent-type-imports` rule to the grid packages (#21119) @arminmeh
+- [code-infra] Allow user to select target branch if it exists for current major (#21005) @JCQuintas
+- [code-infra] Fix the target branch condition in the release script (#21051) @arminmeh
+- [code-infra] Update docs deploy script to fetch from `v8.x` (#21013) @arminmeh
 
-Same changes as in `@mui/x-data-grid-pro@8.26.1`, plus:
+## 8.26.1
+
+_Jan 23, 2026_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Data Grid Premium type imports
+
+### Data Grid
+
+#### `@mui/x-data-grid-premium@8.26.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
 
 - [DataGridPremium] Fix type import (#21033) @arminmeh
 

package/DataGridPremium/DataGridPremium.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type GridValidRowModel } from '@mui/x-data-grid-pro';
-import { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
+import type { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
 export type { GridPremiumSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridPremiumComponent {
   <R extends GridValidRowModel = any>(props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;

package/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2OTEyNjQwMDAwMA==";
+const releaseInfo = "MTc3MDk0MDgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from '@mui/x-internals/types';
+import type { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid-pro/internals';
-import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
-import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
+import type { GridPrivateApiPremium } from "../models/gridApiPremium.js";
+import type { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
 export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration) => DataGridPremiumProcessedProps;

package/DataGridPremium/useDataGridPremiumProps.d.ts

@@ -1,4 +1,4 @@
-import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from "../models/dataGridPremiumProps.js";
+import type { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from "../models/dataGridPremiumProps.js";
 /**
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */

package/components/GridAggregationHeader.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnHeaderParams } from '@mui/x-data-grid';
+import { type GridColumnHeaderParams } from '@mui/x-data-grid';
 import { type GridBaseColDef } from '@mui/x-data-grid/internals';
 declare function GridAggregationHeader(props: GridColumnHeaderParams & {
   renderHeader: GridBaseColDef['renderHeader'];

package/components/GridBottomContainer.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
@@ -25,7 +25,7 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div', {
+const Element = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/components/GridDataSourceGroupingCriteriaCell.d.ts

@@ -1,4 +1,4 @@
-import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+import { type GridRenderCellParams, type GridGroupNode } from '@mui/x-data-grid-pro';
 interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
   hideDescendantCount?: boolean;
 }

package/components/GridEmptyPivotOverlay.d.ts

@@ -1,4 +1,4 @@
-import { GridOverlayProps } from '@mui/x-data-grid';
+import { type GridOverlayProps } from '@mui/x-data-grid';
 declare const GridEmptyPivotOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridExcelExportMenuItem.d.ts

@@ -1,5 +1,5 @@
-import { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
-import { GridExcelExportOptions } from "../hooks/features/export/index.js";
+import type { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
+import type { GridExcelExportOptions } from "../hooks/features/export/index.js";
 export type GridExcelExportMenuItemProps = GridExportMenuItemProps<GridExcelExportOptions>;
 declare function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridExcelExportMenuItem {

package/components/GridGroupingColumnFooterCell.d.ts

@@ -1,3 +1,3 @@
-import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+import type { GridRenderCellParams } from '@mui/x-data-grid-pro';
 declare function GridGroupingColumnFooterCell(props: GridRenderCellParams): import("react/jsx-runtime").JSX.Element;
 export { GridGroupingColumnFooterCell };

package/components/GridGroupingColumnLeafCell.d.ts

@@ -1,3 +1,3 @@
-import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+import type { GridRenderCellParams } from '@mui/x-data-grid-pro';
 declare function GridGroupingColumnLeafCell(props: GridRenderCellParams): import("react/jsx-runtime").JSX.Element;
 export { GridGroupingColumnLeafCell };

package/components/GridGroupingCriteriaCell.d.ts

@@ -1,4 +1,4 @@
-import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+import { type GridRenderCellParams, type GridGroupNode } from '@mui/x-data-grid-pro';
 interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
   hideDescendantCount?: boolean;
 }

package/components/GridPremiumColumnMenu.d.ts

@@ -1,4 +1,5 @@
-import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import { type GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import type { GridColumnMenuComponent } from '@mui/x-data-grid-pro/internals';
 import { GridColumnMenuAggregationItem } from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
 import { GridColumnMenuManagePanelItem } from "./columnMenu/menuItems/GridColumnMenuManagePanelItem.js";
 export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element;
@@ -34,4 +35,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
     displayOrder: number;
   };
 };
-export declare const GridPremiumColumnMenu: import("react").ForwardRefExoticComponent<GridColumnMenuProps> | import("react").ForwardRefExoticComponent<GridColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+export declare const GridPremiumColumnMenu: GridColumnMenuComponent;

package/components/GridPremiumColumnMenu.js

@@ -49,4 +49,6 @@ const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = (0, _forwardRef.fo
     ref: ref
   }));
 });
-if (process.env.NODE_ENV !== "production") GridPremiumColumnMenu.displayName = "GridPremiumColumnMenu";
+if (process.env.NODE_ENV !== "production") GridPremiumColumnMenu.displayName = "GridPremiumColumnMenu";
+GridPremiumColumnMenu.defaultSlots = GRID_COLUMN_MENU_SLOTS_PREMIUM;
+GridPremiumColumnMenu.defaultSlotProps = GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM;

package/components/GridPremiumToolbar.d.ts

@@ -1,2 +1,2 @@
-import { GridToolbarProps } from '@mui/x-data-grid-pro/internals';
+import { type GridToolbarProps } from '@mui/x-data-grid-pro/internals';
 export declare function GridPremiumToolbar(props: GridToolbarProps): import("react/jsx-runtime").JSX.Element;

package/components/aiAssistantPanel/AiAssistantPanelTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-import { GridSlotProps } from '@mui/x-data-grid-pro';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type GridSlotProps } from '@mui/x-data-grid-pro';
 export interface AiAssistantPanelState {
   /**
    * If `true`, the assistant panel is open.

package/components/aiAssistantPanel/GridAiAssistantPanel.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridAiAssistantSelectors = require("../../hooks/features/aiAssistant/gridAiAssistantSelectors");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelRoot = (0, _system.styled)('div', {
+const AiAssistantPanelRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanel'
 })({
@@ -45,7 +45,7 @@ const AiAssistantPanelRoot = (0, _system.styled)('div', {
   maxHeight: 'none',
   overflow: 'hidden'
 });
-const AiAssistantPanelHeader = (0, _system.styled)('div', {
+const AiAssistantPanelHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelHeader'
 })({
@@ -58,7 +58,7 @@ const AiAssistantPanelHeader = (0, _system.styled)('div', {
   height: 52,
   padding: _internals.vars.spacing(0, 0.75, 0, 2)
 });
-const AiAssistantPanelTitleContainer = (0, _system.styled)('div', {
+const AiAssistantPanelTitleContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelTitleContainer'
 })({
@@ -67,7 +67,7 @@ const AiAssistantPanelTitleContainer = (0, _system.styled)('div', {
   flex: 1,
   overflow: 'hidden'
 });
-const AiAssistantPanelTitle = (0, _system.styled)('span', {
+const AiAssistantPanelTitle = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelTitle'
 })({
@@ -75,7 +75,7 @@ const AiAssistantPanelTitle = (0, _system.styled)('span', {
   fontWeight: _internals.vars.typography.fontWeight.medium,
   marginTop: _internals.vars.spacing(0.25)
 });
-const AiAssistantPanelConversationTitle = (0, _system.styled)('span', {
+const AiAssistantPanelConversationTitle = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversationTitle'
 })({
@@ -86,7 +86,7 @@ const AiAssistantPanelConversationTitle = (0, _system.styled)('span', {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const AiAssistantPanelBody = (0, _system.styled)('div', {
+const AiAssistantPanelBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelBody'
 })({
@@ -97,14 +97,14 @@ const AiAssistantPanelBody = (0, _system.styled)('div', {
   justifyContent: 'center',
   alignItems: 'center'
 });
-const AiAssistantPanelEmptyText = (0, _system.styled)('span', {
+const AiAssistantPanelEmptyText = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelEmptyText'
 })({
   font: _internals.vars.typography.font.body,
   color: _internals.vars.colors.foreground.muted
 });
-const AiAssistantPanelFooter = (0, _system.styled)('div', {
+const AiAssistantPanelFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelFooter'
 })({

package/components/aiAssistantPanel/GridAiAssistantPanelConversation.d.ts

@@ -1,4 +1,4 @@
-import { Conversation } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+import type { Conversation } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
 type GridAiAssistantPanelConversationProps = {
   conversation: Conversation;
 };

package/components/aiAssistantPanel/GridAiAssistantPanelConversation.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _prompt = require("../prompt");
@@ -26,14 +26,14 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelConversationRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const AiAssistantPanelConversationRoot = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversation'
 })({
   flexShrink: 0,
   height: '100%'
 });
-const AiAssistantPanelConversationList = (0, _system.styled)('ol', {
+const AiAssistantPanelConversationList = (0, _styles.styled)('ol', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversationList'
 })({

package/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.d.ts

@@ -1,4 +1,4 @@
-import { PromptSuggestion } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+import type { PromptSuggestion } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
 type GridAiAssistantPanelSuggestionsProps = {
   suggestions: PromptSuggestion[];
 };

package/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridAiAssistantPanelSuggestions = GridAiAssistantPanelSuggestions;
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelSuggestionsRoot = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestions'
 })({
@@ -32,7 +32,7 @@ const AiAssistantPanelSuggestionsRoot = (0, _system.styled)('div', {
   flexDirection: 'column',
   gap: _internals.vars.spacing(0.75)
 });
-const AiAssistantPanelSuggestionsList = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsList = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestionsList'
 })({
@@ -43,7 +43,7 @@ const AiAssistantPanelSuggestionsList = (0, _system.styled)('div', {
   margin: _internals.vars.spacing(-1),
   scrollbarWidth: 'thin'
 });
-const AiAssistantPanelSuggestionsLabel = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsLabel = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestionsLabel'
 })({

package/components/chartsPanel/ChartsPanelTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-data-grid-pro/internals';
-import { GridSlotProps } from '@mui/x-data-grid-pro';
+import type { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { type GridSlotProps } from '@mui/x-data-grid-pro';
 export interface ChartsPanelState {
   /**
    * If `true`, the charts integration panel is open.

package/components/chartsPanel/GridChartsPanel.js

@@ -10,7 +10,7 @@ exports.GridChartsPanel = GridChartsPanel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -22,7 +22,7 @@ var _gridChartsIntegrationSelectors = require("../../hooks/features/chartsIntegr
 var _useGridChartIntegration = require("../../hooks/utils/useGridChartIntegration");
 var _GridChartsPanelData = require("./data/GridChartsPanelData");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridChartsPanelHeader = (0, _system.styled)('div', {
+const GridChartsPanelHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelHeader'
 })({
@@ -32,7 +32,7 @@ const GridChartsPanelHeader = (0, _system.styled)('div', {
   padding: _internals.vars.spacing(1, 0.5, 0, 0.75),
   boxSizing: 'border-box'
 });
-const GridChartsPanelTitle = (0, _system.styled)('div', {
+const GridChartsPanelTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelTitle'
 })({
@@ -41,7 +41,7 @@ const GridChartsPanelTitle = (0, _system.styled)('div', {
   marginLeft: _internals.vars.spacing(0.5),
   marginRight: 'auto'
 });
-const GridChartsPanelChartSelection = (0, _system.styled)('button', {
+const GridChartsPanelChartSelection = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelChartSelection'
 })({

package/components/chartsPanel/chart/GridChartsPanelChart.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelChart = GridChartsPanelChart;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsManagementRoot = (0, _system.styled)('div', {
+const GridChartsManagementRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsManagement'
 })({
@@ -33,7 +33,7 @@ const GridChartsManagementRoot = (0, _system.styled)('div', {
   justifyContent: 'space-between',
   height: '100%'
 });
-const GridChartTypeRoot = (0, _system.styled)('div', {
+const GridChartTypeRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartTypeRoot'
 })({
@@ -42,7 +42,7 @@ const GridChartTypeRoot = (0, _system.styled)('div', {
   gap: _internals.vars.spacing(1),
   padding: _internals.vars.spacing(1)
 });
-const GridChartTypeButton = (0, _system.styled)('button', {
+const GridChartTypeButton = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'ChartTypeSelectorButton',
   shouldForwardProp: prop => prop !== 'isSelected'

package/components/chartsPanel/customize/GridChartsPanelCustomize.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelCustomize = GridChartsPanelCustomize;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
@@ -19,16 +19,16 @@ var _CollapsibleTrigger = require("../../collapsible/CollapsibleTrigger");
 var _CollapsiblePanel = require("../../collapsible/CollapsiblePanel");
 var _useGridChartsIntegration = require("../../../hooks/features/chartsIntegration/useGridChartsIntegration");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridChartsPanelCustomizeRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea)({
+const GridChartsPanelCustomizeRoot = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea)({
   height: '100%'
 });
-const GridChartsPanelCustomizeSection = (0, _system.styled)(_Collapsible.Collapsible, {
+const GridChartsPanelCustomizeSection = (0, _styles.styled)(_Collapsible.Collapsible, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelCustomizeSection'
 })({
   margin: _internals.vars.spacing(0.5, 1)
 });
-const GridChartsPanelCustomizePanel = (0, _system.styled)(_CollapsiblePanel.CollapsiblePanel, {
+const GridChartsPanelCustomizePanel = (0, _styles.styled)(_CollapsiblePanel.CollapsiblePanel, {
   name: 'MuiDataGrid',
   slot: 'chartsPanelSection'
 })({
@@ -37,7 +37,7 @@ const GridChartsPanelCustomizePanel = (0, _system.styled)(_CollapsiblePanel.Coll
   padding: _internals.vars.spacing(2, 1.5),
   gap: _internals.vars.spacing(3)
 });
-const GridChartsPanelCustomizePanelTitle = (0, _system.styled)('div', {
+const GridChartsPanelCustomizePanelTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelCustomizePanelTitle'
 })({