@mui/x-data-grid-pro 5.11.0 → 5.12.1

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

@@ -1,206 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import Divider from '@mui/material/Divider';
-import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
-import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
-import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
-import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
-import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
-import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var rowGroupingStateInitializer = function rowGroupingStateInitializer(state, props) {
-  var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
-
-  return _extends({}, state, {
-    rowGrouping: {
-      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : [],
-      unstable_sanitizedModelOnLastRowTreeCreation: []
-    }
-  });
-};
-/**
- * @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
- */
-
-export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
-  apiRef.current.unstable_updateControlState({
-    stateId: 'rowGrouping',
-    propModel: props.rowGroupingModel,
-    propOnChange: props.onRowGroupingModelChange,
-    stateSelector: gridRowGroupingModelSelector,
-    changeEvent: 'rowGroupingModelChange'
-  });
-  /**
-   * API METHODS
-   */
-
-  var setRowGroupingModel = React.useCallback(function (model) {
-    var currentModel = gridRowGroupingModelSelector(apiRef);
-
-    if (currentModel !== model) {
-      apiRef.current.setState(mergeStateWithRowGroupingModel(model));
-      setStrategyAvailability(apiRef, props.disableRowGrouping);
-      apiRef.current.forceUpdate();
-    }
-  }, [apiRef, props.disableRowGrouping]);
-  var addRowGroupingCriteria = React.useCallback(function (field, groupingIndex) {
-    var currentModel = gridRowGroupingModelSelector(apiRef);
-
-    if (currentModel.includes(field)) {
-      return;
-    }
-
-    var cleanGroupingIndex = groupingIndex != null ? groupingIndex : currentModel.length;
-    var updatedModel = [].concat(_toConsumableArray(currentModel.slice(0, cleanGroupingIndex)), [field], _toConsumableArray(currentModel.slice(cleanGroupingIndex)));
-    apiRef.current.setRowGroupingModel(updatedModel);
-  }, [apiRef]);
-  var removeRowGroupingCriteria = React.useCallback(function (field) {
-    var currentModel = gridRowGroupingModelSelector(apiRef);
-
-    if (!currentModel.includes(field)) {
-      return;
-    }
-
-    apiRef.current.setRowGroupingModel(currentModel.filter(function (el) {
-      return el !== field;
-    }));
-  }, [apiRef]);
-  var setRowGroupingCriteriaIndex = React.useCallback(function (field, targetIndex) {
-    var currentModel = gridRowGroupingModelSelector(apiRef);
-    var currentTargetIndex = currentModel.indexOf(field);
-
-    if (currentTargetIndex === -1) {
-      return;
-    }
-
-    var updatedModel = _toConsumableArray(currentModel);
-
-    updatedModel.splice(targetIndex, 0, updatedModel.splice(currentTargetIndex, 1)[0]);
-    apiRef.current.setRowGroupingModel(updatedModel);
-  }, [apiRef]);
-  var rowGroupingApi = {
-    setRowGroupingModel: setRowGroupingModel,
-    addRowGroupingCriteria: addRowGroupingCriteria,
-    removeRowGroupingCriteria: removeRowGroupingCriteria,
-    setRowGroupingCriteriaIndex: setRowGroupingCriteriaIndex
-  };
-  useGridApiMethod(apiRef, rowGroupingApi, 'GridRowGroupingApi');
-  /**
-   * PRE-PROCESSING
-   */
-
-  var addColumnMenuButtons = React.useCallback(function (initialValue, columns) {
-    if (props.disableRowGrouping) {
-      return initialValue;
-    }
-
-    var 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 [].concat(_toConsumableArray(initialValue), [/*#__PURE__*/_jsx(Divider, {}), menuItems]);
-  }, [props.disableRowGrouping]);
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
-    if (props.disableRowGrouping) {
-      return prevState;
-    }
-
-    var rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
-
-    if (rowGroupingModelToExport.length === 0) {
-      return prevState;
-    }
-
-    return _extends({}, prevState, {
-      rowGrouping: {
-        model: rowGroupingModelToExport
-      }
-    });
-  }, [apiRef, props.disableRowGrouping]);
-  var stateRestorePreProcessing = React.useCallback(function (params, context) {
-    var _context$stateToResto;
-
-    if (props.disableRowGrouping) {
-      return params;
-    }
-
-    var rowGroupingModel = (_context$stateToResto = context.stateToRestore.rowGrouping) == null ? void 0 : _context$stateToResto.model;
-
-    if (rowGroupingModel != null) {
-      apiRef.current.setState(mergeStateWithRowGroupingModel(rowGroupingModel));
-    }
-
-    return params;
-  }, [apiRef, props.disableRowGrouping]);
-  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  /**
-   * EVENTS
-   */
-
-  var handleCellKeyDown = React.useCallback(function (params, event) {
-    var cellParams = apiRef.current.getCellParams(params.id, params.field);
-
-    if (isGroupingColumn(cellParams.field) && event.key === ' ' && !event.shiftKey) {
-      var _gridFilteredDescenda;
-
-      event.stopPropagation();
-      event.preventDefault();
-      var filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
-      var 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]);
-  var checkGroupingColumnsModelDiff = React.useCallback(function () {
-    var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    var lastGroupingColumnsModelApplied = gridRowGroupingStateSelector(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
-
-    if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      apiRef.current.setState(function (state) {
-        return _extends({}, state, {
-          rowGrouping: _extends({}, state.rowGrouping, {
-            unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
-          })
-        });
-      });
-      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
-      setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
-      // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-
-      if (apiRef.current.unstable_getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
-        apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
-      }
-    }
-  }, [apiRef, props.disableRowGrouping]);
-  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
-  useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
-  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
-  /**
-   * EFFECTS
-   */
-
-  React.useEffect(function () {
-    if (props.rowGroupingModel !== undefined) {
-      apiRef.current.setRowGroupingModel(props.rowGroupingModel);
-    }
-  }, [apiRef, props.rowGroupingModel]);
-};

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

