@mui/x-data-grid-pro 5.5.0 → 5.6.1

package/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -0,0 +1,317 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import { GridEvents, gridRowIdsSelector, gridRowTreeSelector, useGridApiEventHandler, useGridApiMethod, gridColumnLookupSelector, gridFilteredDescendantCountLookupSelector, useFirstRender } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor, useGridRegisterSortingMethod, useGridRegisterFilteringMethod, isDeepEqual } from '@mui/x-data-grid/internals';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+import { filterRowTreeFromGroupingColumns, getRowGroupingFieldFromGroupingCriteria, GROUPING_COLUMNS_FEATURE_NAME, isGroupingColumn, mergeStateWithRowGroupingModel } from './gridRowGroupingUtils';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
+import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const rowGroupingStateInitializer = (state, props) => _extends({}, state, {
+  rowGrouping: {
+    model: props.rowGroupingModel ?? props.initialState?.rowGrouping?.model ?? []
+  }
+});
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (state, method) - can be after, async only
+ * @requires useGridRows (state, method) - can be after, async only
+ * @requires useGridParamsApi (method) - can be after, async only
+ * TODO: Move the the Premium plan once available and remove the `experimentalFeatures.rowGrouping` flag
+ */
+
+export const useGridRowGrouping = (apiRef, props) => {
+  apiRef.current.unstable_updateControlState({
+    stateId: 'rowGrouping',
+    propModel: props.rowGroupingModel,
+    propOnChange: props.onRowGroupingModelChange,
+    stateSelector: gridRowGroupingModelSelector,
+    changeEvent: GridEvents.rowGroupingModelChange
+  });
+  /**
+   * ROW GROUPING
+   */
+  // Tracks the model on the last pre-processing to check if we need to re-build the grouping columns when the grid upserts a column.
+
+  const sanitizedModelOnLastRowPreProcessing = React.useRef([]);
+  const updateRowGrouping = React.useCallback(() => {
+    const groupRows = params => {
+      const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+      const columnsLookup = gridColumnLookupSelector(apiRef);
+      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel;
+
+      if (props.disableRowGrouping || rowGroupingModel.length === 0) {
+        return null;
+      }
+
+      const distinctValues = Object.fromEntries(rowGroupingModel.map(groupingField => [groupingField, {
+        lookup: {},
+        list: []
+      }]));
+
+      const getCellGroupingCriteria = ({
+        row,
+        id,
+        colDef
+      }) => {
+        let key;
+
+        if (colDef.groupingValueGetter) {
+          const groupingValueGetterParams = {
+            colDef,
+            field: colDef.field,
+            value: row[colDef.field],
+            id,
+            row,
+            rowNode: {
+              isAutoGenerated: false,
+              id
+            }
+          };
+          key = colDef.groupingValueGetter(groupingValueGetterParams);
+        } else {
+          key = row[colDef.field];
+        }
+
+        return {
+          key,
+          field: colDef.field
+        };
+      };
+
+      params.ids.forEach(rowId => {
+        const row = params.idRowsLookup[rowId];
+        rowGroupingModel.forEach(groupingCriteria => {
+          const {
+            key
+          } = getCellGroupingCriteria({
+            row,
+            id: rowId,
+            colDef: columnsLookup[groupingCriteria]
+          });
+          const groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
+
+          if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
+            groupingFieldsDistinctKeys.lookup[key.toString()] = true;
+            groupingFieldsDistinctKeys.list.push(key);
+          }
+        });
+      });
+      const rows = params.ids.map(rowId => {
+        const row = params.idRowsLookup[rowId];
+        const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({
+          row,
+          id: rowId,
+          colDef: columnsLookup[groupingField]
+        })).filter(cell => cell.key != null);
+        const leafGroupingCriteria = {
+          key: rowId.toString(),
+          field: null
+        };
+        return {
+          path: [...parentPath, leafGroupingCriteria],
+          id: rowId
+        };
+      });
+      return buildRowTree(_extends({}, params, {
+        rows,
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: GROUPING_COLUMNS_FEATURE_NAME
+      }));
+    };
+
+    return apiRef.current.unstable_registerRowGroupsBuilder('rowGrouping', groupRows);
+  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault, props.disableRowGrouping]);
+  useFirstRender(() => {
+    updateRowGrouping();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return () => {};
+    }
+
+    return updateRowGrouping();
+  }, [updateRowGrouping]);
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
+    if (props.disableRowGrouping) {
+      return initialValue;
+    }
+
+    let menuItems;
+
+    if (isGroupingColumn(columns.field)) {
+      menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
+    } else if (columns.groupable) {
+      menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
+    } else {
+      menuItems = null;
+    }
+
+    if (menuItems == null) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), menuItems];
+  }, [props.disableRowGrouping]);
+  const filteringMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return filterRowTreeFromGroupingColumns({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters
+    });
+  }, [apiRef]);
+  const sortingMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    const rowIds = gridRowIdsSelector(apiRef);
+    return sortRowTree({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: false
+    });
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterFilteringMethod(apiRef, GROUPING_COLUMNS_FEATURE_NAME, filteringMethod);
+  useGridRegisterSortingMethod(apiRef, GROUPING_COLUMNS_FEATURE_NAME, sortingMethod);
+  /**
+   * API METHODS
+   */
+
+  const setRowGroupingModel = React.useCallback(model => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(mergeStateWithRowGroupingModel(model));
+      updateRowGrouping();
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, updateRowGrouping]);
+  const addRowGroupingCriteria = React.useCallback((field, groupingIndex) => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (currentModel.includes(field)) {
+      return;
+    }
+
+    const cleanGroupingIndex = groupingIndex ?? currentModel.length;
+    const updatedModel = [...currentModel.slice(0, cleanGroupingIndex), field, ...currentModel.slice(cleanGroupingIndex)];
+    apiRef.current.setRowGroupingModel(updatedModel);
+  }, [apiRef]);
+  const removeRowGroupingCriteria = React.useCallback(field => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+
+    if (!currentModel.includes(field)) {
+      return;
+    }
+
+    apiRef.current.setRowGroupingModel(currentModel.filter(el => el !== field));
+  }, [apiRef]);
+  const setRowGroupingCriteriaIndex = React.useCallback((field, targetIndex) => {
+    const currentModel = gridRowGroupingModelSelector(apiRef);
+    const currentTargetIndex = currentModel.indexOf(field);
+
+    if (currentTargetIndex === -1) {
+      return;
+    }
+
+    const updatedModel = [...currentModel];
+    updatedModel.splice(targetIndex, 0, updatedModel.splice(currentTargetIndex, 1)[0]);
+    apiRef.current.setRowGroupingModel(updatedModel);
+  }, [apiRef]);
+  const rowGroupingApi = {
+    setRowGroupingModel,
+    addRowGroupingCriteria,
+    removeRowGroupingCriteria,
+    setRowGroupingCriteriaIndex
+  };
+  useGridApiMethod(apiRef, rowGroupingApi, 'GridRowGroupingApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (props.disableRowGrouping) {
+      return prevState;
+    }
+
+    const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
+
+    if (rowGroupingModelToExport.length === 0) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      rowGrouping: {
+        model: rowGroupingModelToExport
+      }
+    });
+  }, [apiRef, props.disableRowGrouping]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    if (props.disableRowGrouping) {
+      return params;
+    }
+
+    const rowGroupingModel = context.stateToRestore.rowGrouping?.model;
+
+    if (rowGroupingModel != null) {
+      apiRef.current.setState(mergeStateWithRowGroupingModel(rowGroupingModel));
+    }
+
+    return params;
+  }, [apiRef, props.disableRowGrouping]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (isGroupingColumn(cellParams.field) && event.key === ' ' && !event.shiftKey) {
+      event.stopPropagation();
+      event.preventDefault();
+      const filteredDescendantCount = gridFilteredDescendantCountLookupSelector(apiRef)[params.id] ?? 0;
+      const isOnGroupingCell = props.rowGroupingColumnMode === 'single' || getRowGroupingFieldFromGroupingCriteria(params.rowNode.groupingField) === params.field;
+
+      if (!isOnGroupingCell || filteredDescendantCount === 0) {
+        return;
+      }
+
+      apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
+    }
+  }, [apiRef, props.rowGroupingColumnMode]);
+  const checkGroupingColumnsModelDiff = React.useCallback(() => {
+    const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    const lastGroupingColumnsModelApplied = sanitizedModelOnLastRowPreProcessing.current;
+
+    if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
+      sanitizedModelOnLastRowPreProcessing.current = rowGroupingModel; // Refresh the column pre-processing
+
+      apiRef.current.updateColumns([]);
+      updateRowGrouping();
+    }
+  }, [apiRef, updateRowGrouping]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnsChange, checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, GridEvents.rowGroupingModelChange, checkGroupingColumnsModelDiff);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.rowGroupingModel !== undefined) {
+      apiRef.current.setRowGroupingModel(props.rowGroupingModel);
+    }
+  }, [apiRef, props.rowGroupingModel]);
+};

