@mui/x-data-grid-premium 8.11.3 → 8.12.1

package/esm/components/columnMenu/menuItems/GridColumnMenuChartsItem.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import { gridChartsPanelOpenSelector } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridColumnMenuChartsItem(props) {
+  const {
+    onClick
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const isChartsPanelOpen = useGridSelector(apiRef, gridChartsPanelOpenSelector);
+  const openChartsSettings = event => {
+    onClick(event);
+    apiRef.current.setChartsPanelOpen(true);
+  };
+  if (!rootProps.experimentalFeatures?.charts || !rootProps.chartsIntegration) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    onClick: openChartsSettings,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.chartsIcon, {
+      fontSize: "small"
+    }),
+    disabled: isChartsPanelOpen,
+    children: apiRef.current.getLocaleText('columnMenuManageCharts')
+  });
+}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+declare function GridColumnMenuManagePanelItem(props: GridColumnMenuItemProps): React.JSX.Element;
+export { GridColumnMenuManagePanelItem };

package/esm/components/columnMenu/menuItems/GridColumnMenuManagePanelItem.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridColumnMenuPivotItem } from "./GridColumnMenuPivotItem.js";
+import { GridColumnMenuChartsItem } from "./GridColumnMenuChartsItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuManagePanelItem(props) {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridColumnMenuPivotItem, _extends({}, props)), /*#__PURE__*/_jsx(GridColumnMenuChartsItem, _extends({}, props))]
+  });
+}
+export { GridColumnMenuManagePanelItem };

package/{components → esm/components/columnMenu/menuItems}/GridColumnMenuPivotItem.d.ts

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

package/esm/components/{GridColumnMenuPivotItem.js → columnMenu/menuItems/GridColumnMenuPivotItem.js}

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import { gridPivotPanelOpenSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { GridSidebarValue } from "../hooks/features/sidebar/index.js";
+import { gridPivotPanelOpenSelector } from "../../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { GridSidebarValue } from "../../../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuPivotItem(props) {
   const {
@@ -16,6 +16,9 @@ export function GridColumnMenuPivotItem(props) {
     onClick(event);
     apiRef.current.showSidebar(GridSidebarValue.Pivot);
   };
+  if (rootProps.disablePivoting) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: openPivotSettings,
     iconStart: /*#__PURE__*/_jsx(rootProps.slots.pivotIcon, {

package/esm/components/{GridColumnMenuRowGroupItem.js → columnMenu/menuItems/GridColumnMenuRowGroupItem.js}

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
-import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from "../hooks/features/rowGrouping/gridRowGroupingUtils.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { gridRowGroupingSanitizedModelSelector } from "../../../hooks/features/rowGrouping/gridRowGroupingSelector.js";
+import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from "../../../hooks/features/rowGrouping/gridRowGroupingUtils.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowGroupItem(props) {
   const {

package/esm/components/{GridColumnMenuRowUngroupItem.js → columnMenu/menuItems/GridColumnMenuRowUngroupItem.js}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { gridRowGroupingSanitizedModelSelector } from "../../../hooks/features/rowGrouping/gridRowGroupingSelector.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowUngroupItem(props) {
   const {

package/esm/components/index.d.ts

@@ -1,9 +1,10 @@
 export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
-export * from "./GridColumnMenuAggregationItem.js";
+export * from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
 export * from "./promptField/index.js";
 export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
 export * from "./export/index.js";
 export * from "./GridEmptyPivotOverlay.js";
 export * from "./pivotPanel/index.js";
-export * from "./aiAssistantPanel/index.js";
+export * from "./aiAssistantPanel/index.js";
+export * from "./chartsPanel/index.js";

package/esm/components/index.js

@@ -1,9 +1,10 @@
 export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
-export * from "./GridColumnMenuAggregationItem.js";
+export * from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
 export * from "./promptField/index.js";
 export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
 export * from "./export/index.js";
 export * from "./GridEmptyPivotOverlay.js";
 export * from "./pivotPanel/index.js";
-export * from "./aiAssistantPanel/index.js";
+export * from "./aiAssistantPanel/index.js";
+export * from "./chartsPanel/index.js";

package/esm/components/pivotPanel/GridPivotPanelField.js

@@ -8,7 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { GridColumnSortButton, NotRendered, vars } from '@mui/x-data-grid-pro/internals';
 import useId from '@mui/utils/useId';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { getAvailableAggregationFunctions } from "../../hooks/features/aggregation/gridAggregationUtils.js";
+import { getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../../hooks/features/aggregation/gridAggregationUtils.js";
 import { GridPivotPanelFieldMenu } from "./GridPivotPanelFieldMenu.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridPivotInitialColumnsSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
@@ -152,7 +152,13 @@ function AggregationSelect({
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseChip, {
-      label: rootProps.aggregationFunctions[aggFunc]?.label ?? aggFunc,
+      label: getAggregationFunctionLabel({
+        apiRef,
+        aggregationRule: {
+          aggregationFunctionName: aggFunc,
+          aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+        }
+      }),
       size: "small",
       variant: "outlined",
       ref: aggregationMenuTriggerRef,
@@ -175,7 +181,13 @@ function AggregationSelect({
           selected: aggFunc === func,
           onClick: () => handleClick(func)
         }, rootProps.slotProps?.baseMenuItem, {
-          children: rootProps.aggregationFunctions[func]?.label ?? func
+          children: getAggregationFunctionLabel({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: func,
+              aggregationFunction: rootProps.aggregationFunctions[func]
+            }
+          })
         }), func))
       }))
     })]

package/esm/components/pivotPanel/GridPivotPanelHeader.js

@@ -42,6 +42,7 @@ const GridPivotPanelSwitchLabel = styled('span', {
   name: 'MuiDataGrid',
   slot: 'PivotPanelSwitchLabel'
 })({
+  font: vars.typography.font.large,
   fontWeight: vars.typography.fontWeight.medium
 });
 function GridPivotPanelHeader(props) {

package/esm/components/pivotPanel/GridPivotPanelSearch.js

@@ -59,6 +59,9 @@ function GridPivotPanelSearch(props) {
               fontSize: "small"
             })
           }) : null
