@mui/x-data-grid 8.23.0 → 8.24.0

package/CHANGELOG.md

@@ -5,9 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.24.0
+
+_Jan 8, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️Add bar [batch renderer](https://mui.com/x/react-charts/bars/#performance), result in a significant performance improvement when rendering thousands of bars
+- 📊 Add [range bar chart](https://mui.com/x/react-charts/range-bar/) to render 
+  ![image](https://github.com/user-attachments/assets/4112c09b-d841-42f7-a0c8-d23b61c23ca0)
+- 🌎 Improved Danish (da-DK) and Japanese (ja-JP) locales on the Data Grid
+
+Special thanks go out to these community members for their valuable contributions:
+@anders-noerrelykke, @auloin, @sai6855, @yuito-it
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @JCQuintas, @mapache-salvaje, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.24.0`
+
+- [l10n] Improve Danish (da-DK) locale (#20828) @anders-noerrelykke
+- [l10n] Improve Japanese (ja-JP) locale (#20251) @yuito-it
+
+#### `@mui/x-data-grid-pro@8.24.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.24.0`, plus:
+
+- [DataGridPro] Fix header filter height for `density="compact"` (#20834) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.24.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.24.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.24.0`
+
+- [pickers] Fix Styles applied to PickersDay when MuiPickersDay-dayOutsideMonth is used (#20719) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.24.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-date-pickers@8.24.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.24.0`
+
+- [charts] Add `VisibilityManager` logic to allow managing series/items (#20571) @JCQuintas
+- [charts] Add `identifierSerializer` configuration (#20775) @JCQuintas
+- [charts] Add `serializeIdentifier` instance function (#20791) @JCQuintas
+- [charts] Add bar batch renderer (#20457) @bernardobelchior
+- [charts] Allow animating bar, line, and pie elements to hidden state (#20798) @JCQuintas
+- [charts] Fix failing lint step (#20813) @bernardobelchior
+- [charts] Fix tooltip anchored to item (#20783) @alexfauquette
+- [charts] Fix type casting in getCategoryAxisConfig and applySeriesLayout functions (#20797) @sai6855
+- [charts] Let keyboard navigation avoid overflow and handle nullish values (#20757) @alexfauquette
+- [charts] Refactor `PieChart` and `PieChartPro` to use `slots` and `slotProps` directly (#20795) @sai6855
+- [charts] Refactor `useRegisterPointerEventHandlers` (#20824) @bernardobelchior
+- [charts] Update legend types to allow hiding/showing items (#20784) @JCQuintas
+
+#### `@mui/x-charts-pro@8.24.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.24.0`, plus:
+
+- [charts-pro] Pass `slotProps.toolbar` to `Toolbar` in `PieChartPro` (#20796) @sai6855
+
+#### `@mui/x-charts-premium@8.24.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.24.0`, plus:
+
+- [charts-premium] Add range bar chart (#20275) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.24.0`
+
+- [tree view] Introduce a Tree View Store to clean the internals (#20051) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.24.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.24.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.24.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix axis size default values (#20799) @bernardobelchior
+- [docs] Update What's New in MUI X page with post v8 features (DX-118) (#20787) @alelthomas
+- [docs] Fix `onAccept`'s `context.source` documentation to use 'view' instead of 'picker' (#20465) @auloin
+- [docs] Revise the Charts Brush doc (#20792) @mapache-salvaje
+- [docs] Revise the Charts Highlighting doc (#20788) @mapache-salvaje
+- [docs] Revise the Charts Label doc (#20794) @mapache-salvaje
+- [docs] Revise the Charts Export doc (#20779) @mapache-salvaje
+
+### Core
+
+- [code-infra] Fix v8.23.0 release date (#20767) @bernardobelchior
+- [code-infra] Remove `glob-gitignore` (#20801) @bernardobelchior
+- [code-infra] Remove `nyc` (#20804) @bernardobelchior
+- [code-infra] Remove `stream-browserify` and `null-loader` (#20805) @bernardobelchior
+- [code-infra] Remove `stylelint-config-tailwindcss` (#20807) @bernardobelchior
+- [code-infra] Remove unused `path` package (#20802) @bernardobelchior
+- [code-infra] Retry flaky e2e test on webkit (#20806) @JCQuintas
+- [internal] Add `internal` slot to properly generate components CSS layer (#20763) @siriwatknp
+
 ## 8.23.0
 
-_Dec 23, 2025_
+_Dec 24, 2025_
 
 We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
 

package/components/GridPagination.js

@@ -16,7 +16,9 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _gridPaginationSelector = require("../hooks/features/pagination/gridPaginationSelector");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridPaginationRoot = (0, _styles.styled)(_assert.NotRendered)({
+const GridPaginationRoot = (0, _styles.styled)(_assert.NotRendered, {
+  slot: 'internal'
+})({
   maxHeight: 'calc(100% + 1px)',
   // border width
   flexGrow: 1

package/components/cell/GridEditDateCell.js

@@ -21,7 +21,9 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange", "slotProps"];
-const StyledInputBase = (0, _styles.styled)(_assert.NotRendered)({
+const StyledInputBase = (0, _styles.styled)(_assert.NotRendered, {
+  slot: 'internal'
+})({
   fontSize: 'inherit'
 });
 const useUtilityClasses = ownerState => {

package/components/containers/GridRootStyles.js

@@ -435,6 +435,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       minHeight: 'min-content',
       overflow: 'hidden'
     },
+    [`&.${_gridClasses.gridClasses['root--densityCompact']} .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+      paddingTop: 4,
+      paddingBottom: 4
+    },
     [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -19,7 +19,9 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "children", "open"];
-const StyledMenuList = (0, _styles.styled)(_assert.NotRendered)(() => ({
+const StyledMenuList = (0, _styles.styled)(_assert.NotRendered, {
+  slot: 'internal'
+})(() => ({
   minWidth: 248
 }));
 function handleMenuScrollCapture(event) {

package/components/virtualization/GridBottomContainer.js

@@ -19,7 +19,10 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div')({
+const Element = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'

package/components/virtualization/GridMainContainer.js

@@ -13,7 +13,10 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridPanelAnchor = (0, _system.styled)('div')({
+const GridPanelAnchor = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
   left: 0,

package/components/virtualization/GridTopContainer.js

@@ -19,7 +19,10 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div')({
+const Element = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   top: 0

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -8,6 +8,6 @@ type GridVirtualScrollbarProps = {
   }>;
 };
 export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
-export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -35,7 +35,10 @@ const useUtilityClasses = (ownerState, position) => {
 // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
 // don't have a method to find the required size for scrollbars on those platforms.
 const scrollbarSizeCssExpression = exports.scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
-const Scrollbar = (0, _system.styled)('div')({
+const Scrollbar = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 60,
@@ -44,7 +47,9 @@ const Scrollbar = (0, _system.styled)('div')({
   },
   '--size': scrollbarSizeCssExpression
 });
-const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
+const ScrollbarVertical = (0, _system.styled)(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-headersTotalHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
@@ -57,7 +62,9 @@ const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   top: 'var(--DataGrid-headersTotalHeight)',
   right: 0
 });
-const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
+const ScrollbarHorizontal = (0, _system.styled)(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
@@ -69,7 +76,9 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: 0
 });
-const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar)({
+const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'var(--size)',
   right: 0,

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -14,26 +14,39 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _dimensions = require("../../hooks/features/dimensions");
 var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
-const Filler = (0, _system.styled)('div')({
+const Filler = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   display: 'flex',
   flexDirection: 'row',
   width: 'var(--DataGrid-rowWidth)',
   boxSizing: 'border-box'
 });
-const Pinned = (0, _system.styled)('div')({
+const Pinned = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: _cssVariables.vars.cell.background.pinned
 });
-const PinnedLeft = (0, _system.styled)(Pinned)({
+const PinnedLeft = (0, _system.styled)(Pinned, {
+  slot: 'internal'
+})({
   left: 0
 });
-const PinnedRight = (0, _system.styled)(Pinned)({
+const PinnedRight = (0, _system.styled)(Pinned, {
+  slot: 'internal'
+})({
   right: 0
 });
-const Main = (0, _system.styled)('div')({
+const Main = (0, _system.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   flexGrow: 1,
   borderTop: '1px solid var(--rowBorderColor)'
 });

package/esm/components/GridPagination.js

@@ -8,7 +8,9 @@ import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from "../hooks/features/pagination/gridPaginationSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridPaginationRoot = styled(NotRendered)({
+const GridPaginationRoot = styled(NotRendered, {
+  slot: 'internal'
+})({
   maxHeight: 'calc(100% + 1px)',
   // border width
   flexGrow: 1

package/esm/components/cell/GridEditDateCell.js

@@ -13,7 +13,9 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledInputBase = styled(NotRendered)({
+const StyledInputBase = styled(NotRendered, {
+  slot: 'internal'
+})({
   fontSize: 'inherit'
 });
 const useUtilityClasses = ownerState => {

package/esm/components/containers/GridRootStyles.js

@@ -429,6 +429,10 @@ export const GridRootStyles = styled('div', {
       minHeight: 'min-content',
       overflow: 'hidden'
     },
+    [`&.${c['root--densityCompact']} .${c['columnHeader--filter']}`]: {
+      paddingTop: 4,
+      paddingBottom: 4
+    },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },

package/esm/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -11,7 +11,9 @@ import { NotRendered } from "../../../utils/assert.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledMenuList = styled(NotRendered)(() => ({
+const StyledMenuList = styled(NotRendered, {
+  slot: 'internal'
+})(() => ({
   minWidth: 248
 }));
 function handleMenuScrollCapture(event) {

package/esm/components/virtualization/GridBottomContainer.js

@@ -11,7 +11,10 @@ const useUtilityClasses = () => {
   };
   return composeClasses(slots, getDataGridUtilityClass, {});
 };
-const Element = styled('div')({
+const Element = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'

package/esm/components/virtualization/GridMainContainer.js

@@ -5,7 +5,10 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridPanelAnchor = styled('div')({
+const GridPanelAnchor = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
   left: 0,

package/esm/components/virtualization/GridTopContainer.js

@@ -11,7 +11,10 @@ const useUtilityClasses = () => {
   };
   return composeClasses(slots, getDataGridUtilityClass, {});
 };
-const Element = styled('div')({
+const Element = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   top: 0

package/esm/components/virtualization/GridVirtualScrollbar.d.ts

@@ -8,6 +8,6 @@ type GridVirtualScrollbarProps = {
   }>;
 };
 export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
-export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -28,7 +28,10 @@ const useUtilityClasses = (ownerState, position) => {
 // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
 // don't have a method to find the required size for scrollbars on those platforms.
 export const scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
-const Scrollbar = styled('div')({
+const Scrollbar = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 60,
@@ -37,7 +40,9 @@ const Scrollbar = styled('div')({
   },
   '--size': scrollbarSizeCssExpression
 });
-const ScrollbarVertical = styled(Scrollbar)({
+const ScrollbarVertical = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-headersTotalHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
@@ -50,7 +55,9 @@ const ScrollbarVertical = styled(Scrollbar)({
   top: 'var(--DataGrid-headersTotalHeight)',
   right: 0
 });
-const ScrollbarHorizontal = styled(Scrollbar)({
+const ScrollbarHorizontal = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
@@ -62,7 +69,9 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   },
   bottom: 0
 });
-export const ScrollbarCorner = styled(Scrollbar)({
+export const ScrollbarCorner = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'var(--size)',
   right: 0,

package/esm/components/virtualization/GridVirtualScrollerFiller.js

@@ -7,26 +7,39 @@ import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { gridClasses } from "../../constants/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Filler = styled('div')({
+const Filler = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   display: 'flex',
   flexDirection: 'row',
   width: 'var(--DataGrid-rowWidth)',
   boxSizing: 'border-box'
 });
-const Pinned = styled('div')({
+const Pinned = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: vars.cell.background.pinned
 });
-const PinnedLeft = styled(Pinned)({
+const PinnedLeft = styled(Pinned, {
+  slot: 'internal'
+})({
   left: 0
 });
-const PinnedRight = styled(Pinned)({
+const PinnedRight = styled(Pinned, {
+  slot: 'internal'
+})({
   right: 0
 });
-const Main = styled('div')({
+const Main = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   flexGrow: 1,
   borderTop: '1px solid var(--rowBorderColor)'
 });

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.23.0
+ * @mui/x-data-grid v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/locales/arSD.js

@@ -23,7 +23,7 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'بحث...',
+  toolbarQuickFilterPlaceholder: 'بحث…',
   toolbarQuickFilterLabel: 'بحث',
   toolbarQuickFilterDeleteIconLabel: 'أزال',
   // Export selector toolbar button text

package/esm/locales/daDK.js

@@ -3,8 +3,8 @@ const daDKGrid = {
   // Root
   noRowsLabel: 'Ingen rækker',
   noResultsOverlayLabel: 'Ingen resultater',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Administrer kolonner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -103,8 +103,7 @@ const daDKGrid = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Ryd filter',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/esm/locales/faIR.js

@@ -23,7 +23,7 @@ const faIRGrid = {
   toolbarFiltersTooltipShow: 'نمایش فیلترها',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} فیلترهای فعال` : `${count} فیلتر فعال`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'جستجو...',
+  toolbarQuickFilterPlaceholder: 'جستجو…',
   toolbarQuickFilterLabel: 'جستجو',
   toolbarQuickFilterDeleteIconLabel: 'حذف',
   // Export selector toolbar button text

package/esm/locales/jaJP.js

@@ -103,8 +103,7 @@ const jaJPGrid = {
   'headerFilterOperator>=': '以上',
   'headerFilterOperator<': '未満',
   'headerFilterOperator<=': '以下',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'フィルターを削除',
   // Filter values text
   filterValueAny: 'いずれか',
   filterValueTrue: '真',
@@ -119,9 +118,8 @@ const jaJPGrid = {
   columnMenuUnsort: 'ソート解除',
   columnMenuSortAsc: '昇順ソート',
   columnMenuSortDesc: '降順ソート',
-  // columnMenuManagePivot: 'Manage pivot',
-  // columnMenuManageCharts: 'Manage charts',
-
+  columnMenuManagePivot: 'ピボットを管理',
+  columnMenuManageCharts: 'チャートを管理',
   // Column header text
   columnHeaderFiltersTooltipActive: count => `${count}件のフィルターを適用中`,
   columnHeaderFiltersLabel: 'フィルター表示',
@@ -161,18 +159,18 @@ const jaJPGrid = {
   collapseDetailPanel: '折りたたみ',
   // Pagination
   paginationRowsPerPage: 'ページあたりの行数:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} of ${count !== -1 ? count : `${to}以上`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `${estimated}前後` : `${to}以上`;
+    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return '最初のページへ';
@@ -195,8 +193,7 @@ const jaJPGrid = {
   aggregationFunctionLabelAvg: '平均',
   aggregationFunctionLabelMin: '最小値',
   aggregationFunctionLabelMax: '最大値',
-  aggregationFunctionLabelSize: 'サイズ'
-
+  aggregationFunctionLabelSize: 'サイズ',
   // Pivot panel
   // pivotToggleLabel: 'Pivot',
   // pivotRows: 'Rows',
@@ -231,16 +228,16 @@ const jaJPGrid = {
   // chartsChartNotSelected: 'Select a chart type to configure its options',
   // chartsTabChart: 'Chart',
   // chartsTabFields: 'Fields',
-  // chartsTabCustomize: 'Customize',
+  chartsTabCustomize: 'カスタマイズ',
   // chartsCloseButton: 'Close charts configuration',
   // chartsSyncButtonLabel: 'Sync chart',
   // chartsSearchPlaceholder: 'Search fields',
-  // chartsSearchLabel: 'Search fields',
+  chartsSearchLabel: 'フィールドを検索する',
   // chartsSearchClear: 'Clear search',
   // chartsNoFields: 'No fields',
   // chartsFieldBlocked: 'This field cannot be added to any section',
-  // chartsCategories: 'Categories',
-  // chartsSeries: 'Series',
+  chartsCategories: 'カテゴリ',
+  chartsSeries: 'シリーズ',
   // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
   // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
   // chartsMenuMoveUp: 'Move up',
@@ -253,27 +250,25 @@ const jaJPGrid = {
   // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
 
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
+  aiAssistantPanelTitle: 'AIアシスタント',
+  aiAssistantPanelClose: 'AIアシスタントパネルを閉じる',
+  aiAssistantPanelNewConversation: '新しい会話を開始する',
+  aiAssistantPanelConversationHistory: '会話の履歴',
   // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantSuggestions: '提案',
   // Prompt field
-  // promptFieldLabel: 'Prompt',
-  // promptFieldPlaceholder: 'Type a prompt…',
+  promptFieldLabel: 'プロンプト',
+  promptFieldPlaceholder: 'プロンプトを入力...',
   // promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
   // promptFieldPlaceholderListening: 'Listening for prompt…',
   // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
-  // promptFieldSend: 'Send',
-  // promptFieldRecord: 'Record',
-  // promptFieldStopRecording: 'Stop recording',
-
+  promptFieldSend: '送信',
+  promptFieldRecord: '録音',
+  promptFieldStopRecording: '録音を止める',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
+  promptRerun: '再試行',
+  promptProcessing: '実行中…',
+  promptAppliedChanges: '変更を適用済み'
 
   // Prompt changes
   // promptChangeGroupDescription: (column: string) => `Group by ${column}`,

package/esm/material/index.js

@@ -74,7 +74,9 @@ export { useMaterialCSSVariables } from "./variables.js";
 
 /* eslint-disable material-ui/disallow-react-api-in-server-components */
 
-const InputAdornment = styled(MUIInputAdornment)(({
+const InputAdornment = styled(MUIInputAdornment, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   [`&.${inputAdornmentClasses.positionEnd} .${iconButtonClasses.sizeSmall}`]: {
@@ -82,6 +84,7 @@ const InputAdornment = styled(MUIInputAdornment)(({
   }
 }));
 const FormControlLabel = styled(MUIFormControlLabel, {
+  slot: 'internal',
   shouldForwardProp: prop => prop !== 'fullWidth'
 })(({
   theme
@@ -105,6 +108,7 @@ const FormControlLabel = styled(MUIFormControlLabel, {
   }]
 }));
 const Checkbox = styled(MUICheckbox, {
+  slot: 'internal',
   shouldForwardProp: prop => prop !== 'density'
 })(({
   theme
@@ -118,7 +122,9 @@ const Checkbox = styled(MUICheckbox, {
     }
   }]
 }));
-const ListItemText = styled(MUIListItemText)({
+const ListItemText = styled(MUIListItemText, {
+  slot: 'internal'
+})({
   [`& .${listItemTextClasses.primary}`]: {
     overflowX: 'clip',
     textOverflow: 'ellipsis',
@@ -182,7 +188,9 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
   });
 });
 if (process.env.NODE_ENV !== "production") BaseSelect.displayName = "BaseSelect";
-const StyledPagination = styled(MUIPagination)(({
+const StyledPagination = styled(MUIPagination, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   [`& .${tablePaginationClasses.selectLabel}`]: {
@@ -333,7 +341,9 @@ const BaseButton = forwardRef(function BaseButton(props, ref) {
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
-const StyledToggleButton = styled(MUIToggleButton)(({
+const StyledToggleButton = styled(MUIToggleButton, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   gap: theme.spacing(1),

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.23.0
+ * @mui/x-data-grid v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/arSD.js

@@ -29,7 +29,7 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'بحث...',
+  toolbarQuickFilterPlaceholder: 'بحث…',
   toolbarQuickFilterLabel: 'بحث',
   toolbarQuickFilterDeleteIconLabel: 'أزال',
   // Export selector toolbar button text

package/locales/daDK.js

@@ -9,8 +9,8 @@ const daDKGrid = {
   // Root
   noRowsLabel: 'Ingen rækker',
   noResultsOverlayLabel: 'Ingen resultater',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Administrer kolonner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -109,8 +109,7 @@ const daDKGrid = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Ryd filter',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/locales/faIR.js

@@ -29,7 +29,7 @@ const faIRGrid = {
   toolbarFiltersTooltipShow: 'نمایش فیلترها',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} فیلترهای فعال` : `${count} فیلتر فعال`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'جستجو...',
+  toolbarQuickFilterPlaceholder: 'جستجو…',
   toolbarQuickFilterLabel: 'جستجو',
   toolbarQuickFilterDeleteIconLabel: 'حذف',
   // Export selector toolbar button text

package/locales/jaJP.js

@@ -109,8 +109,7 @@ const jaJPGrid = {
   'headerFilterOperator>=': '以上',
   'headerFilterOperator<': '未満',
   'headerFilterOperator<=': '以下',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'フィルターを削除',
   // Filter values text
   filterValueAny: 'いずれか',
   filterValueTrue: '真',
@@ -125,9 +124,8 @@ const jaJPGrid = {
   columnMenuUnsort: 'ソート解除',
   columnMenuSortAsc: '昇順ソート',
   columnMenuSortDesc: '降順ソート',
-  // columnMenuManagePivot: 'Manage pivot',
-  // columnMenuManageCharts: 'Manage charts',
-
+  columnMenuManagePivot: 'ピボットを管理',
+  columnMenuManageCharts: 'チャートを管理',
   // Column header text
   columnHeaderFiltersTooltipActive: count => `${count}件のフィルターを適用中`,
   columnHeaderFiltersLabel: 'フィルター表示',
@@ -167,18 +165,18 @@ const jaJPGrid = {
   collapseDetailPanel: '折りたたみ',
   // Pagination
   paginationRowsPerPage: 'ページあたりの行数:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} of ${count !== -1 ? count : `${to}以上`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `${estimated}前後` : `${to}以上`;
+    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return '最初のページへ';
@@ -201,8 +199,7 @@ const jaJPGrid = {
   aggregationFunctionLabelAvg: '平均',
   aggregationFunctionLabelMin: '最小値',
   aggregationFunctionLabelMax: '最大値',
-  aggregationFunctionLabelSize: 'サイズ'
-
+  aggregationFunctionLabelSize: 'サイズ',
   // Pivot panel
   // pivotToggleLabel: 'Pivot',
   // pivotRows: 'Rows',
@@ -237,16 +234,16 @@ const jaJPGrid = {
   // chartsChartNotSelected: 'Select a chart type to configure its options',
   // chartsTabChart: 'Chart',
   // chartsTabFields: 'Fields',
-  // chartsTabCustomize: 'Customize',
+  chartsTabCustomize: 'カスタマイズ',
   // chartsCloseButton: 'Close charts configuration',
   // chartsSyncButtonLabel: 'Sync chart',
   // chartsSearchPlaceholder: 'Search fields',
-  // chartsSearchLabel: 'Search fields',
+  chartsSearchLabel: 'フィールドを検索する',
   // chartsSearchClear: 'Clear search',
   // chartsNoFields: 'No fields',
   // chartsFieldBlocked: 'This field cannot be added to any section',
-  // chartsCategories: 'Categories',
-  // chartsSeries: 'Series',
+  chartsCategories: 'カテゴリ',
+  chartsSeries: 'シリーズ',
   // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
   // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
   // chartsMenuMoveUp: 'Move up',
@@ -259,27 +256,25 @@ const jaJPGrid = {
   // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
 
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
+  aiAssistantPanelTitle: 'AIアシスタント',
+  aiAssistantPanelClose: 'AIアシスタントパネルを閉じる',
+  aiAssistantPanelNewConversation: '新しい会話を開始する',
+  aiAssistantPanelConversationHistory: '会話の履歴',
   // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantSuggestions: '提案',
   // Prompt field
-  // promptFieldLabel: 'Prompt',
-  // promptFieldPlaceholder: 'Type a prompt…',
+  promptFieldLabel: 'プロンプト',
+  promptFieldPlaceholder: 'プロンプトを入力...',
   // promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
   // promptFieldPlaceholderListening: 'Listening for prompt…',
   // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
-  // promptFieldSend: 'Send',
-  // promptFieldRecord: 'Record',
-  // promptFieldStopRecording: 'Stop recording',
-
+  promptFieldSend: '送信',
+  promptFieldRecord: '録音',
+  promptFieldStopRecording: '録音を止める',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
+  promptRerun: '再試行',
+  promptProcessing: '実行中…',
+  promptAppliedChanges: '変更を適用済み'
 
   // Prompt changes
   // promptChangeGroupDescription: (column: string) => `Group by ${column}`,

package/material/index.js

@@ -87,7 +87,9 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded23 = ["items", "value", "material"];
 /* eslint-disable material-ui/disallow-react-api-in-server-components */
 
-const InputAdornment = (0, _styles.styled)(_InputAdornment.default)(({
+const InputAdornment = (0, _styles.styled)(_InputAdornment.default, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   [`&.${_InputAdornment.inputAdornmentClasses.positionEnd} .${_IconButton.iconButtonClasses.sizeSmall}`]: {
@@ -95,6 +97,7 @@ const InputAdornment = (0, _styles.styled)(_InputAdornment.default)(({
   }
 }));
 const FormControlLabel = (0, _styles.styled)(_FormControlLabel.default, {
+  slot: 'internal',
   shouldForwardProp: prop => prop !== 'fullWidth'
 })(({
   theme
@@ -118,6 +121,7 @@ const FormControlLabel = (0, _styles.styled)(_FormControlLabel.default, {
   }]
 }));
 const Checkbox = (0, _styles.styled)(_Checkbox.default, {
+  slot: 'internal',
   shouldForwardProp: prop => prop !== 'density'
 })(({
   theme
@@ -131,7 +135,9 @@ const Checkbox = (0, _styles.styled)(_Checkbox.default, {
     }
   }]
 }));
-const ListItemText = (0, _styles.styled)(_ListItemText.default)({
+const ListItemText = (0, _styles.styled)(_ListItemText.default, {
+  slot: 'internal'
+})({
   [`& .${_ListItemText.listItemTextClasses.primary}`]: {
     overflowX: 'clip',
     textOverflow: 'ellipsis',
@@ -195,7 +201,9 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
   });
 });
 if (process.env.NODE_ENV !== "production") BaseSelect.displayName = "BaseSelect";
-const StyledPagination = (0, _styles.styled)(_TablePagination.default)(({
+const StyledPagination = (0, _styles.styled)(_TablePagination.default, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   [`& .${_TablePagination.tablePaginationClasses.selectLabel}`]: {
@@ -346,7 +354,9 @@ const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
-const StyledToggleButton = (0, _styles.styled)(_ToggleButton.default)(({
+const StyledToggleButton = (0, _styles.styled)(_ToggleButton.default, {
+  slot: 'internal'
+})(({
   theme
 }) => ({
   gap: theme.spacing(1),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.23.0",
+  "version": "8.24.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.23.0",
-    "@mui/x-virtualizer": "0.3.0"
+    "@mui/x-internals": "8.24.0",
+    "@mui/x-virtualizer": "0.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",