@mui/x-data-grid-premium 5.13.0 → 5.15.0

package/modern/hooks/features/aggregation/gridAggregationUtils.js

@@ -0,0 +1,186 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { capitalize } from '@mui/material';
+import { addPinnedRow, isDeepEqual } from '@mui/x-data-grid-pro/internals';
+export const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
+export const getAggregationFooterRowIdFromGroupId = groupId => {
+  if (groupId == null) {
+    return GRID_AGGREGATION_ROOT_FOOTER_ROW_ID;
+  }
+
+  return `auto-generated-group-footer-${groupId}`;
+};
+export const canColumnHaveAggregationFunction = ({
+  column,
+  aggregationFunctionName,
+  aggregationFunction
+}) => {
+  if (!column || !column.aggregable) {
+    return false;
+  }
+
+  if (!aggregationFunction) {
+    return false;
+  }
+
+  if (column.availableAggregationFunctions != null) {
+    return column.availableAggregationFunctions.includes(aggregationFunctionName);
+  }
+
+  if (!aggregationFunction.columnTypes) {
+    return true;
+  }
+
+  return aggregationFunction.columnTypes.includes(column.type);
+};
+export const getAvailableAggregationFunctions = ({
+  aggregationFunctions,
+  column
+}) => Object.keys(aggregationFunctions).filter(aggregationFunctionName => canColumnHaveAggregationFunction({
+  column,
+  aggregationFunctionName,
+  aggregationFunction: aggregationFunctions[aggregationFunctionName]
+}));
+export const mergeStateWithAggregationModel = aggregationModel => state => _extends({}, state, {
+  aggregation: _extends({}, state.aggregation, {
+    model: aggregationModel
+  })
+});
+export const getAggregationRules = ({
+  columnsLookup,
+  aggregationModel,
+  aggregationFunctions
+}) => {
+  const aggregationRules = {};
+  Object.entries(aggregationModel).forEach(([field, columnItem]) => {
+    if (columnsLookup[field] && canColumnHaveAggregationFunction({
+      column: columnsLookup[field],
+      aggregationFunctionName: columnItem,
+      aggregationFunction: aggregationFunctions[columnItem]
+    })) {
+      aggregationRules[field] = {
+        aggregationFunctionName: columnItem,
+        aggregationFunction: aggregationFunctions[columnItem]
+      };
+    }
+  });
+  return aggregationRules;
+};
+/**
+ * Add a footer for each group that has at least one column with an aggregated value.
+ */
+
+export const addFooterRows = ({
+  groupingParams,
+  aggregationRules,
+  getAggregationPosition,
+  apiRef
+}) => {
+  if (Object.keys(aggregationRules).length === 0) {
+    return groupingParams;
+  }
+
+  const ids = [...groupingParams.ids];
+
+  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+
+  const tree = _extends({}, groupingParams.tree);
+
+  const addGroupFooter = groupNode => {
+    const groupId = groupNode?.id ?? null;
+
+    if (getAggregationPosition(groupNode) !== 'footer') {
+      return;
+    }
+
+    const footerId = getAggregationFooterRowIdFromGroupId(groupId);
+    ids.push(footerId);
+    idRowsLookup[footerId] = {};
+    tree[footerId] = {
+      id: footerId,
+      isAutoGenerated: true,
+      parent: groupId,
+      depth: groupNode ? groupNode.depth + 1 : 0,
+      groupingKey: null,
+      groupingField: null,
+      position: 'footer'
+    };
+
+    if (groupId != null) {
+      tree[groupId] = _extends({}, tree[groupId], {
+        footerId
+      });
+    }
+  }; // If the tree is flat, we don't need to loop through the rows
+
+
+  if (groupingParams.treeDepth > 1) {
+    groupingParams.ids.forEach(parentId => {
+      const parentNode = tree[parentId];
+
+      if (parentNode.depth === groupingParams.treeDepth - 1) {
+        return;
+      }
+
+      addGroupFooter(parentNode);
+    });
+  }
+
+  let newGroupingParams = _extends({}, groupingParams, {
+    tree,
+    idRowsLookup,
+    ids
+  });
+
+  if (getAggregationPosition(null) === 'footer') {
+    newGroupingParams = addPinnedRow({
+      groupingParams: newGroupingParams,
+      rowModel: {},
+      rowId: getAggregationFooterRowIdFromGroupId(null),
+      position: 'bottom',
+      apiRef
+    });
+  }
+
+  return _extends({}, groupingParams, newGroupingParams);
+};
+/**
+ * Compares two sets of aggregation rules to determine if they are equal or not.
+ */
+
+export const hasAggregationRulesChanged = (previousValue, newValue) => {
+  const previousFields = Object.keys(previousValue ?? {});
+  const newFields = Object.keys(newValue);
+
+  if (!isDeepEqual(previousFields, newFields)) {
+    return true;
+  }
+
+  return newFields.some(field => {
+    const previousRule = previousValue?.[field];
+    const newRule = newValue[field];
+
+    if (previousRule?.aggregationFunction !== newRule?.aggregationFunction) {
+      return true;
+    }
+
+    if (previousRule?.aggregationFunctionName !== newRule?.aggregationFunctionName) {
+      return true;
+    }
+
+    return false;
+  });
+};
+export const getAggregationFunctionLabel = ({
+  apiRef,
+  aggregationRule
+}) => {
+  if (aggregationRule.aggregationFunction.label != null) {
+    return aggregationRule.aggregationFunction.label;
+  }
+
+  try {
+    return apiRef.current.getLocaleText(`aggregationFunctionLabel${capitalize(aggregationRule.aggregationFunctionName)}`);
+  } catch (e) {
+    return aggregationRule.aggregationFunctionName;
+  }
+};

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