+        },
+        htmlInput: {
+          role: 'searchbox'
         }
       }
     }, rootProps.slotProps?.baseTextField, {

package/esm/constants/columnGroups.d.ts

@@ -0,0 +1 @@
+export declare const COLUMN_GROUP_ID_SEPARATOR = ">->";

package/esm/constants/columnGroups.js

@@ -0,0 +1 @@
+export const COLUMN_GROUP_ID_SEPARATOR = '>->';

package/esm/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -7,6 +7,7 @@ import { GridEmptyPivotOverlay } from "../components/GridEmptyPivotOverlay.js";
 import { GridPremiumToolbar } from "../components/GridPremiumToolbar.js";
 export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
   aiAssistantPanel: null,
+  chartsPanel: null,
   columnMenu: GridPremiumColumnMenu,
   bottomContainer: GridBottomContainer,
   emptyPivotOverlay: GridEmptyPivotOverlay,

package/esm/context/GridChartsIntegrationContextProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface GridChartsIntegrationContextProviderProps {
+  children: React.ReactNode;
+}
+export declare function GridChartsIntegrationContextProvider({
+  children
+}: GridChartsIntegrationContextProviderProps): React.JSX.Element;

package/esm/context/GridChartsIntegrationContextProvider.js

@@ -0,0 +1,28 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridChartsIntegrationContext } from "../components/chartsIntegration/GridChartsIntegrationContext.js";
+import { EMPTY_CHART_INTEGRATION_CONTEXT_STATE } from "../hooks/features/chartsIntegration/useGridChartsIntegration.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridChartsIntegrationContextProvider({
+  children
+}) {
+  const [chartStateLookup, setChartStateLookup] = React.useState({});
+  const setChartState = React.useCallback((id, state) => {
+    if (id === '') {
+      return;
+    }
+    setChartStateLookup(prev => _extends({}, prev, {
+      [id]: _extends({}, prev[id] || EMPTY_CHART_INTEGRATION_CONTEXT_STATE, state)
+    }));
+  }, []);
+  const value = React.useMemo(() => ({
+    chartStateLookup,
+    setChartState
+  }), [chartStateLookup, setChartState]);
+  return /*#__PURE__*/_jsx(GridChartsIntegrationContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/esm/context/GridChartsRendererProxy.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ChartState } from "../models/gridChartsIntegration.js";
+export type GridChartsRendererProxyRendererCallback = (type: string, props: Record<string, any>, Component: React.ComponentType<any>) => React.ReactNode;
+type GridChartsRendererProxyRenderer = React.ComponentType<{
+  dimensions: ChartState['dimensions'];
+  values: ChartState['values'];
+  chartType: ChartState['type'];
+  configuration: ChartState['configuration'];
+  onRender?: GridChartsRendererProxyRendererCallback;
+}>;
+export interface GridChartsRendererProxyProps {
+  /**
+   * The unique identifier for the chart.
+   */
+  id: string;
+  /**
+   * The label for the chart.
+   */
+  label?: string;
+  /**
+   * The renderer component that will render the chart.
+   */
+  renderer: GridChartsRendererProxyRenderer;
+  /**
+   * Callback function called when the chart is about to be rendered.
+   * Use this to check and modify the chart props before it is rendered.
+   */
+  onRender?: GridChartsRendererProxyRendererCallback;
+}
+declare function GridChartsRendererProxy(props: GridChartsRendererProxyProps): React.JSX.Element | null;
+declare namespace GridChartsRendererProxy {
+  var propTypes: any;
+}
+export { GridChartsRendererProxy };

package/esm/context/GridChartsRendererProxy.js

@@ -0,0 +1,71 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridChartsIntegrationContext } from "../hooks/utils/useGridChartIntegration.js";
+import { EMPTY_CHART_INTEGRATION_CONTEXT_STATE } from "../hooks/features/chartsIntegration/useGridChartsIntegration.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridChartsRendererProxy(props) {
+  const {
+    renderer: Renderer,
+    id,
+    label,
+    onRender
+  } = props;
+  const {
+    chartStateLookup,
+    setChartState
+  } = useGridChartsIntegrationContext();
+  React.useEffect(() => {
+    if (!chartStateLookup[id]) {
+      // With this, the proxy "registers" the chart to the context
+      setChartState(id, _extends({}, EMPTY_CHART_INTEGRATION_CONTEXT_STATE, {
+        label
+      }));
+    }
+    return () => {
+      delete chartStateLookup[id];
+    };
+  }, [id, label, setChartState, chartStateLookup]);
+  if (!chartStateLookup[id]) {
+    return null;
+  }
+  const {
+    dimensions,
+    values,
+    type,
+    configuration
+  } = chartStateLookup[id];
+  return /*#__PURE__*/_jsx(Renderer, {
+    dimensions: dimensions,
+    values: values,
+    chartType: type,
+    configuration: configuration,
+    onRender: onRender
+  });
+}
+process.env.NODE_ENV !== "production" ? GridChartsRendererProxy.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The unique identifier for the chart.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * The label for the chart.
+   */
+  label: PropTypes.string,
+  /**
+   * Callback function called when the chart is about to be rendered.
+   * Use this to check and modify the chart props before it is rendered.
+   */
+  onRender: PropTypes.func,
+  /**
+   * The renderer component that will render the chart.
+   */
+  renderer: PropTypes.func.isRequired
+} : void 0;
+export { GridChartsRendererProxy };

