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

package/node/components/containers/GridRoot.js

@@ -11,13 +11,13 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _system = require("@mui/system");
 var _GridRootStyles = require("./GridRootStyles");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
-var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -26,13 +26,19 @@ const useUtilityClasses = ownerState => {
   const {
     autoHeight,
     density,
-    classes
+    classes,
+    showCellVerticalBorder
   } = ownerState;
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, 'withBorderColor']
+    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+const GridPanelAnchor = (0, _system.styled)('div')({
+  position: 'absolute',
+  top: `var(--DataGrid-headersTotalHeight)`,
+  left: 0
+});
 const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
@@ -42,18 +48,12 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
-  const rootContainerRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(rootContainerRef, ref);
-  const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
-  ? null : _useGridAriaAttributes.useGridAriaAttributes;
-  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  const rootElementRef = apiRef.current.rootElementRef;
+  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
   const ownerState = (0, _extends2.default)({}, rootProps, {
     density: densityValue
   });
   const classes = useUtilityClasses(ownerState);
-  apiRef.current.register('public', {
-    rootElementRef: rootContainerRef
-  });
 
   // Our implementation of <NoSsr />
   const [mountedState, setMountedState] = React.useState(false);
@@ -63,12 +63,15 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(className, classes.root),
     ownerState: ownerState
-  }, ariaAttributes, other, {
-    children: children
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
+      role: "presentation",
+      "data-id": "gridPanelAnchor"
+    }), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/node/components/containers/GridRootStyles.js

@@ -160,15 +160,56 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
   }, styles.root]
 })(({
-  theme
+  theme: t
 }) => {
-  const borderColor = getBorderColor(theme);
-  const radius = theme.shape.borderRadius;
+  const borderColor = getBorderColor(t);
+  const radius = t.shape.borderRadius;
+  const containerBackground = t.vars ? t.vars.palette.background.default : t.palette.background.default;
+  const pinnedBackground = containerBackground;
+  const overlayBackground = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
+  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 selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : (0, _styles.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}
+              ))` : (0, _styles.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 selectedStyles = {
+    backgroundColor: selectedBackground,
+    '&:hover': {
+      backgroundColor: selectedHoverBackground,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: selectedBackground
+      }
+    }
+  };
   const gridStyle = (0, _extends2.default)({
     '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
-    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
-    '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : (0, _styles.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',
@@ -176,8 +217,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     borderStyle: 'solid',
     borderColor,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    color: (theme.vars || theme).palette.text.primary
-  }, theme.typography.body2, {
+    color: (t.vars || t).palette.text.primary
+  }, t.typography.body2, {
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -187,11 +228,17 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     flexDirection: 'column',
     overflowAnchor: 'none',
     // Keep the same scrolling position
+    // The selector we really want here is `:first-child`, but emotion thinks it knows better than use what we
+    // want and prints a warning to the console if we use it, about :first-child being "unsafe" in an SSR context.
+    // https://github.com/emotion-js/emotion/issues/1105
+    // Using `:first-of-type instead` is ironically less "safe" because if all our elements aren't `div`, this style
+    // will fail to apply.
+    [`.${_gridClasses.gridClasses.main} > *:first-of-type`]: {
+      borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+      borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
+    },
     [`&.${_gridClasses.gridClasses.autoHeight}`]: {
-      height: 'auto',
-      [`& .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
-        borderBottomColor: 'transparent'
-      }
+      height: 'auto'
     },
     [`&.${_gridClasses.gridClasses.autosizing}`]: {
       [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent} > *`]: {
@@ -202,9 +249,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         whiteSpace: 'nowrap'
       }
     },
-    [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
-      borderBottomColor: 'transparent'
-    },
     [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
       lineHeight: null,
@@ -212,12 +256,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       boxSizing: 'border-box'
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus-within, & .${_gridClasses.gridClasses.cell}:focus-within`]: {
-      outline: `solid ${theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(theme.palette.primary.main, 0.5)} 1px`,
+      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(t.palette.primary.main, 0.5)} 1px`,
       outlineWidth: 1,
       outlineOffset: -1
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus, & .${_gridClasses.gridClasses.cell}:focus`]: {
-      outline: `solid ${theme.palette.primary.main} 1px`
+      outline: `solid ${t.palette.primary.main} 1px`
     },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,
