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

package/components/collapsible/Collapsible.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
-type CollapsibleProps = React.HTMLAttributes<HTMLDivElement>;
+type CollapsibleProps = React.HTMLAttributes<HTMLDivElement> & {
+  initiallyOpen?: boolean;
+};
 declare function Collapsible(props: CollapsibleProps): React.JSX.Element;
 export { Collapsible };

package/components/collapsible/Collapsible.js

@@ -19,7 +19,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _CollapsibleContext = require("./CollapsibleContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "initiallyOpen"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -43,10 +43,11 @@ const CollapsibleRoot = (0, _system.styled)('div', {
 function Collapsible(props) {
   const {
       className,
-      children
+      children,
+      initiallyOpen = true
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(initiallyOpen);
   const panelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {

package/components/{GridColumnMenuAggregationItem.js → columnMenu/menuItems/GridColumnMenuAggregationItem.js}

@@ -14,10 +14,10 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
-var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _gridAggregationUtils = require("../../../hooks/features/aggregation/gridAggregationUtils");
+var _gridAggregationSelectors = require("../../../hooks/features/aggregation/gridAggregationSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["native"];
 function GridColumnMenuAggregationItem(props) {

package/components/columnMenu/menuItems/GridColumnMenuChartsItem.d.ts

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

package/components/columnMenu/menuItems/GridColumnMenuChartsItem.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnMenuChartsItem = GridColumnMenuChartsItem;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _gridChartsIntegrationSelectors = require("../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridColumnMenuChartsItem(props) {
+  const {
+    onClick
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const isChartsPanelOpen = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsPanelOpenSelector);
+  const openChartsSettings = event => {
+    onClick(event);
+    apiRef.current.setChartsPanelOpen(true);
+  };
+  if (!rootProps.experimentalFeatures?.charts || !rootProps.chartsIntegration) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+    onClick: openChartsSettings,
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsIcon, {
+      fontSize: "small"
+    }),
+    disabled: isChartsPanelOpen,
+    children: apiRef.current.getLocaleText('columnMenuManageCharts')
+  });
+}

package/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/components/columnMenu/menuItems/GridColumnMenuManagePanelItem.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnMenuManagePanelItem = GridColumnMenuManagePanelItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _GridColumnMenuPivotItem = require("./GridColumnMenuPivotItem");
+var _GridColumnMenuChartsItem = require("./GridColumnMenuChartsItem");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridColumnMenuManagePanelItem(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuPivotItem.GridColumnMenuPivotItem, (0, _extends2.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuChartsItem.GridColumnMenuChartsItem, (0, _extends2.default)({}, props))]
+  });
+}

package/{esm/components → 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/components/{GridColumnMenuPivotItem.js → columnMenu/menuItems/GridColumnMenuPivotItem.js}

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuPivotItem = GridColumnMenuPivotItem;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSelectors");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _sidebar = require("../hooks/features/sidebar");
+var _gridPivotingSelectors = require("../../../hooks/features/pivoting/gridPivotingSelectors");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _sidebar = require("../../../hooks/features/sidebar");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnMenuPivotItem(props) {
   const {
@@ -23,6 +23,9 @@ function GridColumnMenuPivotItem(props) {
     onClick(event);
     apiRef.current.showSidebar(_sidebar.GridSidebarValue.Pivot);
   };
+  if (rootProps.disablePivoting) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: openPivotSettings,
     iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotIcon, {

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuRowGroupItem = GridColumnMenuRowGroupItem;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _gridRowGroupingSelector = require("../hooks/features/rowGrouping/gridRowGroupingSelector");
-var _gridRowGroupingUtils = require("../hooks/features/rowGrouping/gridRowGroupingUtils");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _gridRowGroupingSelector = require("../../../hooks/features/rowGrouping/gridRowGroupingSelector");
+var _gridRowGroupingUtils = require("../../../hooks/features/rowGrouping/gridRowGroupingUtils");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnMenuRowGroupItem(props) {
   const {

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuRowUngroupItem = GridColumnMenuRowUngroupItem;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _gridRowGroupingSelector = require("../hooks/features/rowGrouping/gridRowGroupingSelector");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _gridRowGroupingSelector = require("../../../hooks/features/rowGrouping/gridRowGroupingSelector");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnMenuRowUngroupItem(props) {
   const {

package/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/components/index.js

@@ -36,7 +36,7 @@ Object.keys(_icons).forEach(function (key) {
     }
   });
 });
-var _GridColumnMenuAggregationItem = require("./GridColumnMenuAggregationItem");
+var _GridColumnMenuAggregationItem = require("./columnMenu/menuItems/GridColumnMenuAggregationItem");
 Object.keys(_GridColumnMenuAggregationItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -108,4 +108,16 @@ Object.keys(_aiAssistantPanel).forEach(function (key) {
       return _aiAssistantPanel[key];
     }
   });
+});
+var _chartsPanel = require("./chartsPanel");
+Object.keys(_chartsPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _chartsPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsPanel[key];
+    }
+  });
 });