package/esm/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./GridChartsIntegrationContextProvider.js";
+export * from "./GridChartsRendererProxy.js";

package/esm/context/index.js

@@ -0,0 +1,2 @@
+export * from "./GridChartsIntegrationContextProvider.js";
+export * from "./GridChartsRendererProxy.js";

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

@@ -3,7 +3,7 @@ import { getVisibleRows } from '@mui/x-data-grid/internals';
 export const shouldApplySorting = (aggregationRules, aggregatedFields) => {
   return aggregatedFields.some(field => aggregationRules[field].aggregationFunction.applySorting);
 };
-const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, publicApi, groupAggregatedValuesLookup) => {
+const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, publicApi, groupAggregatedValuesLookup, columnsLookup) => {
   const groupAggregationLookup = {};
   const aggregatedValues = [];
   for (let i = 0; i < aggregatedFields.length; i += 1) {
@@ -73,12 +73,14 @@ const getGroupAggregatedValue = (groupId, apiRef, aggregationRowsScope, aggregat
       groupId,
       field: aggregatedField // Added per user request in https://github.com/mui/mui-x/issues/6995#issuecomment-1327423455
     }, publicApi);
+    const formattedValue = aggregationFunction.valueFormatter ? aggregationFunction.valueFormatter(value, rowLookup[groupId], columnsLookup[aggregatedField], apiRef) : undefined;
 
     // Only add to groupAggregationLookup if position is not null
     if (position !== null) {
       groupAggregationLookup[aggregatedField] = {
         position,
-        value
+        value,
+        formattedValue
       };
     }
   }
