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

package/esm/components/columnMenu/menuItems/GridColumnMenuRowGroupItem.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-export declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
+export declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/components/columnMenu/menuItems/GridColumnMenuRowUngroupItem.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-export declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
+export declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/components/pivotPanel/GridPivotPanel.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-declare function GridPivotPanel(): React.JSX.Element;
+declare function GridPivotPanel(): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanel };

package/esm/components/pivotPanel/GridPivotPanelBody.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export interface FieldTransferObject {
   field: string;
   modelKey: 'columns' | 'rows' | 'values' | null;
@@ -7,5 +6,5 @@ declare function GridPivotPanelBody({
   searchValue
 }: {
   searchValue: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanelBody };

package/esm/components/pivotPanel/GridPivotPanelField.d.ts

@@ -18,5 +18,5 @@ type GridPivotPanelFieldProps = {
 } | {
   modelKey: null;
 });
-declare function GridPivotPanelField(props: GridPivotPanelFieldProps): React.JSX.Element;
+declare function GridPivotPanelField(props: GridPivotPanelFieldProps): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanelField };

package/esm/components/pivotPanel/GridPivotPanelFieldMenu.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import type { FieldTransferObject } from "./GridPivotPanelBody.js";
 interface GridPivotPanelFieldMenuProps {
   field: string;
   modelKey: FieldTransferObject['modelKey'];
 }
-declare function GridPivotPanelFieldMenu(props: GridPivotPanelFieldMenuProps): React.JSX.Element;
+declare function GridPivotPanelFieldMenu(props: GridPivotPanelFieldMenuProps): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanelFieldMenu };

package/esm/components/pivotPanel/GridPivotPanelHeader.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 export interface GridPivotPanelHeaderProps {
   searchValue: string;
   onSearchValueChange: (value: string) => void;
 }
-declare function GridPivotPanelHeader(props: GridPivotPanelHeaderProps): React.JSX.Element;
+declare function GridPivotPanelHeader(props: GridPivotPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanelHeader };

package/esm/components/pivotPanel/GridPivotPanelSearch.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { GridSlotProps } from '@mui/x-data-grid-pro';
 export type GridPivotPanelSearchProps = Pick<GridSlotProps['baseTextField'], 'value' | 'onChange'> & {
   onClear: () => void;
 };
-declare function GridPivotPanelSearch(props: GridPivotPanelSearchProps): React.JSX.Element;
+declare function GridPivotPanelSearch(props: GridPivotPanelSearchProps): import("react/jsx-runtime").JSX.Element;
 export { GridPivotPanelSearch };

package/esm/components/prompt/GridPrompt.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { Prompt } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
 type GridPromptProps = Prompt & {
   onRerun: () => void;
 };
-declare function GridPrompt(props: GridPromptProps): React.JSX.Element;
+declare function GridPrompt(props: GridPromptProps): import("react/jsx-runtime").JSX.Element;
 export { GridPrompt };

package/esm/components/promptField/GridPromptField.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PromptFieldProps } from "./PromptField.js";
-declare function GridPromptField(props: PromptFieldProps): React.JSX.Element;
+declare function GridPromptField(props: PromptFieldProps): import("react/jsx-runtime").JSX.Element;
 export { GridPromptField };

package/esm/components/promptField/GridPromptField.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ref"];
-import * as React from 'react';
 import { PromptField } from "./PromptField.js";
 import { PromptFieldControl } from "./PromptFieldControl.js";
 import { PromptFieldRecord } from "./PromptFieldRecord.js";

package/esm/components/resizablePanel/ResizablePanel.d.ts

@@ -6,5 +6,5 @@ export type ResizablePanelProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   direction?: 'horizontal' | 'vertical';
 };
-declare function ResizablePanel(props: ResizablePanelProps): React.JSX.Element;
+declare function ResizablePanel(props: ResizablePanelProps): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanel };

package/esm/components/resizablePanel/ResizablePanelHandle.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type ResizablePanelHandleProps = React.HTMLAttributes<HTMLDivElement>;
-declare function ResizablePanelHandle(props: ResizablePanelHandleProps): React.JSX.Element;
+declare function ResizablePanelHandle(props: ResizablePanelHandleProps): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanelHandle };

