@mui/x-data-grid 7.19.0 → 7.20.0

package/models/props/DataGridProps.d.ts

@@ -8,7 +8,7 @@ import { GridFeatureMode } from '../gridFeatureMode';
 import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
-import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
+import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
 import { GridEventListener } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
@@ -35,25 +35,25 @@ export interface GridExperimentalFeatures {
     warnIfFocusStateIsNotSynced: boolean;
 }
 /**
- * The props users can give to the `DataGrid` component.
+ * The props users can give to the Data Grid component.
  */
 export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues<R>> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
     pagination?: true;
 };
 /**
- * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
+ * The props of the Data Grid component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
 export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
 /**
- * The `DataGrid` options with a default value that must be merged with the value given through props.
+ * The Data Grid options with a default value that must be merged with the value given through props.
  */
 export interface DataGridPropsWithComplexDefaultValueAfterProcessing {
     slots: GridSlotsComponent;
     localeText: GridLocaleText;
 }
 /**
- * The `DataGrid` options with a default value that must be merged with the value given through props.
+ * The Data Grid options with a default value that must be merged with the value given through props.
  */
 export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     /**
@@ -67,7 +67,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     localeText?: Partial<GridLocaleText>;
 }
 /**
- * The `DataGrid` options with a default value overridable through props
+ * The Data Grid options with a default value overridable through props
  * None of the entry of this interface should be optional, they all have default values and `DataGridProps` already applies a `Partial<DataGridSimpleOptions>` for the public interface
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  * TODO: add multiSortKey
@@ -370,7 +370,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
     unstable_rowSpanning: boolean;
 }
 /**
- * The `DataGrid` props with no default value.
+ * The Data Grid props with no default value.
  */
 export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends CommonProps {
     /**
@@ -515,6 +515,12 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onColumnHeaderClick?: GridEventListener<'columnHeaderClick'>;
+    /**
+     * 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?: GridEventListener<'columnHeaderContextMenu'>;
     /**
      * Callback fired when a double click event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -750,9 +756,12 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @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?: (newRow: R, oldRow: R) => Promise<R> | R;
+    processRowUpdate?: (newRow: R, oldRow: R, params: {
+        rowId: GridRowId;
+    }) => Promise<R> | R;
     /**
      * Callback called when `processRowUpdate` throws an error or rejects.
      * @param {any} error The error thrown.
@@ -796,12 +805,12 @@ export interface DataGridProSharedPropsWithDefaultValue {
     headerFilters: boolean;
     /**
      * When `rowSelectionPropagation.descendants` is set to `true`.
-     * - Selecting a parent will auto-select all its filtered descendants.
-     * - Deselecting a parent will auto-deselect all its filtered descendants.
+     * - Selecting a parent selects all its filtered descendants automatically.
+     * - Deselecting a parent row deselects all its filtered descendants automatically.
      *
-     * When `rowSelectionPropagation.parents=true`
-     * - Selecting all descendants of a parent would auto-select it.
-     * - Deselecting a descendant of a selected parent would deselect the parent.
+     * When `rowSelectionPropagation.parents` is set to `true`
+     * - Selecting all the filtered descendants of a parent selects the parent automatically.
+     * - Deselecting a descendant of a selected parent deselects the parent automatically.
      *
      * Works with tree data and row grouping on the client-side only.
      * @default { parents: false, descendants: false }
@@ -823,7 +832,7 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
     cellSelection: boolean;
 }
 /**
- * The props of the `DataGrid` component after the pre-processing phase.
+ * The props of the Data Grid component after the pre-processing phase.
  */
 export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {
 }

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/utils/domUtils.js

@@ -187,7 +187,7 @@ export function findGridCells(api, field) {
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
-  // Use > to ignore rows from nested data grids (for example in detail panel)
+  // Use > to ignore rows from nested Data Grids (for example in detail panel)
   `:scope > div > div > .${gridClasses.row}`);
 }
 function parseCellColIndex(col) {

package/node/DataGrid/DataGrid.js

@@ -445,6 +445,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: _propTypes.default.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.default.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -662,6 +668,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.default.func,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -100,6 +100,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/node/hooks/core/useGridRefs.js

@@ -10,6 +10,8 @@ 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
@@ -17,6 +19,8 @@ const useGridRefs = apiRef => {
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    virtualScrollbarVerticalRef,
+    virtualScrollbarHorizontalRef,
     columnHeadersContainerRef
   });
 };

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -248,11 +248,11 @@ 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/node/hooks/features/editing/useGridCellEditing.js

@@ -332,7 +332,9 @@ 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/node/hooks/features/editing/useGridRowEditing.js

@@ -405,7 +405,9 @@ 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/node/hooks/features/events/useGridEvents.js

@@ -11,6 +11,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
  */
 function useGridEvents(apiRef, props) {
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

package/node/hooks/features/filter/gridFilterUtils.js

@@ -49,7 +49,7 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.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');
+      (0, _warning.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/node/hooks/features/rowSelection/utils.js

@@ -52,21 +52,21 @@ 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/node/hooks/features/rows/gridRowsUtils.js

@@ -38,7 +38,7 @@ const buildRootGroup = () => ({
 exports.buildRootGroup = buildRootGroup;
 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'));
   }
 }
 const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {

package/node/hooks/features/rows/useGridRowSpanning.js

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