@mui/x-data-grid-pro 5.5.1 → 5.7.0

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

@@ -0,0 +1,210 @@
+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 { GridEvents, useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+import { useGridRegisterPreProcessor, 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: []
+    }
+  });
+};
+/**
+ * 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 var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
+  apiRef.current.unstable_updateControlState({
+    stateId: 'rowGrouping',
+    propModel: props.rowGroupingModel,
+    propOnChange: props.onRowGroupingModelChange,
+    stateSelector: gridRowGroupingModelSelector,
+    changeEvent: GridEvents.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]);
+  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(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
+          })
+        });
+      }); // Refresh the column pre-processing
+      // TODO: Add a clean way to re-run a pipe processing without faking a change
+
+      apiRef.current.updateColumns([]);
+      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(GridEvents.activeStrategyProcessorChange, 'rowTreeCreation');
+      }
+    }
+  }, [apiRef, props.disableRowGrouping]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnsChange, checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, GridEvents.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

@@ -0,0 +1,217 @@
+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 { useGridRegisterPreProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
+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]);
+  useGridRegisterPreProcessor(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/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -0,0 +1,24 @@
+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 var 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: function valueGetter(params) {
+    return params.rowNode.groupingKey;
+  }
+});
+export var GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export var GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES = {
+  field: GRID_TREE_DATA_GROUPING_FIELD,
+  editable: false,
+  groupable: false
+};

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

@@ -0,0 +1,86 @@
+export var TREE_DATA_STRATEGY = 'tree-data';
+/**
+ * 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 var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params) {
+  var rowTree = params.rowTree,
+      disableChildrenFiltering = params.disableChildrenFiltering,
+      isRowMatchingFilters = params.isRowMatchingFilters;
+  var visibleRowsLookup = {};
+  var filteredRowsLookup = {};
+  var filteredDescendantCountLookup = {};
+
+  var filterTreeNode = function filterTreeNode(node, isParentMatchingFilters, areAncestorsExpanded) {
+    var _node$children;
+
+    var shouldSkipFilters = disableChildrenFiltering && node.depth > 0;
+    var isMatchingFilters;
+
+    if (shouldSkipFilters) {
+      isMatchingFilters = null;
+    } else if (!isRowMatchingFilters) {
+      isMatchingFilters = true;
+    } else {
+      isMatchingFilters = isRowMatchingFilters(node.id);
+    }
+
+    var filteredDescendantCount = 0;
+    (_node$children = node.children) == null ? void 0 : _node$children.forEach(function (childId) {
+      var _isMatchingFilters;
+
+      var childNode = rowTree[childId];
+      var childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      filteredDescendantCount += childSubTreeSize;
+    });
+    var 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;
+  };
+
+  var nodes = Object.values(rowTree);
+
+  for (var i = 0; i < nodes.length; i += 1) {
+    var node = nodes[i];
+
+    if (node.depth === 0) {
+      filterTreeNode(node, true, true);
+    }
+  }
+
+  return {
+    visibleRowsLookup: visibleRowsLookup,
+    filteredRowsLookup: filteredRowsLookup,
+    filteredDescendantCountLookup: filteredDescendantCountLookup
+  };
+};

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

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

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useGridApiEventHandler, GridEvents, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+
+/**
+ * Only available in DataGridPro
+ */
+export var useGridTreeData = function useGridTreeData(apiRef) {
+  /**
+   * EVENTS
+   */
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    var cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
+      var _gridFilteredDescenda;
+
+      event.stopPropagation();
+      event.preventDefault();
+      var filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
+
+      if (filteredDescendantCount === 0) {
+        return;
+      }
+
+      apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+};