package/esm/components/sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type SidebarProps = React.HTMLAttributes<HTMLDivElement>;
-declare function Sidebar(props: SidebarProps): React.JSX.Element | null;
+declare function Sidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element | null;
 export { Sidebar };

package/esm/components/sidebar/SidebarHeader.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type SidebarHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-declare function SidebarHeader(props: SidebarHeaderProps): React.JSX.Element;
+declare function SidebarHeader(props: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { SidebarHeader };

package/esm/context/GridChartsIntegrationContextProvider.d.ts

@@ -4,4 +4,4 @@ export interface GridChartsIntegrationContextProviderProps {
 }
 export declare function GridChartsIntegrationContextProvider({
   children
-}: GridChartsIntegrationContextProviderProps): React.JSX.Element;
+}: GridChartsIntegrationContextProviderProps): import("react/jsx-runtime").JSX.Element;

package/esm/context/GridChartsRendererProxy.d.ts

@@ -27,7 +27,7 @@ export interface GridChartsRendererProxyProps {
    */
   onRender?: GridChartsRendererProxyRendererCallback;
 }
-declare function GridChartsRendererProxy(props: GridChartsRendererProxyProps): React.JSX.Element | null;
+declare function GridChartsRendererProxy(props: GridChartsRendererProxyProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridChartsRendererProxy {
   var propTypes: any;
 }

package/esm/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef } from '@mui/x-data-grid-pro';
 import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';

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

@@ -1,7 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["aggregationWrappedProperties"];
-import * as React from 'react';
 import { gridRowNodeSelector } from '@mui/x-data-grid-pro';
 import { gridAggregationLookupSelector } from "./gridAggregationSelectors.js";
 import { GridFooterCell } from "../../../components/GridFooterCell.js";

package/esm/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.d.ts

@@ -3,6 +3,12 @@ import { GridStatePremium } from "../../../models/gridStatePremium.js";
 export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => string;
+export declare const gridChartsIntegrationChartsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => Record<string, {
+  dimensions: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+  values: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+}>;
 export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => boolean;

package/esm/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -3,6 +3,7 @@ import { gridSidebarStateSelector, GridSidebarValue } from "../sidebar/index.js"
 import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
 const gridChartsIntegrationStateSelector = createRootSelector(state => state.chartsIntegration);
 export const gridChartsIntegrationActiveChartIdSelector = createSelector(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.activeChartId);
+export const gridChartsIntegrationChartsLookupSelector = createSelector(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.charts);
 export const gridChartsPanelOpenSelector = createSelector(gridSidebarStateSelector, sidebar => sidebar.value === GridSidebarValue.Charts && sidebar.open);
 export const gridChartableColumnsSelector = createSelectorMemoized(gridColumnLookupSelector, gridPivotActiveSelector, gridPivotModelSelector, (columns, pivotActive, pivotModel) => {
   let chartableColumns = Object.values(columns).filter(column => column.chartable);

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { ChartState } from "../../../models/gridChartsIntegration.js";
 export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
 export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -6,7 +6,7 @@ import debounce from '@mui/utils/debounce';
 import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
 import { useGridApiMethod, useGridEvent, gridColumnLookupSelector, runIf, gridPivotActiveSelector, useGridRegisterPipeProcessor, gridColumnFieldsSelector, gridFilteredSortedDepthRowEntriesSelector, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from '@mui/x-data-grid-pro/internals';
 import { getRowGroupingFieldFromGroupingCriteria } from "../rowGrouping/gridRowGroupingUtils.js";
-import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector } from "./gridChartsIntegrationSelectors.js";
+import { gridChartsPanelOpenSelector, gridChartsDimensionsSelector, gridChartsValuesSelector, gridChartsIntegrationActiveChartIdSelector, gridChartableColumnsSelector, gridChartsIntegrationChartsLookupSelector } from "./gridChartsIntegrationSelectors.js";
 import { useGridChartsIntegrationContext } from "../../utils/useGridChartIntegration.js";
 import { isBlockedForSection } from "./utils.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
@@ -150,19 +150,21 @@ export 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(_extends({}, aggregationModel, {
-            // use the first available aggregation function
-            [item.field]: getAvailableAggregationFunctions({
-              aggregationFunctions: props.aggregationFunctions,
-              colDef: item,
-              isDataSource: !!props.dataSource
-            })[0]
-          }));
+          // use the first available aggregation function
+          aggregationsToAdd[item.field] = getAvailableAggregationFunctions({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: item,
+            isDataSource: !!props.dataSource
+          })[0];
         }
       });