package/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { gridRowGroupingModelSelector } from './gridRowGroupingSelector';
+import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
+import { getColDefOverrides, isGroupingColumn } from './gridRowGroupingUtils';
+export const useGridRowGroupingPreProcessors = (apiRef, props) => {
+  const getGroupingColDefs = React.useCallback(columnsState => {
+    if (props.disableRowGrouping) {
+      return [];
+    }
+
+    const groupingColDefProp = props.groupingColDef; // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
+
+    const rowGroupingModel = gridRowGroupingModelSelector(apiRef).filter(field => !!columnsState.lookup[field]);
+
+    if (rowGroupingModel.length === 0) {
+      return [];
+    }
+
+    switch (props.rowGroupingColumnMode) {
+      case 'single':
+        {
+          return [createGroupingColDefForAllGroupingCriteria({
+            apiRef,
+            rowGroupingModel,
+            colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel),
+            columnsLookup: columnsState.lookup
+          })];
+        }
+
+      case 'multiple':
+        {
+          return rowGroupingModel.map(groupingCriteria => createGroupingColDefForOneGroupingCriteria({
+            groupingCriteria,
+            colDefOverride: getColDefOverrides(groupingColDefProp, [groupingCriteria]),
+            groupedByColDef: columnsState.lookup[groupingCriteria],
+            columnsLookup: columnsState.lookup
+          }));
+        }
+
+      default:
+        {
+          return [];
+        }
+    }
+  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping]);
+  const updateGroupingColumn = React.useCallback(columnsState => {
+    const groupingColDefs = getGroupingColDefs(columnsState);
+    let newColumnFields = [];
+    const newColumnsLookup = {}; // We only keep the non-grouping columns
+
+    columnsState.all.forEach(field => {
+      if (!isGroupingColumn(field)) {
+        newColumnFields.push(field);
+        newColumnsLookup[field] = columnsState.lookup[field];
+      }
+    }); // We add the grouping column
+
+    groupingColDefs.forEach(groupingColDef => {
+      const matchingGroupingColDef = columnsState.lookup[groupingColDef.field];
+
+      if (matchingGroupingColDef) {
+        groupingColDef.width = matchingGroupingColDef.width;
+        groupingColDef.flex = matchingGroupingColDef.flex;
+      }
+
+      newColumnsLookup[groupingColDef.field] = groupingColDef;
+    });
+    const startIndex = newColumnFields[0] === '__check__' ? 1 : 0;
+    newColumnFields = [...newColumnFields.slice(0, startIndex), ...groupingColDefs.map(colDef => colDef.field), ...newColumnFields.slice(startIndex)];
+    columnsState.all = newColumnFields;
+    columnsState.lookup = newColumnsLookup;
+    return columnsState;
+  }, [getGroupingColDefs]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+};

