@mui/x-data-grid-premium 8.0.0-beta.3 → 8.1.0

package/esm/DataGridPremium/DataGridPremium.js

@@ -4,24 +4,36 @@ 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 } from '@mui/x-data-grid-pro';
-import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { GridRoot, GridContextProvider, useGridSelector } 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';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
-import { getReleaseInfo } from "../utils/releaseInfo.js";
+import { Sidebar } from "../components/sidebar/index.js";
+import { GridPivotPanel } from "../components/pivotPanel/GridPivotPanel.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { gridCellAggregationResultSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridPivotPanelOpenSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
+import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
-    useGridRowAriaAttributes
+    useGridRowAriaAttributes,
+    useCellAggregationResult: (id, field) => {
+      const apiRef = useGridApiContext();
+      return useGridSelector(apiRef, gridCellAggregationResultSelector, {
+        id,
+        field
+      });
+    }
   }
 };
-const releaseInfo = getReleaseInfo();
+const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -31,12 +43,17 @@ if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
 const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
-  const props = useDataGridPremiumProps(inProps);
-  const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
+  const initialProps = useDataGridPremiumProps(inProps);
+  const privateApiRef = useGridApiInitialization(initialProps.apiRef, initialProps);
+  const props = useDataGridPremiumComponent(privateApiRef, initialProps);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
+  const pivotSettingsOpen = useGridSelector(privateApiRef, gridPivotPanelOpenSelector);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, dataGridPremiumPropValidators);
   }
+  const sidePanel = isPivotingAvailable(props) && pivotSettingsOpen ? /*#__PURE__*/_jsx(Sidebar, {
+    children: /*#__PURE__*/_jsx(GridPivotPanel, {})
+  }) : null;
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
@@ -47,6 +64,7 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
       sx: props.sx
     }, props.slotProps?.root, {
       ref: ref,
+      sidePanel: sidePanel,
       children: watermark
     }))
   });
@@ -72,6 +90,48 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "filtered"
    */
   aggregationRowsScope: PropTypes.oneOf(['all', 'filtered']),
+  /**
+   * If `true`, the AI Assistant is enabled.
+   * @default false
+   */
+  aiAssistant: PropTypes.bool,
+  /**
+   * The index of the active AI Assistant conversation.
+   */
+  aiAssistantActiveConversationIndex: PropTypes.number,
+  /**
+   * The conversations with the AI Assistant.
+   */
+  aiAssistantConversations: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    prompts: PropTypes.arrayOf(PropTypes.shape({
+      createdAt: PropTypes.instanceOf(Date).isRequired,
+      helperText: PropTypes.string,
+      response: PropTypes.shape({
+        aggregation: PropTypes.object.isRequired,
+        conversationId: PropTypes.string.isRequired,
+        filterOperator: PropTypes.oneOf(['and', 'or']),
+        filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+        grouping: PropTypes.arrayOf(PropTypes.object).isRequired,
+        pivoting: PropTypes.object.isRequired,
+        select: PropTypes.number.isRequired,
+        sorting: PropTypes.arrayOf(PropTypes.object).isRequired
+      }),
+      value: PropTypes.string.isRequired,
+      variant: PropTypes.oneOf(['error', 'processing', 'success'])
+    })).isRequired,
+    title: PropTypes.string
+  })),
+  /**
+   * The suggestions of the AI Assistant.
+   */
+  aiAssistantSuggestions: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired
+  })),
+  /**
+   * If `true`, the AI Assistant is allowed to pick up values from random cells from each column to build the prompt context.
+   */
+  allowAiAssistantDataSampling: PropTypes.bool,
   /**
    * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
@@ -295,6 +355,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false (`!props.checkboxSelection` for MIT Data Grid)
    */
   disableMultipleRowSelection: PropTypes.bool,
+  /**
+   * If `true`, the pivoting feature is disabled.
+   * @default false
+   */
+  disablePivoting: PropTypes.bool,
   /**
    * If `true`, the row grouping is disabled.
    * @default false
@@ -358,7 +423,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.
    * @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group isn't aggregated).
-   * @default (groupNode) => groupNode == null ? 'footer' : 'inline'
+   * @default (groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')
    */
   getAggregationPosition: PropTypes.func,
   /**
@@ -388,6 +453,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
    */
   getEstimatedRowHeight: PropTypes.func,