package/components/pivotPanel/GridPivotPanelField.js

@@ -159,7 +159,13 @@ function AggregationSelect({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
-      label: rootProps.aggregationFunctions[aggFunc]?.label ?? aggFunc,
+      label: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+        apiRef,
+        aggregationRule: {
+          aggregationFunctionName: aggFunc,
+          aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+        }
+      }),
       size: "small",
       variant: "outlined",
       ref: aggregationMenuTriggerRef,
@@ -182,7 +188,13 @@ function AggregationSelect({
           selected: aggFunc === func,
           onClick: () => handleClick(func)
         }, rootProps.slotProps?.baseMenuItem, {
-          children: rootProps.aggregationFunctions[func]?.label ?? func
+          children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: func,
+              aggregationFunction: rootProps.aggregationFunctions[func]
+            }
+          })
         }), func))
       }))
     })]

package/components/pivotPanel/GridPivotPanelHeader.js

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

package/components/pivotPanel/GridPivotPanelSearch.js

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

package/constants/columnGroups.d.ts

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

package/constants/columnGroups.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLUMN_GROUP_ID_SEPARATOR = void 0;
+const COLUMN_GROUP_ID_SEPARATOR = exports.COLUMN_GROUP_ID_SEPARATOR = '>->';

package/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -14,6 +14,7 @@ var _GridEmptyPivotOverlay = require("../components/GridEmptyPivotOverlay");
 var _GridPremiumToolbar = require("../components/GridPremiumToolbar");
 const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, _material.default, {
   aiAssistantPanel: null,
+  chartsPanel: null,
   columnMenu: _GridPremiumColumnMenu.GridPremiumColumnMenu,
   bottomContainer: _GridBottomContainer.GridBottomContainer,
   emptyPivotOverlay: _GridEmptyPivotOverlay.GridEmptyPivotOverlay,

package/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/context/GridChartsIntegrationContextProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsIntegrationContextProvider = GridChartsIntegrationContextProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _GridChartsIntegrationContext = require("../components/chartsIntegration/GridChartsIntegrationContext");
+var _useGridChartsIntegration = require("../hooks/features/chartsIntegration/useGridChartsIntegration");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridChartsIntegrationContextProvider({
+  children
+}) {
+  const [chartStateLookup, setChartStateLookup] = React.useState({});
+  const setChartState = React.useCallback((id, state) => {
+    if (id === '') {
+      return;
+    }
+    setChartStateLookup(prev => (0, _extends2.default)({}, prev, {
+      [id]: (0, _extends2.default)({}, prev[id] || _useGridChartsIntegration.EMPTY_CHART_INTEGRATION_CONTEXT_STATE, state)
+    }));
+  }, []);
+  const value = React.useMemo(() => ({
+    chartStateLookup,
+    setChartState
+  }), [chartStateLookup, setChartState]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsIntegrationContext.GridChartsIntegrationContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/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/context/GridChartsRendererProxy.js

@@ -0,0 +1,77 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridChartsRendererProxy = GridChartsRendererProxy;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useGridChartIntegration = require("../hooks/utils/useGridChartIntegration");
+var _useGridChartsIntegration = require("../hooks/features/chartsIntegration/useGridChartsIntegration");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridChartsRendererProxy(props) {
+  const {
+    renderer: Renderer,
+    id,
+    label,
+    onRender
+  } = props;
+  const {
+    chartStateLookup,
+    setChartState
+  } = (0, _useGridChartIntegration.useGridChartsIntegrationContext)();
+  React.useEffect(() => {
+    if (!chartStateLookup[id]) {
+      // With this, the proxy "registers" the chart to the context
+      setChartState(id, (0, _extends2.default)({}, _useGridChartsIntegration.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__*/(0, _jsxRuntime.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.default.string.isRequired,
+  /**
+   * The label for the chart.
+   */
+  label: _propTypes.default.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.default.func,
+  /**
+   * The renderer component that will render the chart.
+   */
+  renderer: _propTypes.default.func.isRequired
+} : void 0;

package/context/index.d.ts

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

package/context/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridChartsIntegrationContextProvider = require("./GridChartsIntegrationContextProvider");
+Object.keys(_GridChartsIntegrationContextProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridChartsIntegrationContextProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridChartsIntegrationContextProvider[key];
+    }
+  });
+});
+var _GridChartsRendererProxy = require("./GridChartsRendererProxy");
+Object.keys(_GridChartsRendererProxy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridChartsRendererProxy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridChartsRendererProxy[key];
+    }
+  });
+});

package/esm/DataGridPremium/DataGridPremium.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import { GridRoot, GridContextProvider, useGridSelector } from '@mui/x-data-grid-pro';
+import { GridRoot, GridContextProvider, useGridSelector, gridRowIdSelector } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps, useGridApiInitialization } from '@mui/x-data-grid-pro/internals';
 import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
