@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/legacy/components/containers/GridRootStyles.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { alpha, styled, darken, lighten } from '@mui/material/styles';
-import { gridClasses } from '../../constants/gridClasses';
+import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '@mui/material/styles';
+import { gridClasses as c } from '../../constants/gridClasses';
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -11,14 +11,14 @@ function getBorderColor(theme) {
   }
   return darken(alpha(theme.palette.divider, 1), 0.68);
 }
-var columnHeadersStyles = _defineProperty({}, ".".concat(gridClasses.columnSeparator, ", .").concat(gridClasses['columnSeparator--resizing']), {
+var columnHeadersStyles = _defineProperty({}, ".".concat(c.columnSeparator, ", .").concat(c['columnSeparator--resizing']), {
   visibility: 'visible',
   width: 'auto'
 });
-var columnHeaderStyles = _defineProperty(_defineProperty({}, "& .".concat(gridClasses.iconButtonContainer), {
+var columnHeaderStyles = _defineProperty(_defineProperty({}, "& .".concat(c.iconButtonContainer), {
   visibility: 'visible',
   width: 'auto'
-}), "& .".concat(gridClasses.menuIcon), {
+}), "& .".concat(c.menuIcon), {
   width: 'auto',
   visibility: 'visible'
 });
@@ -26,19 +26,57 @@ export var GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
-    return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "&.".concat(gridClasses.autosizing), styles.autosizing), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    return [_defineProperty({}, "&.".concat(c.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(c.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(c['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(c['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(c['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(c.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(c['root--disableUserSelection'], " .").concat(c.cell), styles['root--disableUserSelection']), _defineProperty({}, "&.".concat(c.autosizing), styles.autosizing), _defineProperty({}, "& .".concat(c.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(c['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(c['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(c['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(c['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
+    _defineProperty({}, "& .".concat(c['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(c.cell), styles.cell), _defineProperty({}, "& .".concat(c['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(c['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(c['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(c['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(c['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(c.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(c.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(c.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(c.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(c['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(c['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(c['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(c['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(c['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(c['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(c['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(c['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(c['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(c.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(c.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(c.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(c.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(c.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(c['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(c['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(c.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(c.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(c.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(c.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(c.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(c.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(c.menuList), styles.menuList), _defineProperty({}, "& .".concat(c['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(c['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(c['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(c.row), styles.row), _defineProperty({}, "& .".concat(c.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(c.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(c['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(c.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(c.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(c.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(c.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(c.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(c['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
 })(function (_ref61) {
   var _extends2;
-  var theme = _ref61.theme;
-  var borderColor = getBorderColor(theme);
-  var radius = theme.shape.borderRadius;
+  var t = _ref61.theme;
+  var borderColor = getBorderColor(t);
+  var radius = t.shape.borderRadius;
+  var containerBackground = t.vars ? t.vars.palette.background.default : t.palette.background.default;
+  var pinnedBackground = containerBackground;
+  var overlayBackground = t.vars ? "rgba(".concat(t.vars.palette.background.defaultChannel, " / ").concat(t.vars.palette.action.disabledOpacity, ")") : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
+  var hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
+  var hoverColor = (t.vars || t).palette.action.hover;
+  var selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
+  var selectedBackground = t.vars ? "rgba(".concat(t.vars.palette.primary.mainChannel, " / ").concat(selectedOpacity, ")") : alpha(t.palette.primary.main, selectedOpacity);
+  var selectedHoverBackground = t.vars ? "rgba(".concat(t.vars.palette.primary.mainChannel, " / calc(\n                ").concat(t.vars.palette.action.selectedOpacity, " + \n                ").concat(t.vars.palette.action.hoverOpacity, "\n              ))") : alpha(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
+  var pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
+  var pinnedSelectedBackground = t.vars ? selectedBackground : blend(pinnedBackground, selectedBackground, selectedOpacity);
+  var pinnedSelectedHoverBackground = t.vars ? hoverColor : blend(pinnedSelectedBackground, hoverColor, hoverOpacity);
+  var selectedStyles = {
+    backgroundColor: selectedBackground,
+    '&:hover': {
+      backgroundColor: selectedHoverBackground,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: selectedBackground
+      }
+    }
+  };
   var gridStyle = _extends({
     '--unstable_DataGrid-radius': typeof radius === 'number' ? "".concat(radius, "px") : radius,
-    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
-    '--unstable_DataGrid-overlayBackground': theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(theme.vars.palette.action.disabledOpacity, ")") : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': overlayBackground,
+    '--DataGrid-containerBackground': containerBackground,
+    '--DataGrid-pinnedBackground': pinnedBackground,
+    '--DataGrid-rowBorderColor': borderColor,
     '--DataGrid-cellOffsetMultiplier': 2,
+    '--DataGrid-width': '0px',
+    '--DataGrid-hasScrollX': '0',
+    '--DataGrid-hasScrollY': '0',
+    '--DataGrid-offsetTop': '0px',
+    '--DataGrid-offsetLeft': '0px',
+    '--DataGrid-scrollbarSize': '10px',
+    '--DataGrid-rowWidth': '0px',
+    '--DataGrid-columnsTotalWidth': '0px',
+    '--DataGrid-leftPinnedWidth': '0px',
+    '--DataGrid-rightPinnedWidth': '0px',
+    '--DataGrid-headerHeight': '0px',
+    '--DataGrid-headersTotalHeight': '0px',
+    '--DataGrid-topContainerHeight': '0px',
+    '--DataGrid-bottomContainerHeight': '0px',
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
@@ -46,8 +84,8 @@ export var GridRootStyles = styled('div', {
     borderStyle: 'solid',
     borderColor: borderColor,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    color: (theme.vars || theme).palette.text.primary
-  }, theme.typography.body2, (_extends2 = {
+    color: (t.vars || t).palette.text.primary
+  }, t.typography.body2, (_extends2 = {
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -56,45 +94,45 @@ export var GridRootStyles = styled('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflowAnchor: 'none'
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, ".".concat(c.main, " > *:first-of-type"), {
+    borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+    borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
+  }), "&.".concat(c.autoHeight), {
     height: 'auto'
-  }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderBottomColor: 'transparent'
-  })), "&.".concat(gridClasses.autosizing), _defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
+  }), "&.".concat(c.autosizing), _defineProperty(_defineProperty({}, "& .".concat(c.columnHeaderTitleContainerContent, " > *"), {
     overflow: 'visible !important'
-  }), "& .".concat(gridClasses.cell, " > *"), {
+  }), "& .".concat(c.cell, " > *"), {
     overflow: 'visible !important',
     whiteSpace: 'nowrap'
-  })), "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderBottomColor: 'transparent'
-  }), "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
+  })), "& .".concat(c.columnHeader, ", & .").concat(c.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,
     padding: '0 10px',
     boxSizing: 'border-box'
-  }), "& .".concat(gridClasses.columnHeader, ":focus-within, & .").concat(gridClasses.cell, ":focus-within"), {
-    outline: "solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / 0.5)") : alpha(theme.palette.primary.main, 0.5), " 1px"),
+  }), "& .".concat(c.columnHeader, ":focus-within, & .").concat(c.cell, ":focus-within"), {
+    outline: "solid ".concat(t.vars ? "rgba(".concat(t.vars.palette.primary.mainChannel, " / 0.5)") : alpha(t.palette.primary.main, 0.5), " 1px"),
     outlineWidth: 1,
     outlineOffset: -1
-  }), "& .".concat(gridClasses.columnHeader, ":focus, & .").concat(gridClasses.cell, ":focus"), {
-    outline: "solid ".concat(theme.palette.primary.main, " 1px")
-  }), "& .".concat(gridClasses.columnHeaderCheckbox, ", & .").concat(gridClasses.cellCheckbox), {
+  }), "& .".concat(c.columnHeader, ":focus, & .").concat(c.cell, ":focus"), {
+    outline: "solid ".concat(t.palette.primary.main, " 1px")
+  }), "& .".concat(c.columnHeaderCheckbox, ", & .").concat(c.cellCheckbox), {
     padding: 0,
     justifyContent: 'center',
     alignItems: 'center'
-  }), "& .".concat(gridClasses.columnHeader), {
+  }), "& .".concat(c.columnHeader), {
     position: 'relative',
     display: 'flex',
-    alignItems: 'center'
-  }), "& .".concat(gridClasses['columnHeader--sorted'], " .").concat(gridClasses.iconButtonContainer, ", & .").concat(gridClasses['columnHeader--filtered'], " .").concat(gridClasses.iconButtonContainer), {
+    alignItems: 'center',
+    overflow: 'hidden'
+  }), "& .".concat(c['columnHeader--sorted'], " .").concat(c.iconButtonContainer, ", & .").concat(c['columnHeader--filtered'], " .").concat(c.iconButtonContainer), {
     visibility: 'visible',
     width: 'auto'
-  }), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], ") .").concat(gridClasses.sortIcon), {
+  }), "& .".concat(c.columnHeader, ":not(.").concat(c['columnHeader--sorted'], ") .").concat(c.sortIcon), {
     opacity: 0,
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.shorter
+    transition: t.transitions.create(['opacity'], {
+      duration: t.transitions.duration.shorter
     })
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainer), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c.columnHeaderTitleContainer), {
     display: 'flex',
     alignItems: 'center',
     minWidth: 0,
@@ -103,39 +141,37 @@ export var GridRootStyles = styled('div', {
     overflow: 'hidden',
     // to anchor the aggregation label
     position: 'relative'
-  }), "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
+  }), "& .".concat(c.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center'
-  }), "& .".concat(gridClasses['columnHeader--filledGroup'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(c['columnHeader--filledGroup'], " .").concat(c.columnHeaderTitleContainer), {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
-  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(c['columnHeader--filledGroup'], ".").concat(c['columnHeader--showColumnBorder'], " .").concat(c.columnHeaderTitleContainer), {
     borderBottom: "none"
-  }), "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder']), {
+  }), "& .".concat(c['columnHeader--filledGroup'], ".").concat(c['columnHeader--showColumnBorder']), {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
-  }), "& .".concat(gridClasses.headerFilterRow), {
-    borderTop: "1px solid ".concat(borderColor)
-  }), "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
+  }), "& .".concat(c.sortIcon, ", & .").concat(c.filterIcon), {
     fontSize: 'inherit'
-  }), "& .".concat(gridClasses['columnHeader--sortable']), {
+  }), "& .".concat(c['columnHeader--sortable']), {
     cursor: 'pointer'
-  }), "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(c['columnHeader--alignCenter'], " .").concat(c.columnHeaderTitleContainer), {
     justifyContent: 'center'
-  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderDraggableContainer, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+  }), "& .".concat(c['columnHeader--alignRight'], " .").concat(c.columnHeaderDraggableContainer, ", & .").concat(c['columnHeader--alignRight'], " .").concat(c.columnHeaderTitleContainer), {
     flexDirection: 'row-reverse'
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--alignCenter'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+  }), "& .".concat(c['columnHeader--alignCenter'], " .").concat(c.menuIcon, ", & .").concat(c['columnHeader--alignRight'], " .").concat(c.menuIcon), {
     marginRight: 'auto',
     marginLeft: -6
-  }), "& .".concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon, ", & .").concat(gridClasses['columnHeader--alignRight'], " .").concat(gridClasses.menuIcon), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c['columnHeader--alignRight'], " .").concat(c.menuIcon, ", & .").concat(c['columnHeader--alignRight'], " .").concat(c.menuIcon), {
     marginRight: 'auto',
     marginLeft: -10
-  }), "& .".concat(gridClasses['columnHeader--moving']), {
-    backgroundColor: (theme.vars || theme).palette.action.hover
-  }), "& .".concat(gridClasses.columnSeparator), {
+  }), "& .".concat(c['columnHeader--moving']), {
+    backgroundColor: (t.vars || t).palette.action.hover
+  }), "& .".concat(c.columnSeparator), {
     visibility: 'hidden',
     position: 'absolute',
     zIndex: 100,
@@ -143,172 +179,214 @@ export var GridRootStyles = styled('div', {
     flexDirection: 'column',
     justifyContent: 'center',
     color: borderColor
-  }), '@media (hover: hover)', _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders, ":hover"), columnHeadersStyles), "& .".concat(gridClasses.columnHeader, ":hover"), columnHeaderStyles), "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
+  }), "& .".concat(c.columnHeaders), {
+    width: 'var(--DataGrid-rowWidth)'
+  }), '@media (hover: hover)', _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(c.columnHeaders, ":hover"), columnHeadersStyles), "& .".concat(c.columnHeader, ":hover"), columnHeaderStyles), "& .".concat(c.columnHeader, ":not(.").concat(c['columnHeader--sorted'], "):hover .").concat(c.sortIcon), {
     opacity: 0.5
-  })), '@media (hover: none)', _defineProperty(_defineProperty({}, "& .".concat(gridClasses.columnHeaders), columnHeadersStyles), "& .".concat(gridClasses.columnHeader), columnHeaderStyles)), "& .".concat(gridClasses['columnSeparator--sideLeft']), {
+  })), '@media (hover: none)', _defineProperty(_defineProperty({}, "& .".concat(c.columnHeaders), columnHeadersStyles), "& .".concat(c.columnHeader), columnHeaderStyles)), "& .".concat(c['columnSeparator--sideLeft']), {
     left: -12
-  }), "& .".concat(gridClasses['columnSeparator--sideRight']), {
+  }), "& .".concat(c['columnSeparator--sideRight']), {
     right: -12
-  }), "& .".concat(gridClasses['columnSeparator--resizable']), _defineProperty(_defineProperty({
+  }), "& .".concat(c['columnSeparator--resizable']), _defineProperty(_defineProperty({
     cursor: 'col-resize',
     touchAction: 'none',
     '&:hover': {
-      color: (theme.vars || theme).palette.text.primary,
+      color: (t.vars || t).palette.text.primary,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         color: borderColor
       }
     }
-  }, "&.".concat(gridClasses['columnSeparator--resizing']), {
-    color: (theme.vars || theme).palette.text.primary
+  }, "&.".concat(c['columnSeparator--resizing']), {
+    color: (t.vars || t).palette.text.primary
   }), '& svg', {
     pointerEvents: 'none'
-  })), "& .".concat(gridClasses.iconSeparator), {
+  })), "& .".concat(c.iconSeparator), {
     color: 'inherit'
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c.menuIcon), {
     width: 0,
     visibility: 'hidden',
     fontSize: 20,
     marginRight: -10,
     display: 'flex',
     alignItems: 'center'
-  }), ".".concat(gridClasses.menuOpen), {
+  }), ".".concat(c.menuOpen), {
     visibility: 'visible',
     width: 'auto'
-  }), "& .".concat(gridClasses.row), {
+  }), "& .".concat(c.headerFilterRow), _defineProperty({}, "& .".concat(c.columnHeader), {
+    boxSizing: 'border-box',
+    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  })), ".".concat(c.row), _defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
-    width: 'fit-content',
+    width: 'var(--DataGrid-rowWidth)',
     breakInside: 'avoid',
     // Avoid the row to be broken in two different print pages.
