@mui/x-data-grid-premium 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/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
+const releaseInfo = "MTc2NzgzMDQwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -192,6 +192,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
     disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
+    includeHeaderFilters: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
     outliersFactor: _propTypes.default.number

package/components/GridBottomContainer.js

@@ -25,7 +25,10 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.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/GridGroupingColumnFooterCell.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridGroupingColumnFooterCell = GridGroupingColumnFooterCell;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _internals = require("@mui/x-data-grid/internals");
+var _internals = require("@mui/x-data-grid-pro/internals");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _GridFooterCell = require("./GridFooterCell");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridGroupingColumnFooterCell(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -22,7 +21,7 @@ function GridGroupingColumnFooterCell(props) {
   } else {
     sx.ml = `calc(var(--DataGrid-cellOffsetMultiplier) * ${_internals.vars.spacing(props.rowNode.depth)})`;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridFooterCell, (0, _extends2.default)({
     sx: sx
   }, props));
 }

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
+const releaseInfo = "MTc2NzgzMDQwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -185,6 +185,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     columns: PropTypes.arrayOf(PropTypes.string),
     disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
+    includeHeaderFilters: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
     outliersFactor: PropTypes.number

package/esm/components/GridBottomContainer.js

@@ -17,7 +17,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/GridGroupingColumnFooterCell.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { vars } from '@mui/x-data-grid/internals';
+import { vars, GridFooterCell } from '@mui/x-data-grid-pro/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { GridFooterCell } from "./GridFooterCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnFooterCell(props) {
   const rootProps = useGridRootProps();

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

@@ -1,5 +1,5 @@
 import { gridColumnLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowsLookupSelector } from '@mui/x-data-grid-pro';
-import { getVisibleRows } from '@mui/x-data-grid/internals';
+import { getVisibleRows } from '@mui/x-data-grid-pro/internals';
 export const shouldApplySorting = (aggregationRules, aggregatedFields) => {
   return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
 };

package/esm/hooks/features/aggregation/gridAggregationFunctions.d.ts

@@ -5,4 +5,6 @@ export declare const GRID_AGGREGATION_FUNCTIONS: {
   min: GridAggregationFunction<number | Date, number | Date>;
   max: GridAggregationFunction<number | Date, number | Date>;
   size: GridAggregationFunction<unknown, number>;
+  sizeTrue: GridAggregationFunction<unknown, number>;
+  sizeFalse: GridAggregationFunction<unknown, number>;
 };

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

@@ -97,10 +97,44 @@ const sizeAgg = {
   },
   hasCellUnit: false
 };
+const sizeTrueAgg = {
+  apply: ({
+    values
+  }) => {
+    return values.filter(value => value === true).length;
+  },
+  columnTypes: ['boolean'],
+  label: 'size(true)',
+  valueFormatter: value => {
+    if (value == null || !isNumber(value)) {
+      return value;
+    }
+    return value.toLocaleString();
+  },
+  hasCellUnit: false
+};
+const sizeFalseAgg = {
+  apply: ({
+    values
+  }) => {
+    return values.filter(value => value === false).length;
+  },
+  columnTypes: ['boolean'],
+  label: 'size(false)',
+  valueFormatter: value => {
+    if (value == null || !isNumber(value)) {
+      return value;
+    }
+    return value.toLocaleString();
+  },
+  hasCellUnit: false
+};
 export const GRID_AGGREGATION_FUNCTIONS = {
   sum: sumAgg,
   avg: avgAgg,
   min: minAgg,
   max: maxAgg,
-  size: sizeAgg
+  size: sizeAgg,
+  sizeTrue: sizeTrueAgg,
+  sizeFalse: sizeFalseAgg
 };

package/esm/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -1,5 +1,6 @@
-import { GridRowId, GridRowModel, GridColDef, GridValueFormatter } from '@mui/x-data-grid-pro';
-import { GridApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridRowId, GridRowModel, GridColDef, GridValueFormatter } from '@mui/x-data-grid-pro';
+import type { GridAggregationPosition } from '@mui/x-data-grid-pro/internals';
+import type { GridApiPremium } from "../../../models/gridApiPremium.js";
 export interface GridAggregationState {
   model: GridAggregationModel;
   lookup: GridAggregationLookup;
@@ -108,20 +109,6 @@ export type GridAggregationLookup = {
     };
   };
 };
-export type GridAggregationPosition = 'inline' | 'footer';
-export interface GridAggregationCellMeta {
-  /**
-   * If `true`, the current aggregated value has the same unit as the value of the other cells of this row.
-   * For instance, "min" / "max" aggregation have the same unit as the other cells.
-   * If `false`, the current aggregated value has another unit or not unit.
-   * For instance, "size" aggregation has no unit.
-   */
-  hasCellUnit: boolean;
-  /**
-   * Name of the aggregation function currently applied on this cell.
-   */
-  aggregationFunctionName: string;
-}
 export interface GridAggregationHeaderMeta {
   aggregationRule: GridAggregationRule;
 }

package/esm/hooks/features/aggregation/gridAggregationSelectors.d.ts

@@ -1,6 +1,6 @@
-import { GridRowId } from '@mui/x-data-grid';
+import { GridAggregationPosition } from '@mui/x-data-grid-pro/internals';
+import { GridRowId } from '@mui/x-data-grid-pro';
 import { GridStatePremium } from "../../../models/gridStatePremium.js";
-import { GridAggregationPosition } from "./gridAggregationInterfaces.js";
 export declare const gridAggregationStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, unknown, import("./gridAggregationInterfaces.js").GridAggregationState>;
 /**
  * Get the aggregation model, containing the aggregation function of each column.

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

@@ -1,5 +1,5 @@
 import { createSelector, createRootSelector } from '@mui/x-data-grid-pro/internals';
-import { gridRowTreeSelector } from '@mui/x-data-grid';
+import { gridRowTreeSelector } from '@mui/x-data-grid-pro';
 export const gridAggregationStateSelector = createRootSelector(state => state.aggregation);
 
 /**

package/esm/hooks/features/aggregation/index.d.ts

@@ -1,4 +1,5 @@
-export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationPosition, GridAggregationCellMeta, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
+export type { GridAggregationPosition, GridAggregationCellMeta } from '@mui/x-data-grid-pro/internals';
+export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
 export { gridAggregationStateSelector, gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 export * from "./gridAggregationFunctions.js";
 export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId } from "./gridAggregationUtils.js";

package/esm/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef } from '@mui/x-data-grid-pro';
-import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
+import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridAggregationRule } from "./gridAggregationInterfaces.js";
 /**

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

@@ -2,8 +2,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["aggregationWrappedProperties"];
 import { gridRowNodeSelector } from '@mui/x-data-grid-pro';
+import { GridFooterCell } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector } from "./gridAggregationSelectors.js";
-import { GridFooterCell } from "../../../components/GridFooterCell.js";
 import { GridAggregationHeader } from "../../../components/GridAggregationHeader.js";
 import { gridPivotActiveSelector } from "../pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +31,8 @@ const getAggregationValueWrappedRenderCell = ({
       }
       const aggregationMeta = {
         hasCellUnit: aggregationRule.aggregationFunction.hasCellUnit ?? true,
-        aggregationFunctionName: aggregationRule.aggregationFunctionName
+        aggregationFunctionName: aggregationRule.aggregationFunctionName,
+        position: cellAggregationResult.position
       };
       return renderCell(_extends({}, params, {
         aggregation: aggregationMeta

package/esm/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -21,8 +21,10 @@ export const useGridDataSourcePremium = (apiRef, props) => {
   const aggregationModel = gridAggregationModelSelector(apiRef);
   const groupingModelSize = gridRowGroupingSanitizedModelSelector(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
-    const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
-    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
+    const currentStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
+    const prevStrategy = currentStrategy === DataSourceRowsUpdateStrategy.GroupedData ? DataSourceRowsUpdateStrategy.Default : DataSourceRowsUpdateStrategy.GroupedData;
+    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, prevStrategy, () => false);
+    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
   const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
     const rowTree = gridRowTreeSelector(apiRef);

package/esm/index.js

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

package/esm/typeOverloads/modules.d.ts

@@ -1,7 +1,8 @@
-import { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
+import type { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
+import type { GridAggregationCellMeta } from '@mui/x-data-grid-pro/internals';
 import type { GridPipeProcessingLookupPro, GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro } from '@mui/x-data-grid-pro/typeOverloads';
 import type { GridGroupingValueGetter, GridGroupingValueSetter, GridPastedValueParser } from "../models/index.js";
-import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMeta, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
+import type { GridRowGroupingModel, GridAggregationModel, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridExcelExportOptions } from "../hooks/features/export/gridExcelExportInterface.js";

package/hooks/features/aggregation/createAggregationLookup.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldApplySorting = exports.createAggregationLookup = void 0;
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _internals = require("@mui/x-data-grid/internals");
+var _internals = require("@mui/x-data-grid-pro/internals");
 const shouldApplySorting = (aggregationRules, aggregatedFields) => {
   return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
 };

package/hooks/features/aggregation/gridAggregationFunctions.d.ts

@@ -5,4 +5,6 @@ export declare const GRID_AGGREGATION_FUNCTIONS: {
   min: GridAggregationFunction<number | Date, number | Date>;
   max: GridAggregationFunction<number | Date, number | Date>;
   size: GridAggregationFunction<unknown, number>;
+  sizeTrue: GridAggregationFunction<unknown, number>;
+  sizeFalse: GridAggregationFunction<unknown, number>;
 };

package/hooks/features/aggregation/gridAggregationFunctions.js

@@ -103,10 +103,44 @@ const sizeAgg = {
   },
   hasCellUnit: false
 };
+const sizeTrueAgg = {
+  apply: ({
+    values
+  }) => {
+    return values.filter(value => value === true).length;
+  },
+  columnTypes: ['boolean'],
+  label: 'size(true)',
+  valueFormatter: value => {
+    if (value == null || !(0, _internals.isNumber)(value)) {
+      return value;
+    }
+    return value.toLocaleString();
+  },
+  hasCellUnit: false
+};
+const sizeFalseAgg = {
+  apply: ({
+    values
+  }) => {
+    return values.filter(value => value === false).length;
+  },
+  columnTypes: ['boolean'],
+  label: 'size(false)',
+  valueFormatter: value => {
+    if (value == null || !(0, _internals.isNumber)(value)) {
+      return value;
+    }
+    return value.toLocaleString();
+  },
+  hasCellUnit: false
+};
 const GRID_AGGREGATION_FUNCTIONS = exports.GRID_AGGREGATION_FUNCTIONS = {
   sum: sumAgg,
   avg: avgAgg,
   min: minAgg,
   max: maxAgg,
-  size: sizeAgg
+  size: sizeAgg,
+  sizeTrue: sizeTrueAgg,
+  sizeFalse: sizeFalseAgg
 };

package/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -1,5 +1,6 @@
-import { GridRowId, GridRowModel, GridColDef, GridValueFormatter } from '@mui/x-data-grid-pro';
-import { GridApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridRowId, GridRowModel, GridColDef, GridValueFormatter } from '@mui/x-data-grid-pro';
+import type { GridAggregationPosition } from '@mui/x-data-grid-pro/internals';
+import type { GridApiPremium } from "../../../models/gridApiPremium.js";
 export interface GridAggregationState {
   model: GridAggregationModel;
   lookup: GridAggregationLookup;
@@ -108,20 +109,6 @@ export type GridAggregationLookup = {
     };
   };
 };
-export type GridAggregationPosition = 'inline' | 'footer';
-export interface GridAggregationCellMeta {
-  /**
-   * If `true`, the current aggregated value has the same unit as the value of the other cells of this row.
-   * For instance, "min" / "max" aggregation have the same unit as the other cells.
-   * If `false`, the current aggregated value has another unit or not unit.
-   * For instance, "size" aggregation has no unit.
-   */
-  hasCellUnit: boolean;
-  /**
-   * Name of the aggregation function currently applied on this cell.
-   */
-  aggregationFunctionName: string;
-}
 export interface GridAggregationHeaderMeta {
   aggregationRule: GridAggregationRule;
 }

