@mui/x-data-grid-premium 8.15.0 → 8.17.0

package/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -158,19 +158,21 @@ const useGridChartsIntegration = (apiRef, props) => {
     if (!pivotActive && visibleValues.current[activeChartId] && rowGroupingModel.length > 0) {
       // with row grouping add the aggregation model to the newly added value dataset
       const aggregatedFields = Object.keys(aggregationModel);
+      const aggregationsToAdd = {};
       visibleValues.current[activeChartId].forEach(item => {
         const hasAggregation = aggregatedFields.includes(item.field);
         if (!hasAggregation) {
-          apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, {
-            // use the first available aggregation function
-            [item.field]: (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
-              aggregationFunctions: props.aggregationFunctions,
-              colDef: item,
-              isDataSource: !!props.dataSource
-            })[0]
-          }));
+          // use the first available aggregation function
+          aggregationsToAdd[item.field] = (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: item,
+            isDataSource: !!props.dataSource
+          })[0];
         }
       });
+      if (Object.keys(aggregationsToAdd).length > 0) {
+        apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, aggregationsToAdd));
+      }
     }
   }, [apiRef, props.aggregationFunctions, props.dataSource, activeChartId, pivotActive, aggregationModel]);
   const handleRowDataUpdate = React.useCallback(chartIds => {
@@ -304,8 +306,8 @@ const useGridChartsIntegration = (apiRef, props) => {
       }
     });
     updateOtherModels();
-    handleRowDataUpdate(chartIds);
-  }, [apiRef, chartStateLookup, pivotActive, pivotModel, handleRowDataUpdate, updateOtherModels]);
+    debouncedHandleRowDataUpdate(chartIds);
+  }, [apiRef, chartStateLookup, pivotActive, pivotModel, debouncedHandleRowDataUpdate, updateOtherModels]);
   const debouncedHandleColumnDataUpdate = React.useMemo(() => (0, _debounce.default)(handleColumnDataUpdate, 0), [handleColumnDataUpdate]);
   const setChartsPanelOpen = React.useCallback(callback => {
     if (!isChartsIntegrationAvailable) {
@@ -504,6 +506,67 @@ const useGridChartsIntegration = (apiRef, props) => {
   (0, _internals.useGridEvent)(apiRef, 'pivotModeChange', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'filteredRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'sortedRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
+    if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
+      return prevState;
+    }
+    const currentActiveChartId = (0, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector)(apiRef);
+    const chartsLookup = (0, _gridChartsIntegrationSelectors.gridChartsIntegrationChartsLookupSelector)(apiRef);
+    const integrationContextToExport = Object.fromEntries(Object.entries(chartStateLookup).map(([chartId, chartState]) => [chartId,
+    // keep only the state that is controlled by the user, drop the data and labels
+    {
+      synced: chartState.synced,
+      type: chartState.type,
+      configuration: chartState.configuration
+    }]));
+    const shouldExportChartState =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !exportContext.exportOnlyDirtyModels ||
+    // Always export if the chart state has been initialized
+    props.initialState?.chartsIntegration != null ||
+    // Export if the chart model or context is not empty
+    Object.keys(chartsLookup).length > 0 || Object.keys(integrationContextToExport).length > 0;
+    if (!shouldExportChartState) {
+      return prevState;
+    }
+    const chartStateToExport = {
+      activeChartId: currentActiveChartId,
+      charts: chartsLookup,
+      // add a custom prop to keep the integration context in the exported state
+      integrationContext: integrationContextToExport
+    };
+    return (0, _extends2.default)({}, prevState, {
+      chartsIntegration: chartStateToExport
+    });
+  }, [apiRef, chartStateLookup, props.chartsIntegration, props.experimentalFeatures?.charts, props.initialState?.chartsIntegration]);
+  const stateRestorePreProcessing = React.useCallback((params, restoreContext) => {
+    const chartsRestoreState = restoreContext.stateToRestore.chartsIntegration;
+    if (!chartsRestoreState) {
+      return params;
+    }
+    const {
+      activeChartId: activeChartIdToRestore,
+      charts: chartsToRestore,
+      integrationContext
+    } = chartsRestoreState;
+    if (activeChartIdToRestore === undefined || chartsToRestore === undefined || Object.keys(chartsToRestore).length === 0) {
+      return params;
+    }
+    apiRef.current.setState((0, _extends2.default)({}, apiRef.current.state, {
+      chartsIntegration: {
+        activeChartId: activeChartIdToRestore,
+        charts: chartsToRestore
+      }
+    }));
+
+    // restore the integration context for each chart
+    Object.entries(integrationContext).forEach(([chartId, chartContextState]) => {
+      setChartState(chartId, chartContextState);
+    });
+    return params;
+  }, [apiRef, setChartState]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (!activeChartId && availableChartIds.length > 0) {
       setActiveChartId(availableChartIds[0]);

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -9,11 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridDataSourcePremium = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 var _utils = require("./utils");
 var _gridRowGroupingSelector = require("../rowGrouping/gridRowGroupingSelector");
+var _gridAggregationSelectors = require("../aggregation/gridAggregationSelectors");
 function getKeyPremium(params) {
   return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
@@ -23,18 +25,32 @@ const options = {
   }
 };
 const useGridDataSourcePremium = (apiRef, props) => {
+  const aggregationModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
   const groupingModelSize = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
     const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? _internals.DataSourceRowsUpdateStrategy.GroupedData : _internals.DataSourceRowsUpdateStrategy.Default;
     apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, targetStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
+  const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+    const groupKeys = (0, _internals.getGroupKeys)(rowTree, params.rowId);
+    apiRef.current.updateNestedRows([updatedRow], groupKeys);
+    // To refresh the aggregation values of all parent rows and the footer row, recursively re-fetch all parent levels
+    (0, _utils.fetchParents)(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
+  }, [apiRef]);
   const {
     api,
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
     events
-  } = (0, _internals.useGridDataSourceBasePro)(apiRef, props, options);
+  } = (0, _internals.useGridDataSourceBasePro)(apiRef, props, (0, _extends2.default)({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
+    handleEditRow: handleEditRowWithAggregation
+  } : {}, options));
   const aggregateRowRef = React.useRef({});
   const initialColumns = (0, _internals.gridPivotInitialColumnsSelector)(apiRef);
   const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);

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

@@ -1,6 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRowId, GridRowTreeConfig } from '@mui/x-data-grid-pro';
 import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridPivotingDynamicPropsOverrides, PivotingColDefCallback, GridPivotModel } from "../pivoting/gridPivotingInterfaces.js";
 import type { GridGetRowsResponsePivotColumn } from "./models.js";
