@mui/x-data-grid 7.18.0 → 7.19.0

package/locales/hrHR.js

@@ -7,50 +7,57 @@ const hrHRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Gustoća',
   toolbarDensityLabel: 'Gustoća',
-  toolbarDensityCompact: 'Kompaktan',
-  toolbarDensityStandard: 'Standard',
+  toolbarDensityCompact: 'Kompaktno',
+  toolbarDensityStandard: 'Standardno',
   toolbarDensityComfortable: 'Udobno',
   // Columns selector toolbar button text
   toolbarColumns: 'Stupci',
   toolbarColumnsLabel: 'Odaberite stupce',
   // Filters toolbar button text
   toolbarFilters: 'Filteri',
-  toolbarFiltersLabel: 'Prikaži filtre',
-  toolbarFiltersTooltipHide: 'Sakrij filtre',
-  toolbarFiltersTooltipShow: 'Prikaži filtre',
-  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
+  toolbarFiltersLabel: 'Prikaži filtere',
+  toolbarFiltersTooltipHide: 'Sakrij filtere',
+  toolbarFiltersTooltipShow: 'Prikaži filtere',
+  toolbarFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Traži…',
   toolbarQuickFilterLabel: 'traži',
-  toolbarQuickFilterDeleteIconLabel: 'Čisto',
+  toolbarQuickFilterDeleteIconLabel: 'Obriši',
   // Export selector toolbar button text
   toolbarExport: 'Izvoz',
   toolbarExportLabel: 'Izvoz',
   toolbarExportCSV: 'Preuzmi kao CSV',
-  toolbarExportPrint: 'Ispis',
-  toolbarExportExcel: 'Preuzmite kao Excel',
+  toolbarExportPrint: 'Štampaj',
+  toolbarExportExcel: 'Preuzmi kao Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Traži',
+  columnsManagementNoColumns: 'Nema stupaca',
+  columnsManagementShowHideAllText: 'Prikaži/Sakrij sve',
+  columnsManagementReset: 'Ponovno namjesti',
   // Filter panel text
-  filterPanelAddFilter: 'Dodajte filter',
-  filterPanelRemoveAll: 'Ukloniti sve',
-  filterPanelDeleteIconLabel: 'Izbrisati',
+  filterPanelAddFilter: 'Dodaj filter',
+  filterPanelRemoveAll: 'Ukloni sve',
+  filterPanelDeleteIconLabel: 'Obriši',
   filterPanelLogicOperator: 'Logički operator',
-  filterPanelOperator: 'Operater',
+  filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'I',
   filterPanelOperatorOr: 'Ili',
-  filterPanelColumns: 'Stupci',
+  filterPanelColumns: 'Stupac',
   filterPanelInputLabel: 'Vrijednost',
-  filterPanelInputPlaceholder: 'Vrijednost filtra',
+  filterPanelInputPlaceholder: 'Vrijednost filtera',
   // Filter operators text
   filterOperatorContains: 'sadrži',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'jednaki',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotContain: 'ne sadrži',
+  filterOperatorEquals: 'je jednak',
+  filterOperatorDoesNotEqual: 'nije jednak',
   filterOperatorStartsWith: 'počinje sa',
   filterOperatorEndsWith: 'završava sa',
   filterOperatorIs: 'je',