-    '&:hover, &.Mui-hovered': {
-      backgroundColor: (theme.vars || theme).palette.action.hover,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    },
-    '&.Mui-selected': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      '&:hover, &.Mui-hovered': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(\n                ").concat(theme.vars.palette.action.selectedOpacity, " + \n                ").concat(theme.vars.palette.action.hoverOpacity, "\n              ))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-        }
-      }
+
+    '--rowBorderColor': 'var(--DataGrid-rowBorderColor)'
+  }, "&.".concat(c['row--firstVisible']), {
+    '--rowBorderColor': 'transparent'
+  }), '&:hover', {
+    backgroundColor: (t.vars || t).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  }), '&.Mui-selected', selectedStyles)), "& .".concat(c['container--top'], ", & .").concat(c['container--bottom']), _defineProperty({
+    '[role=row]': {
+      background: 'var(--DataGrid-containerBackground)'
     }
-  }), "& .".concat(gridClasses.cell), {
+  }, ".".concat(c.pinnedColumnHeaders, " [role=row]"), {
+    background: 'var(--DataGrid-pinnedBackground)'
+  })), "& .".concat(c.cell), {
     display: 'flex',
     alignItems: 'center',
-    borderBottom: '1px solid',
-    '&.Mui-selected': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      '&:hover, &.Mui-hovered': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-        }
-      }
-    }
-  }), "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), {
+    height: 'var(--height)',
+    minWidth: 'var(--width)',
+    maxWidth: 'var(--width)',
+    '--width': '0px',
+    '--height': '0px',
+    boxSizing: 'border-box',
+    borderTop: "1px solid var(--rowBorderColor)",
+    '&.Mui-selected': selectedStyles
+  }), "& .".concat(c['virtualScrollerContent--overflowed'], " .").concat(c['row--lastVisible'], " .").concat(c.cell), {
+    borderTopColor: 'transparent'
+  }), "&.".concat(c['root--disableUserSelection'], " .").concat(c.cell), {
     userSelect: 'none'
-  }), "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
+  }), "& .".concat(c.row, ":not(.").concat(c['row--dynamicHeight'], ") > .").concat(c.cell), {
     overflow: 'hidden',
     whiteSpace: 'nowrap'
-  }), "& .".concat(gridClasses.cellContent), {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--selectionMode']), {
+  }), "& .".concat(c.cellEmpty), {
+    padding: 0
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c.cell, ".").concat(c['cell--selectionMode']), {
     cursor: 'default'
-  }), "& .".concat(gridClasses.cell, ".").concat(gridClasses['cell--editing']), {
+  }), "& .".concat(c.cell, ".").concat(c['cell--editing']), {
     padding: 1,
     display: 'flex',
-    boxShadow: theme.shadows[2],
-    backgroundColor: (theme.vars || theme).palette.background.paper,
+    boxShadow: t.shadows[2],
+    backgroundColor: (t.vars || t).palette.background.paper,
     '&:focus-within': {
-      outline: "solid ".concat((theme.vars || theme).palette.primary.main, " 1px"),
+      outline: "solid ".concat((t.vars || t).palette.primary.main, " 1px"),
       outlineOffset: '-1px'
     }
-  }), "& .".concat(gridClasses['row--editing']), {
-    boxShadow: theme.shadows[2]
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['row--editing'], " .").concat(gridClasses.cell), {
-    boxShadow: theme.shadows[0],
-    backgroundColor: (theme.vars || theme).palette.background.paper
-  }), "& .".concat(gridClasses.editBooleanCell), {
+  }), "& .".concat(c.cellContent), {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }), "& .".concat(c['row--editing']), {
+    boxShadow: t.shadows[2]
+  }), "& .".concat(c['row--editing'], " .").concat(c.cell), {
+    boxShadow: t.shadows[0],
+    backgroundColor: (t.vars || t).palette.background.paper
+  }), "& .".concat(c.editBooleanCell), {
     display: 'flex',
     height: '100%',
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
-  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"true\"]"), {
-    color: (theme.vars || theme).palette.text.secondary
-  }), "& .".concat(gridClasses.booleanCell, "[data-value=\"false\"]"), {
-    color: (theme.vars || theme).palette.text.disabled
-  }), "& .".concat(gridClasses.actionsCell), {
+  }), "& .".concat(c.booleanCell, "[data-value=\"true\"]"), {
+    color: (t.vars || t).palette.text.secondary
+  }), "& .".concat(c.booleanCell, "[data-value=\"false\"]"), {
+    color: (t.vars || t).palette.text.disabled
+  }), "& .".concat(c.actionsCell), {
     display: 'inline-flex',
     alignItems: 'center',
-    gridGap: theme.spacing(1)
-  }), "& .".concat(gridClasses.rowReorderCell), {
+    gridGap: t.spacing(1)
+  }), "& .".concat(c.rowReorderCell), {
     display: 'inline-flex',
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), "& .".concat(gridClasses['rowReorderCell--draggable']), {
+    opacity: (t.vars || t).palette.action.disabledOpacity
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c['rowReorderCell--draggable']), {
     cursor: 'move',
     opacity: 1
-  }), "& .".concat(gridClasses.rowReorderCellContainer), {
+  }), "& .".concat(c.rowReorderCellContainer), {
     padding: 0,
     alignItems: 'stretch'
-  }), ".".concat(gridClasses.withBorderColor), {
+  }), ".".concat(c.withBorderColor), {
     borderColor: borderColor
-  }), "& .".concat(gridClasses['cell--withRightBorder']), {
+  }), "& .".concat(c['cell--withLeftBorder']), {
+    borderLeftColor: 'var(--DataGrid-rowBorderColor)',
+    borderLeftWidth: '1px',
+    borderLeftStyle: 'solid'
+  }), "& .".concat(c['cell--withRightBorder']), {
+    borderRightColor: 'var(--DataGrid-rowBorderColor)',
     borderRightWidth: '1px',
     borderRightStyle: 'solid'
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--withRightBorder']), {
+  }), "& .".concat(c['columnHeader--withRightBorder']), {
     borderRightWidth: '1px',
     borderRightStyle: 'solid'
-  }), "& .".concat(gridClasses['cell--textLeft']), {
+  }), "& .".concat(c['cell--textLeft']), {
     justifyContent: 'flex-start'
-  }), "& .".concat(gridClasses['cell--textRight']), {
+  }), "& .".concat(c['cell--textRight']), {
     justifyContent: 'flex-end'
-  }), "& .".concat(gridClasses['cell--textCenter']), {
+  }), "& .".concat(c['cell--textCenter']), {
     justifyContent: 'center'
-  }), "& .".concat(gridClasses.columnHeaderDraggableContainer), {
+  }), "& .".concat(c['cell--pinnedLeft'], ", & .").concat(c['cell--pinnedRight']), {
+    position: 'sticky',
+    zIndex: 3,
+    background: 'var(--DataGrid-pinnedBackground)'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends2, "& .".concat(c.virtualScrollerContent, " .").concat(c.row), _defineProperty({
+    '&:hover': _defineProperty({}, "& .".concat(c['cell--pinnedLeft'], ", & .").concat(c['cell--pinnedRight']), {
+      backgroundColor: pinnedHoverBackground
+    })
+  }, "&.Mui-selected", _defineProperty(_defineProperty({}, "& .".concat(c['cell--pinnedLeft'], ", & .").concat(c['cell--pinnedRight']), {
+    backgroundColor: pinnedSelectedBackground
+  }), '&:hover', _defineProperty({}, "& .".concat(c['cell--pinnedLeft'], ", & .").concat(c['cell--pinnedRight']), {
+    backgroundColor: pinnedSelectedHoverBackground
+  })))), "& .".concat(c.cell, ":not(.").concat(c['cell--pinnedLeft'], "):not(.").concat(c['cell--pinnedRight'], ")"), {
+    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+  }), "& .".concat(c.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%',
     height: '100%'
-  }), "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+  }), "& .".concat(c.rowReorderCellPlaceholder), {
     display: 'none'