@@ -1,217 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import * as React from 'react';
-import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
-import { sortRowTree } from '../../../utils/tree/sortRowTree';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
-import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
-import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
-import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
-export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProcessors(apiRef, props) {
-  var getGroupingColDefs = React.useCallback(function (columnsState) {
-    if (props.disableRowGrouping) {
-      return [];
-    }
-
-    var groupingColDefProp = props.groupingColDef; // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
-
-    var rowGroupingModel = gridRowGroupingModelSelector(apiRef).filter(function (field) {
-      return !!columnsState.lookup[field];
-    });
-
-    if (rowGroupingModel.length === 0) {
-      return [];
-    }
-
-    switch (props.rowGroupingColumnMode) {
-      case 'single':
-        {
-          return [createGroupingColDefForAllGroupingCriteria({
-            apiRef: apiRef,
-            rowGroupingModel: rowGroupingModel,
-            colDefOverride: getColDefOverrides(groupingColDefProp, rowGroupingModel),
-            columnsLookup: columnsState.lookup
-          })];
-        }
-
-      case 'multiple':
-        {
-          return rowGroupingModel.map(function (groupingCriteria) {
-            return createGroupingColDefForOneGroupingCriteria({
-              groupingCriteria: groupingCriteria,
-              colDefOverride: getColDefOverrides(groupingColDefProp, [groupingCriteria]),
-              groupedByColDef: columnsState.lookup[groupingCriteria],
-              columnsLookup: columnsState.lookup
-            });
-          });
-        }
-
-      default:
-        {
-          return [];
-        }
-    }
-  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping]);
-  var updateGroupingColumn = React.useCallback(function (columnsState) {
-    var groupingColDefs = getGroupingColDefs(columnsState);
-    var newColumnFields = [];
-    var newColumnsLookup = {}; // We only keep the non-grouping columns
-
-    columnsState.all.forEach(function (field) {
-      if (!isGroupingColumn(field)) {
-        newColumnFields.push(field);
-        newColumnsLookup[field] = columnsState.lookup[field];
-      }
-    }); // We add the grouping column
-
-    groupingColDefs.forEach(function (groupingColDef) {
-      var matchingGroupingColDef = columnsState.lookup[groupingColDef.field];
-
-      if (matchingGroupingColDef) {
-        groupingColDef.width = matchingGroupingColDef.width;
-        groupingColDef.flex = matchingGroupingColDef.flex;
-      }
-
-      newColumnsLookup[groupingColDef.field] = groupingColDef;
-    });
-    var startIndex = newColumnFields[0] === '__check__' ? 1 : 0;
-    newColumnFields = [].concat(_toConsumableArray(newColumnFields.slice(0, startIndex)), _toConsumableArray(groupingColDefs.map(function (colDef) {
-      return colDef.field;
-    })), _toConsumableArray(newColumnFields.slice(startIndex)));
-    columnsState.all = newColumnFields;
-    columnsState.lookup = newColumnsLookup;
-    return columnsState;
-  }, [getGroupingColDefs]);
-  var createRowTree = React.useCallback(function (params) {
-    var rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    var columnsLookup = gridColumnLookupSelector(apiRef);
-    apiRef.current.setState(function (state) {
-      return _extends({}, state, {
-        rowGrouping: _extends({}, state.rowGrouping, {
-          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
-        })
-      });
-    });
-    var distinctValues = Object.fromEntries(rowGroupingModel.map(function (groupingField) {
-      return [groupingField, {
-        lookup: {},
-        list: []
-      }];
-    }));
-
-    var getCellGroupingCriteria = function getCellGroupingCriteria(_ref) {
-      var row = _ref.row,
-          id = _ref.id,
-          colDef = _ref.colDef;
-      var key;
-
-      if (colDef.groupingValueGetter) {
-        var groupingValueGetterParams = {
-          colDef: colDef,
-          field: colDef.field,
-          value: row[colDef.field],
-          id: id,
-          row: row,
-          rowNode: {
-            isAutoGenerated: false,
-            id: id
-          }
-        };
-        key = colDef.groupingValueGetter(groupingValueGetterParams);
-      } else {
-        key = row[colDef.field];
-      }
-
-      return {
-        key: key,
-        field: colDef.field
-      };
-    };
-
-    params.ids.forEach(function (rowId) {
-      var row = params.idRowsLookup[rowId];
-      rowGroupingModel.forEach(function (groupingCriteria) {
-        var _getCellGroupingCrite = getCellGroupingCriteria({
-          row: row,
-          id: rowId,
-          colDef: columnsLookup[groupingCriteria]
-        }),
-            key = _getCellGroupingCrite.key;
-
-        var groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
-
-        if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
-          groupingFieldsDistinctKeys.lookup[key.toString()] = true;
-          groupingFieldsDistinctKeys.list.push(key);
-        }
-      });
-    });
-    var rows = params.ids.map(function (rowId) {
-      var row = params.idRowsLookup[rowId];
-      var parentPath = rowGroupingModel.map(function (groupingField) {
-        return getCellGroupingCriteria({
-          row: row,
-          id: rowId,
-          colDef: columnsLookup[groupingField]
-        });
-      }).filter(function (cell) {
-        return cell.key != null;
-      });
-      var leafGroupingCriteria = {
-        key: rowId.toString(),
-        field: null
-      };
-      return {
-        path: [].concat(_toConsumableArray(parentPath), [leafGroupingCriteria]),
-        id: rowId
-      };
-    });
-    return buildRowTree(_extends({}, params, {
-      rows: rows,
-      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
-      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: ROW_GROUPING_STRATEGY
-    }));
-  }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
-  var filterRows = React.useCallback(function (params) {
-    var rowTree = gridRowTreeSelector(apiRef);
-    return filterRowTreeFromGroupingColumns({
-      rowTree: rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
-    });
-  }, [apiRef]);
-  var sortRows = React.useCallback(function (params) {
-    var rowTree = gridRowTreeSelector(apiRef);
-    var rowIds = gridRowIdsSelector(apiRef);
-    return sortRowTree({
-      rowTree: rowTree,
-      rowIds: rowIds,
-      sortRowList: params.sortRowList,
-      disableChildrenSorting: false
-    });
-  }, [apiRef]);
-  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTree);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
-  /**
-   * 1ST RENDER
-   */
-
-  useFirstRender(function () {
-    setStrategyAvailability(apiRef, props.disableRowGrouping);
-  });
-  /**
-   * EFFECTS
-   */
-
-  var isFirstRender = React.useRef(true);
-  React.useEffect(function () {
-    if (!isFirstRender.current) {
-      setStrategyAvailability(apiRef, props.disableRowGrouping);
-    } else {
-      isFirstRender.current = false;
-    }
-  }, [apiRef, props.disableRowGrouping]);
-};

