@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
+import { gridColumnFieldsSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -76,7 +77,7 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
  * @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.
  */
 
-export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
     items,
     linkOperator = GridLinkOperator.And
@@ -142,7 +143,7 @@ export 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 === GridLinkOperator.And) {
       return filteredAppliers.every(applier => applier.fn(rowId));
@@ -151,4 +152,81 @@ export 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.
+ */
+
+export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+  const {
+    quickFilterValues = [],
+    quickFilterLogicOperator = GridLinkOperator.And
+  } = filterModel;
+
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+
+  const columnsFields = gridColumnFieldsSelector(apiRef);
+  const appliersPerColumnField = {};
+  columnsFields.forEach(field => {
+    const column = apiRef.current.getColumn(field);
+    const getApplyQuickFilterFn = 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 === GridLinkOperator.And) {
+      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+        if (appliersPerColumnField[field][index] == null) {
+          return false;
+        }
+
+        return appliersPerColumnField[field][index]?.(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 => {
+      if (appliersPerColumnField[field][index] == null) {
+        return false;
+      }
+
+      return appliersPerColumnField[field][index]?.(usedCellParams[field]);
+    }));
+  };
+};
+export 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);
 };

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -14,6 +13,7 @@ import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
@@ -38,13 +38,9 @@ export const useGridFilter = (apiRef, props) => {
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
     stateSelector: gridFilterModelSelector,
-    changeEvent: GridEvents.filterModelChange
+    changeEvent: 'filterModelChange'
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
@@ -55,9 +51,16 @@ export const useGridFilter = (apiRef, props) => {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(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 = gridFilterModelSelector(apiRef);
     const items = [...filterModel.items];
@@ -128,6 +131,17 @@ export const useGridFilter = (apiRef, props) => {
       linkOperator
     }));
   }, [apiRef]);
+  const setQuickFilterValues = React.useCallback(values => {
+    const filterModel = gridFilterModelSelector(apiRef);
+
+    if (isDeepEqual(filterModel.quickFilterValues, values)) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      quickFilterValues: [...values]
+    }));
+  }, [apiRef]);
   const setFilterModel = React.useCallback(model => {
     const currentModel = gridFilterModelSelector(apiRef);
 
@@ -149,7 +163,8 @@ export const useGridFilter = (apiRef, props) => {
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
-    getVisibleRowModels
+    getVisibleRowModels,
+    setQuickFilterValues
   };
   useGridApiMethod(apiRef, filterApi, 'GridFilterApi');
   /**
@@ -237,11 +252,13 @@ export const useGridFilter = (apiRef, props) => {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, 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
+
+  useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -30,14 +29,9 @@ export const useGridFocus = (apiRef, props) => {
   const logger = 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 = gridFocusCellSelector(apiRef);
 
-    if (focusedCell?.id === id && focusedCell.field === field) {
+    if (focusedCell?.id === id && focusedCell?.field === field) {
       return;
     }
 
@@ -60,14 +54,19 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(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 = gridFocusCellSelector(apiRef);
 
     if (cell) {
-      apiRef.current.publishEvent(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 => {
@@ -102,21 +101,31 @@ export const useGridFocus = (apiRef, props) => {
       rowIndexToFocus += 1;
     }
 
+    const currentPage = 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 = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    rowIndexToFocus = clamp(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
@@ -186,7 +195,7 @@ export const useGridFocus = (apiRef, props) => {
     // Publishes an event to notify that the focus was lost
 
 
-    apiRef.current.publishEvent(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);
@@ -211,27 +220,23 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
+  const handleRowSet = React.useCallback(() => {
+    const cell = 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 => _extends({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      }));
+    }
+  }, [apiRef]);
   useGridApiMethod(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
     unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
-  React.useEffect(() => {
-    const cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      const updatedRow = apiRef.current.getRow(cell.id);
-
-      if (!updatedRow) {
-        apiRef.current.setState(state => _extends({}, state, {
-          focus: {
-            cell: null,
-            columnHeader: null
-          }
-        }));
-      }
-    }
-  }, [apiRef, props.rows]);
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.addEventListener('click', handleDocumentClick);
@@ -239,10 +244,11 @@ export const useGridFocus = (apiRef, props) => {
       doc.removeEventListener('click', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderBlur, handleBlur);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseUp, handleCellMouseUp);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellModeChange, handleCellModeChange);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
+  useGridApiEventHandler(apiRef, 'cellMouseUp', handleCellMouseUp);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -9,6 +8,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSel
 import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -16,21 +16,38 @@ import { isNavigationKey } from '../../../utils/keyboardUtils';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const currentPage = 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') => {
+    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    const rowId = visibleSortedRows[rowIndex]?.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 = 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}`);
@@ -83,7 +100,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -102,9 +119,9 @@ export 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;
@@ -112,6 +129,18 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
       case ' ':
         {
+          const field = params.field;
+
+          if (field === 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));
           }
@@ -282,10 +311,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', cellParams, event);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
 import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -43,7 +42,7 @@ export const useGridPage = (apiRef, props) => {
     propModel: props.page,
     propOnChange: props.onPageChange,
     stateSelector: gridPageSelector,
-    changeEvent: GridEvents.pageChange
+    changeEvent: 'pageChange'
   });
   /**
    * API METHODS
@@ -108,8 +107,8 @@ export const useGridPage = (apiRef, props) => {
     rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
   });
 
-  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
-  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
+  useGridApiEventHandler(apiRef, 'pageSizeChange', handlePageSizeChange);
+  useGridApiEventHandler(apiRef, 'pageChange', handlePageChange);
   /**
    * EFFECTS
    */

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
@@ -25,7 +24,7 @@ export const useGridPageSize = (apiRef, props) => {
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,
     stateSelector: gridPageSizeSelector,
-    changeEvent: GridEvents.pageSizeChange
+    changeEvent: 'pageSizeChange'
   });
   /**
    * API METHODS
@@ -94,7 +93,7 @@ export const useGridPageSize = (apiRef, props) => {
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   /**
    * EFFECTS
    */

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
-import { useGridSelector } from '../../utils/useGridSelector';
 export const preferencePanelStateInitializer = (state, props) => _extends({}, state, {
   preferencePanel: props.initialState?.preferencePanel ?? {
     open: false
@@ -17,7 +15,6 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
 
 export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -26,9 +23,10 @@ export const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
 
     if (preferencePanelState.openedPanelValue) {
-      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+      apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
     }
@@ -39,7 +37,7 @@ export const useGridPreferencesPanel = apiRef => {
       }
     }));
     apiRef.current.forceUpdate();
-  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   const doNotHidePanel = React.useCallback(() => {
@@ -59,7 +57,7 @@ export const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
-    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+    apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
     apiRef.current.forceUpdate();

package/modern/hooks/features/rows/gridRowsSelector.js

@@ -1,8 +1,10 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
+export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
 export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
+export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -8,4 +8,26 @@ export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was p
   if (id == null) {
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
-}
+}
+export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+  const children = tree[parentId]?.children;
+
+  if (children == null) {
+    return [];
+  }
+
+  const validDescendants = [];
+
+  for (let i = 0; i < children.length; i += 1) {
+    const child = children[i];
+    const childNode = tree[child];
+
+    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+      validDescendants.push(child);
+    }
+
+    validDescendants.push(...getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows));
+  }
+
+  return validDescendants;
+};