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

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/index.js

@@ -91,6 +91,17 @@ Object.keys(_panel).forEach(function (key) {
     }
   });
 });
+var _columnsManagement = require("./columnsManagement");
+Object.keys(_columnsManagement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnsManagement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnsManagement[key];
+    }
+  });
+});
 var _toolbar = require("./toolbar");
 Object.keys(_toolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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 => {