package/legacy/models/gridGroupingValueGetterParams.js

@@ -1 +0,0 @@
-export {};

package/models/gridGroupingValueGetterParams.d.ts

@@ -1,31 +0,0 @@
-import { GridRowId, GridRowModel, GridRowTreeNodeConfig, GridColDef, GridStateColDef } from '@mui/x-data-grid';
-/**
- * Parameters passed to `colDef.groupingValueGetter`.
- */
-export interface GridGroupingValueGetterParams<V = any, R = any> {
-    /**
-     * The grid row id.
-     */
-    id: GridRowId;
-    /**
-     * The column field of the cell that triggered the event.
-     */
-    field: string;
-    /**
-     * The cell value, does not take `valueGetter` into account.
-     */
-    value: V;
-    /**
-     * The row model of the row that the current cell belongs to.
-     */
-    row: GridRowModel<R>;
-    /**
-     * The column of the row that the current cell belongs to.
-     */
-    colDef: GridColDef<R, V, any> | GridStateColDef<R, V, any>;
-    /**
-     * The node of the row that the current cell belongs to.
-     * It only contains the information available before the actual grouping.
-     */
-    rowNode: Pick<GridRowTreeNodeConfig, 'id' | 'isAutoGenerated'>;
-}

package/models/gridGroupingValueGetterParams.js

