@mui/x-data-grid-premium 8.7.0 → 8.9.0

package/hooks/features/pivoting/useGridPivoting.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridPivoting = exports.pivotingStateInitializer = void 0;
+exports.useGridPivotingExportState = exports.useGridPivoting = exports.pivotingStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -21,6 +21,14 @@ const emptyPivotModel = {
   values: []
 };
 const pivotingStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.pivoting = {
+    exportedStateRef: {
+      current: null
+    },
+    nonPivotDataRef: {
+      current: undefined
+    }
+  };
   if (!(0, _utils.isPivotingAvailable)(props)) {
     return (0, _extends2.default)({}, state, {
       pivoting: {
@@ -43,8 +51,10 @@ const pivotingStateInitializer = (state, props, apiRef) => {
 exports.pivotingStateInitializer = pivotingStateInitializer;
 const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
   const isPivotActive = (0, _internals.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
-  const exportedStateRef = React.useRef(null);
-  const nonPivotDataRef = React.useRef(undefined);
+  const {
+    exportedStateRef,
+    nonPivotDataRef
+  } = apiRef.current.caches.pivoting;
   const isPivotingAvailable = (0, _utils.isPivotingAvailable)(props);
   apiRef.current.registerControlState({
     stateId: 'pivotModel',
@@ -77,9 +87,10 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
     const initialColumns = (0, _utils.getInitialColumns)(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
     return {
       rows,
-      columns: initialColumns
+      columns: initialColumns,
+      originalRowsProp
     };
-  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp]);
+  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef]);
   const computePivotingState = React.useCallback(({
     active,
     model: pivotModel
@@ -100,51 +111,44 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
           columns,
           pivotModel,
           apiRef: apiRef,
-          pivotingColDef: props.pivotingColDef
+          pivotingColDef: props.pivotingColDef,
+          groupingColDef: props.groupingColDef
         })
       };
     }
     return undefined;
-  }, [apiRef, props.pivotingColDef]);
+  }, [apiRef, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
   (0, _useOnMount.default)(() => {
     if (!isPivotingAvailable || !isPivotActive) {
       return undefined;
     }
+    nonPivotDataRef.current = getInitialData();
     const isLoading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef) ?? false;
-    const runPivoting = () => {
-      nonPivotDataRef.current = getInitialData();
-      apiRef.current.setState(state => {
-        const pivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting));
-        return (0, _extends2.default)({}, state, {
-          pivoting: pivotingState
-        });
-      });
-    };
-    if (!isLoading) {
-      runPivoting();
+    if (isLoading) {
       return undefined;
     }
-    const unsubscribe = apiRef.current?.store.subscribe(() => {
-      const loading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef);
-      if (loading === false) {
-        unsubscribe();
-        runPivoting();
-      }
+    apiRef.current.setState(state => {
+      const pivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting));
+      return (0, _extends2.default)({}, state, {
+        pivoting: pivotingState
+      });
     });
-    return unsubscribe;
+    return undefined;
   });
   (0, _useEnhancedEffect.default)(() => {
     if (!isPivotingAvailable || !isPivotActive) {
-      if (exportedStateRef.current) {
-        apiRef.current.restoreState(exportedStateRef.current);
-        exportedStateRef.current = null;
-      }
       if (nonPivotDataRef.current) {
+        // Prevent rows from being resynced from the original rows prop
+        apiRef.current.caches.rows.rowsBeforePartialUpdates = nonPivotDataRef.current.originalRowsProp;
         apiRef.current.setRows(nonPivotDataRef.current.rows);
         nonPivotDataRef.current = undefined;
       }
+      if (exportedStateRef.current) {
+        apiRef.current.restoreState(exportedStateRef.current);
+        exportedStateRef.current = null;
+      }
     }
-  }, [isPivotActive, apiRef, isPivotingAvailable]);
+  }, [isPivotActive, apiRef, isPivotingAvailable, nonPivotDataRef, exportedStateRef]);
   const setPivotModel = React.useCallback(callback => {
     if (!isPivotingAvailable) {
       return;
@@ -230,7 +234,6 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
     if (!isPivotingAvailable) {
       return;
     }
-    apiRef.current.selectRows([], false, true);
     apiRef.current.setState(state => {
       const newPivotMode = typeof callback === 'function' ? callback(state.pivoting?.active) : callback;
       if (state.pivoting?.active === newPivotMode) {
@@ -249,7 +252,8 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
       });
       return newState;
     });
-  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable]);
+    apiRef.current.selectRows([], false, true);
+  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable, nonPivotDataRef]);
   const setPivotPanelOpen = React.useCallback(callback => {
     if (!isPivotingAvailable) {
       return;
@@ -285,9 +289,9 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
         })
       });
     });
