@mui/x-data-grid 5.8.0 → 5.11.0

package/node/hooks/features/export/useGridPrintExport.js

@@ -29,6 +29,12 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _utils2 = require("./utils");
 
+var _pipeProcessing = require("../../core/pipeProcessing");
+
+var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 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; }
@@ -246,6 +252,25 @@ const useGridPrintExport = (apiRef, props) => {
     exportDataAsPrint
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, printExportApi, 'GridPrintExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    var _options$printOptions;
+
+    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridPrintExportMenuItem, {
+        options: options.printOptions
+      }),
+      componentName: 'printExport'
+    }];
+  }, []);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportMenu', addExportMenuButtons);
 };
 
 exports.useGridPrintExport = useGridPrintExport;

package/node/hooks/features/export/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColumnsToExport = void 0;
+exports.getColumnsToExport = exports.defaultGetRowsToExport = void 0;
 
 var _columns = require("../columns");
 
+var _filter = require("../filter");
+
 const getColumnsToExport = ({
   apiRef,
   options
@@ -21,4 +23,19 @@ const getColumnsToExport = ({
   return validColumns.filter(column => !column.disableExport);
 };
 
-exports.getColumnsToExport = getColumnsToExport;
+exports.getColumnsToExport = getColumnsToExport;
+
+const defaultGetRowsToExport = ({
+  apiRef
+}) => {
+  const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
+  const selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+  }
+
+  return filteredSortedRowIds;
+};
+
+exports.defaultGetRowsToExport = defaultGetRowsToExport;

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

@@ -9,7 +9,9 @@ var _gridFilterItem = require("../../../models/gridFilterItem");
 
 const getDefaultGridFilterModel = () => ({
   items: [],
-  linkOperator: _gridFilterItem.GridLinkOperator.And
+  linkOperator: _gridFilterItem.GridLinkOperator.And,
+  quickFilterValues: [],
+  quickFilterLogicOperator: _gridFilterItem.GridLinkOperator.And
 });
 
 exports.getDefaultGridFilterModel = getDefaultGridFilterModel;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeFilterModel = exports.mergeStateWithFilterModel = exports.buildAggregatedFilterApplier = void 0;
+exports.sanitizeFilterModel = exports.mergeStateWithFilterModel = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,6 +13,8 @@ var _models = require("../../../models");
 
 var _warning = require("../../../utils/warning");
 
+var _columns = require("../columns");
+
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -94,7 +96,7 @@ const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering,
 
 exports.mergeStateWithFilterModel = mergeStateWithFilterModel;
 
-const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
     items,
     linkOperator = _models.GridLinkOperator.And
@@ -161,7 +163,7 @@ const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item)) : appliers; // Return `false` as soon as we have a failing filter
+    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers; // Return `false` as soon as we have a failing filter
 
     if (linkOperator === _models.GridLinkOperator.And) {
       return filteredAppliers.every(applier => applier.fn(rowId));
@@ -171,5 +173,92 @@ const buildAggregatedFilterApplier = (filterModel, apiRef) => {
     return filteredAppliers.some(applier => applier.fn(rowId));
   };
 };