+  /**
+   * Allows to generate derived columns from actual columns that will be used for pivoting.
+   * Useful e.g. for date columns to generate year, quarter, month, etc.
+   * @param {GridColDef} column The column to generate derived columns for.
+   * @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
+   * @returns {GridColDef[] | undefined} The derived columns.
+   * @default {defaultGetPivotDerivedColumns} Creates year and quarter columns for date columns.
+   */
+  getPivotDerivedColumns: PropTypes.func,
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -576,6 +650,16 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onAggregationModelChange: PropTypes.func,
+  /**
+   * Callback fired when the AI Assistant active conversation index changes.
+   * @param {number} aiAssistantActiveConversationIndex The new active conversation index.
+   */
+  onAiAssistantActiveConversationIndexChange: PropTypes.func,
+  /**
+   * Callback fired when the AI Assistant conversations change.
+   * @param {Conversation[]} conversations The new AI Assistant conversations.
+   */
+  onAiAssistantConversationsChange: PropTypes.func,
   /**
    * Callback fired before the clipboard paste operation starts.
    * Use it to confirm or cancel the paste operation.
@@ -743,7 +827,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   onFetchRows: PropTypes.func,
   /**
@@ -783,6 +867,21 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onPinnedColumnsChange: PropTypes.func,
+  /**
+   * Callback fired when the pivot active state changes.
+   * @param {boolean} isPivotActive Whether the data grid is in pivot mode.
+   */
+  onPivotActiveChange: PropTypes.func,
+  /**
+   * Callback fired when the pivot model changes.
+   * @param {GridPivotModel} pivotModel The new pivot model.
+   */
+  onPivotModelChange: PropTypes.func,
+  /**
+   * Callback fired when the pivot side panel open state changes.
+   * @param {boolean} pivotPanelOpen Whether the pivot side panel is visible.
+   */
+  onPivotPanelOpenChange: PropTypes.func,
   /**
    * Callback fired when the preferences panel is closed.
    * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
@@ -802,6 +901,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {any} error The error thrown.
    */
   onProcessRowUpdateError: PropTypes.func,
+  /**
+   * The function to be used to process the prompt.
+   * @param {string} prompt The prompt to be processed.
+   * @param {string} promptContext The prompt context.
+   * @param {string} conversationId The id of the conversation the prompt is part of. If not passed, prompt response will return a new conversation id that can be used to continue the newly started conversation.
+   * @returns {Promise<PromptResponse>} The prompt response.
+   */
+  onPrompt: PropTypes.func,
   /**
    * Callback fired when the Data Grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -871,7 +978,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
    */
   onRowsScrollEnd: PropTypes.func,
   /**
@@ -933,6 +1040,55 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     bottom: PropTypes.arrayOf(PropTypes.object),
     top: PropTypes.arrayOf(PropTypes.object)
   }),
+  /**
+   * If `true`, the data grid will show data in pivot mode using the `pivotModel`.
+   * @default false
+   */
+  pivotActive: PropTypes.bool,
+  /**
+   * The column definition overrides for the columns generated by the pivoting feature.
+   * @param {string} originalColumnField The field of the original column.
+   * @param {string[]} columnGroupPath The path of the column groups the column belongs to.
+   * @returns {Partial<GridPivotingColDefOverrides> | undefined | void} The column definition overrides.
+   * @default undefined
+   */
+  pivotingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    align: PropTypes.oneOf(['center', 'left', 'right']),
+    cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    description: PropTypes.string,
+    display: PropTypes.oneOf(['flex', 'text']),
+    flex: PropTypes.number,
+    headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
+    headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    headerName: PropTypes.string,
+    maxWidth: PropTypes.number,
+    minWidth: PropTypes.number,
+    resizable: PropTypes.bool,
+    sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
+    width: PropTypes.number
+  })]),
+  /**
+   * The pivot model of the grid.
+   * Will be used to generate the pivot data.
+   * In case of `pivotActive` being `false`, the pivot model is still used to populate the pivot panel.
+   */
+  pivotModel: PropTypes.shape({
+    columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+    rows: PropTypes.arrayOf(PropTypes.shape({
+      field: PropTypes.string.isRequired,
+      hidden: PropTypes.bool
+    })).isRequired,
+    values: PropTypes.arrayOf(PropTypes.shape({
+      aggFunc: PropTypes.string.isRequired,
+      field: PropTypes.string.isRequired,
+      hidden: PropTypes.bool
+    })).isRequired
+  }),
+  /**
+   * If `true`, the pivot side panel is visible.
+   * @default false
+   */
+  pivotPanelOpen: PropTypes.bool,
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * @template R
@@ -1020,7 +1176,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
    * @default "client"