-export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const getPropsOverrides: (pivotColumns: GridGetRowsResponsePivotColumn[], pivotingColDef: PivotingColDefCallback, pivotModel: GridPivotModel, initialColumns: Map<string, GridColDef>, apiRef: RefObject<GridPrivateApiPremium>) => GridPivotingDynamicPropsOverrides;
+export declare const fetchParents: (rowTree: GridRowTreeConfig, rowId: GridRowId, fetchHandler: (id?: GridRowId) => Promise<void>) => Promise<void[]>;

package/hooks/features/dataSource/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPropsOverrides = void 0;
+exports.getPropsOverrides = exports.fetchParents = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
@@ -145,4 +145,17 @@ const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColu
     aggregationModel
   };
 };
-exports.getPropsOverrides = getPropsOverrides;
+exports.getPropsOverrides = getPropsOverrides;
+const fetchParents = (rowTree, rowId, fetchHandler) => {
+  const parents = [];
+
+  // collect all parents ids
+  let currentId = rowId;
+  while (currentId !== undefined && currentId !== _xDataGridPro.GRID_ROOT_GROUP_ID) {
+    const parentId = rowTree[currentId].parent;
+    parents.push(parentId);
+    currentId = parentId;
+  }
+  return Promise.all(parents.reverse().map(fetchHandler));
+};
+exports.fetchParents = fetchParents;

package/hooks/features/editing/useGridCellEditable.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { CellEditableConditionFn } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export declare const useIsCellEditable: (apiRef: RefObject<GridPrivateApiPremium>, props: DataGridPremiumProcessedProps) => CellEditableConditionFn;

