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

package/CHANGELOG.md

@@ -5,6 +5,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v8.27.1
+
+<!-- generated comparing v8.27.0..v8.x -->
+
+_Feb 13, 2026_
+
+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_

package/DataGridPremium/DataGridPremium.js

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

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/GridPremiumColumnMenu.d.ts

@@ -1,4 +1,5 @@
-import { type GridColumnMenuProps, type 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/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.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.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/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'
 })({

package/components/chartsPanel/data/GridChartsPanelDataBody.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelDataBody = GridChartsPanelDataBody;
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataBodyRoot = (0, _system.styled)('div', {
+const GridChartsPanelDataBodyRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataBody'
 })({
@@ -49,7 +49,7 @@ const GridChartsPanelDataBodyRoot = (0, _system.styled)('div', {
   flexDirection: 'column',
   overflow: 'hidden'
 });
-const GridChartsPanelDataAvailableFields = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridChartsPanelDataAvailableFields = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataAvailableFields'
 })({
@@ -63,7 +63,7 @@ const GridChartsPanelDataAvailableFields = (0, _system.styled)(_xDataGridPro.Gri
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 });
-const GridChartsPanelDataSections = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+const GridChartsPanelDataSections = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSections'
 })({
@@ -73,13 +73,13 @@ const GridChartsPanelDataSections = (0, _system.styled)(_resizablePanel.Resizabl
   display: 'flex',
   flexDirection: 'column'
 });
-const GridChartsPanelDataScrollArea = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridChartsPanelDataScrollArea = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataScrollArea'
 })({
   height: '100%'
 });
-const GridChartsPanelDataSection = (0, _system.styled)(_collapsible.Collapsible, {
+const GridChartsPanelDataSection = (0, _styles.styled)(_collapsible.Collapsible, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSection',
   shouldForwardProp: prop => prop !== 'disabled'
@@ -97,7 +97,7 @@ const GridChartsPanelDataSection = (0, _system.styled)(_collapsible.Collapsible,
     outline: `2px solid ${_internals.vars.colors.interactive.selected}`
   }
 }));
