@mui/x-data-grid 7.19.0 → 7.20.0

package/CHANGELOG.md

@@ -3,6 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.20.0
+
+_Oct 11, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Updated ["What's new"](https://mui.com/x/whats-new/) page giving more detailed overview of the latest new features and other highlights
+- 📚 New [collapsible column groups demo](https://mui.com/x/react-data-grid/column-groups/#collapsible-column-groups) for the Data Grid component
+- 📚 New [Tree Item Customization](https://mui.com/x/react-tree-view/tree-item-customization/) documentation to learn how to use the new APIs to create custom Tree Items. The old APIs (`props.ContentComponent` and `props.ContentProps`) have been deprecated and will be removed in the new major version of the Tree View component.
+- 🌍 Improve Japanese (ja-JP) locale on the Data Grid component
+- 🐞 Bugfixes
+- 📚 Other documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @kalyan90, @uma-neko, @vfbiby.
+Following are all team members who have contributed to this release: @alelthomas, @arminmeh, @arthurbalduini,
+@cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte, @oliviertassinari, @samuelsycamore, @siriwatknp.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.20.0`
+
+- [DataGrid] Add `onColumnHeaderContextMenu` event (#14734) @vfbiby
+- [DataGrid] Avoid row spanning computation of outdated rows (#14902) @MBilalShafi
+- [DataGrid] Fix scrollbar position not being updated after `scrollToIndexes` (#14888) @arminmeh
+- [DataGrid] Pass `rowId` param to `processRowUpdate` (#14821) @k-rajat19
+- [l10n] Improve Japanese (ja-JP) locale (#14870) @uma-neko
+
+#### `@mui/x-data-grid-pro@7.20.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.20.0`, plus:
+
+- [DataGridPro] Fix wording on the `rowSelectionPropagation` JSDoc and doc section (#14907) @flaviendelangle
+
+#### `@mui/x-data-grid-premium@7.20.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.20.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.20.0`
+
+- [pickers] Add `PageUp` and `PageDown` support for time components (#14812) @arthurbalduini
+- [pickers] Fix regression on `PickerValidDate` (#14896) @flaviendelangle
+- [pickers] Move the `DateFieldInPickerProps` interface to the `DatePicker` folder and rename it `DatePickerFieldProps` (same for time and date time) (#14828) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.20.0`
+
+No changes since `@mui/x-charts@v7.19.0`.
+
+#### `@mui/x-charts-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-charts@7.20.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.20.0`
+
+- [TreeItem] Deprecate the `ContentComponent` and `ContentProps` props (#14908) @flaviendelangle
+- [TreeView] Rework how items are being rendered in Rich Tree View components (#14749) @flaviendelangle
+
+### Docs
+
+- [docs] Update "What's new" page (#14858) @cherniavskii
+- [docs] Add collapsible column groups demo (#14818) @cherniavskii
+- [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] 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
+- [docs] Change demo name example (#14822) @alelthomas
+
+### Core
+
+- [core] Support `@mui/utils` v6 (#14867) @siriwatknp
+- [code-infra] Remove deprecated `data-mui-test` in favour of `data-testid` (#14882) @JCQuintas
+- [code-infra] Update renovate config and add a `vitest` group (#14856) @JCQuintas
+- [test] Replace `waitFor()` with `act()` (#14851) @oliviertassinari
+- [test] Restore "pnpm tc" CLI (#14852) @oliviertassinari
+
 ## 7.19.0
 
 _Oct 4, 2024_
@@ -90,13 +180,13 @@ Same changes as in `@mui/x-charts@7.19.0`.
 
 - [TreeView] Apply experimental features in `getDefaultizedParams` instead of in the plugin render (#14661) @flaviendelangle
 - [TreeView] Export `publicAPI` form `useTreeItem2Utils` (#14729) @noraleonte
-- [TreeView] Fix cursor navigation interfering with browser shortcut keys  (#14798) @sai6855
+- [TreeView] Fix cursor navigation interfering with browser shortcut keys (#14798) @sai6855
 - [TreeView] Fix invalid test for items reordering (#14665) @flaviendelangle
 - [TreeView] Remove `instance.getTreeItemIdAttribute` (#14667) @flaviendelangle
 
 ### Docs
 
-- [docs] Added warning callout for Firefox reordering bug  (#14516) @michelengelen
+- [docs] Added warning callout for Firefox reordering bug (#14516) @michelengelen
 - [docs] Copyedit `pages.ts` navigation (#14782) @samuelsycamore
 - [docs] Fix typo in row spanning doc (#14770) @flaviendelangle
 - [docs] Fix typo in the Tree View migration guide to v7 (#14727) @Sanderand
@@ -121,7 +211,7 @@ We'd like to offer a big thanks to the 14 contributors who made this release pos
 
 - 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
 
-  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="Data Grid row spanning" />
 
 - ⏰ Support `date-fns` v4 (#14673) @LukasTy
 - 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
@@ -560,7 +650,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 #### `@mui/x-data-grid@7.13.0`
 
 - [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
-- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Fix error logged during skeleton loading with nested Data Grid (#14186) @KenanYusuf
 - [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
 - [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
 - [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
@@ -678,6 +768,8 @@ Same changes as in `@mui/x-charts@7.12.1`, plus:
 
 #### `@mui/x-tree-view@7.12.1`
 
+No changes since `@mui/x-tree-view@7.12.0`.
+
 ### Docs
 
 - [docs] Add a warning to promote the usage of `updateRows` (#14027) @MBilalShafi
@@ -1528,7 +1620,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [docs] Fix a small typo in property comment (#13245) @Janpot
 - [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
 - [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
-- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Small improvements on accessibility Data Grid doc (#13233) @arthurbalduini
 - [docs] Update Pickers demo configurations (#13303) @LukasTy
 
 ### Core
@@ -1542,7 +1634,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [test] Use test-utils from npm (#12880) @michaldudak
 - [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
 
-## v7.5.1
+## 7.5.1
 
 _May 23, 2024_
 
@@ -1602,7 +1694,7 @@ Same changes as in `@mui/x-date-pickers@7.5.1`.
 - [code-infra] Run corepack enable on all CI jobs (#13205) @Janpot
 - [code-infra] Use `nx` for lerna tasks (#13166) @LukasTy
 
-## v7.5.0
+## 7.5.0
 
 _May 17, 2024_
 
@@ -2127,7 +2219,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
 - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
 - [docs] Match IE 11 spacing with Material UI @oliviertassinari
-- [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
+- [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
@@ -3568,7 +3660,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 - [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] 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
@@ -3656,8 +3748,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 - [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
 - [docs] Improve `git diff` format @oliviertassinari
 - [docs] Push up the MUI X brand (#11533) @oliviertassinari
-- [docs] Remove old data grid translation files (#11646) @cherniavskii
-- [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
+- [docs] Remove old Data Grid translation files (#11646) @cherniavskii
+- [docs] Improve Server-side Data Grid docs (#11589) @oliviertassinari
 - [docs] Improve charts landing page (#11570) @oliviertassinari
 
 ### Core
@@ -4167,7 +4259,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/#data-grid-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 Data Grid 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.
 
@@ -4879,7 +4971,7 @@ A special shoutout to thank the 12 contributors who made this release possible.
 - 🚀 First v7 alpha release
 - ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
 - 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/)
-- 💫 New recipes added for the data grid
+- 💫 New recipes added for the Data Grid
 - 📈 `<ChartsReferenceLine />` component is now available
 - 🌍 Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
 - 🐞 Bugfixes

package/DataGrid/DataGrid.js

@@ -438,6 +438,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -655,6 +661,7 @@ DataGridRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -92,6 +92,7 @@ function GridColumnHeaderItem(props) {
   }, [apiRef, colDef.field]);
   const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
+    onContextMenu: publish('columnHeaderContextMenu'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used

package/hooks/core/useGridRefs.js

@@ -3,6 +3,8 @@ export const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const virtualScrollbarVerticalRef = React.useRef(null);
+  const virtualScrollbarHorizontalRef = React.useRef(null);
   const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
@@ -10,6 +12,8 @@ export const useGridRefs = apiRef => {
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    virtualScrollbarVerticalRef,
+    virtualScrollbarHorizontalRef,
     columnHeadersContainerRef
   });
 };

package/hooks/features/dimensions/useGridDimensions.js

@@ -238,11 +238,11 @@ export function useGridDimensions(apiRef, props) {
     // jsdom has no layout capabilities
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (isFirstSizing.current) {

package/hooks/features/editing/useGridCellEditing.js

@@ -324,7 +324,9 @@ export const useGridCellEditing = (apiRef, props) => {
       };
       try {
         const row = apiRef.current.getRow(id);
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishCellEditMode();
         }).catch(handleError);

package/hooks/features/editing/useGridRowEditing.js

@@ -397,7 +397,9 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       };
       try {
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishRowEditMode();
         }).catch(handleError);

package/hooks/features/events/useGridEvents.d.ts

@@ -5,4 +5,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;
+export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;

package/hooks/features/events/useGridEvents.js

@@ -5,6 +5,7 @@ import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
  */
 export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

package/hooks/features/filter/gridFilterUtils.js

@@ -41,7 +41,7 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     items = [model.items[0]];
   } else {

package/hooks/features/rowSelection/utils.js

@@ -44,21 +44,21 @@ export function getCheckboxPropsSelector(groupId, autoSelectParents) {
         isChecked: true
       };
     }
-    let selectableDescendentsCount = 0;
-    let selectedDescendentsCount = 0;
+    let selectableDescendantsCount = 0;
+    let selectedDescendantsCount = 0;
     const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
     for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
       const id = sortedRowIds[index];
       if (filteredRowsLookup[id] !== false) {
-        selectableDescendentsCount += 1;
+        selectableDescendantsCount += 1;
         if (rowSelectionLookup[id] !== undefined) {
-          selectedDescendentsCount += 1;
+          selectedDescendantsCount += 1;
         }
       }
     }
     return {
-      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
-      isChecked: autoSelectParents ? selectedDescendentsCount > 0 : rowSelectionLookup[groupId] === groupId
+      isIndeterminate: selectedDescendantsCount > 0 && selectedDescendantsCount < selectableDescendantsCount || selectedDescendantsCount === selectableDescendantsCount && rowSelectionLookup[groupId] === undefined,
+      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
     };
   });
 }

package/hooks/features/rows/gridRowsUtils.js

@@ -24,7 +24,7 @@ export const buildRootGroup = () => ({
  */
 export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {

package/hooks/features/rows/useGridRowSpanning.js

@@ -202,7 +202,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: renderContext.lastRowIndex - 1
+      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;

package/hooks/features/scroll/useGridScroll.js

@@ -47,6 +47,8 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
+  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
+  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -100,18 +102,20 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
+      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
+      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/hooks/features/sorting/gridSortingUtils.js

@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     return [model[0]];
   }

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -73,8 +73,8 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const scrollbarVerticalRef = React.useRef(null);
-  const scrollbarHorizontalRef = React.useRef(null);
+  const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
+  const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);

package/hooks/utils/useGridApiContext.js

@@ -3,7 +3,7 @@ import { GridApiContext } from "../../components/GridApiContext.js";
 export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
   if (apiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return apiRef;
 }

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -5,7 +5,7 @@ import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
 import type { GridApiCommon } from '../../models';
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 declare enum GridSignature {
     DataGrid = "DataGrid",

package/hooks/utils/useGridApiEventHandler.js

@@ -3,7 +3,7 @@ import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBase
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 var GridSignature = /*#__PURE__*/function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";

package/hooks/utils/useGridConfiguration.js

@@ -3,7 +3,7 @@ import { GridConfigurationContext } from "../../components/GridConfigurationCont
 export const useGridConfiguration = () => {
   const configuration = React.useContext(GridConfigurationContext);
   if (configuration === undefined) {
-    throw new Error(['MUI X: Could not find the data grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return configuration;
 };

package/hooks/utils/useGridPrivateApiContext.js

@@ -6,7 +6,7 @@ if (process.env.NODE_ENV !== 'production') {
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return privateApiRef;
 }

package/index.d.ts

@@ -27,10 +27,10 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, }
  */
 export type GridApi = GridApiCommunity;
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 export type GridState = GridStateCommunity;
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */
 export type GridInitialState = GridInitialStateCommunity;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.19.0
+ * @mui/x-data-grid v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -29,9 +29,9 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } f
  */
 
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */

package/joy/icons.js

@@ -34,7 +34,6 @@ function createSvgIcon(path, displayName) {
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return /*#__PURE__*/_jsx(SvgIcon, _extends({
-      "data-testid": `${displayName}Icon`,
       ref: ref,
       fill: "none",
       stroke: "currentColor",

package/locales/jaJP.js

@@ -47,9 +47,9 @@ const jaJPGrid = {
   filterPanelInputPlaceholder: '値を入力…',
   // Filter operators text
   filterOperatorContains: '...を含む',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '...を含まない',
   filterOperatorEquals: '...に等しい',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '...に等しくない',
   filterOperatorStartsWith: '...で始まる',
   filterOperatorEndsWith: '...で終わる',
   filterOperatorIs: '...である',
@@ -69,9 +69,9 @@ const jaJPGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '含む',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '含まない',
   headerFilterOperatorEquals: '等しい',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '等しくない',
   headerFilterOperatorStartsWith: 'で始まる',
   headerFilterOperatorEndsWith: 'で終わる',
   headerFilterOperatorIs: 'である',

package/models/api/gridApiCommunity.d.ts

@@ -5,7 +5,7 @@ import type { GridColumnReorderApi } from './gridColumnApi';
 import { GridRowProApi } from './gridRowApi';
 import { GridRowMultiSelectionApi } from './gridRowSelectionApi';
 /**
- * The api of `DataGrid`.
+ * The api of Data Grid.
  */
 export interface GridApiCommunity extends GridApiCommon<GridStateCommunity, GridInitialStateCommunity> {
 }

package/models/api/gridCoreApi.d.ts

@@ -61,9 +61,17 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      */
     mainElementRef: React.RefObject<HTMLDivElement>;
     /**
-     * The React ref of the grid virtual scroller container element.
+     * The React ref of the grid's virtual scroller container element.
      */
     virtualScrollerRef: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid's vertical virtual scrollbar container element.
+     */
+    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid's horizontal virtual scrollbar container element.
+     */
+    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid column container virtualized div element.
      */

package/models/api/gridFilterApi.d.ts

@@ -59,7 +59,7 @@ export interface GridFilterApi {
      */
     ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics'];
     /**
-     * Returns the filter state for the given filter model without applying it to the data grid.
+     * Returns the filter state for the given filter model without applying it to the Data Grid.
      * @param {GridFilterModel} filterModel The filter model to get the state for.
      * @returns {GridStateCommunity['filter']} The filter state.
      */

package/models/events/gridEventLookup.d.ts

@@ -92,6 +92,13 @@ export interface GridColumnHeaderEventLookup {
         params: GridColumnHeaderParams;
         event: React.MouseEvent<HTMLElement>;
     };
+    /**
+     * Fired when the user attempts to open a context menu in the column header.
+     */
+    columnHeaderContextMenu: {
+        params: GridColumnHeaderParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
     /**
      * Fired when a column header is double-clicked.
      */

package/models/gridStateCommunity.d.ts

@@ -7,7 +7,7 @@ import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFi
 import type { GridColumnResizeState } from '../hooks/features/columnResize';
 import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 export interface GridStateCommunity {
     isRtl: boolean;
@@ -34,7 +34,7 @@ export interface GridStateCommunity {
     rowSpanning: GridRowSpanningState;
 }
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */
 export interface GridInitialStateCommunity {
     pagination?: GridPaginationInitialState;