package/modern/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+/**
+ * TODO: Add sorting and filtering on the value and the filteredDescendantCount
+ */
+
+export const GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'treeDataGroup',
+  sortable: false,
+  filterable: false,
+  disableColumnMenu: true,
+  disableReorder: true,
+  align: 'left',
+  width: 200,
+  valueGetter: params => params.rowNode.groupingKey
+});
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES = {
+  field: GRID_TREE_DATA_GROUPING_FIELD,
+  editable: false,
+  groupable: false
+};

package/modern/hooks/features/treeData/gridTreeDataUtils.js

@@ -0,0 +1,82 @@
+/**
+ * A node is visible if one of the following criteria is met:
+ * - One of its children is passing the filter
+ * - It is passing the filter
+ */
+export const filterRowTreeFromTreeData = params => {
+  const {
+    rowTree,
+    disableChildrenFiltering,
+    isRowMatchingFilters
+  } = params;
+  const visibleRowsLookup = {};
+  const filteredRowsLookup = {};
+  const filteredDescendantCountLookup = {};
+
+  const filterTreeNode = (node, isParentMatchingFilters, areAncestorsExpanded) => {
+    const shouldSkipFilters = disableChildrenFiltering && node.depth > 0;
+    let isMatchingFilters;
+
+    if (shouldSkipFilters) {
+      isMatchingFilters = null;
+    } else if (!isRowMatchingFilters) {
+      isMatchingFilters = true;
+    } else {
+      isMatchingFilters = isRowMatchingFilters(node.id);
+    }
+
+    let filteredDescendantCount = 0;
+    node.children?.forEach(childId => {
+      const childNode = rowTree[childId];
+      const childSubTreeSize = filterTreeNode(childNode, isMatchingFilters ?? isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      filteredDescendantCount += childSubTreeSize;
+    });
+    let shouldPassFilters;
+
+    switch (isMatchingFilters) {
+      case true:
+        {
+          shouldPassFilters = true;
+          break;
+        }
+
+      case false:
+        {
+          shouldPassFilters = filteredDescendantCount > 0;
+          break;
+        }
+
+      default:
+        {
+          shouldPassFilters = isParentMatchingFilters;
+          break;
+        }
+    }
+
+    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = shouldPassFilters;
+
+    if (!shouldPassFilters) {
+      return 0;
+    }
+
+    filteredDescendantCountLookup[node.id] = filteredDescendantCount;
+    return filteredDescendantCount + 1;
+  };
+
+  const nodes = Object.values(rowTree);
+
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+
+    if (node.depth === 0) {
+      filterTreeNode(node, true, true);
+    }
+  }
+
+  return {
+    visibleRowsLookup,
+    filteredRowsLookup,
+    filteredDescendantCountLookup
+  };
+};