@@ -227,7 +271,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      overflow: 'hidden'
     },
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer}, & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
       visibility: 'visible',
@@ -235,8 +280,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}) .${_gridClasses.gridClasses.sortIcon}`]: {
       opacity: 0,
-      transition: theme.transitions.create(['opacity'], {
-        duration: theme.transitions.duration.shorter
+      transition: t.transitions.create(['opacity'], {
+        duration: t.transitions.duration.shorter
       })
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
@@ -267,9 +312,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderBottomStyle: 'solid',
       boxSizing: 'border-box'
     },
-    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
-      borderTop: `1px solid ${borderColor}`
-    },
     [`& .${_gridClasses.gridClasses.sortIcon}, & .${_gridClasses.gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },
@@ -291,7 +333,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       marginLeft: -10
     },
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.hover
+      backgroundColor: (t.vars || t).palette.action.hover
     },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       visibility: 'hidden',
@@ -302,6 +344,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       justifyContent: 'center',
       color: borderColor
     },
+    [`& .${_gridClasses.gridClasses.columnHeaders}`]: {
+      width: 'var(--DataGrid-rowWidth)'
+    },
     '@media (hover: hover)': {
       [`& .${_gridClasses.gridClasses.columnHeaders}:hover`]: columnHeadersStyles,
       [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
@@ -323,14 +368,14 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       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
         }
       },
       [`&.${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
-        color: (theme.vars || theme).palette.text.primary
+        color: (t.vars || t).palette.text.primary
       },
       '& svg': {
         pointerEvents: 'none'
@@ -351,46 +396,55 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       visibility: 'visible',
       width: 'auto'
     },
-    [`& .${_gridClasses.gridClasses.row}`]: {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeader}`]: {
+        boxSizing: 'border-box',
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      }
+    },
+    /* Row styles */
+    [`.${_gridClasses.gridClasses.row}`]: {
       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,
+
+      '--rowBorderColor': 'var(--DataGrid-rowBorderColor)',
+      [`&.${_gridClasses.gridClasses['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': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-        '&:hover, &.Mui-hovered': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(
-                ${theme.vars.palette.action.selectedOpacity} + 
-                ${theme.vars.palette.action.hoverOpacity}
-              ))` : (0, _styles.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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-          }
-        }
+      '&.Mui-selected': selectedStyles
+    },
+    [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
+      '[role=row]': {
+        background: 'var(--DataGrid-containerBackground)'
+      },
+      [`.${_gridClasses.gridClasses.pinnedColumnHeaders} [role=row]`]: {
+        background: 'var(--DataGrid-pinnedBackground)'
       }
     },
+    /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
-      borderBottom: '1px solid',
-      '&.Mui-selected': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-        '&:hover, &.Mui-hovered': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity})` : (0, _styles.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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-          }
-        }
-      }
+      height: 'var(--height)',
+      minWidth: 'var(--width)',
+      maxWidth: 'var(--width)',
+      '--width': '0px',
+      '--height': '0px',
+      boxSizing: 'border-box',
+      borderTop: `1px solid var(--rowBorderColor)`,
+      '&.Mui-selected': selectedStyles
+    },
+    [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
+      borderTopColor: 'transparent'
     },
     [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
       userSelect: 'none'
@@ -399,9 +453,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       overflow: 'hidden',
       whiteSpace: 'nowrap'
     },
-    [`& .${_gridClasses.gridClasses.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
+      padding: 0
     },
     [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
       cursor: 'default'
@@ -409,19 +462,23 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['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 ${(theme.vars || theme).palette.primary.main} 1px`,
+        outline: `solid ${(t.vars || t).palette.primary.main} 1px`,
         outlineOffset: '-1px'
       }
     },
