@mui/x-data-grid 8.22.1 → 8.24.0

package/CHANGELOG.md

@@ -5,6 +5,217 @@
 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 24, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.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.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.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.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.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.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.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.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.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.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.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.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
 ## 8.22.1
 
 _Dec 17, 2025_

package/colDef/gridBooleanColDef.js

@@ -42,7 +42,6 @@ const GRID_BOOLEAN_COL_DEF = exports.GRID_BOOLEAN_COL_DEF = (0, _extends2.defaul
   filterOperators: (0, _gridBooleanOperators.getGridBooleanOperators)(),
   getApplyQuickFilterFn: () => null,
   // @ts-ignore
-  aggregable: false,
   chartable: false,
   // @ts-ignore
   pastedValueParser: value => stringToBoolean(value)

package/colDef/gridDateOperators.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getGridDateOperators = void 0;
 var _GridFilterInputDate = require("../components/panel/filterPanel/GridFilterInputDate");
-function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepRawComparison) {
   if (!filterItem.value) {
     return null;
   }
@@ -27,7 +27,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     if (!value) {
       return false;
     }
-    if (keepHours) {
+    if (keepRawComparison) {
       return compareFn(value.getTime(), time);
     }
 
@@ -62,7 +62,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'after',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -71,7 +71,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrAfter',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -80,7 +80,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'before',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, true);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {
@@ -89,7 +89,7 @@ const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrBefore',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime, showTime);
   },
   InputComponent: _GridFilterInputDate.GridFilterInputDate,
   InputComponentProps: {

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/GridBooleanCell.js

@@ -18,6 +18,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
 var _constants = require("../../internals/constants");
+var _GridFooterCell = require("./GridFooterCell");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 const useUtilityClasses = ownerState => {
@@ -116,7 +117,14 @@ const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBo
 if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 const renderBooleanCell = params => {
   if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
-    return '';
+    const aggregationMetaData = params.aggregation;
+    if (!aggregationMetaData) {
+      return '';
+    }
+    if (aggregationMetaData.position === 'footer') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({}, params));
+    }
+    return params.formattedValue;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));
 };

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+interface GridFooterCellProps extends GridRenderCellParams {
+  sx?: SxProps<Theme>;
+}
+declare function GridFooterCellRaw(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
+declare const GridFooterCell: React.MemoExoticComponent<typeof GridFooterCellRaw>;
+export { GridFooterCell };

package/components/cell/GridFooterCell.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFooterCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _cssVariables = require("../../constants/cssVariables");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
+const GridFooterCellRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell'
+})({
+  fontWeight: _cssVariables.vars.typography.fontWeight.medium,
+  color: _cssVariables.vars.colors.foreground.accent
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridFooterCellRaw(props) {
+  const {
+      formattedValue
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterCellRoot, (0, _extends2.default)({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+}
+const GridFooterCell = exports.GridFooterCell = /*#__PURE__*/React.memo(GridFooterCellRaw);
+if (process.env.NODE_ENV !== "production") GridFooterCell.displayName = "GridFooterCell";

package/components/containers/GridRootStyles.js

@@ -357,6 +357,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       },
       [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
         width: 'unset'
+      },
+      [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+        flex: 'none !important',
+        width: 'unset !important'
       }
     },
     [`&.${_gridClasses.gridClasses.withSidePanel}`]: {
@@ -431,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/colDef/gridBooleanColDef.js

@@ -35,7 +35,6 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: () => null,
   // @ts-ignore
-  aggregable: false,
   chartable: false,
   // @ts-ignore
   pastedValueParser: value => stringToBoolean(value)

package/esm/colDef/gridDateOperators.js

@@ -1,5 +1,5 @@
 import { GridFilterInputDate } from "../components/panel/filterPanel/GridFilterInputDate.js";
-function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
+function buildApplyFilterFn(filterItem, compareFn, showTime, keepRawComparison) {
   if (!filterItem.value) {
     return null;
   }
@@ -21,7 +21,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     if (!value) {
       return false;
     }
-    if (keepHours) {
+    if (keepRawComparison) {
       return compareFn(value.getTime(), time);
     }
 
@@ -56,7 +56,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'after',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -65,7 +65,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrAfter',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -74,7 +74,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'before',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, true);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {
@@ -83,7 +83,7 @@ export const getGridDateOperators = showTime => [{
 }, {
   value: 'onOrBefore',
   getApplyFilterFn: filterItem => {
-    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+    return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime, showTime);
   },
   InputComponent: GridFilterInputDate,
   InputComponentProps: {

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