-  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState]);
+  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState, nonPivotDataRef]);
   const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
-    if (!nonPivotDataRef.current || !rows || rows.length === 0) {
+    if (!nonPivotDataRef.current || !isPivotingAvailable || !rows || rows.length === 0) {
       return;
     }
     if (keepPreviousRows) {
@@ -313,7 +317,7 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
         pivoting: (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting))
       });
     });
-  }, [apiRef, computePivotingState]);
+  }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
   (0, _internals.useGridApiMethod)(apiRef, {
     setPivotModel,
     setPivotActive,
@@ -329,7 +333,10 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
   }, [originalColumnsProp, apiRef]);
   (0, _useEnhancedEffect.default)(() => {
     apiRef.current.updateNonPivotRows(originalRowsProp, false);
-  }, [originalRowsProp, apiRef]);
+    if (nonPivotDataRef.current) {
+      nonPivotDataRef.current.originalRowsProp = originalRowsProp;
+    }
+  }, [originalRowsProp, apiRef, nonPivotDataRef]);
   (0, _useEnhancedEffect.default)(() => {
     if (props.pivotModel !== undefined) {
       apiRef.current.setPivotModel(props.pivotModel);
@@ -346,4 +353,20 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
     }
   }, [apiRef, props.pivotPanelOpen]);
 };
