@mui/x-data-grid 7.18.0 → 7.20.0

package/locales/jaJP.js

@@ -33,8 +33,7 @@ const jaJPGrid = {
   columnsManagementSearchTitle: '検索',
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'リセット',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',
@@ -48,9 +47,9 @@ const jaJPGrid = {
   filterPanelInputPlaceholder: '値を入力…',
   // Filter operators text
   filterOperatorContains: '...を含む',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '...を含まない',
   filterOperatorEquals: '...に等しい',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '...に等しくない',
   filterOperatorStartsWith: '...で始まる',
   filterOperatorEndsWith: '...で終わる',
   filterOperatorIs: '...である',
@@ -70,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/locales/ptPT.d.ts

@@ -1 +1 @@
-export declare const ptPT: import("../utils/getGridLocalization").Localization;
+export declare const ptPT: import("../internals").Localization;

package/locales/ptPT.js

@@ -47,9 +47,9 @@ const ptPTGrid = {
   filterPanelInputPlaceholder: 'Valor do filtro',
   // Filter operators text
   filterOperatorContains: 'contém',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'não contém',
   filterOperatorEquals: 'é igual a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'não é igual a',
   filterOperatorStartsWith: 'começa com',
   filterOperatorEndsWith: 'termina com',
   filterOperatorIs: 'é',
@@ -69,9 +69,9 @@ const ptPTGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contém',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Não contém',
   headerFilterOperatorEquals: 'É igual a',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Não é igual',
   headerFilterOperatorStartsWith: 'Começa com',
   headerFilterOperatorEndsWith: 'Termina com',
   headerFilterOperatorIs: 'É',

package/locales/viVN.js

@@ -46,21 +46,21 @@ const viVNGrid = {
   filterPanelInputLabel: 'Giá trị',
   filterPanelInputPlaceholder: 'Lọc giá trị',
   // Filter operators text
-  filterOperatorContains: 'Chứa',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'Bằng',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'Bắt đầu bằng',
-  filterOperatorEndsWith: 'Kết thúc bằng',
-  filterOperatorIs: 'Là',
-  filterOperatorNot: 'Không là',
-  filterOperatorAfter: 'Trước',
+  filterOperatorContains: 'chứa',
+  filterOperatorDoesNotContain: 'không chứa',
+  filterOperatorEquals: 'bằng',
+  filterOperatorDoesNotEqual: 'không bằng',
+  filterOperatorStartsWith: 'bắt đầu với',
+  filterOperatorEndsWith: 'kết thúc với',
+  filterOperatorIs: 'là',
+  filterOperatorNot: 'không phải là',
+  filterOperatorAfter: 'sau',
   filterOperatorOnOrAfter: 'bằng hoặc sau',
-  filterOperatorBefore: 'Sau',
+  filterOperatorBefore: 'trước',
   filterOperatorOnOrBefore: 'bằng hoặc trước',
-  filterOperatorIsEmpty: 'Rỗng',
-  filterOperatorIsNotEmpty: 'Khác rỗng',
-  filterOperatorIsAnyOf: 'Bất kỳ',
+  filterOperatorIsEmpty: 'rỗng',
+  filterOperatorIsNotEmpty: 'khác rỗng',
+  filterOperatorIsAnyOf: 'là một trong',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
   'filterOperator>': '>',
@@ -69,20 +69,20 @@ const viVNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Chứa',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Không chứa',
   headerFilterOperatorEquals: 'Bằng',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Không bằng',
   headerFilterOperatorStartsWith: 'Bắt đầu với',
   headerFilterOperatorEndsWith: 'Kết thúc với',
-  headerFilterOperatorIs: 'là',
-  headerFilterOperatorNot: 'Không là',
+  headerFilterOperatorIs: 'Là',
+  headerFilterOperatorNot: 'Không phải là',
   headerFilterOperatorAfter: 'Sau',
-  headerFilterOperatorOnOrAfter: 'Đang hoặc sau',
+  headerFilterOperatorOnOrAfter: 'Bằng hoặc sau',
   headerFilterOperatorBefore: 'Trước',
-  headerFilterOperatorOnOrBefore: 'Đang hoặc trước',
+  headerFilterOperatorOnOrBefore: 'Bằng hoặc trước',
   headerFilterOperatorIsEmpty: 'Rỗng',
   headerFilterOperatorIsNotEmpty: 'Khác rỗng',
-  headerFilterOperatorIsAnyOf: 'Bất kỳ',
+  headerFilterOperatorIsAnyOf: 'Là một trong',
   'headerFilterOperator=': 'Bằng',
   'headerFilterOperator!=': 'Khác',
   'headerFilterOperator>': 'Lớn hơn',

package/locales/zhHK.d.ts

@@ -1 +1 @@
-export declare const zhHK: import("../utils/getGridLocalization").Localization;
+export declare const zhHK: import("../internals").Localization;

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/gridRowSelectionModel.d.ts

@@ -1,3 +1,7 @@
 import { GridRowId } from './gridRows';
+export type GridRowSelectionPropagation = {
+    descendants?: boolean;
+    parents?: boolean;
+};
 export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
 export type GridRowSelectionModel = readonly GridRowId[];

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;

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';
@@ -26,6 +26,7 @@ import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
 import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 import type { GridDataSource } from '../gridDataSource';
+import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
 export interface GridExperimentalFeatures {
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -34,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 {
     /**
@@ -66,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
@@ -75,6 +76,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
     /**
      * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
      * @default false
+     * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+     * @example
+     * <div style={{ display: 'flex', flexDirection: 'column' }}>
+     *   <DataGrid />
+     * </div>
      */
     autoHeight: boolean;
     /**
@@ -364,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 {
     /**
@@ -509,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]].
@@ -744,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.
@@ -784,10 +799,23 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
 }
 export interface DataGridProSharedPropsWithDefaultValue {
     /**
-     * If `true`, enables the data grid filtering on header feature.
+     * If `true`, the header filters feature is enabled.
      * @default false
      */
     headerFilters: boolean;
+    /**
+     * When `rowSelectionPropagation.descendants` is set to `true`.
+     * - Selecting a parent selects all its filtered descendants automatically.
+     * - Deselecting a parent row deselects all its filtered descendants automatically.
+     *
+     * 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 }
+     */
+    rowSelectionPropagation: GridRowSelectionPropagation;
 }
 export interface DataGridProSharedPropsWithoutDefaultValue {
     /**
@@ -804,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

@@ -73,6 +73,11 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: PropTypes.bool,
   /**
@@ -433,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]].
@@ -650,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/cell/GridCell.js

@@ -118,11 +118,11 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
-    } catch (e) {
-      if (e instanceof MissingRowIdError) {
+    } catch (error) {
+      if (error instanceof MissingRowIdError) {
         return EMPTY_CELL_PARAMS;
       }
-      throw e;
+      throw error;
     }
   }, objectShallowCompare);
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
@@ -255,10 +255,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     return /*#__PURE__*/_jsx("div", {
       "data-colindex": colIndex,
       role: "presentation",
-      style: _extends({}, style, {
-        minWidth: 'var(--width)',
-        maxWidth: 'var(--width)'
-      })
+      style: _extends({
+        width: 'var(--width)'
+      }, style)
     });
   }
   if (cellParams === EMPTY_CELL_PARAMS) {
@@ -315,7 +314,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   };
   return /*#__PURE__*/_jsx("div", _extends({
     ref: handleRef,
-    className: clsx(className, classNames, classes.root),
+    className: clsx(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
     "data-colindex": colIndex,

package/modern/components/columnHeaders/GridBaseColumnHeaders.js

@@ -36,7 +36,7 @@ export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
     role: "presentation"

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/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
+const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { getCheckboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -21,7 +23,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const {
       field,
       id,
-      value: isChecked,
       rowNode,
       hasFocus,
       tabIndex
@@ -69,21 +70,28 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       event.stopPropagation();
     }
   }, []);
+  const isSelectable = apiRef.current.isRowSelectable(id);
+  const checkboxPropsSelector = getCheckboxPropsSelector(id, rootProps.rowSelectionPropagation?.parents ?? false);
+  const {
+    isIndeterminate,
+    isChecked
+  } = useGridSelector(apiRef, checkboxPropsSelector);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
-  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,
-    checked: isChecked,
+    checked: checked,
     onChange: handleChange,
     className: classes.root,
     inputProps: {
       'aria-label': label
     },
     onKeyDown: handleKeyDown,
+    indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
   }, rootProps.slotProps?.baseCheckbox, other));

package/modern/components/containers/GridRoot.js

@@ -46,7 +46,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   }
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: ownerState
   }, other));
 });