@@ -1 +0,0 @@
-export {};

package/modern/components/GridGroupingColumnLeafCell.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const GridGroupingColumnLeafCell = props => {
-  const {
-    rowNode
-  } = props;
-  const rootProps = useGridRootProps();
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      ml: marginLeft
-    },
-    children: props.formattedValue ?? props.value
-  });
-};
-
-export { GridGroupingColumnLeafCell };

package/modern/components/GridGroupingCriteriaCell.js

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['groupingCriteriaCell'],
-    toggle: ['groupingCriteriaCellToggle']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-
-export const GridGroupingCriteriaCell = props => {
-  const {
-    id,
-    field,
-    rowNode,
-    hideDescendantCount,
-    formattedValue
-  } = props;
-  const rootProps = useGridRootProps();
-  const apiRef = useGridApiContext();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
-  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
-  const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
-  const Icon = rowNode.childrenExpanded ? rootProps.components.GroupingCriteriaCollapseIcon : rootProps.components.GroupingCriteriaExpandIcon;
-
-  const handleKeyDown = event => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-
-    apiRef.current.publishEvent('cellKeyDown', props, event);
-  };
-
-  const handleClick = event => {
-    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
-    apiRef.current.setCellFocus(id, field);
-    event.stopPropagation();
-  };
-
-  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
-  return /*#__PURE__*/_jsxs(Box, {
-    className: classes.root,
-    sx: {
-      ml: marginLeft
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: -1,
-        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand'),
-        children: /*#__PURE__*/_jsx(Icon, {
-          fontSize: "inherit"
-        })
-      })
-    }), /*#__PURE__*/_jsxs("span", {
-      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
-    })]
-  });
-};

package/modern/components/GridRowGroupableColumnMenuItems.js

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
-import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const GridRowGroupableColumnMenuItems = props => {
-  const {
-    column,
-    onClick
-  } = props;
-  const apiRef = useGridApiContext();
-  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
-  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-
-  if (!column?.groupable) {
-    return null;
-  }
-
-  const ungroupColumn = event => {
-    apiRef.current.removeRowGroupingCriteria(column.field);
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  const groupColumn = event => {
-    apiRef.current.addRowGroupingCriteria(column.field);
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  const name = columnsLookup[column.field].headerName ?? column.field;
-
-  if (rowGroupingModel.includes(column.field)) {
-    return /*#__PURE__*/_jsx(MenuItem, {
-      onClick: ungroupColumn,
-      children: apiRef.current.getLocaleText('unGroupColumn')(name)
-    });
-  }
-
-  return /*#__PURE__*/_jsx(MenuItem, {
-    onClick: groupColumn,
-    children: apiRef.current.getLocaleText('groupColumn')(name)
-  });
-};
-
-process.env.NODE_ENV !== "production" ? GridRowGroupableColumnMenuItems.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  column: PropTypes.object,
-  onClick: PropTypes.func
-} : void 0;
-export { GridRowGroupableColumnMenuItems };

package/modern/components/GridRowGroupingColumnMenuItems.js

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
-import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
-import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from '../hooks/features/rowGrouping/gridRowGroupingUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const GridRowGroupingColumnMenuItems = props => {
-  const {
-    column,
-    onClick
-  } = props;
-  const apiRef = useGridApiContext();
-  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
-  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-
-  const renderUnGroupingMenuItem = field => {
-    const ungroupColumn = event => {
-      apiRef.current.removeRowGroupingCriteria(field);
-
-      if (onClick) {
-        onClick(event);
-      }
-    };
-
-    const name = columnsLookup[field].headerName ?? field;
-    return /*#__PURE__*/_jsx(MenuItem, {
-      onClick: ungroupColumn,
-      children: apiRef.current.getLocaleText('unGroupColumn')(name)
-    }, field);
-  };
-
-  if (!column || !isGroupingColumn(column.field)) {
-    return null;
-  }
-
-  if (column.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
-    return /*#__PURE__*/_jsx(React.Fragment, {
-      children: rowGroupingModel.map(renderUnGroupingMenuItem)
-    });
-  }
-
-  return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field));
-};
-
-process.env.NODE_ENV !== "production" ? GridRowGroupingColumnMenuItems.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  column: PropTypes.object,
-  onClick: PropTypes.func
-} : void 0;
-export { GridRowGroupingColumnMenuItems };