+      if (Object.keys(aggregationsToAdd).length > 0) {
+        apiRef.current.setAggregationModel(_extends({}, aggregationModel, aggregationsToAdd));
+      }
     }
   }, [apiRef, props.aggregationFunctions, props.dataSource, activeChartId, pivotActive, aggregationModel]);
   const handleRowDataUpdate = React.useCallback(chartIds => {
@@ -296,8 +298,8 @@ export 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(() => debounce(handleColumnDataUpdate, 0), [handleColumnDataUpdate]);
   const setChartsPanelOpen = React.useCallback(callback => {
     if (!isChartsIntegrationAvailable) {
@@ -496,6 +498,67 @@ export const useGridChartsIntegration = (apiRef, props) => {
   useGridEvent(apiRef, 'pivotModeChange', runIf(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'sortedRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
+    if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
+      return prevState;
+    }
+    const currentActiveChartId = gridChartsIntegrationActiveChartIdSelector(apiRef);
+    const chartsLookup = 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 _extends({}, 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(_extends({}, 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]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (!activeChartId && availableChartIds.length > 0) {
       setActiveChartId(availableChartIds[0]);

package/esm/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -2,11 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent } from '@mui/x-data-grid-pro';
-import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector, GridStrategyGroup, DataSourceRowsUpdateStrategy } from '@mui/x-data-grid-pro/internals';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useGridEvent as addEventHandler, useGridApiMethod, GRID_ROOT_GROUP_ID, useGridEvent, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { useGridDataSourceBasePro, useGridRegisterStrategyProcessor, useGridRegisterPipeProcessor, gridPivotInitialColumnsSelector, runIf, gridPivotActiveSelector, GridStrategyGroup, DataSourceRowsUpdateStrategy, getGroupKeys } from '@mui/x-data-grid-pro/internals';
 import { gridPivotModelSelector } from "../pivoting/gridPivotingSelectors.js";
-import { getPropsOverrides } from "./utils.js";
+import { getPropsOverrides, fetchParents } from "./utils.js";
 import { gridRowGroupingSanitizedModelSelector } from "../rowGrouping/gridRowGroupingSelector.js";
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
 function getKeyPremium(params) {
   return JSON.stringify([params.filterModel, params.sortModel, params.groupKeys, params.groupFields, params.start, params.end, params.pivotModel ? {} : params.aggregationModel, params.pivotModel]);
 }
@@ -16,18 +18,32 @@ const options = {
   }
 };
 export const useGridDataSourcePremium = (apiRef, props) => {
+  const aggregationModel = gridAggregationModelSelector(apiRef);
   const groupingModelSize = gridRowGroupingSanitizedModelSelector(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
     const targetStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
     apiRef.current.setStrategyAvailability(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 = gridRowTreeSelector(apiRef);
+    if (updatedRow && !isDeepEqual(updatedRow, params.previousRow)) {
+      // Reset the outdated cache, only if the row is _actually_ updated
+      apiRef.current.dataSource.cache.clear();
+    }
+    const groupKeys = 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
+    fetchParents(rowTree, params.rowId, apiRef.current.dataSource.fetchRows);
+  }, [apiRef]);
   const {
     api,
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
     events
-  } = useGridDataSourceBasePro(apiRef, props, options);
+  } = useGridDataSourceBasePro(apiRef, props, _extends({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
+    handleEditRow: handleEditRowWithAggregation
+  } : {}, options));
   const aggregateRowRef = React.useRef({});
   const initialColumns = gridPivotInitialColumnsSelector(apiRef);
   const pivotActive = gridPivotActiveSelector(apiRef);

package/esm/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/esm/hooks/features/dataSource/utils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
+import { gridStringOrNumberComparator, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
   const visiblePivotColumns = pivotModel.columns.filter(column => !column.hidden);
   const visiblePivotValues = pivotModel.values.filter(value => !value.hidden);
@@ -137,4 +137,16 @@ export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, init
     columnGroupingModel,
     aggregationModel
   };
+};
+export const fetchParents = (rowTree, rowId, fetchHandler) => {
+  const parents = [];
+
+  // collect all parents ids
+  let currentId = rowId;
+  while (currentId !== undefined && currentId !== GRID_ROOT_GROUP_ID) {
+    const parentId = rowTree[currentId].parent;
+    parents.push(parentId);
+    currentId = parentId;
+  }
+  return Promise.all(parents.reverse().map(fetchHandler));
 };

package/esm/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/esm/hooks/features/editing/useGridCellEditable.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { useIsCellEditable as useIsCellEditableCommunity } from '@mui/x-data-grid-pro/internals';
+import { gridAggregationModelSelector } from "../aggregation/gridAggregationSelectors.js";
+
+/**
+ * Implementation of the cell editable condition hook of the Data Grid Premium
+ */
+export const useIsCellEditable = (apiRef, props) => {
+  const isCellEditableCommunity = useIsCellEditableCommunity();
+  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(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]);
+};

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
   _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
-import * as React from 'react';
 import { GRID_STRING_COL_DEF, gridRowIdSelector, gridRowNodeSelector } from '@mui/x-data-grid-pro';
 import { isSingleSelectColDef, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { GridGroupingColumnFooterCell } from "../../../components/GridGroupingColumnFooterCell.js";
@@ -84,12 +83,12 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
       const rowId = gridRowIdSelector(apiRef, row);
       const rowNode = 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/esm/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/esm/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/esm/material/icons.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { createSvgIcon } from '@mui/x-data-grid/internals';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridWorkspacesIcon = createSvgIcon(/*#__PURE__*/_jsx("g", {

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef } from '@mui/x-data-grid-pro';
 import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';

package/hooks/features/aggregation/wrapColumnWithAggregation.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.wrapColumnWithAggregationValue = exports.unwrapColumnFromAggregation = 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 _gridAggregationSelectors = require("./gridAggregationSelectors");
 var _GridFooterCell = require("../../../components/GridFooterCell");

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.d.ts

@@ -3,6 +3,12 @@ import { GridStatePremium } from "../../../models/gridStatePremium.js";
 export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => string;
+export declare const gridChartsIntegrationChartsLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => Record<string, {
+  dimensions: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+  values: import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+}>;
 export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => boolean;

package/hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
+exports.gridChartsValuesSelector = exports.gridChartsPanelOpenSelector = exports.gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationActiveChartIdSelector = exports.gridChartsDimensionsSelector = exports.gridChartableColumnsSelector = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _sidebar = require("../sidebar");
 var _gridPivotingSelectors = require("../pivoting/gridPivotingSelectors");
 const gridChartsIntegrationStateSelector = (0, _internals.createRootSelector)(state => state.chartsIntegration);
 const gridChartsIntegrationActiveChartIdSelector = exports.gridChartsIntegrationActiveChartIdSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.activeChartId);
+const gridChartsIntegrationChartsLookupSelector = exports.gridChartsIntegrationChartsLookupSelector = (0, _internals.createSelector)(gridChartsIntegrationStateSelector, chartsIntegration => chartsIntegration.charts);
 const gridChartsPanelOpenSelector = exports.gridChartsPanelOpenSelector = (0, _internals.createSelector)(_sidebar.gridSidebarStateSelector, sidebar => sidebar.value === _sidebar.GridSidebarValue.Charts && sidebar.open);
 const gridChartableColumnsSelector = exports.gridChartableColumnsSelector = (0, _internals.createSelectorMemoized)(_internals.gridColumnLookupSelector, _internals.gridPivotActiveSelector, _gridPivotingSelectors.gridPivotModelSelector, (columns, pivotActive, pivotModel) => {
   let chartableColumns = Object.values(columns).filter(column => column.chartable);

package/hooks/features/chartsIntegration/useGridChartsIntegration.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { ChartState } from "../../../models/gridChartsIntegration.js";
 export declare const EMPTY_CHART_INTEGRATION_CONTEXT_STATE: ChartState;
 export declare const chartsIntegrationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'chartsIntegration' | 'initialState' | 'activeChartId' | 'rowGroupingModel' | 'pivotModel' | 'experimentalFeatures'>, GridPrivateApiPremium>;