@mui/x-data-grid 7.0.0-beta.2 → 7.0.0-beta.4

package/CHANGELOG.md

@@ -3,7 +3,221 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## v7.0.0-beta.2
+## 7.0.0-beta.4
+
+_Feb 23, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce a new DOM structure for the field components that provides a better accessibility
+- 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
+- 🕥 The support for IE11 has been removed (#12151) @flaviendelangle
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Breaking changes
+
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+
+### Data Grid
+
+#### Breaking changes
+
+- The cell inner wrapper `.MuiDataGrid-cellContent` has been removed, use `.MuiDataGrid-cell` to style the cells.
+
+#### `@mui/x-data-grid@7.0.0-beta.4`
+
+- [DataGrid] Simplify cell DOM structure (#12013) @romgrk
+- [DataGrid] Fix values labels in `is any of` filter operator (#11939) @gitstart
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.4` [![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.0.0-beta.4`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.4` [![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.0.0-beta.4`.
+
+### Date Pickers
+
+#### Breaking changes
+
+- The `selectedSections` prop no longer accepts start and end indexes.
+  When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:
+
+  ```diff
+   <DateField
+  -  selectedSections={{ startIndex: 0, endIndex: 0 }}
+  +  selectedSections={0}
+  
+     // If the field has 3 sections
+  -  selectedSections={{ startIndex: 0, endIndex: 2 }}
+  +  selectedSections="all"
+   />
+  ```
+
+- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
+  This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
+
+ When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+
+  ```diff
+    function MyCustomTextField(props) {
+      const {
+  +     // Should be ignored
+  +     enableAccessibleFieldDOMStructure,
+        // ... rest of the props you are using
+      } = props;
+  
+      return ( /* Some UI to edit the date */ )
+    }
+  
+    function MyCustomField(props) {
+      const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
+        ...props,
+  +     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+  +     enableAccessibleFieldDOMStructure: false,
+      });
+  
+      return <MyCustomTextField ref={ref} {...fieldResponse} />;
+    }
+  
+    function App() {
+      return <DatePicker slots={{ field: MyCustomField }} />;
+    }
+  ```
+
+- The following internal types were exported by mistake and have been removed from the public API:
+
+  - `UseDateFieldDefaultizedProps`
+  - `UseTimeFieldDefaultizedProps`
+  - `UseDateTimeFieldDefaultizedProps`
+  - `UseSingleInputDateRangeFieldComponentProps`
+  - `UseSingleInputTimeRangeFieldComponentProps`
+  - `UseSingleInputDateTimeRangeFieldComponentProps`
+
+#### `@mui/x-date-pickers@7.0.0-beta.4`
+
+- [fields] Add a11y support to multi-HTML field (#12173) @LukasTy
+- [fields] Use the `PickersTextField` component in the fields (#10649) @flaviendelangle
+- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12096) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.4` [![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.0.0-beta.4`.
+
+### Charts / `@mui/x-charts@7.0.0-beta.4`
+
+#### Breaking changes
+
+These components are no longer exported from `@mui/x-charts`:
+
+- `CartesianContextProvider`
+- `DrawingProvider`
+
+#### `@mui/x-charts@7.0.0-beta.4`
+
+- [charts] Don't display text if no value is provided (#12127) @alexfauquette
+- [charts] Remove export of context providers (#12123) @oliviertassinari
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.4`
+
+- [TreeView] Stop using custom `findIndex` to support IE11 (#12129) @flaviendelangle
+
+### Docs
+
+- [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
+- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
+- [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
+- [docs] Fix "Licensing" page link (#12156) @LukasTy
+- [docs] Fix the Treemap illustration (#12185) @danilo-leal
+- [docs] Fix error raised by Grammarly on the page @oliviertassinari
+- [docs] Improve performance on Charts entry point @oliviertassinari
+- [docs] Link to React Transition Group with https @oliviertassinari
+- [docs] Move Heatmap to `pro` plan (#12047) @alexfauquette
+- [docs] Reduce number of Vale errors @oliviertassinari
+- [docs] Remove default value set to `undefined` (#12128) @alexfauquette
+
+### Core
+
+- [core] Fix docs link check (#12135) @LukasTy
+- [core] Fix missing context display names (#12124) @oliviertassinari
+- [core] Fix shortcuts when Caps Lock enabled (#12121) @oliviertassinari
+- [core] Remove IE 11 compat logic (#12119) @oliviertassinari
+- [core] Simplify key utils (#12120) @oliviertassinari
+- [core] Use the @mui/internal-scripts package (#12142) @michaldudak
+- [all components] Remove legacy IE 11 bundle (#12151) @flaviendelangle
+- [code-infra] Bump monorepo (#11880) @Janpot
+- [code-infra] Use `experimental.cpus` to control amount of export workers in Next.js (#12095) @Janpot
+- [docs-infra] Remove randomized API page layout (#11876) @alexfauquette
+- [test] Create local wrapper over `describeConformance` (#12130) @michaldudak
+
+## 7.0.0-beta.3
+
+_Feb 16, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Charts get a [built in grid](https://next.mui.com/x/react-charts/axis/#grid)
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/74299f54-f020-4135-b38c-dc88a230db30" width="510" alt="Charts Grid" />
+
+- 🎛️ Charts get a [Gauge component](https://next.mui.com/x/react-charts/gauge/).
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/fb7a94b5-bef6-4fc2-a0cd-d6ff5b60fa8b" width="510" alt="Guage Chart" />
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `rowEditCommit` event and the related prop `onRowEditCommit` was removed. The [`processRowUpdate`](https://next.mui.com/x/react-data-grid/editing/#the-processrowupdate-callback) prop can be used in place.
+
+#### `@mui/x-data-grid@7.0.0-beta.3`
+
+- [DataGrid] Performance: avoid style invalidation (#12019) @romgrk
+- [DataGrid] Remove legacy editing API event: `rowEditCommit` (#12073) @MBilalShafi
+- [DataGrid] Fix styling grid filter input single select (#11520) @FreakDroid
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.3` [![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.0.0-beta.3`.
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.3` [![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.0.0-beta.3`.
+
+### Charts / `@mui/x-charts@7.0.0-beta.3`
+
+- [charts] Add Gauge component (#11996) @alexfauquette
+- [charts] Add a `ChartsGrid` component (#11034) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.3`
+
+- [TreeView] Remove instance existence checks (#12066) @flaviendelangle
+
+### Docs
+
+- [docs] Complete charts API pages (#12038) @alexfauquette
+- [docs] Add more illustrations to the charts overview page (#12041) @danilo-leal
+- [docs] Fix 301 redirection to StackBlitz @oliviertassinari
+- [docs] Fix Tree space to match the reset of the docs @oliviertassinari
+- [docs] Fix `dayOfWeekFormatter` typo in the pickers v6 to v7 migration document (#12043) @StylesTrip
+- [docs] Fix redirection @oliviertassinari
+- [docs] Fix typo for `AdapterDateFnsV3` (#12036) @flaviendelangle
+- [docs] Removed `focused` prop from demo (#12092) @michelengelen
+
+### Core
+
+- [core] Fix CodeSandbox CI template @oliviertassinari
+- [core] Sort prop asc (#12033) @oliviertassinari
+- [core] Bump monorepo (#12055) @alexfauquette
+
+## 7.0.0-beta.2
 
 _Feb 9, 2024_
 
@@ -17,7 +231,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v7.0.0-beta.2`
+#### `@mui/x-data-grid@7.0.0-beta.2`
 
 - [DataGrid] Add `removeAllFilterItems` as a reason of `onFilterModelChange` callback (#11911) @shaharyar-shamshi
 - [DataGrid] Add slot typings (#11795) @romgrk
@@ -27,35 +241,35 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Improve vertical scrolling performance (#11924) @romgrk
 - [l10n] Improve Danish (da-DK) locale (#11877) @ShahrazH
 
-#### `@mui/x-data-grid-pro@v7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@7.0.0-beta.2` [![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@v7.0.0-beta.2`.
 
 #### `@mui/x-data-grid-premium@v7.0.0-beta.2` [![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@v7.0.0-beta.2`, plus:
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.2`, plus:
 
 - [DataGridPremium] Fix autosize grouping cell (#11870) @romgrk
 - [DataGridPremium] Fix clipboard paste not working with Caps Lock enabled (#11965) @shaharyar-shamshi
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v7.0.0-beta.2`
+#### `@mui/x-date-pickers@7.0.0-beta.2`
 
 - [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11936) @LukasTy
 - [pickers] Limit the valid values of `TDate` (#11791) @flaviendelangle
 
-#### `@mui/x-date-pickers-pro@v7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@7.0.0-beta.2` [![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@v7.0.0-beta.2`.
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.2`.
 
-### Charts / `@mui/x-charts@v7.0.0-beta.2`
+### Charts / `@mui/x-charts@7.0.0-beta.2`
 
 - [charts] Add `reverse` property to axes (#11899) @alexfauquette
 - [charts] Allow series ids to be numbers (#11941) @alexfauquette
 - [charts] Support UTC date formatting in tooltip (#11943) @shaharyar-shamshi
 
-### Tree View / `@mui/x-tree-view@v7.0.0-beta.2`
+### Tree View / `@mui/x-tree-view@7.0.0-beta.2`
 
 - [TreeView] Correctly detect if an item is expandable (#11963) @swalker326
 - [TreeView] Polish the default design & revise the simple version pages (#11529) @danilo-leal
@@ -71,7 +285,7 @@ Same changes as in `@mui/x-date-pickers@v7.0.0-beta.2`.
   +import { LicenseInfo } from '@mui/x-license';
   ```
 
-`@mui/x-license@v7.0.0-beta.2`
+`@mui/x-license@7.0.0-beta.2`
 
 - [license] Rename `@mui/x-license-pro` to `@mui/x-license` (#11938) @cherniavskii
 
@@ -272,7 +486,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.1`.
 
 _Jan 26, 2024_
 
-We are glad to announce MUI X v7 beta!
+We are glad to announce MUI X v7 beta!
 This version has several improvements, bug fixes, and exciting features 🎉.
 We want to offer a big thanks to the 7 contributors who made this release possible ✨:
 
@@ -1289,7 +1503,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`.
 
-- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs) prop to customize filter debounce time.
+- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
 
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 
@@ -2138,7 +2352,68 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
-## v6.19.4
+## 6.19.5
+
+_Feb 23, 2024_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.5`
+
+- [DataGrid] Fix styling grid filter input single select (#12079) @FreakDroid
+
+#### `@mui/x-data-grid-pro@6.19.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-data-grid@6.19.5`.
+
+#### `@mui/x-data-grid-premium@6.19.5` [![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@6.19.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.5`
+
+- [pickers] Fix `referenceDate` day calendar focus (#12136) @LukasTy
+- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12131) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.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-date-pickers@6.19.5`.
+
+### Charts / `@mui/x-charts@6.19.5`
+
+- [charts] Allow to skip animation on sparkline bar (#12160) @alexfauquette
+
+### Docs
+
+- [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
+- [docs] Fix 301 redirection to StackBlitz @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 404 links to translation source @oliviertassinari
+- [docs] Fix dead link to translations @oliviertassinari
+- [docs] Fix the Treemap illustration (#12189) @danilo-leal
+- [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle
+- [docs] Improve performance on Charts entry point @oliviertassinari
+- [docs] Move Heatmap to pro (#12170) @alexfauquette
+- [docs] Remove Charts installation next tag call-out (#12133) @LukasTy
+- [docs] Removed `focused` prop from demo (#12126) @michelengelen
+- [docs] Add missing Heatmap pro icon @oliviertassinari
+- [docs] Add more illustrations to the Overview page (#12041) @danilo-leal
+- [docs] Avoid use of shorthand (#12009) @oliviertassinari
+
+### Core
+
+- [core] Fix CI @oliviertassinari
+- [core] Fix docs link check (#12137) @LukasTy
+
+## 6.19.4
 
 _Feb 9, 2024_
 
@@ -2150,7 +2425,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Data Grid
 
-#### `@mui/x-data-grid@v6.19.4`
+#### `@mui/x-data-grid@6.19.4`
 
 - [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii
 - [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet
@@ -2158,28 +2433,28 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii
 - [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH
 
-#### `@mui/x-data-grid-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-data-grid-pro@6.19.4` [![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@v6.19.4`.
+Same changes as in `@mui/x-data-grid@6.19.4`.
 
-#### `@mui/x-data-grid-premium@v6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+#### `@mui/x-data-grid-premium@6.19.4` [![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@v6.19.4`, plus:
+Same changes as in `@mui/x-data-grid-pro@6.19.4`, plus:
 
 - [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk
 - [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii
 
 ### Date Pickers
 
-#### `@mui/x-date-pickers@v6.19.4`
+#### `@mui/x-date-pickers@6.19.4`
 
 - [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy
 
-#### `@mui/x-date-pickers-pro@v6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-date-pickers-pro@6.19.4` [![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@v6.19.4`.
+Same changes as in `@mui/x-date-pickers@6.19.4`.
 
-### Charts / `@mui/x-charts@v6.19.4`
+### Charts / `@mui/x-charts@6.19.4`
 
 - [charts] Add `reverse` property to axes (#11959) @alexfauquette
 - [charts] Allow series ids to be numbers (#11960) @alexfauquette
@@ -2240,7 +2515,7 @@ Same changes as in `@mui/x-date-pickers@6.19.3`.
 - [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette
 - [docs] Improve Support page (#11556) @oliviertassinari
 - [docs] Sync support page with core @oliviertassinari
-- [docs] These API don't exist in MUI X v6 @oliviertassinari
+- [docs] These API don't exist in MUI X v6 @oliviertassinari
 - [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas
 
 ## 6.19.2

package/DataGrid/DataGrid.js

@@ -493,12 +493,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowDoubleClick: PropTypes.func,
-  /**
-   * Callback fired when the row changes are committed.
-   * @param {GridRowId} id The row id.
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   */
-  onRowEditCommit: PropTypes.func,
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].

package/colDef/gridActionsColDef.js

@@ -8,6 +8,7 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',

package/colDef/gridBooleanColDef.js

@@ -25,6 +25,7 @@ const stringToBoolean = value => {
 };
 export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: renderBooleanCell,

package/colDef/gridCheckboxSelectionColDef.js

@@ -19,6 +19,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
     const rowId = apiRef.current.getRowId(row);

package/components/GridRow.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { GridRowId, GridRowModel } from '../models/gridRows';
 import type { GridPinnedColumns } from '../hooks/features/columns';
 import type { GridStateColDef } from '../models/colDef/gridColDef';
-import { type GridDimensions } from '../hooks/features/dimensions';
+import type { GridVirtualizationState } from '../hooks/features/virtualization';
+import type { GridDimensions } from '../hooks/features/dimensions';
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     rowId: GridRowId;
     selected: boolean;
@@ -12,6 +13,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     index: number;
     rowHeight: number | 'auto';
+    offsets: GridVirtualizationState['offsets'];
     dimensions: GridDimensions;
     firstColumnToRender: number;
     lastColumnToRender: number;

package/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,6 +67,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -364,8 +365,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     style: style
   }, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/_jsx("div", {
+      role: "presentation",
       className: gridClasses.cellOffsetLeft,
-      role: "presentation"
+      style: {
+        width: offsets.left
+      }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
@@ -434,6 +438,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  offsets: PropTypes.shape({
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired
+  }).isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

package/components/GridScrollbarFillerCell.js

@@ -1,34 +1,19 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass as getClassName } from '../constants';
+import { gridClasses } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
-  root: getClassName('scrollbarFiller'),
-  header: getClassName('scrollbarFiller--header'),
-  borderTop: getClassName('scrollbarFiller--borderTop'),
-  pinnedRight: getClassName('scrollbarFiller--pinnedRight')
+  root: gridClasses.scrollbarFiller,
+  header: gridClasses['scrollbarFiller--header'],
+  borderTop: gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
-const Style = styled('div')({
-  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  alignSelf: 'stretch',
-  [`&.${classes.borderTop}`]: {
-    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-  },
-  [`&.${classes.pinnedRight}`]: {
-    backgroundColor: 'var(--DataGrid-pinnedBackground)'
-  },
-  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
-    position: 'sticky',
-    right: 0
-  }
-});
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
   pinnedRight
 }) {
-  return /*#__PURE__*/_jsx(Style, {
+  return /*#__PURE__*/_jsx("div", {
     role: "presentation",
     className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
   });

package/components/cell/GridCell.js

@@ -58,8 +58,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
-    content: ['cellContent']
+    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -140,6 +139,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
+  if (column.display === 'flex') {
+    classNames.push(gridClasses['cell--flex']);
+  }
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -248,12 +250,11 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
   let children;
-  if (editCellState == null && column.renderCell) {
+  let title;
+  if (editCellState === null && column.renderCell) {
     children = column.renderCell(cellParamsWithAPI);
-    classNames.push(gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
   }
-  if (editCellState != null && column.renderEditCell) {
+  if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -267,12 +268,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   if (children === undefined) {
     const valueString = valueToRender == null ? void 0 : valueToRender.toString();
-    children = /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
+    children = valueString;
+    title = valueString;
   }
   if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
@@ -292,6 +289,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
     style: style,
+    title: title,
     tabIndex: tabIndex,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,7 +4,6 @@ const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
-import { isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -64,7 +63,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
   }, [hasFocus]);
   const handleKeyDown = React.useCallback(event => {
-    if (isSpaceKey(event.key)) {
+    if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();