@mui/x-data-grid-premium 8.9.1 → 8.10.0

package/esm/hooks/features/sidebar/gridSidebarSelector.js

@@ -0,0 +1,12 @@
+import { createRootSelector, createSelector } from '@mui/x-data-grid-pro/internals';
+export const gridSidebarStateSelector = createRootSelector(state => state.sidebar);
+export const gridSidebarOpenSelector = createSelector(gridSidebarStateSelector, state => state.open);
+export const gridSidebarContentSelector = createSelector(gridSidebarStateSelector, ({
+  sidebarId,
+  labelId,
+  value
+}) => ({
+  sidebarId,
+  labelId,
+  value
+}));

package/esm/hooks/features/sidebar/gridSidebarState.d.ts

@@ -0,0 +1,8 @@
+import { GridSidebarValue } from "./gridSidebarInterfaces.js";
+export interface GridSidebarState {
+  open: boolean;
+  sidebarId?: string;
+  labelId?: string;
+  value?: GridSidebarValue;
+}
+export type GridSidebarInitialState = GridSidebarState;

package/esm/hooks/features/sidebar/gridSidebarState.js

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

package/esm/hooks/features/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./gridSidebarInterfaces.js";
+export * from "./gridSidebarSelector.js";
+export * from "./gridSidebarState.js";

package/esm/hooks/features/sidebar/index.js

@@ -0,0 +1,3 @@
+export * from "./gridSidebarInterfaces.js";
+export * from "./gridSidebarSelector.js";
+export * from "./gridSidebarState.js";

package/esm/hooks/features/sidebar/useGridSidebar.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+export declare const sidebarStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'initialState'>>;
+export declare const useGridSidebar: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "onSidebarClose" | "onSidebarOpen">) => void;

package/esm/hooks/features/sidebar/useGridSidebar.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod, useGridRegisterPipeProcessor, useGridEventPriority } from '@mui/x-data-grid-pro/internals';
+import { gridSidebarStateSelector } from "./gridSidebarSelector.js";
+export const sidebarStateInitializer = (state, props) => _extends({}, state, {
+  sidebar: props.initialState?.sidebar ?? {
+    open: false
+  }
+});
+export const useGridSidebar = (apiRef, props) => {
+  const hideSidebar = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      if (!state.sidebar.open || !state.sidebar.value) {
+        return state;
+      }
+      apiRef.current.publishEvent('sidebarClose', {
+        value: state.sidebar.value
+      });
+      return _extends({}, state, {
+        sidebar: {
+          open: false
+        }
+      });
+    });
+  }, [apiRef]);
+  const showSidebar = React.useCallback((newValue, sidebarId, labelId) => {
+    apiRef.current.setState(state => _extends({}, state, {
+      sidebar: _extends({}, state.sidebar, {
+        open: true,
+        value: newValue,
+        sidebarId,
+        labelId
+      })
+    }));
+    apiRef.current.publishEvent('sidebarOpen', {
+      value: newValue
+    });
+  }, [apiRef]);
+  useGridApiMethod(apiRef, {
+    showSidebar,
+    hideSidebar
+  }, 'public');
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const sidebarToExport = gridSidebarStateSelector(apiRef);
+    const shouldExportSidebar =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the sidebar was initialized
+    props.initialState?.sidebar != null ||
+    // Always export if the sidebar is opened
+    sidebarToExport.open;
+    if (!shouldExportSidebar) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      sidebar: sidebarToExport
+    });
+  }, [apiRef, props.initialState?.sidebar]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const sidebar = context.stateToRestore.sidebar;
+    if (sidebar != null) {
+      apiRef.current.setState(state => _extends({}, state, {
+        sidebar
+      }));
+    }
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridEventPriority(apiRef, 'sidebarClose', props.onSidebarClose);
+  useGridEventPriority(apiRef, 'sidebarOpen', props.onSidebarOpen);
+};

package/esm/hooks/utils/useGridAriaAttributes.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
+export declare const useGridAriaAttributesPremium: () => React.HTMLAttributes<HTMLElement>;

