@mui/x-data-grid 6.7.0 → 6.8.0

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/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/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;

package/node/hooks/features/filter/gridFilterUtils.js

@@ -194,21 +194,25 @@ const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   });
 };
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
-const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
-  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
-  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
-  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null);
-
-  // Defaultize operators
-  const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().quickFilterLogicOperator;
-  const logicOperator = filterModel.logicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().logicOperator;
+const isNotNull = result => result != null;
+const filterModelItems = (cache, apiRef, items) => {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
+  }
+  return cache.cleanedFilterItems;
+};
+const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+  const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
+  const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 
   // get result for filter items model
-  if (cleanedAllFilterItemResults.length > 0) {
+  if (cleanedFilterItemResults.length > 0) {
     // Return true if the item pass with one of the rows
     const filterItemPredicate = item => {
-      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+      return cleanedFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
     };
+    const logicOperator = filterModel.logicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().logicOperator;
     if (logicOperator === _models.GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -223,11 +227,12 @@ const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterMode
   }
 
   // get result for quick filter model
-  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+  if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
-      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+      return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
+    const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().quickFilterLogicOperator;
     if (quickFilterLogicOperator === _models.GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

package/node/hooks/features/filter/useGridFilter.js

@@ -265,6 +265,7 @@ const useGridFilter = (apiRef, props) => {
       const tree = (0, _rows.gridRowTreeSelector)(apiRef);
       const rowIds = tree[_rows.GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
+      const filterCache = {};
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
         let isRowPassing;
@@ -275,7 +276,7 @@ const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
+          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef, filterCache);
         }
         filteredRowsLookup[rowId] = isRowPassing;
       }

package/node/hooks/features/focus/useGridFocus.js

@@ -8,6 +8,7 @@ exports.useGridFocus = exports.focusStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -246,7 +247,6 @@ const useGridFocus = (apiRef, props) => {
     }
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
-  const focussedColumnGroup = (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
   const handleColumnGroupHeaderFocus = React.useCallback(({
     fields,
     depth
@@ -254,13 +254,17 @@ const useGridFocus = (apiRef, props) => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if (focussedColumnGroup !== null && focussedColumnGroup.depth === depth && fields.includes(focussedColumnGroup.field)) {
+    const focusedColumnGroup = (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
+    if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;
     }
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
-  }, [apiRef, focussedColumnGroup]);
-  const handleBlur = React.useCallback(() => {
+  }, [apiRef]);
+  const handleBlur = React.useCallback((_, event) => {
+    if (event.relatedTarget?.className.includes(_gridClasses.gridClasses.columnHeader)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       focus: {

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -19,7 +19,6 @@ var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelTog
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
-var _useGridSelector = require("../../utils/useGridSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _pipeProcessing = require("../../core/pipeProcessing");
 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); }
@@ -330,12 +329,12 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
-  const focusedColumnGroup = (0, _useGridSelector.useGridSelector)(apiRef, _focus.unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
     if (!dimensions) {
       return;
     }
+    const focusedColumnGroup = (0, _focus.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
       return;
     }
@@ -419,7 +418,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, focusedColumnGroup, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

package/node/hooks/features/rows/useGridParamsApi.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MissingRowIdError = void 0;
 exports.useGridParamsApi = useGridParamsApi;
 var React = _interopRequireWildcard(require("react"));
 var _domUtils = require("../../../utils/domUtils");
@@ -10,11 +11,7 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 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; }
-let warnedOnceMissingColumn = false;
-function warnMissingColumn(field) {
-  console.warn([`MUI: You are calling getValue('${field}') but the column \`${field}\` is not defined.`, `Instead, you can access the data from \`params.row.${field}\`.`].join('\n'));
-  warnedOnceMissingColumn = true;
-}
+class MissingRowIdError extends Error {}
 
 /**
  * @requires useGridColumns (method)
@@ -24,6 +21,7 @@ function warnMissingColumn(field) {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
+exports.MissingRowIdError = MissingRowIdError;
 function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
@@ -32,7 +30,7 @@ function useGridParamsApi(apiRef) {
   const getRowParams = React.useCallback(id => {
     const row = apiRef.current.getRow(id);
     if (!row) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const params = {
       id,
@@ -45,7 +43,7 @@ function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
@@ -69,7 +67,7 @@ function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
@@ -83,7 +81,8 @@ function useGridParamsApi(apiRef) {
       hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
-      formattedValue: value
+      formattedValue: value,
+      isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
@@ -98,15 +97,10 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (!colDef && !warnedOnceMissingColumn) {
-        warnMissingColumn(field);
-      }
-    }
     if (!colDef || !colDef.valueGetter) {
       const rowModel = apiRef.current.getRow(id);
       if (!rowModel) {
-        throw new Error(`No row with id #${id} found`);
+        throw new MissingRowIdError(`No row with id #${id} found`);
       }
       return rowModel[field];
     }