@mui/x-data-grid 7.15.0 → 7.17.0

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,9 +17,7 @@ var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const _excluded = ["className", "aria-label"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,9 +35,12 @@ const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+  fontWeight: 'var(--unstable_DataGrid-headWeight)',
+  lineHeight: 'normal'
 });
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
+  // See https://github.com/mui/mui-x/pull/14482
   const {
       className
     } = props,

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
@@ -67,15 +66,12 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     className: (0, _clsx.default)(classes.root, headerClassName),
     style: (0, _extends2.default)({}, style, {
       height,
-      width,
-      minWidth: width,
-      maxWidth: width
+      width
     }),
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": headerComponent == null ? label : undefined
+    "aria-sort": ariaSort
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,8 +16,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,8 +16,6 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,8 +22,6 @@ var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelecto
 var _gridPaginationSelector = require("../../hooks/features/pagination/gridPaginationSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "colDef"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -102,10 +101,11 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
+  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     ref: ref,
     indeterminate: isIndeterminate,
-    checked: isChecked,
+    checked: checked,
     onChange: handleChange,
     className: classes.root,
     inputProps: {

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,8 +20,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useLazyRef = require("../../hooks/utils/useLazyRef");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
 const useUtilityClasses = ownerState => {

package/node/components/containers/GridFooterContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/containers/GridOverlay.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/containers/GridRoot.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,8 +20,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,

package/node/components/containers/GridRootStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,12 +20,6 @@ function getBorderColor(theme) {
   }
   return (0, _styles.darken)((0, _styles.alpha)(theme.palette.divider, 1), 0.68);
 }
-const columnHeadersStyles = {
-  [`.${_gridClasses.gridClasses.columnSeparator}, .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  }
-};
 const columnHeaderStyles = {
   [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
     visibility: 'visible',
@@ -36,6 +30,14 @@ const columnHeaderStyles = {
     visibility: 'visible'
   }
 };
+const columnSeparatorTargetSize = 10;
+const columnSeparatorOffset = -5;
+const focusOutlineWidth = 1;
+const separatorIconDragStyles = {
+  width: 3,
+  rx: 1.5,
+  x: 10.5
+};
 
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
@@ -268,23 +270,47 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
-      lineHeight: null,
       padding: '0 10px',
       boxSizing: 'border-box'
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus-within, & .${_gridClasses.gridClasses.cell}:focus-within`]: {
-      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
+      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(t.palette.primary.main, 0.5)} ${focusOutlineWidth}px`,
+      outlineOffset: focusOutlineWidth * -1
     },
     [`& .${_gridClasses.gridClasses.columnHeader}:focus, & .${_gridClasses.gridClasses.cell}:focus`]: {
-      outline: `solid ${t.palette.primary.main} 1px`
+      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
+      outlineOffset: focusOutlineWidth * -1
+    },
+    // Hide the column separator when:
+    // - the column is focused and has an outline
+    // - the next column is focused and has an outline
+    // - the column has a left or right border
+    // - the next column is pinned right and has a left border
+    [`& .${_gridClasses.gridClasses.columnHeader}:focus,
+      & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']},
+      & .${_gridClasses.gridClasses['columnHeader--withRightBorder']},
+      & .${_gridClasses.gridClasses['columnHeader--siblingFocused']},
+      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--lastUnpinned']},
+      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}
+      `]: {
+      [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
+        opacity: 0
+      },
+      // Show resizable separators at all times on touch devices
+      '@media (hover: none)': {
+        [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
+          opacity: 1
+        }
+      },
+      [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}:hover`]: {
+        opacity: 1
+      }
     },
     [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['columnHeader--last']}`]: {
-      borderTopRightRadius: !dimensions.hasScrollY || dimensions.scrollbarSize === 0 ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,
@@ -296,7 +322,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: {
+    [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer}, & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
@@ -312,12 +338,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
+      gap: t.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      // to anchor the aggregation label
-      position: 'relative'
+      overflow: 'hidden'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
@@ -341,13 +366,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.columnHeaderDraggableContainer}, & .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       flexDirection: 'row-reverse'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']} .${_gridClasses.gridClasses.menuIcon}, & .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.menuIcon}`]: {
-      marginRight: 'auto',
-      marginLeft: -6
+    [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']} .${_gridClasses.gridClasses.menuIcon}`]: {
+      marginLeft: 'auto'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.menuIcon}, & .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.menuIcon}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.menuIcon}`]: {
       marginRight: 'auto',
-      marginLeft: -10
+      marginLeft: -5
     },
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: {
       backgroundColor: (t.vars || t).palette.action.hover
@@ -359,59 +383,77 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       background: 'var(--DataGrid-pinnedBackground)'
     },
     [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
-      visibility: 'hidden',
       position: 'absolute',
+      overflow: 'hidden',
       zIndex: 3,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
+      alignItems: 'center',
+      maxWidth: columnSeparatorTargetSize,
       color: borderColor
     },
     [`& .${_gridClasses.gridClasses.columnHeaders}`]: {
       width: 'var(--DataGrid-rowWidth)'
     },
     '@media (hover: hover)': {
-      [`& .${_gridClasses.gridClasses.columnHeaders}:hover`]: columnHeadersStyles,
       [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
       [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortIcon}`]: {
         opacity: 0.5
       }
     },
     '@media (hover: none)': {
-      [`& .${_gridClasses.gridClasses.columnHeaders}`]: columnHeadersStyles,
-      [`& .${_gridClasses.gridClasses.columnHeader}`]: columnHeaderStyles
+      [`& .${_gridClasses.gridClasses.columnHeader}`]: columnHeaderStyles,
+      [`& .${_gridClasses.gridClasses.columnHeader}:focus,
+        & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: {
+        [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
+          color: (t.vars || t).palette.primary.main
+        }
+      }
     },
     [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
-      left: -12
+      left: columnSeparatorOffset
     },
     [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: {
-      right: -12
+      right: columnSeparatorOffset
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
+      left: columnSeparatorOffset - 0.5
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: {
+      right: columnSeparatorOffset - 0.5
     },
     [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
-      '&:hover': {
-        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: (t.vars || t).palette.text.primary
+        color: (t.vars || t).palette.primary.main
+      },
+      // Always appear as draggable on touch devices
+      '@media (hover: none)': {
+        [`& .${_gridClasses.gridClasses.iconSeparator} rect`]: separatorIconDragStyles
+      },
+      '@media (hover: hover)': {
+        '&:hover': {
+          color: (t.vars || t).palette.primary.main,
+          [`& .${_gridClasses.gridClasses.iconSeparator} rect`]: separatorIconDragStyles
+        }
       },
       '& svg': {
         pointerEvents: 'none'
       }
     },
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: {
-      color: 'inherit'
+      color: 'inherit',
+      transition: t.transitions.create(['color', 'width'], {
+        duration: t.transitions.duration.shortest
+      })
     },
     [`& .${_gridClasses.gridClasses.menuIcon}`]: {
       width: 0,
       visibility: 'hidden',
       fontSize: 20,
-      marginRight: -10,
+      marginRight: -5,
       display: 'flex',
       alignItems: 'center'
     },
@@ -422,7 +464,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
       [`& .${_gridClasses.gridClasses.columnHeader}`]: {
         boxSizing: 'border-box',
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       }
     },
     /* Bottom border of the top-container */
@@ -465,8 +507,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
       height: 'var(--height)',
-      minWidth: 'var(--width)',
-      maxWidth: 'var(--width)',
+      width: 'var(--width)',
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
@@ -480,6 +521,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
       borderTopColor: 'transparent'
     },
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']} :first-of-type`]: {
+      [`& .${_gridClasses.gridClasses.cell}, .${_gridClasses.gridClasses.scrollbarFiller}`]: {
+        borderTop: 'none'
+      }
+    },
     [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
       userSelect: 'none'
     },
@@ -500,8 +546,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       boxShadow: t.shadows[2],
       backgroundColor: (t.vars || t).palette.background.paper,
       '&:focus-within': {
-        outline: `solid ${(t.vars || t).palette.primary.main} 1px`,
-        outlineOffset: '-1px'
+        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
+        outlineOffset: focusOutlineWidth * -1
       }
     },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