+    [`& .${_gridClasses.gridClasses.cellContent}`]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
-      boxShadow: theme.shadows[2]
+      boxShadow: t.shadows[2]
     },
     [`& .${_gridClasses.gridClasses['row--editing']} .${_gridClasses.gridClasses.cell}`]: {
-      boxShadow: theme.shadows[0],
-      backgroundColor: (theme.vars || theme).palette.background.paper
+      boxShadow: t.shadows[0],
+      backgroundColor: (t.vars || t).palette.background.paper
     },
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: {
       display: 'flex',
@@ -431,22 +488,22 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       justifyContent: 'center'
     },
     [`& .${_gridClasses.gridClasses.booleanCell}[data-value="true"]`]: {
-      color: (theme.vars || theme).palette.text.secondary
+      color: (t.vars || t).palette.text.secondary
     },
     [`& .${_gridClasses.gridClasses.booleanCell}[data-value="false"]`]: {
-      color: (theme.vars || theme).palette.text.disabled
+      color: (t.vars || t).palette.text.disabled
     },
     [`& .${_gridClasses.gridClasses.actionsCell}`]: {
       display: 'inline-flex',
       alignItems: 'center',
-      gridGap: theme.spacing(1)
+      gridGap: t.spacing(1)
     },
     [`& .${_gridClasses.gridClasses.rowReorderCell}`]: {
       display: 'inline-flex',
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
+      opacity: (t.vars || t).palette.action.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
       cursor: 'move',
@@ -459,7 +516,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`.${_gridClasses.gridClasses.withBorderColor}`]: {
       borderColor
     },
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: {
+      borderLeftColor: 'var(--DataGrid-rowBorderColor)',
+      borderLeftWidth: '1px',
+      borderLeftStyle: 'solid'
+    },
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: {
+      borderRightColor: 'var(--DataGrid-rowBorderColor)',
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
@@ -476,6 +539,31 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: {
       justifyContent: 'center'
     },
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+      position: 'sticky',
+      zIndex: 3,
+      background: 'var(--DataGrid-pinnedBackground)'
+    },
+    [`& .${_gridClasses.gridClasses.virtualScrollerContent} .${_gridClasses.gridClasses.row}`]: {
+      '&:hover': {
+        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+          backgroundColor: pinnedHoverBackground
+        }
+      },
+      [`&.Mui-selected`]: {
+        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+          backgroundColor: pinnedSelectedBackground
+        },
+        '&:hover': {
+          [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+            backgroundColor: pinnedSelectedHoverBackground
+          }
+        }
+      }
+    },
+    [`& .${_gridClasses.gridClasses.cell}:not(.${_gridClasses.gridClasses['cell--pinnedLeft']}):not(.${_gridClasses.gridClasses['cell--pinnedRight']})`]: {
+      transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+    },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
       width: '100%',
@@ -485,16 +573,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'none'
     },
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
-      background: (theme.vars || theme).palette.background.paper,
+      background: (t.vars || t).palette.background.paper,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
+      opacity: (t.vars || t).palette.action.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['row--dragging']}`]: {
-      background: (theme.vars || theme).palette.background.paper,
+      background: (t.vars || t).palette.background.paper,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      opacity: (t.vars || t).palette.action.disabledOpacity,
       [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
         display: 'flex'
       }
@@ -507,7 +595,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: theme.spacing(2)
+      marginRight: t.spacing(2)
     },
     [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
       display: 'flex',
@@ -517,8 +605,23 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.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, gamma = 1) {
+  const f = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+  const backgroundColor = (0, _styles.decomposeColor)(background);
+  const overlayColor = (0, _styles.decomposeColor)(overlay);
+  const rgb = [f(backgroundColor.values[0], overlayColor.values[0]), f(backgroundColor.values[1], overlayColor.values[1]), f(backgroundColor.values[2], overlayColor.values[2])];
+  return (0, _styles.recomposeColor)({
+    type: 'rgb',
+    values: rgb
+  });
+}

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

@@ -38,7 +38,7 @@ function GridColumnMenuSortItem(props) {
     const 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(item => !!item)) {
+  if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }
   const getLabel = key => {

package/node/components/panel/GridPanel.js

@@ -17,7 +17,6 @@ var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _keyboardUtils = require("../../utils/keyboardUtils");
-var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "classes"];
@@ -79,9 +78,9 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
   }], []);
   const [anchorEl, setAnchorEl] = React.useState(null);
   React.useEffect(() => {
-    const columnHeadersElement = apiRef.current.rootElementRef?.current?.querySelector(`.${_gridClasses.gridClasses.columnHeaders}`);
-    if (columnHeadersElement) {
-      setAnchorEl(columnHeadersElement);
+    const panelAnchor = apiRef.current.rootElementRef?.current?.querySelector('[data-id="gridPanelAnchor"]');
+    if (panelAnchor) {
+      setAnchorEl(panelAnchor);
     }
   }, [apiRef]);
   if (!anchorEl) {