-  }), "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
-    background: (theme.vars || theme).palette.background.paper,
+  }), "& .".concat(c['columnHeader--dragging'], ", & .").concat(c['row--dragging']), {
+    background: (t.vars || t).palette.background.paper,
     padding: '0 12px',
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), "& .".concat(gridClasses['row--dragging']), _defineProperty({
-    background: (theme.vars || theme).palette.background.paper,
+    opacity: (t.vars || t).palette.action.disabledOpacity
+  }), "& .".concat(c['row--dragging']), _defineProperty({
+    background: (t.vars || t).palette.background.paper,
     padding: '0 12px',
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    opacity: (t.vars || t).palette.action.disabledOpacity
+  }, "& .".concat(c.rowReorderCellPlaceholder), {
     display: 'flex'
-  })), "& .".concat(gridClasses.treeDataGroupingCell), {
+  })), "& .".concat(c.treeDataGroupingCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'
-  }), "& .".concat(gridClasses.treeDataGroupingCellToggle), {
+  }), "& .".concat(c.treeDataGroupingCellToggle), {
     flex: '0 0 28px',
     alignSelf: 'stretch',
-    marginRight: theme.spacing(2)
-  }), _defineProperty(_defineProperty(_extends2, "& .".concat(gridClasses.groupingCriteriaCell), {
+    marginRight: t.spacing(2)
+  }), "& .".concat(c.groupingCriteriaCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'
-  }), "& .".concat(gridClasses.groupingCriteriaCellToggle), {
+  }), "& .".concat(c.groupingCriteriaCellToggle), {
     flex: '0 0 28px',
     alignSelf: 'stretch',
-    marginRight: theme.spacing(2)
+    marginRight: t.spacing(2)
   })));
   return gridStyle;
-});
+});
+
+/**
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ */
+function blend(background, overlay, opacity) {
+  var gamma = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var f = function f(b, o) {
+    return Math.round(Math.pow(Math.pow(b, 1 / gamma) * (1 - opacity) + Math.pow(o, 1 / gamma) * opacity, gamma));
+  };
+  var backgroundColor = decomposeColor(background);
+  var overlayColor = decomposeColor(overlay);
+  var rgb = [f(backgroundColor.values[0], overlayColor.values[0]), f(backgroundColor.values[1], overlayColor.values[1]), f(backgroundColor.values[2], overlayColor.values[2])];
+  return recomposeColor({
+    type: 'rgb',
+    values: rgb
+  });
+}

package/legacy/components/index.js

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';

package/legacy/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -31,7 +31,7 @@ function GridColumnMenuSortItem(props) {
     var direction = event.currentTarget.getAttribute('data-value') || null;
     apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
   }, [apiRef, colDef, onClick, sortDirection]);
-  if (!colDef || !colDef.sortable || !sortingOrder.some(function (item) {
+  if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(function (item) {
     return !!item;
   })) {
     return null;