package/modern/components/containers/GridRootStyles.js

@@ -170,14 +170,28 @@ export const GridRootStyles = styled('div', {
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
+  const selectedHoverOpacity = t.vars ? `calc(${hoverOpacity} + ${selectedOpacity})` // TODO: Improve type
+  : hoverOpacity + selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : alpha(t.palette.primary.main, selectedOpacity);
-  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} +
-                ${t.vars.palette.action.hoverOpacity}
-              ))` : alpha(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
-  const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = t.vars ? selectedBackground : blend(pinnedBackground, selectedBackground, selectedOpacity);
-  const pinnedSelectedHoverBackground = t.vars ? hoverColor : blend(pinnedSelectedBackground, hoverColor, hoverOpacity);
+  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})` : alpha(t.palette.primary.main, selectedHoverOpacity);
+  const blendFn = t.vars ? blendCssVars : blend;
+  const getPinnedBackgroundStyles = backgroundColor => ({
+    [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
+      backgroundColor,
+      '&.Mui-selected': {
+        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
+        '&:hover': {
+          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity)
+        }
+      }
+    }
+  });
+  const pinnedBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedBackgroundColor);
+  const pinnedSelectedBackgroundColor = blendFn(pinnedBackground, selectedBackground, selectedOpacity);
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackgroundColor);
+  const pinnedSelectedHoverBackgroundColor = blendFn(pinnedBackground, selectedHoverBackground, selectedHoverOpacity);
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackgroundColor);
   const selectedStyles = {
     backgroundColor: selectedBackground,
     '&:hover': {
@@ -617,24 +631,15 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: 'var(--DataGrid-pinnedBackground)',
+      '&.Mui-selected': {
+        backgroundColor: pinnedSelectedBackgroundColor
+      }
     },
     [`& .${c.virtualScrollerContent} .${c.row}`]: {
-      '&:hover': {
-        [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedHoverBackground
-        }
-      },
-      [`&.Mui-selected`]: {
-        [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedSelectedBackground
-        },
-        '&:hover': {
-          [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
-            backgroundColor: pinnedSelectedHoverBackground
-          }
-        }
-      }
+      '&:hover': pinnedHoverStyles,
+      '&.Mui-selected': pinnedSelectedStyles,
+      '&.Mui-selected:hover': pinnedSelectedHoverStyles
     },
     [`& .${c.cellOffsetLeft}`]: {
       flex: '0 0 auto',
@@ -747,4 +752,8 @@ function blend(background, overlay, opacity, gamma = 1) {
     type: 'rgb',
     values: rgb
   });
+}
+const removeOpacity = color => `rgb(from ${color} r g b / 1)`;
+function blendCssVars(background, overlay, opacity) {
+  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
 }

package/modern/components/containers/GridToolbarContainer.js

@@ -44,7 +44,7 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
   }
   return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
     ref: ref,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
     children: children

package/modern/components/menu/GridMenu.js

@@ -85,7 +85,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps,
     open: open,
     anchorEl: target,

package/modern/components/panel/GridPanel.js

@@ -84,7 +84,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
     ref: ref,
     placement: "bottom-start",
-    className: clsx(className, classes.panel),
+    className: clsx(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers

package/modern/components/panel/GridPanelContent.js

@@ -37,7 +37,7 @@ function GridPanelContent(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/modern/components/panel/GridPanelFooter.js

@@ -37,7 +37,7 @@ function GridPanelFooter(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/modern/components/panel/GridPanelHeader.js

@@ -35,7 +35,7 @@ function GridPanelHeader(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }