@mui/x-data-grid-premium 8.0.0-alpha.10 → 8.0.0-alpha.12

package/CHANGELOG.md

@@ -5,6 +5,270 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.12
+
+_Feb 17, 2025_
+
+We'd like to offer a big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- 📦 Data Grid [data source](https://next.mui.com/x/react-data-grid/server-side-data/) is now available in the Community plan
+- ⚡ Improve Data Grid Excel export serialization performance
+- 🚫 Add ["No columns" overlay](https://next.mui.com/x/react-data-grid/overlays/#no-columns-overlay) to Data Grid
+- 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locales on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@Neonin, @nusr, and @pawelkula.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk, and @mapache-salvaje.
+
+### Data Grid
+
+#### Breaking changes
+
+- The `main--hasSkeletonLoadingOverlay` class has been renamed to `main--hiddenContent` and is now also applied when the "No columns" overlay is displayed.
+
+- The `apiRef.current.forceUpdate()` method was removed. Use selectors combined with `useGridSelector()` hook to react to changes in the state.
+
+- The selectors signature has been updated. They are only accepting `apiRef` as a first argument and `instanceId` is no longer the third argument.
+
+  ```diff
+  -mySelector(state, arguments, instanceId)
+  +mySelector(apiRef, arguments)
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.12`
+
+- [DataGrid] Add "No columns" overlay (#16543) @KenanYusuf
+- [DataGrid] All selectors accept only `apiRef` as first argument (#16198) @arminmeh
+- [DataGrid] Avoid `undefined` value for pagination `rowCount` (#16488) @cherniavskii
+- [DataGrid] Create the base Checkbox slot (#16445) @romgrk
+- [DataGrid] Create the base Input slot (#16443) @romgrk
+- [DataGrid] Create the base MenuList slot (#16481) @romgrk
+- [DataGrid] Create the base Popper slot (#16362) @romgrk
+- [DataGrid] Create the base Select slot (#16394) @romgrk
+- [DataGrid] Create the base Switch slot (#16527) @romgrk
+- [DataGrid] Extract `getRowId()` API method as a selector (#16487) @MBilalShafi
+- [DataGrid] Fix the `onClock` prop of the base Select slot (#16557) @romgrk
+- [DataGrid] Go to the first page when sorting/filtering is applied (#16447) @arminmeh
+- [DataGrid] Make base data source available in the Community plan (#16359) @MBilalShafi
+- [DataGrid] Remove `apiRef.current.forceUpdate()` method (#16560) @MBilalShafi
+- [DataGrid] Fix the unexpected behavior of the pagination when using `-1` for "All" rows per page (#16485) @nusr
+- [l10n] Improve Polish (pl-PL) locale (#16123) @pawelkula
+- [l10n] Improve Ukrainian (uk-UA) locale (#16463) @Neonin
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.12` [![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.0.0-alpha.12`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.12` [![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.0.0-alpha.12`, plus:
+
+- [DataGridPremium] Fix Excel export Web Worker demo not working in dev mode (#16517) @cherniavskii
+- [DataGridPremium] Fix loading issue + add skeleton overlay (#16282) @MBilalShafi
+- [DataGridPremium] Improve Excel export serialization performance (#16526) @cherniavskii
+- [DataGridPremium] Namespace Excel export worker (#16020) @oliviertassinari
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `aria-label` on the `<Clock />` component and Time Picker opening button has been fixed to rely on the set `ampm` property instead of defaulting to the user's locale.
+
+- The following unused formats have been removed from the adapters and can no longer be overridden via the `dateFormats` prop on the `<LocalizationProvider />` component:
+
+  - `fullTime` - please use `fullTime12h` and `fullTime24h` instead:
+    ```diff
+      <LocalizationProvider
+        dateFormats={{
+    -     fullTime: 'LT',
+    +     fullTime12h: 'hh:mm A',
+    +     fullTime24h: 'hh:mm',
+        }}
+      >
+    ```
+  - `keyboardDateTime` - please use `keyboardDateTime12h` and `keyboardDateTime24h` instead:
+    ```diff
+      <LocalizationProvider
+        dateFormats={{
+    -     keyboardDateTime: 'DD.MM.YYYY | LT',
+    +     keyboardDateTime12h: 'DD.MM.YYYY | hh:mm A',
+    +     keyboardDateTime24h: 'DD.MM.YYYY | hh:mm',
+        }}
+      >
+    ```
+
+#### `@mui/x-date-pickers@8.0.0-alpha.12`
+
+- [pickers] Fix time related aria labels to depend on `ampm` flag value (#16572) @LukasTy
+- [pickers] Remove unused adapter formats (#16522) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.12` [![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.0.0-alpha.12`, plus:
+
+- [DateRangePicker] Avoid unnecessary field section focusing (#16474) @LukasTy
+
+### Charts
+
+#### Breaking changes
+
+- The `useSeries` hook family has been stabilized and renamed accordingly — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#stabilize-useseries-and-usexxxseries-hooks-✅)
+
+#### `@mui/x-charts@8.0.0-alpha.12`
+
+- [charts] Add docs for scatter "Size" section (#16556) @bernardobelchior
+- [charts] Add `test:performance:browser` script #16600 @bernardobelchior
+- [charts] Add warning when using unknown ids in `useXxxSeries` hooks (#16552) @JCQuintas
+- [charts] Divide the logic for `useXxxSeries` into `useXxxSeriesContext` (#16546) @JCQuintas
+- [charts] Document plugins for internal use (#16504) @JCQuintas
+- [charts] Fix internal typo (#16524) @alexfauquette
+- [charts] Fix type overloads (#16581) @JCQuintas
+- [charts] Fix zoom filter regression (#16507) @alexfauquette
+- [charts] Improve tooltip placement in mobile (#16553) @bernardobelchior
+- [charts] Let the `useXxxSeries` support array of ids and document them (#15545) @JCQuintas
+- [charts] Memoize some tooltip internals (#16564) @alexfauquette
+- [charts] Move Voronoi handler in a dedicated plugin (#16470) @alexfauquette
+- [charts] Performance tests: set license on setup. Update vitest minor version. (#16525) @bernardobelchior
+- [charts] Propagate the axis scale to the `valueFormatter` (#16555) @alexfauquette
+- [charts] Remove `colors` prop from `SparkLineChart`. (#16494) @bernardobelchior
+- [charts] Stabilize series hooks (`useSeries`, `usePieSeries`, etc.) (#16459) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.0.0-alpha.12` [![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.0.0-alpha.12`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.12`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.12` [![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.0.0-alpha.12`.
+
+### Docs
+
+- [docs] Add demo for Scatter Chart with linked points (#16505) @bernardobelchior
+- [docs] Improve license installation page (#16403) @michelengelen
+- [docs] Standardize getting started docs across all packages (#16302) @mapache-salvaje
+
+### Core
+
+- [core] Update charts folder structure (#16471) @alexfauquette
+- [code-infra] Bump @mui/monorepo (#16422) @LukasTy
+- [code-infra] Fix lock file (#16562) @LukasTy
+- [code-infra] Fix root package version (#16503) @JCQuintas
+- [code-infra] Update internal packages to `next` releases (#16423) @LukasTy
+- [code-infra] Update package layout for better ESM support (#14386) @Janpot
+- [code-infra] Update peer dependencies for v8 (#16563) @Janpot
+
+## 8.0.0-alpha.11
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.11`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.11` [![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.0.0-alpha.11`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.11` [![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.0.0-alpha.11`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.11` [![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.0.0-alpha.11`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.11`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.11` [![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.0.0-alpha.11`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.11` [![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.0.0-alpha.11`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +314,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +356,7 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.10`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/x-date-pickers@8.0.0-alpha.10`
@@ -111,7 +376,7 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.10`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/x-charts@8.0.0-alpha.10`

package/DataGridPremium/DataGrid.d.ts

@@ -5,4 +5,4 @@ export declare function DataGrid(): null;
 /**
  * @deprecated Import DataGridPremium instead.
  */
-export declare function DataGridPro(): null;
+export declare function DataGridPro(): null;

package/DataGridPremium/DataGridPremium.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { GridValidRowModel } from '@mui/x-data-grid-pro';
-import { DataGridPremiumProps } from '../models/dataGridPremiumProps';
+import { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
 export type { GridPremiumSlotsComponent as GridSlots } from '../models';
 interface DataGridPremiumComponent {
-    <R extends GridValidRowModel = any>(props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
-    propTypes?: any;
+  <R extends GridValidRowModel = any>(props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+  propTypes?: any;
 }
 /**
- * Demos:
- * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/)
+ * Features:
+ * - [DataGridPremium](https://mui.com/x/react-data-grid/features/)
  *
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)
  */
-export declare const DataGridPremium: DataGridPremiumComponent;
+export declare const DataGridPremium: DataGridPremiumComponent;

package/DataGridPremium/DataGridPremium.js

@@ -27,6 +27,10 @@ const configuration = {
   }
 };
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+  packageName: "x-data-grid-premium",
+  releaseInfo: releaseInfo
+});
 let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [..._internals.propValidatorsDataGrid, ..._internals.propValidatorsDataGridPro];
@@ -48,10 +52,7 @@ const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(
       sx: props.sx
     }, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
-        packageName: "x-data-grid-premium",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });
@@ -387,6 +388,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   getRowHeight: _propTypes.default.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: _propTypes.default.func,
   /**
@@ -1041,6 +1044,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   treeData: _propTypes.default.bool,
+  /**
+   * Data source object.
+   */
   unstable_dataSource: _propTypes.default.shape({
     getAggregatedValue: _propTypes.default.func,
     getChildrenCount: _propTypes.default.func,
@@ -1048,6 +1054,9 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     getRows: _propTypes.default.func.isRequired,
     updateRow: _propTypes.default.func
   }),
+  /**
+   * Data source cache object.
+   */
   unstable_dataSourceCache: _propTypes.default.shape({
     clear: _propTypes.default.func.isRequired,
     get: _propTypes.default.func.isRequired,
@@ -1080,6 +1089,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Use in combination with `unstable_listColumn`.
    */
   unstable_listView: _propTypes.default.bool,
+  /**
+   * Callback fired when the data source request fails.
+   * @param {Error} error The error object.
+   * @param {GridGetRowsParams} params With all properties from [[GridGetRowsParams]].
+   */
   unstable_onDataSourceError: _propTypes.default.func,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
@@ -1091,8 +1105,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
 } : void 0;
 /**
- * Demos:
- * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/)
+ * Features:
+ * - [DataGridPremium](https://mui.com/x/react-data-grid/features/)
  *
  * API:
  * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)

package/DataGridPremium/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DataGrid';
-export * from './DataGridPremium';
-export { DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES } from './useDataGridPremiumProps';
+export * from "./DataGrid.js";
+export * from "./DataGridPremium.js";
+export { DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES } from "./useDataGridPremiumProps.js";

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
-import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
-export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium | null> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;
+import { GridApiPremium, GridPrivateApiPremium } from "../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
+export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium | null> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -40,7 +40,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.propsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAggregation.aggregationStateInitializer, apiRef, props);
@@ -50,8 +50,8 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
@@ -61,17 +61,17 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.virtualizationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.dataSourceStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _internals.useGridTreeData)(apiRef, props);
   (0, _useGridAggregation.useGridAggregation)(apiRef, props);
-  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridRowSelection)(apiRef, props);
   (0, _useGridCellSelection.useGridCellSelection)(apiRef, props);
@@ -108,6 +108,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridDimensions)(apiRef, props);
   (0, _internals.useGridEvents)(apiRef, props);
   (0, _internals.useGridStatePersistence)(apiRef);
+  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
   return apiRef;

package/DataGridPremium/useDataGridPremiumProps.d.ts

@@ -1,6 +1,6 @@
-import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from '../models/dataGridPremiumProps';
+import { DataGridPremiumProps, DataGridPremiumProcessedProps, DataGridPremiumPropsWithDefaultValue } from "../models/dataGridPremiumProps.js";
 /**
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */
 export declare const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES: DataGridPremiumPropsWithDefaultValue;
-export declare const useDataGridPremiumProps: (inProps: DataGridPremiumProps) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumProps: (inProps: DataGridPremiumProps) => DataGridPremiumProcessedProps;

package/components/GridAggregationHeader.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { GridColumnHeaderParams } from '@mui/x-data-grid';
 import type { GridBaseColDef } from '@mui/x-data-grid/internals';
 declare function GridAggregationHeader(props: GridColumnHeaderParams & {
-    renderHeader: GridBaseColDef['renderHeader'];
+  renderHeader: GridBaseColDef['renderHeader'];
 }): React.JSX.Element | null;
-export { GridAggregationHeader };
+export { GridAggregationHeader };

package/components/GridAggregationRowOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const GridAggregationRowOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { GridAggregationRowOverlay };

package/components/GridAggregationRowOverlay.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAggregationRowOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aggregationRowOverlayWrapper']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridAggregationRowOverlay = exports.GridAggregationRowOverlay = (0, _forwardRef.forwardRef)(function GridAggregationRowOverlay(props, forwardedRef) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _xDataGridPro.useGridRootProps)();
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const aggregationModel = (0, _internals.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
+  const visibleColumns = new Set(Object.keys(aggregationModel));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridSkeletonLoadingOverlayInner, (0, _extends2.default)({}, props, {
+      skeletonRowsCount: 1,
+      visibleColumns: visibleColumns,
+      showFirstRowBorder: true,
+      ref: forwardedRef
+    }))
+  });
+});

package/components/GridBottomContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type GridBottomContainerProps = React.PropsWithChildren;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/components/GridBottomContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridBottomContainer = GridBottomContainer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _GridAggregationRowOverlay = require("./GridAggregationRowOverlay");
+var _reexports = require("../typeOverloads/reexports");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, {});
+};
+const Element = (0, _system.styled)('div')({
+  position: 'sticky',
+  zIndex: 4,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  const rootProps = (0, _reexports.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const isLoading = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridRowsLoadingSelector);
+  const tree = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridRowTreeSelector);
+  const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _hooks.gridAggregationModelSelector);
+  const aggregationPosition = rootProps.getAggregationPosition(tree[_xDataGridPro.GRID_ROOT_GROUP_ID]);
+  const hasAggregation = React.useMemo(() => Object.keys(aggregationModel).length > 0, [aggregationModel]);
+  const {
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, _xDataGridPro.gridClasses['container--bottom']),
+    role: "presentation",
+    children: hasAggregation && isLoading && aggregationPosition === 'footer' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAggregationRowOverlay.GridAggregationRowOverlay, {}) : children
+  }));
+}

package/components/GridColumnMenuAggregationItem.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
 declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): React.JSX.Element;
 declare namespace GridColumnMenuAggregationItem {
-    var propTypes: any;
+  var propTypes: any;
 }
-export { GridColumnMenuAggregationItem };
+export { GridColumnMenuAggregationItem };