@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
+var _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -17,6 +17,15 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var getGridFilter = function getGridFilter(col) {
+  return {
+    columnField: col.field,
+    operatorValue: col.filterOperators[0].value,
+    id: Math.round(Math.random() * 1e5)
+  };
+};
+
 var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
@@ -30,6 +39,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
       linkOperators = _props$linkOperators === void 0 ? [GridLinkOperator.And, GridLinkOperator.Or] : _props$linkOperators,
       columnsSort = props.columnsSort,
       filterFormProps = props.filterFormProps,
+      getColumnForNewFilter = props.getColumnForNewFilter,
       children = props.children,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -39,41 +49,73 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
   var applyFilterLinkOperator = React.useCallback(function (operator) {
     apiRef.current.setFilterLinkOperator(operator);
   }, [apiRef]);
-  var getDefaultItem = React.useCallback(function () {
-    var firstColumnWithOperator = filterableColumns.find(function (colDef) {
-      var _colDef$filterOperato;
+  var getDefaultFilter = React.useCallback(function () {
+    var nextColumnWithOperator;
+
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      var nextColumnFieldName = getColumnForNewFilter({
+        currentFilters: (filterModel == null ? void 0 : filterModel.items) || [],
+        columns: filterableColumns
+      });
+      nextColumnWithOperator = filterableColumns.find(function (_ref) {
+        var field = _ref.field;
+        return field === nextColumnFieldName;
+      });
+    } else {
+      nextColumnWithOperator = filterableColumns.find(function (colDef) {
+        var _colDef$filterOperato;
+
+        return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+      });
+    }
+
+    if (!nextColumnWithOperator) {
+      return null;
+    }
 
-      return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel == null ? void 0 : filterModel.items, filterableColumns, getColumnForNewFilter]);
+  var getNewFilter = React.useCallback(function () {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+
+    var currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
+
+    var nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    var nextColumnWithOperator = filterableColumns.find(function (_ref2) {
+      var field = _ref2.field;
+      return field === nextColumnFieldName;
     });
 
-    if (!firstColumnWithOperator) {
+    if (!nextColumnWithOperator) {
       return null;
     }
 
-    return {
-      columnField: firstColumnWithOperator.field,
-      operatorValue: firstColumnWithOperator.filterOperators[0].value,
-      id: Math.round(Math.random() * 1e5)
-    };
-  }, [filterableColumns]);
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
   var items = React.useMemo(function () {
     if (filterModel.items.length) {
       return filterModel.items;
     }
 
-    var defaultItem = getDefaultItem();
-    return defaultItem ? [defaultItem] : [];
-  }, [filterModel.items, getDefaultItem]);
+    var defaultFilter = getDefaultFilter();
+    return defaultFilter ? [defaultFilter] : [];
+  }, [filterModel.items, getDefaultFilter]);
   var hasMultipleFilters = items.length > 1;
 
   var addNewFilter = function addNewFilter() {
-    var defaultItem = getDefaultItem();
+    var newFilter = getNewFilter();
 
-    if (!defaultItem) {
+    if (!newFilter) {
       return;
     }
 
-    apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [defaultItem]));
+    apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [newFilter]));
   };
 
   var deleteFilter = React.useCallback(function (item) {
@@ -152,6 +194,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     valueInputProps: PropTypes.any
   }),
 
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter.
+   */
+  getColumnForNewFilter: PropTypes.func,
+
   /**
    * Sets the available logic operators.
    * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/legacy/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -7,6 +7,38 @@ import { createSelector } from '../../../utils/createSelector';
 export var gridColumnGroupingSelector = function gridColumnGroupingSelector(state) {
   return state.columnGrouping;
 };
+export var gridColumnGroupsUnwrappedModelSelector = createSelector(gridColumnGroupingSelector, function (columnGrouping) {
+  var _columnGrouping$unwra;
+
+  return (_columnGrouping$unwra = columnGrouping == null ? void 0 : columnGrouping.unwrappedGroupingModel) != null ? _columnGrouping$unwra : {};
+});
 export var gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, function (columnGrouping) {
-  return columnGrouping.lookup;
+  var _columnGrouping$looku;
+
+  return (_columnGrouping$looku = columnGrouping == null ? void 0 : columnGrouping.lookup) != null ? _columnGrouping$looku : {};
+});
+export var gridColumnGroupsHeaderStructureSelector = createSelector(gridColumnGroupingSelector, function (columnGrouping) {
+  var _columnGrouping$heade;
+
+  return (_columnGrouping$heade = columnGrouping == null ? void 0 : columnGrouping.headerStructure) != null ? _columnGrouping$heade : [];
+});
+export var gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, function (columnGrouping) {
+  var _columnGrouping$maxDe;
+
+  return (_columnGrouping$maxDe = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe : 0;
+});
+
+var getGroupingHeader = function getGroupingHeader(state) {
+  return {
+    columnGrouping: state.columnGrouping,
+    density: state.density
+  };
+};
+
+export var gridTotalHeaderHeightSelector = createSelector(getGroupingHeader, function (_ref) {
+  var _columnGrouping$maxDe2;
+
+  var columnGrouping = _ref.columnGrouping,
+      density = _ref.density;
+  return density.headerHeight * (((_columnGrouping$maxDe2 = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe2 : 0) + 1);
 });

package/legacy/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -0,0 +1,96 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { isLeaf } from '../../../models/gridColumnGrouping';
+import { isDeepEqual } from '../../../utils/utils';
+
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+var recurrentUnwrapGroupingColumnModel = function recurrentUnwrapGroupingColumnModel(columnGroupNode, parents, unwrappedGroupingModelToComplet) {
+  if (isLeaf(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
+      throw new Error(["MUI: columnGroupingModel contains duplicated field", "column field ".concat(columnGroupNode.field, " occurrs two times in the grouping model:"), "- ".concat(unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')), "- ".concat(parents.join(' > '))].join('\n'));
+    }
+
+    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
+    return;
+  }
+
+  var groupId = columnGroupNode.groupId,
+      children = columnGroupNode.children;
+  children.forEach(function (child) {
+    recurrentUnwrapGroupingColumnModel(child, [].concat(_toConsumableArray(parents), [groupId]), unwrappedGroupingModelToComplet);
+  });
+};
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+
+
+export var unwrapGroupingColumnModel = function unwrapGroupingColumnModel(columnGroupingModel) {
+  if (!columnGroupingModel) {
+    return {};
+  }
+
+  var unwrappedSubTree = {};
+  columnGroupingModel.forEach(function (columnGroupNode) {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+export var getColumnGroupsHeaderStructure = function getColumnGroupsHeaderStructure(orderedColumns, unwrappedGroupingModel) {
+  var getParents = function getParents(field) {
+    var _unwrappedGroupingMod;
+
+    return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
+  };
+
+  var groupingHeaderStructure = [];
+  var maxDepth = Math.max.apply(Math, _toConsumableArray(orderedColumns.map(function (field) {
+    return getParents(field).length;
+  })));
+
+  var haveSameParents = function haveSameParents(field1, field2, depth) {
+    return isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  };
+
+  var _loop = function _loop(depth) {
+    var depthStructure = orderedColumns.reduce(function (structure, newField) {
+      var _getParents$depth;
+
+      var groupId = (_getParents$depth = getParents(newField)[depth]) != null ? _getParents$depth : null;
+
+      if (structure.length === 0) {
+        return [{
+          columnFields: [newField],
+          groupId: groupId
+        }];
+      }
+
+      var lastGroup = structure[structure.length - 1];
+      var prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      var prevGroupId = lastGroup.groupId;
+
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) {
+        // It's a new group
+        return [].concat(_toConsumableArray(structure), [{
+          columnFields: [newField],
+          groupId: groupId
+        }]);
+      } // It extends the previous group
+
+
+      return [].concat(_toConsumableArray(structure.slice(0, structure.length - 1)), [{
+        columnFields: [].concat(_toConsumableArray(lastGroup.columnFields), [newField]),
+        groupId: groupId
+      }]);
+    }, []);
+    groupingHeaderStructure.push(depthStructure);
+  };
+
+  for (var depth = 0; depth < maxDepth; depth += 1) {
+    _loop(depth);
+  }
+
+  return groupingHeaderStructure;
+};

package/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -1,53 +1,17 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["groupId", "children"];
 import * as React from 'react';
 import { isLeaf } from '../../../models/gridColumnGrouping';
-import { gridColumnGroupsLookupSelector } from './gridColumnGroupsSelector';
-import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from './gridColumnGroupsSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-export function hasGroupPath(lookupElement) {
-  return lookupElement.groupPath !== undefined;
-}
-
-// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
-var recurrentUnwrapGroupingColumnModel = function recurrentUnwrapGroupingColumnModel(columnGroupNode, parents, unwrappedGroupingModelToComplet) {
-  if (isLeaf(columnGroupNode)) {
-    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
-      throw new Error(["MUI: columnGroupingModel contains duplicated field", "column field ".concat(columnGroupNode.field, " occurrs two times in the grouping model:"), "- ".concat(unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')), "- ".concat(parents.join(' > '))].join('\n'));
-    }
-
-    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
-    return;
-  }
-
-  var groupId = columnGroupNode.groupId,
-      children = columnGroupNode.children;
-  children.forEach(function (child) {
-    recurrentUnwrapGroupingColumnModel(child, [].concat(_toConsumableArray(parents), [groupId]), unwrappedGroupingModelToComplet);
-  });
-};
-/**
- * This is a function that provide for each column the array of its parents.
- * Parents are ordered from the root to the leaf.
- * @param columnGroupingModel The model such as provided in DataGrid props
- * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
- */
-
-
-export var unwrapGroupingColumnModel = function unwrapGroupingColumnModel(columnGroupingModel) {
-  if (!columnGroupingModel) {
-    return {};
-  }
-
-  var unwrappedSubTree = {};
-  columnGroupingModel.forEach(function (columnGroupNode) {
-    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
-  });
-  return unwrappedSubTree;
-};
+import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { gridColumnFieldsSelector, // GridColumnsState,
+gridVisibleColumnFieldsSelector } from '../columns';
+import { useGridSelector } from '../../utils/useGridSelector';
 
 var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   var groupLookup = {};
