@mui/x-data-grid 7.20.0 → 7.21.0

package/CHANGELOG.md

@@ -3,6 +3,95 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.21.0
+
+_Oct 17, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Added [`dataset` prop support for the Scatter Chart component](https://mui.com/x/react-charts/scatter/#using-a-dataset)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @kalyan90, @rotembarsela, @wangkailang.
+Following are all team members who have contributed to this release:
+@arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @KenanYusuf, @oliviertassinari, @samuelsycamore.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.21.0`
+
+- [DataGrid] Fix `onRowSelectionModelChange` firing unnecessarily on initial render (#14909) @MBilalShafi
+- [DataGrid] Fix `onRowSelectionModelChange` not being called after row is removed (#14972) @arminmeh
+- [DataGrid] Fix pagination scrollbar issue on small zoom (#14911) @cherniavskii
+- [DataGrid] Fix scroll jumping (#14929) @romgrk
+- [DataGrid] Fix excessive white space at the end of the Data Grid (#14864) @kalyan90
+
+#### `@mui/x-data-grid-pro@7.21.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@7.21.0`, plus:
+
+- [DataGridPro] Fix indeterminate checkbox state for server-side data (#14956) @MBilalShafi
+- [DataGridPro] Fix scrolling performance when `rowHeight={undefined}` (#14983) @cherniavskii
+- [DataGridPro] List view (#14393) @KenanYusuf @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.21.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@7.21.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.21.0`
+
+- [pickers] Cleanup `PageUp` and `PageDown` event handlers on time components (#14928) @arthurbalduini
+- [pickers] Create the new picker's `ownerState` object (#14889) @flaviendelangle
+- [pickers] Fix `PickerValidDate` usage in the Date Range Picker Toolbar (#14925) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.21.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@7.21.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.21.0`
+
+- [charts] Allow `dataset` to be used with the Scatter Chart (#14915) @JCQuintas
+- [charts] Ensure `reduce motion` preference disables animation on page load (#14417) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-beta.5` [![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@7.21.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.21.0`
+
+- [TreeView] Fix `alpha` usage with CSS variables (#14969) @wangkailang
+- [TreeView] Fix usage of the `aria-selected` attribute (#14991) @flaviendelangle
+- [TreeView] Fix hydration error (#15002) @flaviendelangle
+
+### `@mui/x-codemod@7.21.0`
+
+- [codemod] Add a new utility to rename imports (#14919) @flaviendelangle
+
+### Docs
+
+- [docs] Add recipe showing how to toggle detail panels on row click (#14666) @k-rajat19
+- [docs] Fix broken link to the validation section in the Data grid component (#14973) @arminmeh
+- [docs] Update v5 migration codesandbox @oliviertassinari
+- [docs] Enforce component style rules for the Tree View (#14963) @samuelsycamore
+
+### Core
+
+- [core] Fix shortcut with localization keyboard (#14220) @rotembarsela
+- [core] Fix docs deploy command (#14920) @arminmeh
+- [code-infra] Prepare some tests to work in `vitest/playwright` (#14926) @JCQuintas
+- [test] Fix `AdapterDayjs` coverage calculation (#14957) @LukasTy
+- [test] Fix split infinitive API convention use @oliviertassinari
+
 ## 7.20.0
 
 _Oct 11, 2024_
@@ -79,7 +168,7 @@ Same changes as in `@mui/x-charts@7.20.0`.
 - [docs] Add custom columns panel demo (#14825) @cherniavskii
 - [docs] Capitalize all instances of "Data Grid" (#14884) @samuelsycamore
 - [docs] Divide charts `tooltip` and `highlighting` pages (#14824) @JCQuintas
-- [docs] Document the `TreeItem2` component and the `useTreeItem2` hook (#14551) @noraleonte
+- [docs] Document the `<TreeItem2 />` component and the `useTreeItem2` hook (#14551) @noraleonte
 - [docs] Fix column pinning for "Disable detail panel content scroll" section (#14854 and #14885) @kalyan90
 - [docs] Fix detail panel demo not working well with pinned columns (#14883) @cherniavskii
 - [docs] New recipe of a read-only field (#14606) @flaviendelangle
@@ -367,7 +456,7 @@ Same changes as in `@mui/x-charts@7.17.0`.
 
 ### Docs
 
-- [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
+- [docs] Add missing callout on "Imperative API" Tree View sections (#14503) @flaviendelangle
 - [docs] Fix broken redirection to MUI X v5 @oliviertassinari
 - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
 - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
@@ -708,7 +797,7 @@ Same changes as in `@mui/x-charts@7.13.0`.
 - [core] Fix ESLint issue (#14207) @LukasTy
 - [core] Fix Netlify build cache issue (#14182) @cherniavskii
 - [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy
-- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle
+- [internals] Move utils needed for Tree View virtualization to shared package (#14202) @flaviendelangle
 
 ## 7.12.1
 
@@ -799,7 +888,7 @@ This expansion of the Pro plan comes with some adjustments to our pricing strate
 
 We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the `RichTreeViewPro` component
+- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the `<RichTreeViewPro />` component
 
   <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />
 
@@ -1292,7 +1381,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
 
 - [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
 - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
-- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+- [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
 
 ## 7.7.1
 
@@ -1360,7 +1449,7 @@ Same changes as in `@mui/x-date-pickers@7.7.1`, plus:
 - [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
 - [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
 - [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
-- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+- [TreeView] Support `itemId` with escaping characters when using Simple Tree View (#13487) @oukunan
 
 ### Docs
 
@@ -1440,7 +1529,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 - [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle
 - [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle
 - [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle
-- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle
+- [TreeView] Refactor the Tree View internals to prepare for headless API (#13311) @flaviendelangle
 
 ### Docs
 
@@ -1455,7 +1544,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 - [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas
 - [core] Minor setup cleanup (#13467) @LukasTy
 - [infra] Adjust CI setup (#13448) @LukasTy
-- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle
+- [test] Add tests for the custom slots of `<TreeItem2 />` (#13314) @flaviendelangle
 
 ## 7.6.2
 
@@ -1640,7 +1729,7 @@ _May 23, 2024_
 
 We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🧰 Improve tree view testing
+- 🧰 Improve Tree View testing
 - 📊 Add `label` to be displayed in BarChart
 
 ### Data Grid
@@ -1816,7 +1905,7 @@ Same changes as in `@mui/x-date-pickers@7.4.0`.
 
 #### `@mui/x-tree-view@7.4.0`
 
-- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
+- [TreeView] Fix props propagation and theme entry in `<TreeItem2 />` (#12889) @flaviendelangle
 
 ### Docs
 
@@ -2126,7 +2215,7 @@ Same changes as in `@mui/x-date-pickers@7.2.0`, plus:
 ### Docs
 
 - [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
-- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Add file explorer example to rich Tree View customization docs (#12707) @noraleonte
 - [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
 - [docs] Explain how to clip plots with composition (#12679) @alexfauquette
 - [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
@@ -2202,7 +2291,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 #### `@mui/x-tree-view@7.1.1`
 
 - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle
-- [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle
+- [TreeView] Create `<RichTreeViewPro />` component (not released yet) (#12610) @flaviendelangle
 - [TreeView] Create Pro package (not released yet) (#12240) @flaviendelangle
 - [TreeView] Fix typo in errors (#12623) @alissa-tung
 - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle
@@ -2222,13 +2311,13 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette
 - [docs] Remove ` around @default values (#12158) @alexfauquette
 - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
-- [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle
+- [docs] Use `<TreeItem2 />` for icon expansion example on `<RichTreeView />` (#12563) @flaviendelangle
 
 ### Core
 
 - [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy
 - [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle
-- [core] Introduce `describeTreeView` to run test on `SimpleTreeView` and `RichTreeView`, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle
+- [core] Introduce `describeTreeView` to run test on `<SimpleTreeView />` and `<RichTreeView />`, using `<TreeItem />` and `<TreeItem2 />` + migrate expansion tests (#12428) @flaviendelangle
 - [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy
 - [core] Remove explicit `express` package (#12602) @LukasTy
 - [core] Update to new embedded translations in the docs package (#12232) @Janpot
@@ -2293,7 +2382,7 @@ Same changes as in `@mui/x-date-pickers@7.1.0`, plus:
 
 #### `@mui/x-tree-view@7.1.0`
 
-- [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle
+- [TreeView] Do not use outdated version of the state to compute new label first char in Rich Tree View (#12512) @flaviendelangle
 
 ### Docs
 
@@ -2420,7 +2509,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
 
 #### Breaking changes
 
-- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+- The required `nodeId` prop used by `<TreeItem />` has been renamed to `itemId` for consistency:
 
 ```diff
  <TreeView>
@@ -2573,7 +2662,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 #### `@mui/x-tree-view@7.0.0-beta.7`
 
 - [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
-- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Introduce a new `<TreeItem2 />` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
 - [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
 
 ### Docs
@@ -2631,9 +2720,9 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`.
 
 #### Breaking changes
 
-- The component used to animate the item children is now defined as a slot on the `TreeItem` component.
+- The component used to animate the item children is now defined as a slot on the `<TreeItem />` component.
 
-  If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component,
+  If you were passing a `TransitionComponent` or `TransitionProps` to your `<TreeItem />` component,
   you need to use the new `groupTransition` slot on this component:
 
   ```diff
@@ -2649,7 +2738,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`.
     </SimpleTreeView>
   ```
 
-- The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name.
+- The `group` class of the `<TreeItem />` component has been renamed to `groupTransition` to match with its new slot name.
 
   ```diff
    const StyledTreeItem = styled(TreeItem)({
@@ -2663,14 +2752,14 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`.
 #### `@mui/x-tree-view@7.0.0-beta.6`
 
 - [TreeView] Fix invalid nodes state when updating `props.items` (#12359) @flaviendelangle
-- [TreeView] In the `RichTreeView`, do not use the item id as the HTML id attribute (#12319) @flaviendelangle
+- [TreeView] In the Rich Tree View, do not use the item id as the HTML id attribute (#12319) @flaviendelangle
 - [TreeView] New instance and publicAPI method: `getItem` (#12251) @flaviendelangle
 - [TreeView] Replace `TransitionComponent` and `TransitionProps` with a `groupTransition` slot (#12336) @flaviendelangle
 
 ### Docs
 
 - [docs] Add a note about `z-index` usage in SVG (#12337) @alexfauquette
-- [docs] `RichTreeView` customization docs (#12231) @noraleonte
+- [docs] Rich Tree View customization docs (#12231) @noraleonte
 
 ### Core
 
@@ -3323,7 +3412,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.0`, plus:
 
 ### Docs
 
-- [docs] Add `contextValue` to the headless tree view doc (#11705) @flaviendelangle
+- [docs] Add `contextValue` to the headless Tree View doc (#11705) @flaviendelangle
 - [docs] Add section for the `disableSelection` prop (#11821) @flaviendelangle
 - [docs] Fix brand name non-breaking space (#11758) @oliviertassinari
 - [docs] Fix typo in Data Grid components page (#11775) @flaviendelangle
@@ -3346,7 +3435,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 
 - 🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
 - ⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related [docs](https://next.mui.com/x/react-data-grid/api-object/#access-the-disabled-column-features) section.
-- 🚀 Uplift the `SimpleTreeView` customization examples (#11424) @noraleonte
+- 🚀 Uplift the Simple Tree View customization examples (#11424) @noraleonte
 - 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
 - 🐞 Bugfixes
 - 💔 Bump `@mui/material` peer dependency for all packages (#11692) @LukasTy
@@ -3557,7 +3646,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
   ```
 
 - The `useTreeItem` hook has been renamed `useTreeItemState`.
-  This will help create a new headless version of the `TreeItem` component based on a future `useTreeItem` hook.
+  This will help create a new headless version of the Tree Item component based on a future `useTreeItem` hook.
 
   ```diff
   -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
@@ -3657,13 +3746,13 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 - [docs] Cleanup and fix Pickers Playground styling (#11700) @LukasTy
 - [docs] First draft of the Tree View custom plugin doc (#11564) @flaviendelangle
 - [docs] Fix Pickers migration syntax and diffs (#11695) @LukasTy
-- [docs] Fix generated tree view API docs (#11737) @LukasTy
+- [docs] Fix generated Tree View API docs (#11737) @LukasTy
 - [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
 - [docs] Improve codemod for v7 (#11650) @oliviertassinari
 - [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
 - [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
 - [docs] Remove the description from the `className` prop (#11693) @oliviertassinari
-- [docs] Uplift `SimpleTreeView` customization examples (#11424) @noraleonte
+- [docs] Uplift Simple Tree View customization examples (#11424) @noraleonte
 - [docs] Uplift the Date Pickers playground (#11555) @danilo-leal
 
 ### Core
@@ -3740,8 +3829,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 
 ### Tree View / `@mui/x-tree-view@7.0.0-alpha.8`
 
-- [tree view] Cleanup `onKeyDown` handler (#11481) @flaviendelangle
-- [tree view] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle
+- [TreeView] Cleanup `onKeyDown` handler (#11481) @flaviendelangle
+- [TreeView] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle
 
 ### Docs
 
@@ -3768,7 +3857,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 
 - 🎁 New component to create a Tree View from a structured data source:
 
-  You can now directly pass your data to the `RichTreeView` component instead of manually converting it into JSX `TreeItem` components:
+  You can now directly pass your data to the `<RichTreeView />` component instead of manually converting it into JSX `<TreeItem />` components:
 
   ```tsx
   const ITEMS = [
@@ -5099,7 +5188,7 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 
 ### Core
 
-- [core] Adds migration docs for charts, pickers and tree view (#10926) @michelengelen
+- [core] Adds migration docs for Charts, Pickers, and Tree View (#10926) @michelengelen
 - [core] Bump monorepo (#10959) @LukasTy
 - [core] Changed prettier branch value to next (#10917) @michelengelen
 - [core] Fix GitHub title tag consistency @oliviertassinari

package/DataGrid/DataGrid.js

@@ -695,6 +695,7 @@ DataGridRaw.propTypes = {
    * Setting it to a lower value could be useful when using dynamic row height,
    * but might reduce performance when displaying a large number of rows.
    * @default 166
+   * @deprecated
    */
   rowPositionsDebounceMs: PropTypes.number,
   /**

package/DataGrid/index.d.ts

@@ -1,2 +1 @@
 export * from './DataGrid';
-export { DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';

package/DataGrid/index.js

@@ -1,2 +1 @@
-export * from "./DataGrid.js";
-export { DATA_GRID_PROPS_DEFAULT_VALUES } from "./useDataGridProps.js";
+export * from "./DataGrid.js";

package/DataGrid/useDataGridComponent.js

@@ -28,6 +28,7 @@ import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/fe
 import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
 import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
+import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -57,12 +58,13 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridRowSpanning(apiRef, props);
-  useGridParamsApi(apiRef);
+  useGridParamsApi(apiRef, props);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);
@@ -83,5 +85,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
   useGridVirtualization(apiRef, props);
+  useGridListView(apiRef, props);
   return apiRef;
 };

package/DataGrid/useDataGridProps.d.ts

@@ -1,7 +1,3 @@
-import { DataGridProcessedProps, DataGridProps, DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+import { DataGridProcessedProps, DataGridProps } from '../models/props/DataGridProps';
 import { GridValidRowModel } from '../models';
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;
 export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;

package/DataGrid/useDataGridProps.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
-import { GridEditModes } from "../models/index.js";
 import { computeSlots, useProps } from "../internals/utils/index.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -14,67 +14,8 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
-  signature: 'DataGrid'
-};
-
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-export const DATA_GRID_PROPS_DEFAULT_VALUES = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  signature: 'DataGrid',
+  unstable_listView: false
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/components/GridPagination.js

@@ -13,6 +13,7 @@ const GridPaginationRoot = styled(TablePagination)(({
 }) => ({
   maxHeight: 'calc(100% + 1px)',
   // border width
+  flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {

package/components/GridRow.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -25,6 +24,7 @@ import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -40,6 +40,13 @@ function EmptyCell({
     }
   });
 }
+process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  width: PropTypes.number.isRequired
+} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -67,7 +74,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onMouseOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const configuration = useGridConfiguration();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -91,30 +98,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
-      // The index prop is relative to the rows from all pages. As example, the index prop of the
-      // first row is 5 if `paginationModel.pageSize=5` and `paginationModel.page=1`. However, the index used by the virtualization
-      // doesn't care about pagination and considers the rows from the current page only, so the
-      // first row always has index=0. We need to subtract the index of the first row to make it
-      // compatible with the index used by the virtualization.
       const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
-      // pinned rows are not part of the visible rows
-      if (rowIndex != null) {
+      // Pinned rows are not part of the visible rows
+      if (rowIndex !== undefined) {
         apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
       }
     }
-    const rootElement = ref.current;
-    const hasFixedHeight = rowHeight !== 'auto';
-    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
-      return undefined;
+    if (ref.current && rowHeight === 'auto') {
+      return apiRef.current.observeRowHeight(ref.current, rowId);
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      const [entry] = entries;
-      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
-    });
-    resizeObserver.observe(rootElement);
-    return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+    return undefined;
+  }, [apiRef, currentPage.range, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -171,15 +165,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
-  let minHeight = rowHeight;
-  if (minHeight === 'auto' && sizes) {
-    const numberOfBaseSizes = 1;
-    const maximumSize = sizes.baseCenter ?? 0;
-    if (maximumSize > 0 && numberOfBaseSizes > 1) {
-      minHeight = maximumSize;
-    }
-  }
+  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -191,25 +177,25 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight,
+      minHeight: rowHeight,
       '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
-    if (sizes?.spacingTop) {
+    if (heightEntry.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-      rowStyle[property] = sizes.spacingTop;
+      rowStyle[property] = heightEntry.spacingTop;
     }
-    if (sizes?.spacingBottom) {
+    if (heightEntry.spacingBottom) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
       let propertyValue = rowStyle[property];
       // avoid overriding existing value
       if (typeof propertyValue !== 'number') {
         propertyValue = parseInt(propertyValue || '0', 10);
       }
-      propertyValue += sizes.spacingBottom;
+      propertyValue += heightEntry.spacingBottom;
       rowStyle[property] = propertyValue;
     }
     return rowStyle;
-  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
+  }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
@@ -287,6 +273,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
+    if (!column) {
+      continue;
+    }
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
   if (hasVirtualFocusCellRight) {

package/components/base/GridOverlays.js

@@ -74,6 +74,14 @@ function GridOverlayWrapper(props) {
     }, props))
   }));
 }
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
+} : void 0;
 process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRootStyles.js

@@ -513,6 +513,7 @@ export const GridRootStyles = styled('div', {
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
+      flex: '0 0 auto',
       height: 'var(--height)',
       width: 'var(--width)',
       lineHeight: 'calc(var(--height) - 1px)',