@mui/x-data-grid 6.7.0 → 6.9.0

package/node/components/cell/index.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _GridCell = require("./GridCell");
-Object.keys(_GridCell).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridCell[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridCell[key];
-    }
-  });
+var _exportNames = {
+  GridCell: true
+};
+Object.defineProperty(exports, "GridCell", {
+  enumerable: true,
+  get: function () {
+    return _GridCell.GridCell;
+  }
 });
+var _GridCell = require("./GridCell");
 var _GridBooleanCell = require("./GridBooleanCell");
 Object.keys(_GridBooleanCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridBooleanCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +28,7 @@ Object.keys(_GridBooleanCell).forEach(function (key) {
 var _GridEditBooleanCell = require("./GridEditBooleanCell");
 Object.keys(_GridEditBooleanCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridEditBooleanCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +40,7 @@ Object.keys(_GridEditBooleanCell).forEach(function (key) {
 var _GridEditDateCell = require("./GridEditDateCell");
 Object.keys(_GridEditDateCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridEditDateCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +52,7 @@ Object.keys(_GridEditDateCell).forEach(function (key) {
 var _GridEditInputCell = require("./GridEditInputCell");
 Object.keys(_GridEditInputCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridEditInputCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +64,7 @@ Object.keys(_GridEditInputCell).forEach(function (key) {
 var _GridEditSingleSelectCell = require("./GridEditSingleSelectCell");
 Object.keys(_GridEditSingleSelectCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridEditSingleSelectCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +76,7 @@ Object.keys(_GridEditSingleSelectCell).forEach(function (key) {
 var _GridActionsCell = require("./GridActionsCell");
 Object.keys(_GridActionsCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridActionsCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +88,7 @@ Object.keys(_GridActionsCell).forEach(function (key) {
 var _GridActionsCellItem = require("./GridActionsCellItem");
 Object.keys(_GridActionsCellItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridActionsCellItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,6 +100,7 @@ Object.keys(_GridActionsCellItem).forEach(function (key) {
 var _GridSkeletonCell = require("./GridSkeletonCell");
 Object.keys(_GridSkeletonCell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridSkeletonCell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/components/containers/GridRootStyles.js

@@ -17,6 +17,22 @@ 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',
+    width: 'auto'
+  },
+  [`& .${_gridClasses.gridClasses.menuIcon}`]: {
+    width: 'auto',
+    visibility: 'visible'
+  }
+};
 const GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -58,6 +74,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.cellContent}`]: styles.cellContent
   }, {
@@ -82,6 +100,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
   }, {
@@ -207,9 +227,6 @@ const GridRootStyles = (0, _styles.styled)('div', {
         duration: theme.transitions.duration.shorter
       })
     },
-    [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortIcon}`]: {
-      opacity: 0.5
-    },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
@@ -273,9 +290,16 @@ const GridRootStyles = (0, _styles.styled)('div', {
       justifyContent: 'center',
       color: borderColor
     },
-    [`& .${_gridClasses.gridClasses.columnHeaders}:hover .${_gridClasses.gridClasses.columnSeparator}, .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
-      visibility: 'visible',
-      width: 'auto'
+    '@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['columnSeparator--sideLeft']}`]: {
       left: -12
@@ -311,16 +335,6 @@ const GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: {
-      [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
-        visibility: 'visible',
-        width: 'auto'
-      },
-      [`& .${_gridClasses.gridClasses.menuIcon}`]: {
-        width: 'auto',
-        visibility: 'visible'
-      }
-    },
     [`.${_gridClasses.gridClasses.menuOpen}`]: {
       visibility: 'visible',
       width: 'auto'

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

@@ -33,7 +33,7 @@ function GridColumnHeaderMenu({
       apiRef.current.hideColumnMenu();
     }
   }, [apiRef, target]);
-  if (!target) {
+  if (!target || !colDef) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbar.js

@@ -22,8 +22,8 @@ const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "s
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
-  // TODO v6: think about where export option should be passed.
-  // from componentProps={{ toolbarExport: { ...exportOption} }} seems to be more appropriate
+  // TODO v7: think about where export option should be passed.
+  // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const {
       csvOptions,
       printOptions,

package/node/components/virtualization/GridVirtualScroller.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridVirtualScroller = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
@@ -14,7 +13,6 @@ var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -40,16 +38,13 @@ const VirtualScrollerRoot = (0, _system.styled)('div', {
   }
 });
 const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
-  const {
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRoot, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _clsx.default)(classes.root, className),
+    ref: ref
+  }, props, {
+    className: (0, _clsx.default)(classes.root, props.className),
     ownerState: rootProps
-  }, other));
+  }));
 });
 exports.GridVirtualScroller = GridVirtualScroller;

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridVirtualScrollerContent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
@@ -14,14 +13,12 @@ var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "style"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (props, overflowedContent) => {
   const {
-    classes,
-    overflowedContent
-  } = ownerState;
+    classes
+  } = props;
   const slots = {
     root: ['virtualScrollerContent', overflowedContent && 'virtualScrollerContent--overflowed']
   };
@@ -33,21 +30,14 @@ const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
-  const {
-      className,
-      style
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    overflowedContent: !rootProps.autoHeight && style?.minHeight === 'auto'
-  });
-  const classes = useUtilityClasses(ownerState);
+  const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
+  const classes = useUtilityClasses(rootProps, overflowedContent);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
-    style: style
-  }, other));
+    ref: ref
+  }, props, {
+    ownerState: rootProps,
+    className: (0, _clsx.default)(classes.root, props.className)
+  }));
 });
 exports.GridVirtualScrollerContent = GridVirtualScrollerContent;

package/node/constants/defaultGridSlotsComponents.js

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.DATA_GRID_DEFAULT_SLOTS_COMPONENTS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _components = require("../components");
+var _GridCell = require("../components/cell/GridCell");
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
 var _GridColumnMenu = require("../components/menu/columnMenu/GridColumnMenu");
 var _GridNoResultsOverlay = require("../components/GridNoResultsOverlay");
 var _material = _interopRequireDefault(require("../material"));
+// TODO: camelCase these key. It's a private helper now.
+// Remove then need to call `uncapitalizeObjectKeys`.
 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _material.default, {
-  Cell: _components.GridCell,
+  Cell: _GridCell.GridCellV7,
   SkeletonCell: _components.GridSkeletonCell,
   ColumnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   ColumnMenu: _GridColumnMenu.GridColumnMenu,

package/node/hooks/core/useGridApiInitialization.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridApiInitialization = useGridApiInitialization;
 var React = _interopRequireWildcard(require("react"));
+var _Store = require("../../utils/Store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _EventManager = require("../../utils/EventManager");
@@ -43,8 +44,10 @@ const wrapPublicApi = publicApi => {
 function useGridApiInitialization(inputApiRef, props) {
   const publicApiRef = React.useRef();
   if (!publicApiRef.current) {
+    const state = {};
     publicApiRef.current = {
-      state: {},
+      state,
+      store: _Store.Store.create(state),
       instanceId: {
         id: globalId
       }

package/node/hooks/core/useGridStateInitialization.js

@@ -6,25 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridStateInitialization = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
-const _excluded = ["stateId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useGridStateInitialization = (apiRef, props) => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
-    const {
-        stateId
-      } = controlStateItem,
-      others = (0, _objectWithoutPropertiesLoose2.default)(controlStateItem, _excluded);
-    controlStateMapRef.current[stateId] = (0, _extends2.default)({}, others, {
-      stateId
-    });
+    controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
   const setState = React.useCallback((state, reason) => {
     let newState;
@@ -69,6 +61,7 @@ const useGridStateInitialization = (apiRef, props) => {
       if (apiRef.current.publishEvent) {
         apiRef.current.publishEvent('stateChange', newState);
       }
+      apiRef.current.store.update(newState);
     }
     if (updatedControlStateIds.length === 1) {
       const {

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -61,10 +61,7 @@ const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    const isModifierKeyPressed = event.ctrlKey || event.metaKey;
-    // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
-    // be wrong with a Dvorak keyboard (as if pressing J).
-    if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) {
+    if (!((event.ctrlKey || event.metaKey) && event.key === 'c')) {
       return;
     }
 

package/node/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -11,11 +11,11 @@ var _createSelector = require("../../../utils/createSelector");
  */
 const gridColumnGroupingSelector = state => state.columnGrouping;
 exports.gridColumnGroupingSelector = gridColumnGroupingSelector;
-const gridColumnGroupsUnwrappedModelSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+const gridColumnGroupsUnwrappedModelSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
 exports.gridColumnGroupsUnwrappedModelSelector = gridColumnGroupsUnwrappedModelSelector;
-const gridColumnGroupsLookupSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+const gridColumnGroupsLookupSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
 exports.gridColumnGroupsLookupSelector = gridColumnGroupsLookupSelector;
-const gridColumnGroupsHeaderStructureSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+const gridColumnGroupsHeaderStructureSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
 exports.gridColumnGroupsHeaderStructureSelector = gridColumnGroupsHeaderStructureSelector;
 const gridColumnGroupsHeaderMaxDepthSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);
 exports.gridColumnGroupsHeaderMaxDepthSelector = gridColumnGroupsHeaderMaxDepthSelector;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -58,12 +58,18 @@ const useGridColumnHeaders = props => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
-  const [renderContext, setRenderContext] = React.useState(null);
+  const [renderContext, setRenderContextRaw] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const setRenderContext = React.useCallback(nextRenderContext => {
+    if (renderContext && nextRenderContext && (0, _useGridVirtualScroller.areRenderContextsEqual)(renderContext, nextRenderContext)) {
+      return;
+    }
+    setRenderContextRaw(nextRenderContext);
+  }, [renderContext]);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -138,7 +144,7 @@ const useGridColumnHeaders = props => {
     if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
-  }, [updateInnerPosition]);
+  }, [updateInnerPosition, setRenderContext]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -30,7 +30,7 @@ const gridColumnLookupSelector = (0, _createSelector.createSelector)(gridColumns
  * @category Columns
  */
 exports.gridColumnLookupSelector = gridColumnLookupSelector;
-const gridColumnDefinitionsSelector = (0, _createSelector.createSelector)(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+const gridColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
 
 /**
  * Get the column visibility model, containing the visibility status of each column.
@@ -45,21 +45,21 @@ const gridColumnVisibilityModelSelector = (0, _createSelector.createSelector)(gr
  * @category Visible Columns
  */
 exports.gridColumnVisibilityModelSelector = gridColumnVisibilityModelSelector;
-const gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelector)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+const gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
 
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
 exports.gridVisibleColumnDefinitionsSelector = gridVisibleColumnDefinitionsSelector;
-const gridVisibleColumnFieldsSelector = (0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+const gridVisibleColumnFieldsSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
 
 /**
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
 exports.gridVisibleColumnFieldsSelector = gridVisibleColumnFieldsSelector;
-const gridColumnPositionsSelector = (0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+const gridColumnPositionsSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleColumnDefinitionsSelector, visibleColumns => {
   const positions = [];
   let currentPosition = 0;
   for (let i = 0; i < visibleColumns.length; i += 1) {
@@ -87,14 +87,14 @@ const gridColumnsTotalWidthSelector = (0, _createSelector.createSelector)(gridVi
  * @category Columns
  */
 exports.gridColumnsTotalWidthSelector = gridColumnsTotalWidthSelector;
-const gridFilterableColumnDefinitionsSelector = (0, _createSelector.createSelector)(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+const gridFilterableColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
 
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
 exports.gridFilterableColumnDefinitionsSelector = gridFilterableColumnDefinitionsSelector;
-const gridFilterableColumnLookupSelector = (0, _createSelector.createSelector)(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+const gridFilterableColumnLookupSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
   if (col.filterable) {
     acc[col.field] = col;
   }

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -161,22 +161,16 @@ function useGridDimensions(apiRef, props) {
     if (!mainEl) {
       return;
     }
-    const height = mainEl.clientHeight || 0;
-    const width = mainEl.clientWidth || 0;
     const win = (0, _utils.unstable_ownerWindow)(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
-    const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
-    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
-    const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
-    const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
-    const newHeight = height - paddingTop - paddingBottom;
-    const newWidth = width - paddingLeft - paddingRight;
-    const hasHeightChanged = newHeight !== previousSize.current?.height;
-    const hasWidthChanged = newWidth !== previousSize.current?.width;
+    const height = parseFloat(computedStyle.height) || 0;
+    const width = parseFloat(computedStyle.width) || 0;
+    const hasHeightChanged = height !== previousSize.current?.height;
+    const hasWidthChanged = width !== previousSize.current?.width;
     if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
       const size = {
-        width: newWidth,
-        height: newHeight
+        width,
+        height
       };
       apiRef.current.publishEvent('resize', size);
       previousSize.current = size;

package/node/hooks/features/editing/useGridCellEditing.js

@@ -23,7 +23,7 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
 const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -131,7 +131,8 @@ const useGridCellEditing = (apiRef, props) => {
       id,
       field,
       reason,
-      key
+      key,
+      colDef
     } = params;
     const startCellEditModeParams = {
       id,
@@ -143,7 +144,8 @@ const useGridCellEditing = (apiRef, props) => {
         // The sequence of events makes the key pressed by the end-users update the textbox directly.
         startCellEditModeParams.deleteValue = true;
       } else {
-        startCellEditModeParams.initialValue = key;
+        const initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
+        startCellEditModeParams.initialValue = initialValue;
       }
     } else if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;

package/node/hooks/features/editing/useGridRowEditing.js

@@ -20,11 +20,12 @@ var _warning = require("../../../utils/warning");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridRowParams = require("../../../models/params/gridRowParams");
+var _colDef = require("../../../colDef");
 const _excluded = ["id"],
   _excluded2 = ["id"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
 const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -122,7 +123,13 @@ const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Enter') {
         reason = _gridRowParams.GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
-        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field)));
+        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => {
+          const column = apiRef.current.getColumn(field);
+          if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
+            return true;
+          }
+          return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
+        });
         if (event.shiftKey) {
           if (params.field === columnFields[0]) {
             // Exit if user pressed Shift+Tab on the first field
@@ -143,8 +150,7 @@ const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
-        const rowParams = apiRef.current.getRowParams(params.id);
-        const newParams = (0, _extends2.default)({}, rowParams, {
+        const newParams = (0, _extends2.default)({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
         });
@@ -186,7 +192,8 @@ const useGridRowEditing = (apiRef, props) => {
       id,
       field,
       reason,
-      key
+      key,
+      columns
     } = params;
     const startRowEditModeParams = {
       id,
@@ -198,7 +205,8 @@ const useGridRowEditing = (apiRef, props) => {
         // The sequence of events makes the key pressed by the end-users update the textbox directly.
         startRowEditModeParams.deleteValue = !!field;
       } else {
-        startRowEditModeParams.initialValue = key;
+        const colDef = columns.find(col => col.field === field);
+        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
       }
     } else if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;