@@ -142,7 +144,7 @@ export const createAggregationLookup = ({
         aggregationLookup[groupNode.id] = getGroupAggregatedValueDataSource(groupNode.id, apiRef, aggregatedFields, position);
       }
     } else if (groupNode.children.length) {
-      const result = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, apiRef.current, groupAggregatedValuesLookup);
+      const result = getGroupAggregatedValue(groupNode.id, apiRef, aggregationRowsScope, aggregatedFields, aggregationRules, position, applySorting, valueGetters, apiRef.current, groupAggregatedValuesLookup, columnsLookup);
       // Always populate groupAggregatedValuesLookup for groups with children
       // This ensures parent groups can access child aggregated values even when position is null
       groupAggregatedValuesLookup.set(groupNode.id, result.aggregatedValues);

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

@@ -104,6 +104,7 @@ export type GridAggregationLookup = {
     [field: string]: {
       position: GridAggregationPosition;
       value: any;
+      formattedValue?: any;
     };
   };
 };

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

@@ -25,4 +25,5 @@ export declare const gridCellAggregationResultSelector: (args_0: import("react")
 }) => {
   position: GridAggregationPosition;
   value: any;
+  formattedValue?: any;
 } | null;

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

@@ -18,6 +18,9 @@ export const gridCellAggregationResultSelector = createSelector(gridRowTreeSelec
   id,
   field
 }) => {
+  if (!aggregationLookup) {
+    return null;
+  }
   let cellAggregationPosition = null;
   const rowNode = rowTree[id];
   if (!rowNode) {

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

@@ -2,9 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
-import { gridAggregationModelSelector } from "./gridAggregationSelectors.js";
+import { gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from "./gridAggregationUtils.js";
 import { createAggregationLookup, shouldApplySorting } from "./createAggregationLookup.js";
 export const aggregationStateInitializer = (state, props, apiRef) => {
@@ -46,6 +47,7 @@ export const useGridAggregation = (apiRef, props) => {
     abortControllerRef.current = abortController;
     const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
+    const currentAggregationLookup = gridAggregationLookupSelector(apiRef);
     const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
     if (reason === 'sort' && !needsSorting) {
       // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
@@ -115,6 +117,16 @@ export const useGridAggregation = (apiRef, props) => {
       }, 0);
     };
     processChunk();
+
+    // processChunk() does nothing if there are no aggregated fields
+    // make sure that the lookup is empty in this case
+    if (aggregatedFields.length === 0 && !isObjectEmpty(currentAggregationLookup)) {
+      apiRef.current.setState(state => _extends({}, state, {
+        aggregation: _extends({}, state.aggregation, {
+          lookup: {}
+        })
+      }));
+    }
   }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.dataSource]);
   React.useEffect(() => {
     return () => {

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

@@ -1,7 +1,7 @@
 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';
+import type { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
 import type { GridAggregationRule } from "./gridAggregationInterfaces.js";
 /**
@@ -59,4 +59,5 @@ export declare const unwrapColumnFromAggregation: (column: GridColDef) => GridBa
   groupingValueSetter?: import("../../../index.js").GridGroupingValueSetter<import("@mui/x-data-grid").GridValidRowModel> | undefined;
   pastedValueParser?: import("../../../index.js").GridPastedValueParser<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
   pivotable?: boolean;
+  chartable?: boolean;
 };

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

@@ -2,54 +2,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["aggregationWrappedProperties"];
 import * as React from 'react';
-import { gridRowIdSelector, gridRowNodeSelector } from '@mui/x-data-grid-pro';
+import { gridRowNodeSelector } from '@mui/x-data-grid-pro';
 import { gridAggregationLookupSelector } from "./gridAggregationSelectors.js";
 import { GridFooterCell } from "../../../components/GridFooterCell.js";
 import { GridAggregationHeader } from "../../../components/GridAggregationHeader.js";
 import { gridPivotActiveSelector } from "../pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getAggregationValueWrappedValueGetter = ({
-  value: valueGetter,
-  getCellAggregationResult
-}) => {
-  const wrappedValueGetter = (value, row, column, apiRef) => {
-    const rowId = gridRowIdSelector(apiRef, row);
-    const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
-    if (cellAggregationResult != null) {
-      return cellAggregationResult?.value ?? null;
-    }
-    if (valueGetter) {
-      return valueGetter(value, row, column, apiRef);
-    }
-    return row[column.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 = (value, row, column, apiRef) => {
-    const rowId = gridRowIdSelector(apiRef, row);
-    if (rowId != null) {
-      const cellAggregationResult = getCellAggregationResult(rowId, column.field);
-      if (cellAggregationResult != null) {
-        return aggregationRule.aggregationFunction.valueFormatter?.(value, row, column, apiRef);
-      }
-    }
-    if (valueFormatter) {
-      return valueFormatter(value, row, column, apiRef);
-    }
-    return value;
-  };
-  return wrappedValueFormatter;
-};
 const getAggregationValueWrappedRenderCell = ({
   value: renderCell,
   aggregationRule,
@@ -161,8 +119,6 @@ export const wrapColumnWithAggregationValue = (column, aggregationRule, apiRef)
       });
     }
   };
-  wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
-  wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
   wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
   wrapColumnProperty('renderHeader', getWrappedRenderHeader);
   if (!didWrapSomeProperty) {

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

@@ -0,0 +1,65 @@
+import { GridColDef } from '@mui/x-data-grid-pro';
+import type { ChartState } from "../../../models/gridChartsIntegration.js";
+export type GridChartsIntegrationSection = 'dimensions' | 'values' | null;
+export type GridChartsIntegrationItem = {
+  field: GridColDef['field'];
+  hidden?: boolean;
+};
+export interface GridChartsIntegrationState {
+  activeChartId: string;
+  charts: Record<string, {
+    dimensions: GridChartsIntegrationItem[];
+    values: GridChartsIntegrationItem[];
+  }>;
+}
+export interface GridChartsIntegrationInitialState {
+  activeChartId?: string;
+  charts?: Record<string, {
+    dimensions?: GridChartsIntegrationItem[] | GridColDef['field'][];
+    values?: GridChartsIntegrationItem[] | GridColDef['field'][];
+    chartType?: ChartState['type'];
+    configuration?: ChartState['configuration'];
+  }>;
+}
+export interface GridChartsIntegrationApi {
+  /**
+   * Sets whether the charts side panel is open.
+   * @param {boolean | ((prev: boolean) => boolean)} open - The new value of the charts side panel open state.
+   */
+  setChartsPanelOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  /**
+   * Sets the active chart id.
+   * @param {string} chartId - The id of the chart to set as active.
+   */
+  setActiveChartId: (chartId: string) => void;
+  /**
+   * Sets the chart type for the active chart.
+   * @param {string} chartId - The id of the chart to set the type for.
+   * @param {string} type - The new type of the chart.
+   */
+  setChartType: (chartId: string, type: string) => void;
+  /**
+   * Sets the synchronization state for a chart.
+   * @param {string} chartId - The id of the chart to set the synchronization state for.
+   * @param {boolean} synced - The new synchronization state.
+   */
+  setChartSynchronizationState: (chartId: string, synced: boolean) => void;
+  /**
+   * Updates the dimensions data selection for the charts integration.
+   * @param {string} chartId - The id of the chart to update the dimensions for.
+   * @param {GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])} dimensions - The new dimensions selection or a function that returns the new dimensions selection.
+   */
+  updateChartDimensionsData: (chartId: string, dimensions: GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void;
+  /**
+   * Updates the values data selection for the charts integration.
+   * @param {string} chartId - The id of the chart to update the values for.
+   * @param {GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])} values - The new values selection or a function that returns the new values selection.
+   */
+  updateChartValuesData: (chartId: string, values: GridChartsIntegrationItem[] | ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void;
+}
+export interface GridChartsIntegrationPrivateApi {
+  chartsIntegration: {
+    updateDataReference: (field: string, originSection: GridChartsIntegrationSection, targetSection: GridChartsIntegrationSection, targetField?: string, placementRelativeToTargetField?: 'top' | 'bottom') => void;
+    getColumnName: (field: string) => string;
+  };
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import { GridColumnLookup } from '@mui/x-data-grid';
+import { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridChartsIntegrationActiveChartIdSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => string;
+export declare const gridChartsPanelOpenSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => boolean;
+export declare const gridChartableColumnsSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => GridColumnLookup;
+export declare const gridChartsDimensionsSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>, chartId: any) => import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];
+export declare const gridChartsValuesSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>, chartId: any) => import("./gridChartsIntegrationInterfaces.js").GridChartsIntegrationItem[];