@@ -83,14 +47,29 @@ var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   return _extends({}, groupLookup);
 };
 
-export var columnGroupsStateInitializer = function columnGroupsStateInitializer(state, props) {
-  var _props$columnGrouping;
+export var columnGroupsStateInitializer = function columnGroupsStateInitializer(state, props, apiRef) {
+  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2;
 
+  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+    return state;
+  }
+
+  var columnFields = gridColumnFieldsSelector(apiRef);
+  var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   var groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
+  var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+  var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+  var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
+    var _unwrappedGroupingMod, _unwrappedGroupingMod2;
+
+    return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
+  })));
   return _extends({}, state, {
     columnGrouping: {
       lookup: groupLookup,
-      groupCollapsedModel: {}
+      unwrappedGroupingModel: unwrappedGroupingModel,
+      headerStructure: columnGroupsHeaderStructure,
+      maxDepth: maxDepth
     }
   });
 };
@@ -100,16 +79,16 @@ export var columnGroupsStateInitializer = function columnGroupsStateInitializer(
  */
 
 export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props) {
-  var _props$experimentalFe2;
+  var _props$experimentalFe3;
 
   /**
    * API METHODS
    */
   var getColumnGroupPath = React.useCallback(function (field) {
-    var _columnLookup$field$g, _columnLookup$field;
+    var _unwrappedGroupingMod3;
 
-    var columnLookup = gridColumnLookupSelector(apiRef);
-    return (_columnLookup$field$g = (_columnLookup$field = columnLookup[field]) == null ? void 0 : _columnLookup$field.groupPath) != null ? _columnLookup$field$g : [];
+    var unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
+    return (_unwrappedGroupingMod3 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod3 : [];
   }, [apiRef]);
   var getAllGroupDetails = React.useCallback(function () {
     var columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
@@ -120,32 +99,53 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
     unstable_getAllGroupDetails: getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'GridColumnGroupingApi');
+  var handleColumnReorderChange = React.useCallback(function () {
+    var _props$columnGrouping3;
+
+    var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping3 = props.columnGroupingModel) != null ? _props$columnGrouping3 : []);
+    apiRef.current.setState(function (state) {
+      var _state$columns$all, _state$columns;
+
+      var orderedFields = (_state$columns$all = (_state$columns = state.columns) == null ? void 0 : _state$columns.all) != null ? _state$columns$all : [];
+      var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel);
+      return _extends({}, state, {
+        columnGrouping: _extends({}, state.columnGrouping, {
+          headerStructure: columnGroupsHeaderStructure
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel]);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
+  var columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
+  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   /**
    * EFFECTS
    */
-  // The effect does not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
-  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
 
-  var isFirstRender = React.useRef(true);
   React.useEffect(function () {
-    var _props$experimentalFe, _props$columnGrouping2;
+    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
 
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
+    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
 
-    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
-      return;
-    }
+    var groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
+    var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+    var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
+      var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
 
-    var groupLookup = createGroupLookup((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+      return (_unwrappedGroupingMod4 = (_unwrappedGroupingMod5 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod5.length) != null ? _unwrappedGroupingMod4 : 0;
+    })));
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
-        columnGrouping: _extends({}, state.columnGrouping, {
-          lookup: groupLookup
-        })
+        columnGrouping: {
+          lookup: groupLookup,
+          unwrappedGroupingModel: unwrappedGroupingModel,
+          headerStructure: columnGroupsHeaderStructure,
+          maxDepth: maxDepth
+        }
       });
     });
-  }, [apiRef, props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
 };