@@ -0,0 +1,4 @@
+export * from './gridAggregationInterfaces';
+export * from './gridAggregationSelectors';
+export * from './gridAggregationFunctions';
+export { GRID_AGGREGATION_ROOT_FOOTER_ROW_ID, getAggregationFooterRowIdFromGroupId } from './gridAggregationUtils';

package/modern/hooks/features/aggregation/useGridAggregation.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridColumnLookupSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid-pro';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+import { getAggregationRules, mergeStateWithAggregationModel, hasAggregationRulesChanged } from './gridAggregationUtils';
+import { createAggregationLookup } from './createAggregationLookup';
+export const aggregationStateInitializer = (state, props, apiRef) => {
+  apiRef.current.unstable_caches.aggregation = {
+    rulesOnLastColumnHydration: {},
+    rulesOnLastRowHydration: {}
+  };
+  return _extends({}, state, {
+    aggregation: {
+      model: props.aggregationModel ?? props.initialState?.aggregation?.model ?? {}
+    }
+  });
+};
+export const useGridAggregation = (apiRef, props) => {
+  apiRef.current.unstable_registerControlState({
+    stateId: 'aggregation',
+    propModel: props.aggregationModel,
+    propOnChange: props.onAggregationModelChange,
+    stateSelector: gridAggregationModelSelector,
+    changeEvent: 'aggregationModelChange'
+  });
+  /**
+   * API METHODS
+   */
+
+  const setAggregationModel = React.useCallback(model => {
+    const currentModel = gridAggregationModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      apiRef.current.setState(mergeStateWithAggregationModel(model));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef]);
+  const applyAggregation = React.useCallback(() => {
+    const aggregationLookup = createAggregationLookup({
+      apiRef,
+      getAggregationPosition: props.getAggregationPosition,
+      aggregationFunctions: props.aggregationFunctions,
+      aggregationRowsScope: props.aggregationRowsScope
+    });
+    apiRef.current.setState(state => _extends({}, state, {
+      aggregation: _extends({}, state.aggregation, {
+        lookup: aggregationLookup
+      })
+    }));
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope]);
+  const aggregationApi = {
+    setAggregationModel
+  };
+  useGridApiMethod(apiRef, aggregationApi, 'GridAggregationApi');
+  /**
+   * EVENTS
+   */
+
+  const checkAggregationRulesDiff = React.useCallback(() => {
+    const {
+      rulesOnLastRowHydration,
+      rulesOnLastColumnHydration
+    } = apiRef.current.unstable_caches.aggregation;
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
+      columnsLookup: gridColumnLookupSelector(apiRef),
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.aggregationFunctions
+    }); // Re-apply the row hydration to add / remove the aggregation footers
+
+    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+      applyAggregation();
+    } // Re-apply the column hydration to wrap / unwrap the aggregated columns
+
+
+    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+    }
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);
+  useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.aggregationModel !== undefined) {
+      apiRef.current.setAggregationModel(props.aggregationModel);
+    }
+  }, [apiRef, props.aggregationModel]);
+};