package/hooks/features/aggregation/gridAggregationSelectors.d.ts

@@ -1,6 +1,6 @@
-import { GridRowId } from '@mui/x-data-grid';
+import { GridAggregationPosition } from '@mui/x-data-grid-pro/internals';
+import { GridRowId } from '@mui/x-data-grid-pro';
 import { GridStatePremium } from "../../../models/gridStatePremium.js";
-import { GridAggregationPosition } from "./gridAggregationInterfaces.js";
 export declare const gridAggregationStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, unknown, import("./gridAggregationInterfaces.js").GridAggregationState>;
 /**
  * Get the aggregation model, containing the aggregation function of each column.

package/hooks/features/aggregation/gridAggregationSelectors.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridCellAggregationResultSelector = exports.gridAggregationStateSelector = exports.gridAggregationModelSelector = exports.gridAggregationLookupSelector = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
-var _xDataGrid = require("@mui/x-data-grid");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
 const gridAggregationStateSelector = exports.gridAggregationStateSelector = (0, _internals.createRootSelector)(state => state.aggregation);
 
 /**
@@ -20,7 +20,7 @@ const gridAggregationModelSelector = exports.gridAggregationModelSelector = (0,
  * @category Aggregation
  */
 const gridAggregationLookupSelector = exports.gridAggregationLookupSelector = (0, _internals.createSelector)(gridAggregationStateSelector, aggregationState => aggregationState.lookup);