-exports.useGridPivoting = useGridPivoting;
+exports.useGridPivoting = useGridPivoting;
+const useGridPivotingExportState = apiRef => {
+  const stateExportPreProcessing = React.useCallback(state => {
+    const isPivotActive = (0, _gridPivotingSelectors.gridPivotActiveSelector)(apiRef);
+    if (!isPivotActive) {
+      return state;
+    }
+
+    // To-do: implement context.exportOnlyDirtyModels
+    const newState = (0, _extends2.default)({}, state, apiRef.current.caches.pivoting.exportedStateRef.current, {
+      sorting: state.sorting
+    });
+    return newState;
+  }, [apiRef]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+};
+exports.useGridPivotingExportState = useGridPivotingExportState;

package/hooks/features/pivoting/utils.d.ts

@@ -11,11 +11,13 @@ export declare const getPivotedData: ({
   columns,
   pivotModel,
   apiRef,
-  pivotingColDef
+  pivotingColDef,
+  groupingColDef
 }: {
   rows: GridRowModel[];
   columns: Map<string, GridColDef>;
   pivotModel: GridPivotModel;
   apiRef: RefObject<GridApiPremium>;
   pivotingColDef: DataGridPremiumProcessedProps["pivotingColDef"];
+  groupingColDef: DataGridPremiumProcessedProps["groupingColDef"];
 }) => GridPivotingPropsOverrides;

package/hooks/features/pivoting/utils.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _rowGrouping = require("../rowGrouping");
+var _gridAggregationUtils = require("../aggregation/gridAggregationUtils");
 const columnGroupIdSeparator = '>->';
 const isPivotingAvailable = props => {
   return !props.disablePivoting;
@@ -74,7 +75,8 @@ const getPivotedData = ({
   columns,
   pivotModel,
   apiRef,
-  pivotingColDef
+  pivotingColDef,
+  groupingColDef
 }) => {
   const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
   const visibleRows = pivotModel.rows.filter(row => !row.hidden);
@@ -139,26 +141,31 @@ const getPivotedData = ({
       const row = rows[i];
       const newRow = (0, _extends2.default)({}, row);
       const columnGroupPath = [];
-      visibleColumns.forEach(({
-        field: colGroupField
-      }, depth) => {
+      for (let j = 0; j < visibleColumns.length; j += 1) {
+        const {
+          field: colGroupField
+        } = visibleColumns[j];
+        const depth = j;
         const column = initialColumns.get(colGroupField);
         if (!column) {
-          return;
+          continue;
         }
         let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
+        if (column.type !== 'number') {
+          colValue = String(colValue);
+        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {
             colValue = singleSelectColumn.getOptionLabel(colValue);
           }
         }
-        columnGroupPath.push(String(colValue));
+        columnGroupPath.push(colValue);
         const groupId = columnGroupPath.join(columnGroupIdSeparator);
         if (!columnGroupingModelLookup.has(groupId)) {
           const columnGroup = {
             groupId,
-            headerName: String(colValue),
+            headerName: colValue,
             children: []
           };
           columnGroupingModelLookup.set(groupId, columnGroup);
@@ -184,7 +191,7 @@ const getPivotedData = ({
             newRow[valueKey] = apiRef.current.getRowValue(row, originalColumn);
           });
         }
-      });
+      }
       newRows.push(newRow);
     }
     sortColumnGroups(columnGroupingModel, visibleColumns);
@@ -249,19 +256,20 @@ const getPivotedData = ({
     }
   }
   createColumns(columnGroupingModel);
+  const groupingColDefOverrides = params => (0, _extends2.default)({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
+    filterable: false,
+    aggregable: false,
+    hideable: false
+  });
   return {
     rows: visibleRows.length > 0 ? newRows : [],
     columns: pivotColumns,
     rowGroupingModel: visibleRows.map(row => row.field),
     aggregationModel,
-    getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
+    getAggregationPosition: _gridAggregationUtils.defaultGetAggregationPosition,
     columnVisibilityModel,
     columnGroupingModel,
-    groupingColDef: {
-      filterable: false,
-      aggregable: false,
-      hideable: false
-    },
+    groupingColDef: groupingColDefOverrides,
     headerFilters: false,
     disableAggregation: false,
     disableRowGrouping: false

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -146,6 +146,11 @@ const mergeStateWithRowGroupingModel = rowGroupingModel => state => (0, _extends
 });
 exports.mergeStateWithRowGroupingModel = mergeStateWithRowGroupingModel;
 const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource) => {
+  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
+  if (privateApiRef.current.getActiveStrategy(_internals.GridStrategyGroup.RowTree) === strategy) {
+    // If the strategy is already active, we don't need to set it again
+    return;
+  }
   let isAvailable;
   if (disableRowGrouping) {
     isAvailable = () => false;
@@ -155,7 +160,6 @@ const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource)
       return rowGroupingSanitizedModel.length > 0;
     };
   }
-  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
   privateApiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.RowTree, strategy, isAvailable);
 };
 exports.setStrategyAvailability = setStrategyAvailability;

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -28,7 +28,7 @@ const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
     });
     apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
     const getRowTreeBuilderNode = rowId => {
-      const parentPath = params.updates.groupKeys ?? [];
+      const parentPath = params.updates.groupKeys ?? (0, _internals.getParentPath)(rowId, params);
       const leafKey = getGroupKey(params.dataRowIdToModelLookup[rowId]);
       return {
         id: rowId,

package/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-data-grid-premium v8.7.0
+ * @mui/x-data-grid-premium v8.9.0
  *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
+ * @license SEE LICENSE IN LICENSE
+ * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
  * LICENSE file in the root directory of this source tree.
  */
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.7.0",
+  "version": "8.9.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "main": "./index.js",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@mui/utils": "^7.1.1",
+    "@mui/utils": "^7.2.0",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "exceljs": "^4.4.0",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.7.0",
-    "@mui/x-internals": "8.7.0",
-    "@mui/x-data-grid-pro": "8.7.0",
-    "@mui/x-license": "8.7.0"
+    "@mui/x-data-grid": "8.8.0",
+    "@mui/x-data-grid-pro": "8.9.0",
+    "@mui/x-license": "8.9.0",
+    "@mui/x-internals": "8.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/typeOverloads/modules.d.ts

@@ -5,7 +5,7 @@ import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMet
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridExcelExportOptions } from "../hooks/features/export/gridExcelExportInterface.js";
-import type { GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
+import type { GridPivotingInternalCache, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 export interface GridControlledStateEventLookupPremium {
   /**
    * Fired when the aggregation model changes.
@@ -105,6 +105,7 @@ export interface GridColumnHeaderParamsPremium<R extends GridValidRowModel = any
   aggregation?: GridAggregationHeaderMeta;
 }
 export interface GridApiCachesPremium extends GridApiCachesPro {
+  pivoting: GridPivotingInternalCache;
   rowGrouping: GridRowGroupingInternalCache;
   aggregation: GridAggregationInternalCache;
 }