package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import MuiDivider from '@mui/material/Divider';
+import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { getAvailableAggregationFunctions, addFooterRows, getAggregationRules, mergeStateWithAggregationModel } from './gridAggregationUtils';
+import { wrapColumnWithAggregationValue, unwrapColumnFromAggregation } from './wrapColumnWithAggregation';
+import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem';
+import { gridAggregationModelSelector } from './gridAggregationSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
+  onClick: event => event.stopPropagation()
+});
+
+export const useGridAggregationPreProcessors = (apiRef, props) => {
+  const updateAggregatedColumns = React.useCallback(columnsState => {
+    const {
+      rulesOnLastColumnHydration
+    } = apiRef.current.unstable_caches.aggregation;
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
+      columnsLookup: columnsState.lookup,
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.aggregationFunctions
+    });
+    columnsState.all.forEach(field => {
+      const shouldHaveAggregationValue = !!aggregationRules[field];
+      const haveAggregationColumnValue = !!rulesOnLastColumnHydration[field];
+      let column = columnsState.lookup[field];
+
+      if (haveAggregationColumnValue) {
+        column = unwrapColumnFromAggregation({
+          column
+        });
+      }
+
+      if (shouldHaveAggregationValue) {
+        column = wrapColumnWithAggregationValue({
+          column,
+          aggregationRule: aggregationRules[field],
+          apiRef
+        });
+      }
+
+      columnsState.lookup[field] = column;
+    });
+    apiRef.current.unstable_caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
+    return columnsState;
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  const addGroupFooterRows = React.useCallback(groupingParams => {
+    let newGroupingParams;
+    let rulesOnLastRowHydration;
+
+    if (props.disableAggregation) {
+      newGroupingParams = groupingParams;
+      rulesOnLastRowHydration = {};
+    } else {
+      const aggregationRules = getAggregationRules({
+        columnsLookup: gridColumnLookupSelector(apiRef),
+        aggregationModel: gridAggregationModelSelector(apiRef),
+        aggregationFunctions: props.aggregationFunctions
+      });
+      rulesOnLastRowHydration = aggregationRules; // If no column have an aggregation rule
+      // Then don't create the footer rows
+
+      if (Object.values(aggregationRules).length === 0) {
+        newGroupingParams = groupingParams;
+      } else {
+        newGroupingParams = addFooterRows({
+          groupingParams,
+          aggregationRules,
+          getAggregationPosition: props.getAggregationPosition,
+          apiRef
+        });
+      }
+    }
+
+    apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = rulesOnLastRowHydration;
+    return newGroupingParams;
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
+  const addColumnMenuButtons = React.useCallback((initialValue, column) => {
+    if (props.disableAggregation) {
+      return initialValue;
+    }
+
+    const availableAggregationFunctions = getAvailableAggregationFunctions({
+      aggregationFunctions: props.aggregationFunctions,
+      column
+    });
+
+    if (availableAggregationFunctions.length === 0) {
+      return initialValue;
+    }
+
+    return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridAggregationColumnMenuItem, {
+      column: column,
+      label: apiRef.current.getLocaleText('aggregationMenuItemHeader'),
+      availableAggregationFunctions: availableAggregationFunctions
+    })];
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    if (props.disableAggregation) {
+      return prevState;
+    }
+
+    const aggregationModelToExport = gridAggregationModelSelector(apiRef);
+
+    if (Object.values(aggregationModelToExport).length === 0) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      aggregation: {
+        model: aggregationModelToExport
+      }
+    });
+  }, [apiRef, props.disableAggregation]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    if (props.disableAggregation) {
+      return params;
+    }
+
+    const aggregationModel = context.stateToRestore.aggregation?.model;
+
+    if (aggregationModel != null) {
+      apiRef.current.setState(mergeStateWithAggregationModel(aggregationModel));
+    }
+
+    return params;
+  }, [apiRef, props.disableAggregation]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateAggregatedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addGroupFooterRows);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+};