-const gridCellAggregationResultSelector = exports.gridCellAggregationResultSelector = (0, _internals.createSelector)(_xDataGrid.gridRowTreeSelector, gridAggregationLookupSelector, (rowTree, aggregationLookup, {
+const gridCellAggregationResultSelector = exports.gridCellAggregationResultSelector = (0, _internals.createSelector)(_xDataGridPro.gridRowTreeSelector, gridAggregationLookupSelector, (rowTree, aggregationLookup, {
   id,
   field
 }) => {

package/hooks/features/aggregation/index.d.ts

@@ -1,4 +1,5 @@
-export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationPosition, GridAggregationCellMeta, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
+export type { GridAggregationPosition, GridAggregationCellMeta } from '@mui/x-data-grid-pro/internals';
+export type { GridAggregationState, GridAggregationInitialState, GridAggregationInternalCache, GridAggregationApi, GridAggregationGetCellValueParams, GridAggregationFunction, GridAggregationFunctionDataSource, GridAggregationParams, GridAggregationModel, GridAggregationLookup, GridAggregationHeaderMeta, GridAggregationRule, GridAggregationRules } from "./gridAggregationInterfaces.js";
 export { gridAggregationStateSelector, gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 export * from "./gridAggregationFunctions.js";
 export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId } from "./gridAggregationUtils.js";

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef } from '@mui/x-data-grid-pro';
-import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
+import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridAggregationRule } from "./gridAggregationInterfaces.js";
 /**

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -8,8 +8,8 @@ exports.wrapColumnWithAggregationValue = exports.unwrapColumnFromAggregation = v
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
-var _GridFooterCell = require("../../../components/GridFooterCell");
 var _GridAggregationHeader = require("../../../components/GridAggregationHeader");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +26,7 @@ const getAggregationValueWrappedRenderCell = ({
     if (cellAggregationResult != null) {
       if (!renderCell) {
         if (cellAggregationResult.position === 'footer') {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFooterCell.GridFooterCell, (0, _extends2.default)({}, params));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridFooterCell, (0, _extends2.default)({}, params));
         }
         if (pivotActive && cellAggregationResult.value === 0) {
           return null;
@@ -38,7 +38,8 @@ const getAggregationValueWrappedRenderCell = ({
       }
       const aggregationMeta = {
         hasCellUnit: aggregationRule.aggregationFunction.hasCellUnit ?? true,
-        aggregationFunctionName: aggregationRule.aggregationFunctionName
+        aggregationFunctionName: aggregationRule.aggregationFunctionName,
+        position: cellAggregationResult.position
       };
       return renderCell((0, _extends2.default)({}, params, {
         aggregation: aggregationMeta

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -28,8 +28,10 @@ const useGridDataSourcePremium = (apiRef, props) => {
   const aggregationModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
   const groupingModelSize = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
-    const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? _internals.DataSourceRowsUpdateStrategy.GroupedData : _internals.DataSourceRowsUpdateStrategy.Default;
-    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
+    const currentStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? _internals.DataSourceRowsUpdateStrategy.GroupedData : _internals.DataSourceRowsUpdateStrategy.Default;
+    const prevStrategy = currentStrategy === _internals.DataSourceRowsUpdateStrategy.GroupedData ? _internals.DataSourceRowsUpdateStrategy.Default : _internals.DataSourceRowsUpdateStrategy.GroupedData;
+    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, prevStrategy, () => false);
+    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
   const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
     const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.22.1
+ * @mui/x-data-grid-premium v8.24.0
  *
  * @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.22.1",
+  "version": "8.24.0",
   "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.22.1",
-    "@mui/x-data-grid-pro": "8.22.1",
-    "@mui/x-internals": "8.22.0",
-    "@mui/x-license": "8.22.0"
+    "@mui/x-data-grid": "8.24.0",
+    "@mui/x-data-grid-pro": "8.24.0",
+    "@mui/x-license": "8.24.0",
+    "@mui/x-internals": "8.24.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/typeOverloads/modules.d.ts

@@ -1,7 +1,8 @@
-import { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
+import type { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
+import type { GridAggregationCellMeta } from '@mui/x-data-grid-pro/internals';
 import type { GridPipeProcessingLookupPro, GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro } from '@mui/x-data-grid-pro/typeOverloads';
 import type { GridGroupingValueGetter, GridGroupingValueSetter, GridPastedValueParser } from "../models/index.js";
-import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMeta, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
+import type { GridRowGroupingModel, GridAggregationModel, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridExcelExportOptions } from "../hooks/features/export/gridExcelExportInterface.js";

package/components/GridFooterCell.d.ts

@@ -1,8 +0,0 @@
-import { GridRenderCellParams } from '@mui/x-data-grid';
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-interface GridFooterCellProps extends GridRenderCellParams {
-  sx?: SxProps<Theme>;
-}
-declare function GridFooterCell(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
-export { GridFooterCell };

package/components/GridFooterCell.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridFooterCell = GridFooterCell;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _xDataGrid = require("@mui/x-data-grid");
-var _internals = require("@mui/x-data-grid/internals");
-var _styles = require("@mui/material/styles");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-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: _internals.vars.typography.fontWeight.medium,
-  color: _internals.vars.colors.foreground.accent
-});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['footerCell']
-  };
-  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
-};
-function GridFooterCell(props) {
-  const {
-      formattedValue
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = rootProps;
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterCellRoot, (0, _extends2.default)({
-    ownerState: ownerState,
-    className: classes.root
-  }, other, {
-    children: formattedValue
-  }));
-}

package/esm/components/GridFooterCell.d.ts

@@ -1,8 +0,0 @@
-import { GridRenderCellParams } from '@mui/x-data-grid';
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-interface GridFooterCellProps extends GridRenderCellParams {
-  sx?: SxProps<Theme>;
-}
-declare function GridFooterCell(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
-export { GridFooterCell };

package/esm/components/GridFooterCell.js

@@ -1,41 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
-import { getDataGridUtilityClass } from '@mui/x-data-grid';
-import { vars } from '@mui/x-data-grid/internals';
-import { styled } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const GridFooterCellRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'FooterCell'
-})({
-  fontWeight: vars.typography.fontWeight.medium,
-  color: vars.colors.foreground.accent
-});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['footerCell']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function GridFooterCell(props) {
-  const {
-      formattedValue
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const rootProps = useGridRootProps();
-  const ownerState = rootProps;
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
-    ownerState: ownerState,
-    className: classes.root
-  }, other, {
-    children: formattedValue
-  }));
-}
-export { GridFooterCell };