@@ -30,10 +30,23 @@ const configuration = {
         field
       });
     },
+    useSortValueGetter: apiRef => (id, field) => gridCellAggregationResultSelector(apiRef, {
+      id,
+      field
+    })?.value ?? apiRef.current.getCellValue(id, field),
+    useFilterValueGetter: (apiRef, props) => (row, column) => {
+      if (props.aggregationRowsScope === 'filtered') {
+        return apiRef.current.getRowValue(row, column);
+      }
+      return gridCellAggregationResultSelector(apiRef, {
+        id: gridRowIdSelector(apiRef, row),
+        field: column.field
+      })?.value ?? apiRef.current.getRowValue(row, column);
+    },
     useGridRowsOverridableMethods
   }
 };
-const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
+const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -73,6 +86,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The id of the active chart.
+   */
+  activeChartId: PropTypes.string,
   /**
    * Aggregation functions available on the grid.
    * @default GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided
@@ -189,6 +206,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set the cell selection model of the grid.
    */
   cellSelectionModel: PropTypes.object,
+  /**
+   * If `true`, the charts integration feature is enabled.
+   * @default false
+   */
+  chartsIntegration: PropTypes.bool,
   /**
    * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
    * @default false
@@ -400,6 +422,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    charts: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -660,6 +683,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
    */
   nonce: PropTypes.string,
+  /**
+   * Callback fired when the active chart changes.
+   * @param {string} activeChartId The new active chart id.
+   */
+  onActiveChartIdChange: PropTypes.func,
   /**
    * Callback fired when the row grouping model changes.
    * @param {GridAggregationModel} model The aggregated columns.

package/esm/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
-export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium>) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium, DataGridPremiumProcessedProps>) => DataGridPremiumProcessedProps;

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -18,6 +18,7 @@ import { pivotingStateInitializer, useGridPivoting, useGridPivotingExportState }
 import { gridPivotPropsOverridesSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { useGridAiAssistant, aiAssistantStateInitializer } from "../hooks/features/aiAssistant/useGridAiAssistant.js";
 import { useGridSidebar, sidebarStateInitializer } from "../hooks/features/sidebar/useGridSidebar.js";
+import { chartsIntegrationStateInitializer, useGridChartsIntegration } from "../hooks/features/chartsIntegration/useGridChartsIntegration.js";
 export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   const pivotPropsOverrides = useGridSelector(apiRef, gridPivotPropsOverridesSelector);
   const props = React.useMemo(() => {
@@ -90,6 +91,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
+  useGridInitializeState(chartsIntegrationStateInitializer, apiRef, props);
   useGridVirtualizer(apiRef, props);
   useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
@@ -113,8 +115,8 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);
-  useGridFilter(apiRef, props);
-  useGridSorting(apiRef, props);
+  useGridFilter(apiRef, props, configuration);
+  useGridSorting(apiRef, props, configuration);
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
@@ -138,6 +140,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
   useGridAiAssistant(apiRef, props);
+  useGridChartsIntegration(apiRef, props);
   useGridPivotingExportState(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -36,7 +36,8 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   },
   disablePivoting: false,
   getPivotDerivedColumns: defaultGetPivotDerivedColumns,
-  aiAssistant: false
+  aiAssistant: false,
+  chartsIntegration: false
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {

package/esm/components/GridPremiumColumnMenu.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
-import { GridColumnMenuPivotItem } from "./GridColumnMenuPivotItem.js";
+import { GridColumnMenuAggregationItem } from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
+import { GridColumnMenuManagePanelItem } from "./columnMenu/menuItems/GridColumnMenuManagePanelItem.js";
 export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): React.JSX.Element;
 export declare const GRID_COLUMN_MENU_SLOTS_PREMIUM: {
   columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
   columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
-  columnMenuPivotItem: typeof GridColumnMenuPivotItem;
+  columnMenuManagePanelItem: typeof GridColumnMenuManagePanelItem;
   columnMenuPinningItem: typeof import("@mui/x-data-grid-pro").GridColumnMenuPinningItem;
   columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;
   columnMenuFilterItem: typeof import("@mui/x-data-grid").GridColumnMenuFilterItem;
@@ -19,7 +19,7 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
   columnMenuGroupingItem: {
     displayOrder: number;
   };
-  columnMenuPivotItem: {
+  columnMenuManagePanelItem: {
     displayOrder: number;
   };
   columnMenuPinningItem: {