-   * @deprecated Use the {@link https://next.mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
+   * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading Server-side data-Viewport loading} instead.
    */
   rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
   /**

package/esm/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiPremium, GridPrivateApiPremium } from "../models/gridApiPremium.js";
+import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
-export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium | null> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;
+export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps) => DataGridPremiumProcessedProps;

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from "../hooks/features/aggregation/useGridAggregation.js";
@@ -9,8 +12,18 @@ import { useGridDataSourceRowGroupingPreProcessors } from "../hooks/features/row
 import { useGridExcelExport } from "../hooks/features/export/useGridExcelExport.js";
 import { cellSelectionStateInitializer, useGridCellSelection } from "../hooks/features/cellSelection/useGridCellSelection.js";
 import { useGridClipboardImport } from "../hooks/features/clipboard/useGridClipboardImport.js";
-export const useDataGridPremiumComponent = (inputApiRef, props) => {
-  const apiRef = useGridInitialization(inputApiRef, props);
+import { pivotingStateInitializer, useGridPivoting } from "../hooks/features/pivoting/useGridPivoting.js";
+import { gridPivotPropsOverridesSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
+import { useGridAiAssistant, aiAssistantStateInitializer } from "../hooks/features/aiAssistant/useGridAiAssistant.js";
+export const useDataGridPremiumComponent = (apiRef, inProps) => {
+  const pivotPropsOverrides = useGridSelector(apiRef, gridPivotPropsOverridesSelector);
+  const props = React.useMemo(() => {
+    if (pivotPropsOverrides) {
+      return _extends({}, inProps, pivotPropsOverrides);
+    }
+    return inProps;
+  }, [inProps, pivotPropsOverrides]);
+  useGridInitialization(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -42,6 +55,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(pivotingStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -61,6 +75,8 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
+  useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
+  useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
@@ -104,5 +120,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridDataSource(apiRef, props);
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
-  return apiRef;
+  useGridAiAssistant(apiRef, props);
+  return props;
 };

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -5,6 +5,7 @@ import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT, GridSigna
 import { computeSlots } from '@mui/x-data-grid-pro/internals';
 import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.js";
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
+import { defaultGetPivotDerivedColumns } from "../hooks/features/pivoting/utils.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
   signature: GridSignature.DataGridPremium
 }, themedProps.dataSource ? {
@@ -30,7 +31,10 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
     // See https://github.com/mui/mui-x/issues/9103
     const text = pastedText.replace(/\r?\n$/, '');
     return text.split(/\r\n|\n|\r/).map(row => row.split('\t'));
-  }
+  },
+  disablePivoting: false,
+  getPivotDerivedColumns: defaultGetPivotDerivedColumns,
+  aiAssistant: false
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {

package/esm/components/GridColumnMenuPivotItem.d.ts

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

package/esm/components/GridColumnMenuPivotItem.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import { gridPivotPanelOpenSelector } from '@mui/x-data-grid-pro/internals';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridColumnMenuPivotItem(props) {
+  const {
+    onClick
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const isPivotPanelOpen = useGridSelector(apiRef, gridPivotPanelOpenSelector);
+  const openPivotSettings = event => {
+    onClick(event);
+    apiRef.current.setPivotPanelOpen(true);
+  };
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    onClick: openPivotSettings,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.pivotIcon, {
+      fontSize: "small"
+    }),
+    disabled: isPivotPanelOpen,
+    children: apiRef.current.getLocaleText('columnMenuManagePivot')
+  });
+}

package/esm/components/GridEmptyPivotOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridOverlayProps } from '@mui/x-data-grid';
+declare const GridEmptyPivotOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridEmptyPivotOverlay };

package/esm/components/GridEmptyPivotOverlay.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { GridOverlay } from '@mui/x-data-grid';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridEmptyPivotOverlay = forwardRef(function GridEmptyPivotOverlay(props, ref) {
+  const apiRef = useGridApiContext();
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
+    children: apiRef.current.getLocaleText('emptyPivotOverlayLabel')
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridEmptyPivotOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridEmptyPivotOverlay };

package/esm/components/GridFooterCell.js

@@ -10,8 +10,7 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridFooterCellRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FooterCell',
-  overridesResolver: (_, styles) => styles.footerCell
+  slot: 'FooterCell'
 })({
   fontWeight: vars.typography.fontWeight.medium,
   color: vars.colors.foreground.accent

package/esm/components/GridGroupingCriteriaCell.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { vars } from '@mui/x-data-grid/internals';
-import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass, gridRowMaximumTreeDepthSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridPivotActiveSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -32,6 +33,10 @@ export function GridGroupingCriteriaCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const maxTreeDepth = gridRowMaximumTreeDepthSelector(apiRef);
+  const shouldShowToggleContainer = !pivotActive || maxTreeDepth > 2;
+  const shouldShowToggleButton = !pivotActive || rowNode.depth < maxTreeDepth - 2;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
   const handleKeyDown = event => {
     if (event.key === ' ') {
@@ -64,9 +69,9 @@ export function GridGroupingCriteriaCell(props) {
     style: {
       marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${rowNode.depth} * ${vars.spacing(1)})`
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [shouldShowToggleContainer ? /*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      children: shouldShowToggleButton && filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         size: "small",
         onClick: handleClick,
         onKeyDown: handleKeyDown,
@@ -77,7 +82,7 @@ export function GridGroupingCriteriaCell(props) {
           fontSize: "inherit"
         })
       }))
-    }), cellContent, !hideDescendantCount && filteredDescendantCount > 0 ? /*#__PURE__*/_jsxs("span", {
+    }) : null, cellContent, !hideDescendantCount && filteredDescendantCount > 0 ? /*#__PURE__*/_jsxs("span", {
       style: {
         whiteSpace: 'pre'
       },

package/esm/components/GridPremiumColumnMenu.d.ts

@@ -1,10 +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";
 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;
   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;
@@ -17,6 +19,9 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
   columnMenuGroupingItem: {
     displayOrder: number;
   };
+  columnMenuPivotItem: {
+    displayOrder: number;
+  };
   columnMenuPinningItem: {
     displayOrder: number;
   };

package/esm/components/GridPremiumColumnMenu.js

@@ -6,6 +6,7 @@ import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.j
 import { isGroupingColumn } from "../hooks/features/rowGrouping/index.js";
 import { GridColumnMenuRowGroupItem } from "./GridColumnMenuRowGroupItem.js";
 import { GridColumnMenuRowUngroupItem } from "./GridColumnMenuRowUngroupItem.js";
+import { GridColumnMenuPivotItem } from "./GridColumnMenuPivotItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuGroupingItem(props) {
   const {
@@ -18,7 +19,8 @@ export function GridColumnMenuGroupingItem(props) {
 }
 export const GRID_COLUMN_MENU_SLOTS_PREMIUM = _extends({}, GRID_COLUMN_MENU_SLOTS, {
   columnMenuAggregationItem: GridColumnMenuAggregationItem,
-  columnMenuGroupingItem: GridColumnMenuGroupingItem
+  columnMenuGroupingItem: GridColumnMenuGroupingItem,
+  columnMenuPivotItem: GridColumnMenuPivotItem
 });
 export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU_SLOT_PROPS, {
   columnMenuAggregationItem: {
@@ -26,6 +28,9 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
   },
   columnMenuGroupingItem: {
     displayOrder: 27
+  },
+  columnMenuPivotItem: {
+    displayOrder: 28
   }
 });
 export const GridPremiumColumnMenu = forwardRef(function GridPremiumColumnMenuSimple(props, ref) {

package/esm/components/GridPremiumToolbar.d.ts

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

package/esm/components/GridPremiumToolbar.js

@@ -2,15 +2,42 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["excelOptions"];
 import * as React from 'react';
-import { GridToolbar } from '@mui/x-data-grid/internals';
+import { GridToolbar } from '@mui/x-data-grid-pro/internals';
+import { ToolbarButton } from '@mui/x-data-grid-pro';
 import { ExportExcel } from "./export/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { PivotPanelTrigger } from "./pivotPanel/PivotPanelTrigger.js";
+import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
+import { AiAssistantPanelTrigger } from "./aiAssistantPanel/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridPremiumToolbar(props) {
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const additionalItems = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [isPivotingAvailable(rootProps) && /*#__PURE__*/_jsx(PivotPanelTrigger, {
+      render: (triggerProps, state) => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarPivot'),
+        children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: state.active ? 'primary' : 'default',
+          children: /*#__PURE__*/_jsx(rootProps.slots.pivotIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    }), rootProps.aiAssistant && /*#__PURE__*/_jsx(AiAssistantPanelTrigger, {
+      render: triggerProps => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarAssistant'),
+        children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    })]
+  });
   const additionalExportMenuItems = !props.excelOptions?.disableToolbarButton ? onMenuItemClick => /*#__PURE__*/_jsx(ExportExcel, {
     render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
     options: props.excelOptions,
@@ -18,6 +45,7 @@ export function GridPremiumToolbar(props) {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
   return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
+    additionalItems: additionalItems,
     additionalExportMenuItems: additionalExportMenuItems
   }));
 }

package/esm/components/aiAssistantPanel/AiAssistantPanelTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export interface AiAssistantPanelState {
+  /**
+   * If `true`, the assistant panel is open.
+   */
+  open: boolean;
+}
+export type AiAssistantPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], AiAssistantPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: AiAssistantPanelState) => string);
+};
+/**
+ * A button that opens and closes the assistant panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+ *
+ * API:
+ *
+ * - [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+ */
+declare const AiAssistantPanelTrigger: React.ForwardRefExoticComponent<AiAssistantPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<AiAssistantPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AiAssistantPanelTrigger };