package/modern/hooks/features/treeData/index.js

@@ -0,0 +1 @@
+export { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef';

package/modern/hooks/features/treeData/useGridTreeData.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, GridEvents, gridRowIdsSelector, gridRowTreeSelector, gridFilteredDescendantCountLookupSelector, useFirstRender } from '@mui/x-data-grid';
+import { useGridRegisterSortingMethod, useGridRegisterFilteringMethod } from '@mui/x-data-grid/internals';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { filterRowTreeFromTreeData } from './gridTreeDataUtils';
+export const TREE_DATA_GROUPING_NAME = 'tree-data';
+/**
+ * Only available in DataGridPro
+ * @requires useGridPreProcessing (method)
+ * @requires useGridRowGroupsPreProcessing (method)
+ */
+
+export const useGridTreeData = (apiRef, props) => {
+  /**
+   * ROW GROUPING
+   */
+  const updateRowGrouping = React.useCallback(() => {
+    if (!props.treeData) {
+      return apiRef.current.unstable_registerRowGroupsBuilder('treeData', null);
+    }
+
+    const groupRows = params => {
+      if (!props.getTreeDataPath) {
+        throw new Error('MUI: No getTreeDataPath given.');
+      }
+
+      const rows = params.ids.map(rowId => ({
+        id: rowId,
+        path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
+          key,
+          field: null
+        }))
+      })).sort((a, b) => a.path.length - b.path.length);
+      return buildRowTree(_extends({
+        rows
+      }, params, {
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: TREE_DATA_GROUPING_NAME,
+        onDuplicatePath: (firstId, secondId, path) => {
+          throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
+        }
+      }));
+    };
+
+    return apiRef.current.unstable_registerRowGroupsBuilder('treeData', groupRows);
+  }, [apiRef, props.getTreeDataPath, props.treeData, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  useFirstRender(() => {
+    updateRowGrouping();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    updateRowGrouping();
+  }, [updateRowGrouping]);
+  /**
+   * PRE-PROCESSING
+   */
+
+  const filteringMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    return filterRowTreeFromTreeData({
+      rowTree,
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      disableChildrenFiltering: props.disableChildrenFiltering
+    });
+  }, [apiRef, props.disableChildrenFiltering]);
+  const sortingMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    const rowIds = gridRowIdsSelector(apiRef);
+    return sortRowTree({
+      rowTree,
+      rowIds,
+      sortRowList: params.sortRowList,
+      disableChildrenSorting: props.disableChildrenSorting
+    });
+  }, [apiRef, props.disableChildrenSorting]);
+  useGridRegisterFilteringMethod(apiRef, TREE_DATA_GROUPING_NAME, filteringMethod);
+  useGridRegisterSortingMethod(apiRef, TREE_DATA_GROUPING_NAME, sortingMethod);
+  /**
+   * EVENTS
+   */
+
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    const cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+      event.stopPropagation();
+      event.preventDefault();
+      const filteredDescendantCount = gridFilteredDescendantCountLookupSelector(apiRef)[params.id] ?? 0;
+
+      if (filteredDescendantCount === 0) {
+        return;
+      }
+
+      apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+};

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["hideDescendantCount"];
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
+import { TREE_DATA_GROUPING_NAME } from './useGridTreeData';
+import { GridTreeDataGroupingCell } from '../../../components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridTreeDataPreProcessors = (apiRef, props) => {
+  const getGroupingColDef = React.useCallback(() => {
+    const groupingColDefProp = props.groupingColDef;
+    let colDefOverride;
+
+    if (typeof groupingColDefProp === 'function') {
+      const params = {
+        groupingName: TREE_DATA_GROUPING_NAME,
+        fields: []
+      };
+      colDefOverride = groupingColDefProp(params);
+    } else {
+      colDefOverride = groupingColDefProp;
+    }
+
+    const _ref = colDefOverride ?? {},
+          {
+      hideDescendantCount
+    } = _ref,
+          colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+    const commonProperties = _extends({}, GRID_TREE_DATA_GROUPING_COL_DEF, {
+      renderCell: params => /*#__PURE__*/_jsx(GridTreeDataGroupingCell, _extends({}, params, {
+        hideDescendantCount: hideDescendantCount
+      })),
+      headerName: apiRef.current.getLocaleText('treeDataGroupingHeaderName')
+    });
+
+    return _extends({}, commonProperties, colDefOverrideProperties, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, [apiRef, props.groupingColDef]);
+  const updateGroupingColumn = React.useCallback(columnsState => {
+    const groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field;
+    const shouldHaveGroupingColumn = props.treeData;
+    const prevGroupingColumn = columnsState.lookup[groupingColDefField];
+
+    if (shouldHaveGroupingColumn) {
+      const newGroupingColumn = getGroupingColDef();
+
+      if (prevGroupingColumn) {
+        newGroupingColumn.width = prevGroupingColumn.width;
+        newGroupingColumn.flex = prevGroupingColumn.flex;
+      }
+
+      columnsState.lookup[groupingColDefField] = newGroupingColumn;
+
+      if (prevGroupingColumn == null) {
+        const index = columnsState.all[0] === '__check__' ? 1 : 0;
+        columnsState.all = [...columnsState.all.slice(0, index), groupingColDefField, ...columnsState.all.slice(index)];
+      }
+    } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
+      delete columnsState.lookup[groupingColDefField];
+      columnsState.all = columnsState.all.filter(field => field !== groupingColDefField);
+    }
+
+    return columnsState;
+  }, [props.treeData, getGroupingColDef]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+};

package/modern/hooks/index.js

@@ -0,0 +1 @@
+export * from './features';

package/modern/hooks/utils/useGridApiContext.js

@@ -0,0 +1,2 @@
+import { useGridApiContext as useCommunityGridApiContext } from '@mui/x-data-grid';
+export const useGridApiContext = useCommunityGridApiContext;

package/modern/hooks/utils/useGridApiRef.js

@@ -0,0 +1,2 @@
+import { useGridApiRef as useCommunityGridApiRef } from '@mui/x-data-grid';
+export const useGridApiRef = useCommunityGridApiRef;

package/modern/hooks/utils/useGridRootProps.js

@@ -0,0 +1,2 @@
+import { useGridRootProps as useCommunityGridRootProps } from '@mui/x-data-grid';
+export const useGridRootProps = useCommunityGridRootProps;