@@ -59,8 +66,8 @@ const hrHRGrid = {
   filterOperatorOnOrAfter: 'je na ili poslije',
   filterOperatorBefore: 'je prije',
   filterOperatorOnOrBefore: 'je na ili prije',
-  filterOperatorIsEmpty: 'prazno je',
-  filterOperatorIsNotEmpty: 'nije prazna',
+  filterOperatorIsEmpty: 'je prazno',
+  filterOperatorIsNotEmpty: 'nije prazno',
   filterOperatorIsAnyOf: 'je bilo koji od',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
@@ -70,20 +77,20 @@ const hrHRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Sadrži',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Ne sadrži',
   headerFilterOperatorEquals: 'Jednako',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nije jednako',
   headerFilterOperatorStartsWith: 'Počinje sa',
-  headerFilterOperatorEndsWith: 'Završava s',
+  headerFilterOperatorEndsWith: 'Završava sa',
   headerFilterOperatorIs: 'Je',
   headerFilterOperatorNot: 'Nije',
   headerFilterOperatorAfter: 'Je poslije',
   headerFilterOperatorOnOrAfter: 'Je uključeno ili poslije',
-  headerFilterOperatorBefore: 'Je li prije',
-  headerFilterOperatorOnOrBefore: 'Uključeno je ili prije',
-  headerFilterOperatorIsEmpty: 'Prazno je',
-  headerFilterOperatorIsNotEmpty: 'Nije prazna',
-  headerFilterOperatorIsAnyOf: 'Je li bilo koji od',
+  headerFilterOperatorBefore: 'Je prije',
+  headerFilterOperatorOnOrBefore: 'Je uključeno ili prije',
+  headerFilterOperatorIsEmpty: 'Je prazno',
+  headerFilterOperatorIsNotEmpty: 'Nije prazno',
+  headerFilterOperatorIsAnyOf: 'Je bilo koji od',
   'headerFilterOperator=': 'Jednako',
   'headerFilterOperator!=': 'Nije jednako',
   'headerFilterOperator>': 'Veći od',
@@ -92,32 +99,48 @@ const hrHRGrid = {
   'headerFilterOperator<=': 'Manje od ili jednako',
   // Filter values text
   filterValueAny: 'bilo koji',
-  filterValueTrue: 'pravi',
-  filterValueFalse: 'lažno',
+  filterValueTrue: 'tačno',
+  filterValueFalse: 'netačno',
   // Column menu text
-  columnMenuLabel: 'Jelovnik ',
+  columnMenuLabel: 'Izbornik',
   columnMenuShowColumns: 'Prikaži stupce',
   columnMenuManageColumns: 'Upravljanje stupcima',
-  columnMenuFilter: 'filtar',
+  columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Sakrij stupac',
   columnMenuUnsort: 'Poništi sortiranje',
   columnMenuSortAsc: 'Poredaj uzlazno',
-  columnMenuSortDesc: 'Poredaj silaznim redom',
+  columnMenuSortDesc: 'Poredaj silazno',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
-  columnHeaderFiltersLabel: 'Prikaži filtre',
-  columnHeaderSortIconLabel: 'Vrsta',
+  columnHeaderFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
+  columnHeaderFiltersLabel: 'Prikaži filtere',
+  columnHeaderSortIconLabel: 'Poredaj',
   // Rows selected footer text
-  footerRowSelected: count => count !== 1 ? `Odabrano je ${count.toLocaleString()} redaka` : `${count.toLocaleString()} redak odabran`,
+  footerRowSelected: count => {
+    if (count === 1) {
+      return `Odabran je ${count.toLocaleString()} redak`;
+    }
+    if (count < 5) {
+      return `Odabrana su ${count.toLocaleString()} retka`;
+    }
+    return `Odabrano je ${count.toLocaleString()} redaka`;
+  },
   // Total row amount footer text
   footerTotalRows: 'Ukupno redaka:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} od ${totalCount.toLocaleString()}`,
   // Checkbox selection text
-  checkboxSelectionHeaderName: 'Odabir potvrdnog okvira',
+  checkboxSelectionHeaderName: 'Odabir redaka',
   checkboxSelectionSelectAllRows: 'Odaberite sve retke',
   checkboxSelectionUnselectAllRows: 'Poništi odabir svih redaka',
-  checkboxSelectionSelectRow: 'Odaberite red',
+  checkboxSelectionSelectRow: 'Odaberite redak',
   checkboxSelectionUnselectRow: 'Poništi odabir retka',
   // Boolean cell text
   booleanCellTrueLabel: 'Da',
@@ -129,7 +152,7 @@ const hrHRGrid = {
   pinToRight: 'Prikvači desno',
   unpin: 'Otkvači',
   // Tree Data
-  treeDataGroupingHeaderName: 'Group',
+  treeDataGroupingHeaderName: 'Skupina',
   treeDataExpand: 'vidjeti djecu',
   treeDataCollapse: 'sakriti djecu',
   // Grouping columns
@@ -139,7 +162,7 @@ const hrHRGrid = {
   // Master/detail
   detailPanelToggle: 'Prebacivanje ploče s detaljima',
   expandDetailPanel: 'Proširiti',
-  collapseDetailPanel: 'Kolaps',
+  collapseDetailPanel: 'Skupiti',
   // Row reordering text
   rowReorderingHeaderName: 'Promjena redoslijeda',
   // Aggregation

package/locales/jaJP.js

@@ -33,8 +33,7 @@ const jaJPGrid = {
   columnsManagementSearchTitle: '検索',
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'リセット',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',

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

@@ -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.
@@ -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;
     /**
@@ -784,10 +790,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 will auto-select all its filtered descendants.
+     * - Deselecting a parent will auto-deselect all its filtered descendants.
+     *
+     * 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.
+     *
+     * Works with tree data and row grouping on the client-side only.
+     * @default { parents: false, descendants: false }
+     */
+    rowSelectionPropagation: GridRowSelectionPropagation;
 }
 export interface DataGridProSharedPropsWithoutDefaultValue {
     /**

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,
   /**

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/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));
 }

package/modern/components/panel/GridPanelWrapper.js

@@ -48,7 +48,7 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
-      className: clsx(className, classes.root),
+      className: clsx(classes.root, className),
       ownerState: rootProps
     }, other))
   }));

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -93,7 +93,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"