+/**
+ * Generates a method to easily check if a row is matching the current quick filter.
+ * @param {any[]} values The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+
+
+exports.buildAggregatedFilterItemsApplier = buildAggregatedFilterItemsApplier;
+
+const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+  const {
+    quickFilterValues = [],
+    quickFilterLogicOperator = _models.GridLinkOperator.And
+  } = filterModel;
+
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+
+  const columnsFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const appliersPerColumnField = {};
+  columnsFields.forEach(field => {
+    const column = apiRef.current.getColumn(field);
+    const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+
+    if (!getApplyQuickFilterFn) {
+      return;
+    }
+
+    appliersPerColumnField[field] = quickFilterValues.map(value => getApplyQuickFilterFn(value, column, apiRef));
+  }); // If some value does not have an applier we ignore them
+
+  const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
+  return (rowId, shouldApplyFilter) => {
+    const usedCellParams = {};
+    Object.keys(appliersPerColumnField).forEach(columnField => {
+      if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
+        usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+      }
+    }); // Return `false` as soon as we have a quick filter value that does not match any column
+
+    if (quickFilterLogicOperator === _models.GridLinkOperator.And) {
+      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+        var _appliersPerColumnFie, _appliersPerColumnFie2;
+
+        if (appliersPerColumnField[field][index] == null) {
+          return false;
+        }
+
+        return (_appliersPerColumnFie = (_appliersPerColumnFie2 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie.call(_appliersPerColumnFie2, usedCellParams[field]);
+      }));
+    } // Return `true` as soon as we have have a quick filter value that match any column
+
+
+    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      var _appliersPerColumnFie3, _appliersPerColumnFie4;
+
+      if (appliersPerColumnField[field][index] == null) {
+        return false;
+      }
+
+      return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
+    }));
+  };
+};
+
+exports.buildAggregatedQuickFilterApplier = buildAggregatedQuickFilterApplier;
+
+const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+
+  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
+    return null;
+  }
+
+  if (isRowMatchingFilterItems == null) {
+    return isRowMatchingQuickFilter;
+  }
+
+  if (isRowMatchingQuickFilter == null) {
+    return isRowMatchingFilterItems;
+  }
+
+  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
+};
 
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _gridFeatureMode = require("../../../models/gridFeatureMode");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -39,6 +37,8 @@ var _strategyProcessing = require("../../core/strategyProcessing");
 
 var _gridFilterUtils = require("./gridFilterUtils");
 
+var _utils = require("../../../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 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); }
@@ -75,13 +75,9 @@ const useGridFilter = (apiRef, props) => {
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
     stateSelector: _gridFilterSelector.gridFilterModelSelector,
-    changeEvent: _events.GridEvents.filterModelChange
+    changeEvent: 'filterModelChange'
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
@@ -92,9 +88,16 @@ const useGridFilter = (apiRef, props) => {
         filter: (0, _extends2.default)({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(_events.GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent('filteredRowsSet');
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const items = [...filterModel.items];
@@ -165,6 +168,17 @@ const useGridFilter = (apiRef, props) => {
       linkOperator
     }));
   }, [apiRef]);
+  const setQuickFilterValues = React.useCallback(values => {
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+
+    if ((0, _utils.isDeepEqual)(filterModel.quickFilterValues, values)) {
+      return;
+    }
+
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      quickFilterValues: [...values]
+    }));
+  }, [apiRef]);
   const setFilterModel = React.useCallback(model => {
     const currentModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
 
@@ -186,7 +200,8 @@ const useGridFilter = (apiRef, props) => {
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
-    getVisibleRowModels
+    getVisibleRowModels,
+    setQuickFilterValues
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, filterApi, 'GridFilterApi');
   /**
@@ -278,11 +293,13 @@ const useGridFilter = (apiRef, props) => {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
+  // Otherwise, the state is not consistent during the render
+
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', updateFilteredRows);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

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

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _utils = require("@mui/material/utils");
 
-var _events = require("../../../models/events");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -58,14 +56,9 @@ const useGridFocus = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
   const setCellFocus = React.useCallback((id, field) => {
-    // The row might have been deleted
-    if (!apiRef.current.getRow(id)) {
-      return;
-    }
-
     const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
-    if ((focusedCell == null ? void 0 : focusedCell.id) === id && focusedCell.field === field) {
+    if ((focusedCell == null ? void 0 : focusedCell.id) === id && (focusedCell == null ? void 0 : focusedCell.field) === field) {
       return;
     }
 
@@ -88,14 +81,19 @@ const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(_events.GridEvents.cellFocusIn, apiRef.current.getCellParams(id, field));
+    apiRef.current.forceUpdate(); // The row might have been deleted
+
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+
+    apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
     const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
     if (cell) {
-      apiRef.current.publishEvent(_events.GridEvents.cellFocusOut, apiRef.current.getCellParams(cell.id, cell.field), event);
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
     }
 
     apiRef.current.setState(state => {
@@ -130,21 +128,31 @@ const useGridFocus = (apiRef, props) => {
       rowIndexToFocus += 1;
     }
 
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+
     if (columnIndexToFocus >= visibleColumns.length) {
-      // Go to next row if we are at the last column
+      // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      columnIndexToFocus = 0;
+
+      if (rowIndexToFocus < currentPage.rows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
     } else if (columnIndexToFocus < 0) {
-      // Go to previous row if we are at the first column
+      // Go to previous row if we are before the first column
       rowIndexToFocus -= 1;
-      columnIndexToFocus = visibleColumns.length - 1;
+
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
     }
 
-    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    rowIndexToFocus = (0, _utils2.clamp)(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    rowIndexToFocus = (0, _utils2.clamp)(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = (0, _utils2.clamp)(columnIndexToFocus, 0, visibleColumns.length - 1);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
@@ -214,7 +222,7 @@ const useGridFocus = (apiRef, props) => {
     // Publishes an event to notify that the focus was lost
 
 
-    apiRef.current.publishEvent(_events.GridEvents.cellFocusOut, apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -239,27 +247,23 @@ const useGridFocus = (apiRef, props) => {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
+  const handleRowSet = React.useCallback(() => {
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef); // If the focused cell is in a row which does not exist anymore, then remove the focus
+
+    if (cell && !apiRef.current.getRow(cell.id)) {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      }));
+    }
+  }, [apiRef]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
     unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
-  React.useEffect(() => {
-    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
-
-    if (cell) {
-      const updatedRow = apiRef.current.getRow(cell.id);
-
-      if (!updatedRow) {
-        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-          focus: {
-            cell: null,
-            columnHeader: null
-          }
-        }));
-      }
-    }
-  }, [apiRef, props.rows]);
   React.useEffect(() => {
     const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
     doc.addEventListener('click', handleDocumentClick);
@@ -267,12 +271,13 @@ const useGridFocus = (apiRef, props) => {
       doc.removeEventListener('click', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderBlur, handleBlur);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellDoubleClick, handleCellDoubleClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellMouseUp, handleCellMouseUp);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellModeChange, handleCellModeChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseUp', handleCellMouseUp);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellModeChange', handleCellModeChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', handleRowSet);
 };
 
 exports.useGridFocus = useGridFocus;

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

@@ -7,8 +7,6 @@ exports.useGridKeyboardNavigation = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -27,6 +25,8 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 
+var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+
 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; }
@@ -38,20 +38,39 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -104,7 +123,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -123,9 +142,9 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -133,6 +152,18 @@ const useGridKeyboardNavigation = (apiRef, props) => {
 
       case ' ':
         {
+          const field = params.field;
+
+          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
           }
@@ -305,12 +336,12 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.cellMode !== _gridEditRowModel.GridCellModes.Edit && (0, _keyboardUtils.isNavigationKey)(event.key)) {
-      apiRef.current.publishEvent(_events.GridEvents.cellNavigationKeyDown, cellParams, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', cellParams, event);
     }
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
 };
 
 exports.useGridKeyboardNavigation = useGridKeyboardNavigation;

package/node/hooks/features/pagination/useGridPage.js

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _utils = require("../../utils");
 
-var _events = require("../../../models/events");
-
 var _filter = require("../filter");
 
 var _gridPaginationSelector = require("./gridPaginationSelector");
@@ -68,7 +66,7 @@ const useGridPage = (apiRef, props) => {
     propModel: props.page,
     propOnChange: props.onPageChange,
     stateSelector: _gridPaginationSelector.gridPageSelector,
-    changeEvent: _events.GridEvents.pageChange
+    changeEvent: 'pageChange'
   });
   /**
    * API METHODS
@@ -137,8 +135,8 @@ const useGridPage = (apiRef, props) => {
     rowIndex: (0, _gridPaginationSelector.gridPageSelector)(apiRef) * (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef)
   });
 
-  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageSizeChange, handlePageSizeChange);
-  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.pageChange, handlePageChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'pageSizeChange', handlePageSizeChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'pageChange', handlePageChange);
   /**
    * EFFECTS
    */

package/node/hooks/features/pagination/useGridPageSize.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _utils = require("../../utils");
 
 var _gridPaginationSelector = require("./gridPaginationSelector");
@@ -49,7 +47,7 @@ const useGridPageSize = (apiRef, props) => {
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,
     stateSelector: _gridPaginationSelector.gridPageSizeSelector,
-    changeEvent: _events.GridEvents.pageSizeChange
+    changeEvent: 'pageSizeChange'
   });
   /**
    * API METHODS
@@ -122,7 +120,7 @@ const useGridPageSize = (apiRef, props) => {
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
-  (0, _utils.useGridApiEventHandler)(apiRef, _events.GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   /**
    * EFFECTS
    */