package/modern/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -0,0 +1,251 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridAggregationLookupSelector } from './gridAggregationSelectors';
+import { GridFooterCell } from '../../../components/GridFooterCell';
+import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AGGREGATION_WRAPPABLE_PROPERTIES = ['valueGetter', 'valueFormatter', 'renderCell', 'renderHeader', 'filterOperators'];
+
+const getAggregationValueWrappedValueGetter = ({
+  value: valueGetter,
+  getCellAggregationResult
+}) => {
+  const wrappedValueGetter = params => {
+    const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+    if (cellAggregationResult != null) {
+      return cellAggregationResult?.value ?? null;
+    }
+
+    if (valueGetter) {
+      return valueGetter(params);
+    }
+
+    return params.row[params.field];
+  };
+
+  return wrappedValueGetter;
+};
+
+const getAggregationValueWrappedValueFormatter = ({
+  value: valueFormatter,
+  aggregationRule,
+  getCellAggregationResult
+}) => {
+  // If neither the inline aggregation function nor the footer aggregation function have a custom value formatter,
+  // Then we don't wrap the column value formatter
+  if (!aggregationRule.aggregationFunction.valueFormatter) {
+    return valueFormatter;
+  }
+
+  const wrappedValueFormatter = params => {
+    if (params.id != null) {
+      const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+      if (cellAggregationResult != null) {
+        return aggregationRule.aggregationFunction.valueFormatter(params);
+      }
+    }
+
+    if (valueFormatter) {
+      return valueFormatter(params);
+    }
+
+    return params.value;
+  };
+
+  return wrappedValueFormatter;
+};
+
+const getAggregationValueWrappedRenderCell = ({
+  value: renderCell,
+  aggregationRule,
+  getCellAggregationResult
+}) => {
+  const wrappedRenderCell = params => {
+    const cellAggregationResult = getCellAggregationResult(params.id, params.field);
+
+    if (cellAggregationResult != null) {
+      if (!renderCell) {
+        if (cellAggregationResult.position === 'footer') {
+          return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
+        }
+
+        return params.formattedValue;
+      }
+
+      const aggregationMeta = {
+        hasCellUnit: aggregationRule.aggregationFunction.hasCellUnit ?? true,
+        aggregationFunctionName: aggregationRule.aggregationFunctionName
+      };
+      return renderCell(_extends({}, params, {
+        aggregation: aggregationMeta
+      }));
+    }
+
+    if (!renderCell) {
+      return params.formattedValue;
+    }
+
+    return renderCell(params);
+  };
+
+  return wrappedRenderCell;
+};
+/**
+ * Skips the filtering for aggregated rows
+ */
+
+
+const getWrappedFilterOperators = ({
+  value: filterOperators,
+  getCellAggregationResult
+}) => filterOperators.map(operator => {
+  return _extends({}, operator, {
+    getApplyFilterFn: (filterItem, column) => {
+      const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+      if (!originalFn) {
+        return null;
+      }
+
+      return params => {
+        if (getCellAggregationResult(params.id, params.field) != null) {
+          return true;
+        }
+
+        return originalFn(params);
+      };
+    }
+  });
+});
+/**
+ * Add the aggregation method around the header name
+ */
+
+
+const getWrappedRenderHeader = ({
+  value: renderHeader,
+  aggregationRule
+}) => {
+  const wrappedRenderCell = params => {
+    const aggregationMeta = {
+      aggregationRule
+    };
+
+    if (!renderHeader) {
+      return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
+        aggregation: aggregationMeta
+      }));
+    }
+
+    return renderHeader(_extends({}, params, {
+      aggregation: aggregationMeta
+    }));
+  };
+
+  return wrappedRenderCell;
+};
+/**
+ * Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
+ */
+
+
+export const wrapColumnWithAggregationValue = ({
+  column,
+  apiRef,
+  aggregationRule
+}) => {
+  const getCellAggregationResult = (id, field) => {
+    let cellAggregationPosition = null;
+
+    if (id.toString().startsWith('auto-generated-row-')) {
+      cellAggregationPosition = 'inline';
+    } else if (id.toString().startsWith('auto-generated-group-footer-')) {
+      cellAggregationPosition = 'footer';
+    }
+
+    if (cellAggregationPosition == null) {
+      return null;
+    } // TODO: Add custom root id
+
+
+    const groupId = cellAggregationPosition === 'inline' ? id : apiRef.current.getRowNode(id).parent ?? '';
+    const aggregationResult = gridAggregationLookupSelector(apiRef)[groupId]?.[field];
+
+    if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
+      return null;
+    }
+
+    return aggregationResult;
+  };
+
+  const aggregationWrappedProperties = {};
+
+  const wrappedColumn = _extends({}, column, {
+    aggregationWrappedProperties
+  });
+
+  const wrapColumnProperty = (property, wrapper) => {
+    const originalValue = column[property];
+    const wrappedProperty = wrapper({
+      apiRef,
+      value: originalValue,
+      colDef: column,
+      aggregationRule,
+      getCellAggregationResult
+    });
+
+    if (wrappedProperty !== originalValue) {
+      aggregationWrappedProperties[property] = {
+        original: originalValue,
+        wrapped: wrappedProperty
+      };
+      wrappedColumn[property] = wrappedProperty;
+    }
+  };
+
+  wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
+  wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
+  wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
+  wrapColumnProperty('renderHeader', getWrappedRenderHeader);
+  wrapColumnProperty('filterOperators', getWrappedFilterOperators);
+
+  if (Object.keys(aggregationWrappedProperties).length === 0) {
+    return column;
+  }
+
+  return wrappedColumn;
+};
+/**
+ * Remove the aggregation wrappers around the wrappable properties of the column.
+ */
+
+export const unwrapColumnFromAggregation = ({
+  column
+}) => {
+  if (!column.aggregationWrappedProperties) {
+    return column;
+  }
+
+  const originalProperties = Object.entries(column.aggregationWrappedProperties);
+
+  if (originalProperties.length === 0) {
+    return column;
+  }
+
+  const unwrappedColumn = _extends({}, column);
+
+  originalProperties.forEach(([propertyName, {
+    original,
+    wrapped
+  }]) => {
+    // The value changed since we wrapped it
+    if (wrapped !== column[propertyName]) {
+      return;
+    }
+
+    unwrappedColumn[propertyName] = original;
+  });
+  return unwrappedColumn;
+};

package/modern/hooks/features/export/serializer/excelSerializer.js

@@ -46,7 +46,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   api.unstable_calculateColSpan({
     rowId: id,
     minFirstColumn: 0,
-    maxLastColumn: columns.length - 1
+    maxLastColumn: columns.length,
+    columns
   });
   columns.forEach((column, colIndex) => {
     const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);

package/modern/hooks/features/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';