package/esm/hooks/utils/useGridAriaAttributes.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useGridAriaAttributes as useGridAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { useGridAriaAttributesPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "../features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridPrivateApiContext } from "./useGridPrivateApiContext.js";
-export const useGridAriaAttributes = () => {
+export const useGridAriaAttributesPremium = () => {
   const ariaAttributesPro = useGridAriaAttributesPro();
   const apiRef = useGridPrivateApiContext();
   const gridRowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);

package/esm/index.js

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

package/esm/models/dataGridPremiumProps.d.ts

@@ -205,11 +205,13 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
   /**
    * If `true`, the pivot side panel is visible.
    * @default false
+   * @deprecated Use `initialState.sidebar.open` instead.
    */
   pivotPanelOpen?: boolean;
   /**
    * Callback fired when the pivot side panel open state changes.
    * @param {boolean} pivotPanelOpen Whether the pivot side panel is visible.
+   * @deprecated Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead.
    */
   onPivotPanelOpenChange?: (pivotPanelOpen: boolean) => void;
   /**
@@ -254,4 +256,18 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
    * @returns {Promise<PromptResponse>} The prompt response.
    */
   onPrompt?: (prompt: string, promptContext: string, conversationId?: string) => Promise<PromptResponse>;
+  /**
+   * Callback fired when the sidebar is closed.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarClose?: GridEventListener<'sidebarClose'>;
+  /**
+   * Callback fired when the sidebar is opened.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarOpen?: GridEventListener<'sidebarOpen'>;
 }

package/esm/models/gridApiPremium.d.ts

@@ -1,5 +1,6 @@
 import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
 import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi } from '@mui/x-data-grid-pro';
+import { GridRowReorderPrivateApi } from '@mui/x-data-grid-pro/internals';
 import { GridInitialStatePremium, GridStatePremium } from "./gridStatePremium.js";
 import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from "../hooks/index.js";
 import { GridCellSelectionApi } from "../hooks/features/cellSelection/gridCellSelectionInterfaces.js";
@@ -8,9 +9,10 @@ import type { GridDataSourcePremiumPrivateApi, GridDataSourceApiPremium } from "
 import type { GridAggregationPrivateApi } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridPivotingApi, GridPivotingPrivateApi } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 import { GridAiAssistantApi } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+import { GridSidebarApi } from "../hooks/features/sidebar/gridSidebarInterfaces.js";
 /**
  * The api of Data Grid Premium.
  * TODO: Do not redefine manually the pro features
  */
-export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridPivotingApi, GridAiAssistantApi, GridRowMultiSelectionApi, GridColumnReorderApi {}
-export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi, GridPivotingPrivateApi {}
+export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridDataSourceApiPremium, GridCellSelectionApi, GridPivotingApi, GridAiAssistantApi, GridSidebarApi, GridRowMultiSelectionApi, GridColumnReorderApi {}
+export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDataSourcePremiumPrivateApi, GridAggregationPrivateApi, GridDetailPanelPrivateApi, GridRowReorderPrivateApi, GridPivotingPrivateApi {}

package/esm/models/gridStatePremium.d.ts

@@ -2,6 +2,7 @@ import { GridInitialState as GridInitialStatePro, GridState as GridStatePro } fr
 import type { GridRowGroupingState, GridRowGroupingInitialState, GridAggregationState, GridAggregationInitialState, GridCellSelectionModel } from "../hooks/index.js";
 import type { GridPivotingInitialState, GridPivotingState } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
 import { GridAiAssistantInitialState, GridAiAssistantState } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+import { GridSidebarInitialState, GridSidebarState } from "../hooks/features/sidebar/gridSidebarState.js";
 /**
  * The state of Data Grid Premium.
  */
@@ -11,6 +12,7 @@ export interface GridStatePremium extends GridStatePro {
   cellSelection: GridCellSelectionModel;
   pivoting: GridPivotingState;
   aiAssistant: GridAiAssistantState;
+  sidebar: GridSidebarState;
 }
 /**
  * The initial state of Data Grid Premium.
@@ -21,4 +23,5 @@ export interface GridInitialStatePremium extends GridInitialStatePro {
   cellSelection?: GridCellSelectionModel;
   pivoting?: GridPivotingInitialState;
   aiAssistant?: GridAiAssistantInitialState;
+  sidebar?: GridSidebarInitialState;
 }

package/esm/typeOverloads/modules.d.ts

@@ -1,11 +1,12 @@
 import { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
-import type { GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro } from '@mui/x-data-grid-pro/typeOverloads';
+import type { GridPipeProcessingLookupPro, GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro } from '@mui/x-data-grid-pro/typeOverloads';
 import type { GridGroupingValueGetter, GridPastedValueParser } from "../models/index.js";
 import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMeta, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
 import type { GridExcelExportOptions } from "../hooks/features/export/gridExcelExportInterface.js";
 import type { GridPivotingInternalCache, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
+import { GridSidebarValue } from "../hooks/features/sidebar/gridSidebarInterfaces.js";
 export interface GridControlledStateEventLookupPremium {
   /**
    * Fired when the aggregation model changes.
@@ -40,6 +41,9 @@ export interface GridControlledStateEventLookupPremium {
   pivotModeChange: {
     params: boolean;
   };
+  /**
+   * @deprecated Use the `sidebarOpen` and `sidebarClose` events instead.
+   */
   pivotPanelOpenChange: {
     params: boolean;
   };
@@ -69,6 +73,22 @@ interface GridEventLookupPremium extends GridEventLookupPro {
    * Fired when the clipboard paste operation ends.
    */
   clipboardPasteEnd: {};
+  /**
+   * Fired when the sidebar is opened.
+   */
+  sidebarOpen: {
+    params: {
+      value: GridSidebarValue;
+    };
+  };
+  /**
+   * Fired when the sidebar is closed.
+   */
+  sidebarClose: {
+    params: {
+      value: GridSidebarValue;
+    };
+  };
 }
 export interface GridColDefPremium<R extends GridValidRowModel = any, V = any, F = V> {
   /**
@@ -109,8 +129,15 @@ export interface GridApiCachesPremium extends GridApiCachesPro {
   rowGrouping: GridRowGroupingInternalCache;
   aggregation: GridAggregationInternalCache;
 }
+export interface GridPipeProcessingLookupPremium {
+  sidebar: {
+    value: React.ReactNode;
+    context: GridSidebarValue;
+  };
+}
 declare module '@mui/x-data-grid-pro' {
   interface GridEventLookup extends GridEventLookupPremium {}
+  interface GridPipeProcessingLookup extends GridPipeProcessingLookupPro, GridPipeProcessingLookupPremium {}
   interface GridControlledStateEventLookup extends GridControlledStateEventLookupPro, GridControlledStateEventLookupPremium {}
   interface GridRenderCellParams<R, V, F> extends GridRenderCellParamsPremium<R, V, F> {}
   interface GridColumnHeaderParams<R, V, F> extends GridColumnHeaderParamsPremium<R, V, F> {}

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

@@ -47,7 +47,7 @@ export interface GridAggregationFunction<V = any, AV = V> {
    * @param {GridApiPremium} api The grid API.
    * @returns {AV} The aggregated value.
    */
-  apply: (params: GridAggregationParams<V>, api: GridApiPremium) => AV | null | undefined;
+  apply: (params: GridAggregationParams<V>, api?: GridApiPremium) => AV | null | undefined;
   /**
    * Label of the aggregation function.
    * Used for adding a label to the footer of the grouping column when this aggregation function is the only one being used.

package/hooks/features/aiAssistant/api.d.ts

@@ -1,4 +1,4 @@
-import { PromptResponse } from "./gridAiAssistantInterfaces.js";
+import { PromptResponse, PromptResolverOptions } from "./gridAiAssistantInterfaces.js";
 /**
  * Prompt resolver for the <DataGridPremium /> component.
  * @param {string} url The URL to send the request to.
@@ -6,7 +6,7 @@ import { PromptResponse } from "./gridAiAssistantInterfaces.js";
  * @param {string} context The prompt context containing necessary information about the current columns definition.
  * Either use the `context` parameter of the `onPrompt` callback or the return value of the `unstable_getPromptContext()` API method.
  * @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.
- * @param {string} additionalContext Optional, additional context to make the processing results more accurate.
+ * @param {string | PromptResolverOptions} optionsOrAdditionalContext Optional, includes settings to extend and customize the prompt resolver's behaviour, or additional context string for backward compatibility.
  * @returns {Promise<PromptResponse>} The grid state updates to be applied.
  */
-export declare function gridDefaultPromptResolver(url: string, query: string, context: string, conversationId?: string, additionalContext?: string): Promise<PromptResponse>;
+export declare function gridDefaultPromptResolver(url: string, query: string, context: string, conversationId?: string, optionsOrAdditionalContext?: string | PromptResolverOptions): Promise<PromptResponse>;

package/hooks/features/aiAssistant/api.js

@@ -11,10 +11,14 @@ exports.gridDefaultPromptResolver = gridDefaultPromptResolver;
  * @param {string} context The prompt context containing necessary information about the current columns definition.
  * Either use the `context` parameter of the `onPrompt` callback or the return value of the `unstable_getPromptContext()` API method.
  * @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.
- * @param {string} additionalContext Optional, additional context to make the processing results more accurate.
+ * @param {string | PromptResolverOptions} optionsOrAdditionalContext Optional, includes settings to extend and customize the prompt resolver's behaviour, or additional context string for backward compatibility.
  * @returns {Promise<PromptResponse>} The grid state updates to be applied.
  */
-function gridDefaultPromptResolver(url, query, context, conversationId, additionalContext = '') {
+function gridDefaultPromptResolver(url, query, context, conversationId, optionsOrAdditionalContext = '') {
+  // Handle backward compatibility: if string is passed, treat it as additionalContext
+  const options = typeof optionsOrAdditionalContext === 'string' ? {
+    additionalContext: optionsOrAdditionalContext
+  } : optionsOrAdditionalContext;
   return fetch(url, {
     mode: 'cors',
     method: 'POST',
@@ -25,8 +29,8 @@ function gridDefaultPromptResolver(url, query, context, conversationId, addition
     body: JSON.stringify({
       context,
       query,
-      additionalContext,
-      conversationId
+      conversationId,
+      options
     })
   }).then(result => result.json()).then(result => {
     if (result.ok === false) {

package/hooks/features/aiAssistant/gridAiAssistantInterfaces.d.ts

@@ -49,6 +49,17 @@ export type PromptResponse = {
   grouping: Grouping[];
   pivoting: Pivoting;
 };
+export type PromptResolverOptions = {
+  /**
+   * By default, MUI's prompt resolver service stores the queries made to the service to analyze potential errors and improve the service (data is never stored). Enable private mode to make the service only keep track of the token count, without any query related data.
+   * @default false
+   */
+  privateMode?: boolean;
+  /**
+   * Additional context to make the processing results more accurate.
+   */
+  additionalContext?: string;
+};
 /**
  * The prompt API interface that is available in the grid [[apiRef]].
  */

package/hooks/features/export/serializer/excelSerializer.js

@@ -58,12 +58,7 @@ const serializeRowUnsafe = (id, columns, apiRef, defaultValueOptionsFormulae, op
   const hasColSpan = (0, _internals.gridHasColSpanSelector)(apiRef);
   if (hasColSpan) {
     // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
-    apiRef.current.calculateColSpan({
-      rowId: id,
-      minFirstColumn: 0,
-      maxLastColumn: columns.length,
-      columns
-    });
+    apiRef.current.calculateColSpan(id, 0, columns.length, columns);
   }
   columns.forEach((column, colIndex) => {
     const colSpanInfo = hasColSpan ? apiRef.current.unstable_getCellColSpanInfo(id, colIndex) : undefined;

package/hooks/features/index.d.ts

@@ -2,4 +2,5 @@ export * from "./aggregation/index.js";
 export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
 export * from "./cellSelection/index.js";
-export * from "./aiAssistant/index.js";
+export * from "./aiAssistant/index.js";
+export * from "./sidebar/index.js";

package/hooks/features/index.js

@@ -57,4 +57,15 @@ Object.keys(_aiAssistant).forEach(function (key) {
       return _aiAssistant[key];
     }
   });
+});
+var _sidebar = require("./sidebar");
+Object.keys(_sidebar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _sidebar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sidebar[key];
+    }
+  });
 });

package/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -23,6 +23,10 @@ export interface GridPivotingState extends GridPivotingStatePartial {
 export interface GridPivotingInitialState {
   model?: GridPivotModel;
   enabled?: boolean;
+  /**
+   * To open the pivot sidebar on init, set sidebar's `openValue` to `GridSidebarValue.Pivot`.
+   * @deprecated Use sidebar state instead.
+   */
   panelOpen?: boolean;
 }
 export interface GridPivotModel {
@@ -55,6 +59,7 @@ export interface GridPivotingApi {
   setPivotActive: (active: boolean | ((prev: boolean) => boolean)) => void;
   /**
    * Sets whether the pivot panel is open.
+   * @deprecated Use the `showSidebar` method instead. Using this method will not trigger the `sidebarOpen` and `sidebarClose` events.
    * @param {boolean | ((prev: boolean) => boolean)} open - The new value of the pivot panel open state.
    */
   setPivotPanelOpen: (open: boolean | ((prev: boolean) => boolean)) => void;

package/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -1,8 +1,11 @@
 import type { GridStatePremium } from "../../../models/gridStatePremium.js";
+export declare const gridPivotPanelOpenSelector: (args_0: import("react").RefObject<{
+  state: GridStatePremium;
+} | null>) => boolean;
 export declare const gridPivotModelSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => import("./gridPivotingInterfaces.js").GridPivotModel;
 export declare const gridPivotPropsOverridesSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
 } | null>) => import("./gridPivotingInterfaces.js").GridPivotingPropsOverrides | undefined;
-export { gridPivotActiveSelector, gridPivotInitialColumnsSelector, gridPivotPanelOpenSelector } from '@mui/x-data-grid/internals';
+export { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid/internals';

package/hooks/features/pivoting/gridPivotingSelectors.js

@@ -15,16 +15,11 @@ Object.defineProperty(exports, "gridPivotInitialColumnsSelector", {
     return _internals2.gridPivotInitialColumnsSelector;
   }
 });
-exports.gridPivotModelSelector = void 0;
-Object.defineProperty(exports, "gridPivotPanelOpenSelector", {
-  enumerable: true,
-  get: function () {
-    return _internals2.gridPivotPanelOpenSelector;
-  }
-});
-exports.gridPivotPropsOverridesSelector = void 0;
+exports.gridPivotPropsOverridesSelector = exports.gridPivotPanelOpenSelector = exports.gridPivotModelSelector = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _sidebar = require("../sidebar");
 var _internals2 = require("@mui/x-data-grid/internals");
 const gridPivotingStateSelector = (0, _internals.createRootSelector)(state => state.pivoting);
+const gridPivotPanelOpenSelector = exports.gridPivotPanelOpenSelector = (0, _internals.createSelector)(_sidebar.gridSidebarStateSelector, sidebar => sidebar.value === _sidebar.GridSidebarValue.Pivot && sidebar.open);
 const gridPivotModelSelector = exports.gridPivotModelSelector = (0, _internals.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.model);
 const gridPivotPropsOverridesSelector = exports.gridPivotPropsOverridesSelector = (0, _internals.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.active ? pivoting.propsOverrides : undefined);

package/hooks/features/pivoting/useGridPivoting.d.ts

@@ -3,6 +3,6 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
-export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>>;
+export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>, GridPrivateApiPremium>;
 export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
 export declare const useGridPivotingExportState: (apiRef: RefObject<GridPrivateApiPremium>) => void;

package/hooks/features/pivoting/useGridPivoting.js

@@ -12,9 +12,12 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _pivotPanel = require("../../../components/pivotPanel");
 var _gridPivotingSelectors = require("./gridPivotingSelectors");
 var _utils = require("./utils");
 var _gridAggregationUtils = require("../aggregation/gridAggregationUtils");
+var _sidebar = require("../sidebar");
+var _jsxRuntime = require("react/jsx-runtime");
 const emptyPivotModel = {
   rows: [],
   columns: [],
@@ -33,19 +36,23 @@ const pivotingStateInitializer = (state, props, apiRef) => {
     return (0, _extends2.default)({}, state, {
       pivoting: {
         active: false,
-        model: emptyPivotModel,
-        panelOpen: false
+        model: emptyPivotModel
       }
     });
   }
   const initialColumns = (0, _utils.getInitialColumns)(props.columns ?? [], props.getPivotDerivedColumns, apiRef.current.getLocaleText);
+  const open = props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false;
+  const sidebarStateUpdate = open ? {
+    open,
+    value: _sidebar.GridSidebarValue.Pivot
+  } : {};
   return (0, _extends2.default)({}, state, {
     pivoting: {
       active: props.pivotActive ?? props.initialState?.pivoting?.enabled ?? false,
       model: props.pivotModel ?? props.initialState?.pivoting?.model ?? emptyPivotModel,
-      panelOpen: props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false,
       initialColumns
-    }
+    },
+    sidebar: (0, _extends2.default)({}, state.sidebar, sidebarStateUpdate)
   });
 };
 exports.pivotingStateInitializer = pivotingStateInitializer;
@@ -258,11 +265,16 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
     if (!isPivotingAvailable) {
       return;
     }
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      pivoting: (0, _extends2.default)({}, state.pivoting, {
-        panelOpen: typeof callback === 'function' ? callback(state.pivoting?.panelOpen) : callback
-      })
-    }));
+    const panelOpen = (0, _gridPivotingSelectors.gridPivotPanelOpenSelector)(apiRef);
+    const newPanelOpen = typeof callback === 'function' ? callback(panelOpen) : callback;
+    if (panelOpen === newPanelOpen) {
+      return;
+    }
+    if (newPanelOpen) {
+      apiRef.current.showSidebar(_sidebar.GridSidebarValue.Pivot);
+    } else {
+      apiRef.current.hideSidebar();
+    }
   }, [apiRef, isPivotingAvailable]);
   const addColumnMenuButton = React.useCallback(menuItems => {
     if (isPivotingAvailable) {
@@ -318,6 +330,13 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
       });
     });
   }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