package/hooks/features/editing/useGridCellEditable.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsCellEditable = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridAggregationSelectors = require("../aggregation/gridAggregationSelectors");
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+const useIsCellEditable = (apiRef, props) => {
+  const isCellEditableCommunity = (0, _internals.useIsCellEditable)();
+  return React.useCallback(params => {
+    const isCellEditable = isCellEditableCommunity(params);
+
+    // If the cell is not editable by the community hook, return false immediately
+    if (!isCellEditable) {
+      return false;
+    }
+
+    // If the data source is not used or aggregation is disabled or both tree data and row grouping are disabled, return the community hook result
+    if (!props.dataSource || props.disableAggregation || !props.treeData && props.disableRowGrouping) {
+      return isCellEditable;
+    }
+
+    // If the cell is not a part of the aggregation model, return the community hook result
+    const aggregationModelFields = Object.keys((0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef));
+    if (!aggregationModelFields.includes(params.field)) {
+      return isCellEditable;
+    }
+
+    // The cell is a part of the aggregation model and it is retrieved from the server-side data.
+    // Allow editing only for the non-grouped rows.
+    return params.rowNode.type !== 'group';
+  }, [apiRef, props.dataSource, props.treeData, props.disableAggregation, props.disableRowGrouping, isCellEditableCommunity]);
+};
+exports.useIsCellEditable = useIsCellEditable;

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createGroupingColDefForOneGroupingCriteria = exports.createGroupingColDefForAllGroupingCriteria = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _GridGroupingColumnFooterCell = require("../../../components/GridGroupingColumnFooterCell");
@@ -92,12 +90,12 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
       const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
       const rowNode = (0, _xDataGridPro.gridRowNodeSelector)(apiRef, rowId);
       if (rowNode?.type === 'group') {
-        const originalColDef = columnsLookup[rowNode.groupingField];
-        if (originalColDef.type === 'singleSelect') {
+        const originalColDef = rowNode.groupingField ? columnsLookup[rowNode.groupingField] : null;
+        if (originalColDef?.type === 'singleSelect') {
           // the default valueFormatter of a singleSelect colDef won't work with the grouping column values
           return value;
         }
-        const columnValueFormatter = originalColDef.valueFormatter;
+        const columnValueFormatter = originalColDef?.valueFormatter;
         if (typeof columnValueFormatter === 'function') {
           return columnValueFormatter(value, row, column, apiRef);
         }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.15.0
+ * @mui/x-data-grid-premium v8.17.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/material/icons.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export declare const GridWorkspacesIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
 export declare const GridGroupWorkIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;
 export declare const GridFunctionsIcon: (props: import("@mui/x-data-grid").GridBaseIconProps) => React.ReactNode;

package/material/icons.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridWorkspacesIcon = exports.GridSyncIcon = exports.GridSyncDisabledIcon = exports.GridSendIcon = exports.GridRerunIcon = exports.GridPromptIcon = exports.GridPivotIcon = exports.GridMoveToTopIcon = exports.GridMoveToBottomIcon = exports.GridMicOffIcon = exports.GridMicIcon = exports.GridHistoryIcon = exports.GridGroupWorkIcon = exports.GridFunctionsIcon = exports.GridExpandLessIcon = exports.GridChartsIcon = exports.GridAssistantIcon = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-data-grid/internals");
 var _jsxRuntime = require("react/jsx-runtime");
 const GridWorkspacesIcon = exports.GridWorkspacesIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "8.15.0",
+  "version": "8.17.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,13 +35,13 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@mui/utils": "^7.3.3",
-    "@mui/x-internal-exceljs-fork": "^4.4.1",
+    "@mui/x-internal-exceljs-fork": "^4.4.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.14.0",
-    "@mui/x-data-grid": "8.15.0",
-    "@mui/x-data-grid-pro": "8.15.0",
-    "@mui/x-license": "8.15.0"
+    "@mui/x-data-grid": "8.17.0",
+    "@mui/x-data-grid-pro": "8.17.0",
+    "@mui/x-internals": "8.17.0",
+    "@mui/x-license": "8.17.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",