@@ -661,7 +707,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--rowBorderColor)'
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: {
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -672,8 +721,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.filler}`]: {
       flex: 1
     },
-    [`& .${_gridClasses.gridClasses['filler--borderTop']}`]: {
-      borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
+      borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
     /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hasSkeletonLoadingOverlay']}`]: {

package/node/components/containers/GridToolbarContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "children"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/menu/GridMenu.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,8 +22,6 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes

package/node/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,8 +13,6 @@ var _utils = require("@mui/utils");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../GridMenu");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function GridColumnHeaderMenu({
   columnMenuId,
   columnMenuButtonId,

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _GridColumnMenuFilterItem = require("./menuItems/GridColumnMenuFilterItem");
 var _GridColumnMenuSortItem = require("./menuItems/GridColumnMenuSortItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GRID_COLUMN_MENU_SLOTS = exports.GRID_COLUMN_MENU_SLOTS = {
   columnMenuSortItem: _GridColumnMenuSortItem.GridColumnMenuSortItem,
   columnMenuFilterItem: _GridColumnMenuFilterItem.GridColumnMenuFilterItem,

package/node/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,8 +17,6 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridClasses = require("../../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "children", "open"];
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledMenuList = (0, _styles.styled)(_MenuList.default)(() => ({
   minWidth: 248
 }));

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

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _GridColumnMenuHideItem = require("./GridColumnMenuHideItem");
 var _GridColumnMenuManageItem = require("./GridColumnMenuManageItem");
 var _jsxRuntime = require("react/jsx-runtime");
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function GridColumnMenuColumnsItem(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuHideItem.GridColumnMenuHideItem, (0, _extends2.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuManageItem.GridColumnMenuManageItem, (0, _extends2.default)({}, props))]