-const GridChartsPanelDataSectionTitle = (0, _system.styled)('div', {
+const GridChartsPanelDataSectionTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSectionTitle'
 })({
@@ -110,7 +110,7 @@ const GridChartsPanelDataSectionTitle = (0, _system.styled)('div', {
   font: _internals.vars.typography.font.body,
   fontWeight: _internals.vars.typography.fontWeight.medium
 });
-const GridChartsPanelDataFieldList = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldList = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldList'
 })({
@@ -119,7 +119,7 @@ const GridChartsPanelDataFieldList = (0, _system.styled)('div', {
   flexDirection: 'column',
   padding: _internals.vars.spacing(0.5, 0)
 });
-const GridChartsPanelDataPlaceholder = (0, _system.styled)('div', {
+const GridChartsPanelDataPlaceholder = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataPlaceholder'
 })({

package/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -11,7 +11,7 @@ exports.GridChartsPanelDataField = GridChartsPanelDataField;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-data-grid-pro/internals");
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataFieldRoot = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataField'
 })(({
@@ -87,7 +87,7 @@ const GridChartsPanelDataFieldRoot = (0, _system.styled)('div', {
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 }));
-const GridChartsPanelDataFieldName = (0, _system.styled)('span', {
+const GridChartsPanelDataFieldName = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldName'
 })({
@@ -96,14 +96,14 @@ const GridChartsPanelDataFieldName = (0, _system.styled)('span', {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const GridChartsPanelDataFieldActionContainer = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldActionContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldActionContainer'
 })({
   display: 'flex',
   alignItems: 'center'
 });
-const GridChartsPanelDataFieldDragIcon = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldDragIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldDragIcon'
 })({
@@ -118,7 +118,7 @@ const GridChartsPanelDataFieldDragIcon = (0, _system.styled)('div', {
     opacity: 0.3
   }
 });
-const GridChartsPanelDataFieldCheckbox = (0, _system.styled)(_internals.NotRendered, {
+const GridChartsPanelDataFieldCheckbox = (0, _styles.styled)(_internals.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldCheckbox'
 })({

package/components/chartsPanel/data/GridChartsPanelDataSearch.js

@@ -9,7 +9,7 @@ exports.GridChartsPanelDataSearch = GridChartsPanelDataSearch;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataSearchContainer = (0, _system.styled)('div', {
+const GridChartsPanelDataSearchContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSearchContainer'
 })({

package/components/collapsible/Collapsible.js

@@ -10,7 +10,7 @@ exports.Collapsible = Collapsible;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsibleRoot = (0, _system.styled)('div', {
+const CollapsibleRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Collapsible'
 })(({

package/components/collapsible/CollapsiblePanel.js

@@ -9,7 +9,7 @@ exports.CollapsiblePanel = CollapsiblePanel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsiblePanelRoot = (0, _system.styled)('div', {
+const CollapsiblePanelRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'CollapsiblePanel'
 })({

package/components/collapsible/CollapsibleTrigger.js

@@ -9,7 +9,7 @@ exports.CollapsibleTrigger = CollapsibleTrigger;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsibleTriggerRoot = (0, _system.styled)('button', {
+const CollapsibleTriggerRoot = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'CollapsibleTrigger'
 })(({
@@ -56,7 +56,7 @@ const CollapsibleTriggerRoot = (0, _system.styled)('button', {
     outlineOffset: -2
   }
 }));
-const CollapsibleIcon = (0, _system.styled)('div', {
+const CollapsibleIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'CollapsibleIcon'
 })(({

package/components/pivotPanel/GridPivotPanelBody.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPivotPanelBody = GridPivotPanelBody;
 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 _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-data-grid-pro/internals");
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridPivotPanelBodyRoot = (0, _system.styled)('div', {
+const GridPivotPanelBodyRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelBody'
 })({
@@ -45,7 +45,7 @@ const GridPivotPanelBodyRoot = (0, _system.styled)('div', {
   flexDirection: 'column',
   overflow: 'hidden'
 });
-const GridPivotPanelAvailableFields = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridPivotPanelAvailableFields = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelAvailableFields'
 })({
@@ -59,7 +59,7 @@ const GridPivotPanelAvailableFields = (0, _system.styled)(_xDataGridPro.GridShad
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 });
-const GridPivotPanelSections = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+const GridPivotPanelSections = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSections'
 })({
@@ -69,13 +69,13 @@ const GridPivotPanelSections = (0, _system.styled)(_resizablePanel.ResizablePane
   display: 'flex',
   flexDirection: 'column'
 });
-const GridPivotPanelScrollArea = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridPivotPanelScrollArea = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelScrollArea'
 })({
   height: '100%'
 });
-const GridPivotPanelSection = (0, _system.styled)(_collapsible.Collapsible, {
+const GridPivotPanelSection = (0, _styles.styled)(_collapsible.Collapsible, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSection'
 })({
@@ -89,7 +89,7 @@ const GridPivotPanelSection = (0, _system.styled)(_collapsible.Collapsible, {
     outline: `2px solid ${_internals.vars.colors.interactive.selected}`
   }
 });
-const GridPivotPanelSectionTitle = (0, _system.styled)('div', {
+const GridPivotPanelSectionTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSectionTitle'
 })({
@@ -102,7 +102,7 @@ const GridPivotPanelSectionTitle = (0, _system.styled)('div', {
   font: _internals.vars.typography.font.body,
   fontWeight: _internals.vars.typography.fontWeight.medium
 });
-const GridPivotPanelFieldList = (0, _system.styled)('div', {
+const GridPivotPanelFieldList = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelFieldList'
 })({
@@ -111,7 +111,7 @@ const GridPivotPanelFieldList = (0, _system.styled)('div', {
   flexDirection: 'column',
   padding: _internals.vars.spacing(0.5, 0)
 });
-const GridPivotPanelPlaceholder = (0, _system.styled)('div', {
+const GridPivotPanelPlaceholder = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelPlaceholder'
 })({

package/components/pivotPanel/GridPivotPanelField.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPivotPanelField = GridPivotPanelField;
 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 _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-data-grid-pro/internals");
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridPivotPanelFieldRoot = (0, _system.styled)('div', {
+const GridPivotPanelFieldRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelField',
   overridesResolver: (props, styles) => [{
@@ -85,7 +85,7 @@ const GridPivotPanelFieldRoot = (0, _system.styled)('div', {
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 });
-const GridPivotPanelFieldName = (0, _system.styled)('span', {
+const GridPivotPanelFieldName = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelFieldName'
 })({
@@ -94,14 +94,14 @@ const GridPivotPanelFieldName = (0, _system.styled)('span', {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const GridPivotPanelFieldActionContainer = (0, _system.styled)('div', {
+const GridPivotPanelFieldActionContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelFieldActionContainer'
 })({
   display: 'flex',
   alignItems: 'center'
 });
-const GridPivotPanelFieldDragIcon = (0, _system.styled)('div', {
+const GridPivotPanelFieldDragIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelFieldDragIcon'
 })({
@@ -116,7 +116,7 @@ const GridPivotPanelFieldDragIcon = (0, _system.styled)('div', {
     opacity: 0.3
   }
 });
-const GridPivotPanelFieldCheckbox = (0, _system.styled)(_internals.NotRendered, {
+const GridPivotPanelFieldCheckbox = (0, _styles.styled)(_internals.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelFieldCheckbox'
 })({

package/components/pivotPanel/GridPivotPanelHeader.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPivotPanelHeader = GridPivotPanelHeader;
 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 _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridPivotPanelHeaderRoot = (0, _system.styled)('div', {
+const GridPivotPanelHeaderRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelHeader'
 })({
@@ -40,13 +40,13 @@ const GridPivotPanelHeaderRoot = (0, _system.styled)('div', {
   boxSizing: 'border-box',
   height: 52
 });
-const GridPivotPanelSwitch = (0, _system.styled)(_internals.NotRendered, {
+const GridPivotPanelSwitch = (0, _styles.styled)(_internals.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSwitch'
 })({
   marginRight: 'auto'
 });
-const GridPivotPanelSwitchLabel = (0, _system.styled)('span', {
+const GridPivotPanelSwitchLabel = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSwitchLabel'
 })({

package/components/pivotPanel/GridPivotPanelSearch.js

@@ -9,7 +9,7 @@ exports.GridPivotPanelSearch = GridPivotPanelSearch;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridPivotPanelSearchContainer = (0, _system.styled)('div', {
+const GridPivotPanelSearchContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSearchContainer'
 })({

package/components/resizablePanel/ResizablePanel.js

@@ -11,7 +11,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 _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ResizablePanelContext = require("./ResizablePanelContext");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const ResizablePanelRoot = (0, _system.styled)('div', {
+const ResizablePanelRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ResizablePanel'
 })({

package/components/resizablePanel/ResizablePanelHandle.js

@@ -10,7 +10,7 @@ exports.ResizablePanelHandle = ResizablePanelHandle;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const ResizablePanelHandleRoot = (0, _system.styled)('div', {
+const ResizablePanelHandleRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ResizablePanelHandle',
   overridesResolver: (props, styles) => [{

package/components/sidebar/Sidebar.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 _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const SidebarRoot = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+const SidebarRoot = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
   name: 'MuiDataGrid',
   slot: 'Sidebar'
 })({

package/components/sidebar/SidebarHeader.js

@@ -9,7 +9,7 @@ exports.SidebarHeader = SidebarHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-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"));
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const SidebarHeaderRoot = (0, _system.styled)('div', {
+const SidebarHeaderRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'SidebarHeader'
 })({

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MDk0MDgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/esm/components/GridBottomContainer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["children"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass, useGridSelector, gridRowsLoadingSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";

package/esm/components/GridPremiumColumnMenu.d.ts

@@ -1,4 +1,5 @@
-import { type GridColumnMenuProps, type 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/esm/components/GridPremiumColumnMenu.js

@@ -41,4 +41,6 @@ export const GridPremiumColumnMenu = forwardRef(function GridPremiumColumnMenuSi
     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/esm/components/aiAssistantPanel/GridAiAssistantPanel.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridAiAssistantActiveConversationSelector, gridAiAssistantConversationsSelector } from "../../hooks/features/aiAssistant/gridAiAssistantSelectors.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";

package/esm/components/aiAssistantPanel/GridAiAssistantPanelConversation.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { getDataGridUtilityClass, GridShadowScrollArea } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridPrompt } from "../prompt/index.js";

package/esm/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.js

@@ -1,6 +1,6 @@
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";

package/esm/components/chartsPanel/GridChartsPanel.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
 import { useGridSelector, vars } from '@mui/x-data-grid-pro/internals';
 import { GridMenu, GridOverlay } from '@mui/x-data-grid-pro';

package/esm/components/chartsPanel/chart/GridChartsPanelChart.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';

package/esm/components/chartsPanel/customize/GridChartsPanelCustomize.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import { GridOverlay, GridShadowScrollArea } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";

package/esm/components/chartsPanel/data/GridChartsPanelDataBody.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { gridPivotActiveSelector, vars } from '@mui/x-data-grid-pro/internals';
 import { getDataGridUtilityClass, GridShadowScrollArea, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';

package/esm/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass, GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridPivotActiveSelector, NotRendered, vars } from '@mui/x-data-grid-pro/internals';

package/esm/components/chartsPanel/data/GridChartsPanelDataSearch.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";

package/esm/components/collapsible/Collapsible.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "children", "initiallyOpen"];
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import useId from '@mui/utils/useId';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';

package/esm/components/collapsible/CollapsiblePanel.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["aria-label", "children", "className"];
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import useId from '@mui/utils/useId';
 import composeClasses from '@mui/utils/composeClasses';

package/esm/components/collapsible/CollapsibleTrigger.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className"];
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';

package/esm/components/pivotPanel/GridPivotPanelBody.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { GridShadowScrollArea, getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
 import { vars } from '@mui/x-data-grid-pro/internals';

package/esm/components/pivotPanel/GridPivotPanelField.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
 import { GridColumnSortButton, NotRendered, vars } from '@mui/x-data-grid-pro/internals';

package/esm/components/pivotPanel/GridPivotPanelHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { useGridSelector, getDataGridUtilityClass, gridRowCountSelector } from '@mui/x-data-grid-pro';
 import { vars, NotRendered } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';

package/esm/components/pivotPanel/GridPivotPanelSearch.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";

package/esm/components/resizablePanel/ResizablePanel.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "children", "direction"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
 import { ResizablePanelContext } from "./ResizablePanelContext.js";

package/esm/components/resizablePanel/ResizablePanelHandle.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "children"];
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, gridClasses } from '@mui/x-data-grid-pro';

package/esm/components/sidebar/Sidebar.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "children"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";

package/esm/components/sidebar/SidebarHeader.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "children"];
 import * as React from 'react';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { vars } from '@mui/x-data-grid-pro/internals';
 import composeClasses from '@mui/utils/composeClasses';

package/esm/hooks/features/aggregation/useGridAggregation.js

@@ -55,7 +55,7 @@ export const useGridAggregation = (apiRef, props) => {
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
     const hasAggregatedSortedField = gridRowMaximumTreeDepthSelector(apiRef) > 1 && sortedAggregatedFields.length > 0;
-    if (visibleAggregatedFields.length > 0) {
+    if (visibleAggregatedFieldsWithSort.length > 0) {
       chunks.push(visibleAggregatedFieldsWithSort);
     }
     const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.27.0
+ * @mui/x-data-grid-premium v8.27.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/aggregation/useGridAggregation.js

@@ -63,7 +63,7 @@ const useGridAggregation = (apiRef, props) => {
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
     const hasAggregatedSortedField = (0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) > 1 && sortedAggregatedFields.length > 0;
-    if (visibleAggregatedFields.length > 0) {
+    if (visibleAggregatedFieldsWithSort.length > 0) {
       chunks.push(visibleAggregatedFieldsWithSort);
     }
     const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.27.0
+ * @mui/x-data-grid-premium v8.27.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.27.0",
+  "version": "8.27.1",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -38,10 +38,10 @@
     "@mui/x-internal-exceljs-fork": "4.4.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.27.0",
-    "@mui/x-data-grid-pro": "8.27.0",
-    "@mui/x-internals": "8.26.0",
-    "@mui/x-license": "8.26.0"
+    "@mui/x-data-grid": "8.27.1",
+    "@mui/x-data-grid-pro": "8.27.1",
+    "@mui/x-license": "8.26.0",
+    "@mui/x-internals": "8.26.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",