+  const addPivotingPanel = React.useCallback((initialValue, value) => {
+    if (isPivotingAvailable && value === _sidebar.GridSidebarValue.Pivot) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pivotPanel.GridPivotPanel, {});
+    }
+    return initialValue;
+  }, [isPivotingAvailable]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'sidebar', addPivotingPanel);
   (0, _internals.useGridApiMethod)(apiRef, {
     setPivotModel,
     setPivotActive,

package/hooks/features/pivoting/utils.js

@@ -67,7 +67,7 @@ function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
     if (sort === undefined) {
       return 0;
     }
-    return (sort === 'asc' ? 1 : -1) * (0, _xDataGridPro.gridStringOrNumberComparator)(a.headerName, b.headerName, {}, {});
+    return (sort === 'asc' ? 1 : -1) * (0, _xDataGridPro.gridStringOrNumberComparator)(a.rawHeaderName, b.rawHeaderName, {}, {});
   });
 }
 const getPivotedData = ({
@@ -151,21 +151,23 @@ const getPivotedData = ({
           continue;
         }
         let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
-        if (column.type !== 'number') {
-          colValue = String(colValue);
-        }
         if (column.type === 'singleSelect') {
           const singleSelectColumn = column;
           if (singleSelectColumn.getOptionLabel) {
             colValue = singleSelectColumn.getOptionLabel(colValue);
           }
         }
+        if (column.type !== 'number') {
+          colValue = String(colValue);
+        }
+        const formattedHeaderName = apiRef.current.getRowFormattedValue(row, column) || colValue;
         columnGroupPath.push(colValue);
         const groupId = columnGroupPath.join(columnGroupIdSeparator);
         if (!columnGroupingModelLookup.has(groupId)) {
           const columnGroup = {
             groupId,
-            headerName: colValue,
+            headerName: formattedHeaderName,
+            rawHeaderName: colValue,
             children: []
           };
           columnGroupingModelLookup.set(groupId, columnGroup);

package/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -1,8 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
-import { GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
+import { GridColumnRawLookup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
-import { RowGroupingStrategy } from "./gridRowGroupingUtils.js";
 interface CreateGroupingColDefMonoCriteriaParams {
   columnsLookup: GridColumnRawLookup;
   /**