@mui/x-data-grid-premium 6.0.0-beta.4 → 6.0.0

package/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -1,12 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/internals';
-import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from '../components';
 import { GridPremiumColumnMenu } from '../components/GridPremiumColumnMenu';
-export const DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS = {
-  ColumnMenuUngroupIcon: GridWorkspacesIcon,
-  ColumnMenuGroupIcon: GridGroupWorkIcon,
-  ColumnMenuAggregationIcon: GridFunctionsIcon
-};
-export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, DEFAULT_GRID_PREMIUM_ICON_SLOTS_COMPONENTS, {
+import materialSlots from '../material';
+export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
   ColumnMenu: GridPremiumColumnMenu
 });

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

@@ -25,6 +25,8 @@ export interface GridAggregationGetCellValueParams {
 }
 /**
  * Grid aggregation function definition interface.
+ * @demos
+ *   - [Aggregation functions](/x/react-data-grid/aggregation/#aggregation-functions)
  */
 export interface GridAggregationFunction<V = any, AV = V, FAV = AV> {
     /**

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'componentsProps' | 'components'>) => void;
+export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'slotProps' | 'slots'>) => void;

package/hooks/features/export/gridExcelExportInterface.d.ts

@@ -11,8 +11,15 @@ export interface ColumnsStylesInterface {
 }
 /**
  * The options to apply on the Excel export.
+ * @demos
+ *   - [Excel export](/x/react-data-grid/export/#excel-export)
  */
 export interface GridExcelExportOptions extends GridFileExportOptions {
+    /**
+     * Function to return the Worker instance to be called.
+     * @returns {() => Worker} A Worker instance.
+     */
+    worker?: () => Worker;
     /**
      * Name given to the worksheet containing the columns valueOptions.
      * valueOptions are added to this worksheet if they are provided as an array.
@@ -20,12 +27,16 @@ export interface GridExcelExportOptions extends GridFileExportOptions {
     valueOptionsSheetName?: string;
     /**
      * Method called before adding the rows to the workbook.
+     * Not supported when `worker` is set.
+     * To use with web workers, use the option in `setupExcelExportWebWorker`.
      * @param {GridExceljsProcessInput} processInput object containing the workbook and the worksheet.
      * @returns {Promise<void>} A promise which resolves after processing the input.
      * */
     exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
     /**
      * Method called after adding the rows to the workbook.
+     * Not supported when `worker` is set.
+     * To use with web workers, use the option in `setupExcelExportWebWorker`.
      * @param {GridExceljsProcessInput} processInput object containing the workbook and the worksheet.
      * @returns {Promise<void>} A promise which resolves after processing the input.
      * */

package/hooks/features/export/index.d.ts

@@ -1 +1,2 @@
 export * from './gridExcelExportInterface';
+export { setupExcelExportWebWorker } from './serializer/excelSerializer';

package/hooks/features/export/index.js

@@ -1 +1,2 @@
-export * from './gridExcelExportInterface';
+export * from './gridExcelExportInterface';
+export { setupExcelExportWebWorker } from './serializer/excelSerializer';

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,8 +1,47 @@
 import type * as Excel from 'exceljs';
-import { GridRowId } from '@mui/x-data-grid-pro';
-import { GridStateColDef } from '@mui/x-data-grid/internals';
-import { GridExceljsProcessInput, ColumnsStylesInterface } from '../gridExcelExportInterface';
+import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
+import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
+import { GridExceljsProcessInput, ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
 import { GridPrivateApiPremium } from '../../../../models/gridApiPremium';
+interface SerializedRow {
+    row: Record<string, undefined | number | boolean | string | Date>;
+    dataValidation: Record<string, Excel.DataValidation>;
+    outlineLevel: number;
+    mergedCells: {
+        leftIndex: number;
+        rightIndex: number;
+    }[];
+}
+export declare const serializeRow: (id: GridRowId, columns: GridStateColDef[], api: GridPrivateApiPremium, defaultValueOptionsFormulae: {
+    [field: string]: {
+        address: string;
+    };
+}) => SerializedRow;
+export declare const serializeColumn: (column: GridColDef, columnsStyles: ColumnsStylesInterface) => {
+    key: string;
+    headerText: string;
+    width: number;
+    style: {
+        numFmt: string;
+        font: Partial<Excel.Font>;
+        alignment: Partial<Excel.Alignment>;
+        protection: Partial<Excel.Protection>;
+        border: Partial<Excel.Borders>;
+        fill: Excel.Fill;
+    };
+};
+type SerializedColumns = Array<{
+    key: string;
+    width: number;
+    style: Excel.Style;
+    headerText: string;
+}>;
+export declare function serializeColumns(columns: GridStateColDef[], styles: ColumnsStylesInterface): SerializedColumns;
+type ValueOptionsData = Record<string, {
+    values: (string | number)[];
+    address: string;
+}>;
+export declare function getDataForValueOptionsSheet(columns: GridStateColDef[], valueOptionsSheetName: string, api: GridPrivateApiPremium): Promise<ValueOptionsData>;
 interface BuildExcelOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
@@ -14,4 +53,14 @@ interface BuildExcelOptions {
     columnsStyles?: ColumnsStylesInterface;
 }
 export declare function buildExcel(options: BuildExcelOptions, api: GridPrivateApiPremium): Promise<Excel.Workbook>;
+export interface ExcelExportInitEvent {
+    serializedColumns: SerializedColumns;
+    serializedRows: SerializedRow[];
+    valueOptionsSheetName: string;
+    columnGroupPaths: Record<string, string[]>;
+    columnGroupDetails: GridColumnGroupLookup;
+    valueOptionsData: ValueOptionsData;
+    options: Omit<GridExcelExportOptions, 'exceljsPreProcess' | 'exceljsPostProcess' | 'columnsStyles' | 'valueOptionsSheetName'>;
+}
+export declare function setupExcelExportWebWorker(workerOptions?: Pick<GridExcelExportOptions, 'exceljsPostProcess' | 'exceljsPreProcess'>): void;
 export {};

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

@@ -27,7 +27,7 @@ const getFormattedValueOptions = (colDef, valueOptions, api) => {
   }
   return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
 };
-const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
+export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   const row = {};
   const dataValidation = {};
   const mergedCells = [];
@@ -72,11 +72,13 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
               formulae: [`"${formattedValueOptions.map(x => x.toString().replaceAll(',', 'CHAR(44)')).join(',')}"`]
             };
           } else {
+            const address = defaultValueOptionsFormulae[column.field].address;
+
             // If value option is defined for the column, refer to another sheet
             dataValidation[castColumn.field] = {
               type: 'list',
               allowBlank: true,
-              formulae: [defaultValueOptionsFormulae[castColumn.field]]
+              formulae: [address]
             };
           }
           const formattedValue = api.getCellParams(id, castColumn.field).formattedValue;
@@ -138,13 +140,15 @@ const defaultColumnsStyles = {
     numFmt: 'dd.mm.yyyy hh:mm'
   }
 };
-const serializeColumn = (column, columnsStyles) => {
+export const serializeColumn = (column, columnsStyles) => {
+  var _column$headerName;
   const {
     field,
     type
   } = column;
   return {
     key: field,
+    headerText: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
     // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
     // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
     // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the the font-size
@@ -152,22 +156,21 @@ const serializeColumn = (column, columnsStyles) => {
     style: _extends({}, type && (defaultColumnsStyles == null ? void 0 : defaultColumnsStyles[type]), columnsStyles == null ? void 0 : columnsStyles[field])
   };
 };
-const addColumnGroupingHeaders = (worksheet, columns, api) => {
+const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGroupDetails) => {
   const maxDepth = Math.max(...columns.map(({
-    field
+    key
   }) => {
-    var _api$unstable_getColu, _api$unstable_getColu2;
-    return (_api$unstable_getColu = (_api$unstable_getColu2 = api.unstable_getColumnGroupPath(field)) == null ? void 0 : _api$unstable_getColu2.length) != null ? _api$unstable_getColu : 0;
+    var _columnGroupPaths$key, _columnGroupPaths$key2;
+    return (_columnGroupPaths$key = (_columnGroupPaths$key2 = columnGroupPaths[key]) == null ? void 0 : _columnGroupPaths$key2.length) != null ? _columnGroupPaths$key : 0;
   }));
   if (maxDepth === 0) {
     return;
   }
-  const columnGroupDetails = api.unstable_getAllGroupDetails();
   for (let rowIndex = 0; rowIndex < maxDepth; rowIndex += 1) {
     const row = columns.map(({
-      field
+      key
     }) => {
-      const groupingPath = api.unstable_getColumnGroupPath(field);
+      const groupingPath = columnGroupPaths[key];
       if (groupingPath.length <= rowIndex) {
         return {
           groupId: null,
@@ -212,13 +215,76 @@ const addColumnGroupingHeaders = (worksheet, columns, api) => {
     }
   }
 };
+export function serializeColumns(columns, styles) {
+  return columns.map(column => serializeColumn(column, styles));
+}
+export async function getDataForValueOptionsSheet(columns, valueOptionsSheetName, api) {
+  const candidateColumns = columns.filter(column => isSingleSelectColDef(column) && Array.isArray(column.valueOptions));
+
+  // Creates a temp worksheet to obtain the column letters
+  const excelJS = await getExcelJs();
+  const workbook = new excelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Sheet1');
+  worksheet.columns = candidateColumns.map(column => ({
+    key: column.field
+  }));
+  return candidateColumns.reduce((acc, column) => {
+    var _column$headerName2;
+    const singleSelectColumn = column;
+    const formattedValueOptions = getFormattedValueOptions(singleSelectColumn, singleSelectColumn.valueOptions, api);
+    const header = (_column$headerName2 = column.headerName) != null ? _column$headerName2 : column.field;
+    const values = [header, ...formattedValueOptions];
+    const letter = worksheet.getColumn(column.field).letter;
+    const address = `${valueOptionsSheetName}!$${letter}$2:$${letter}$${values.length}`;
+    acc[column.field] = {
+      values,
+      address
+    };
+    return acc;
+  }, {});
+}
+function addSerializedRowToWorksheet(serializedRow, worksheet) {
+  const {
+    row,
+    dataValidation,
+    outlineLevel,
+    mergedCells
+  } = serializedRow;
+  const newRow = worksheet.addRow(row);
+  Object.keys(dataValidation).forEach(field => {
+    newRow.getCell(field).dataValidation = _extends({}, dataValidation[field]);
+  });
+  if (outlineLevel) {
+    newRow.outlineLevel = outlineLevel;
+  }
+
+  // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+  const lastRowIndex = newRow.worksheet.rowCount;
+  mergedCells.forEach(mergedCell => {
+    worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+  });
+}
+async function createValueOptionsSheetIfNeeded(valueOptionsData, sheetName, workbook) {
+  if (Object.keys(valueOptionsData).length === 0) {
+    return;
+  }
+  const valueOptionsWorksheet = workbook.addWorksheet(sheetName);
+  valueOptionsWorksheet.columns = Object.keys(valueOptionsData).map(key => ({
+    key
+  }));
+  Object.entries(valueOptionsData).forEach(([field, {
+    values
+  }]) => {
+    valueOptionsWorksheet.getColumn(field).values = values;
+  });
+}
 export async function buildExcel(options, api) {
   const {
     columns,
     rowIds,
     includeHeaders,
     includeColumnGroupsHeaders,
-    valueOptionsSheetName,
+    valueOptionsSheetName = 'Options',
     exceljsPreProcess,
     exceljsPostProcess,
     columnsStyles = {}
@@ -226,7 +292,8 @@ export async function buildExcel(options, api) {
   const excelJS = await getExcelJs();
   const workbook = new excelJS.Workbook();
   const worksheet = workbook.addWorksheet('Sheet1');
-  worksheet.columns = columns.map(column => serializeColumn(column, columnsStyles));
+  const serializedColumns = serializeColumns(columns, columnsStyles);
+  worksheet.columns = serializedColumns;
   if (exceljsPreProcess) {
     await exceljsPreProcess({
       workbook,
@@ -234,51 +301,23 @@ export async function buildExcel(options, api) {
     });
   }
   if (includeColumnGroupsHeaders) {
-    addColumnGroupingHeaders(worksheet, columns, api);
+    const columnGroupPaths = columns.reduce((acc, column) => {
+      acc[column.field] = api.unstable_getColumnGroupPath(column.field);
+      return acc;
+    }, {});
+    addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, api.unstable_getAllGroupDetails());
   }
   if (includeHeaders) {
     worksheet.addRow(columns.map(column => {
-      var _column$headerName;
-      return (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
+      var _column$headerName3;
+      return (_column$headerName3 = column.headerName) != null ? _column$headerName3 : column.field;
     }));
   }
-  const columnsWithArrayValueOptions = columns.filter(column => isSingleSelectColDef(column) && column.valueOptions && typeof column.valueOptions !== 'function');
-  const defaultValueOptionsFormulae = {};
-  if (columnsWithArrayValueOptions.length) {
-    const valueOptionsWorksheet = workbook.addWorksheet(valueOptionsSheetName);
-    valueOptionsWorksheet.columns = columnsWithArrayValueOptions.map(({
-      field
-    }) => ({
-      key: field
-    }));
-    columnsWithArrayValueOptions.forEach(column => {
-      var _column$headerName2;
-      const formattedValueOptions = getFormattedValueOptions(column, column.valueOptions, api);
-      valueOptionsWorksheet.getColumn(column.field).values = [(_column$headerName2 = column.headerName) != null ? _column$headerName2 : column.field, ...formattedValueOptions];
-      const columnLetter = valueOptionsWorksheet.getColumn(column.field).letter;
-      defaultValueOptionsFormulae[column.field] = `${valueOptionsSheetName}!$${columnLetter}$2:$${columnLetter}$${1 + formattedValueOptions.length}`;
-    });
-  }
+  const valueOptionsData = await getDataForValueOptionsSheet(columns, valueOptionsSheetName, api);
+  createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
   rowIds.forEach(id => {
-    const {
-      row,
-      dataValidation,
-      outlineLevel,
-      mergedCells
-    } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
-    const newRow = worksheet.addRow(row);
-    Object.keys(dataValidation).forEach(field => {
-      newRow.getCell(field).dataValidation = _extends({}, dataValidation[field]);
-    });
-    if (outlineLevel) {
-      newRow.outlineLevel = outlineLevel;
-    }
-
-    // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
-    const lastRowIndex = newRow.worksheet.rowCount;
-    mergedCells.forEach(mergedCell => {
-      worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
-    });
+    const serializedRow = serializeRow(id, columns, api, valueOptionsData);
+    addSerializedRowToWorksheet(serializedRow, worksheet);
   });
   if (exceljsPostProcess) {
     await exceljsPostProcess({
@@ -287,4 +326,51 @@ export async function buildExcel(options, api) {
     });
   }
   return workbook;
+}
+export function setupExcelExportWebWorker(workerOptions = {}) {
+  // eslint-disable-next-line no-restricted-globals
+  addEventListener('message', async event => {
+    var _options$includeHeade;
+    const {
+      serializedColumns,
+      serializedRows,
+      options,
+      valueOptionsSheetName,
+      valueOptionsData,
+      columnGroupDetails,
+      columnGroupPaths
+    } = event.data;
+    const {
+      exceljsPostProcess,
+      exceljsPreProcess
+    } = workerOptions;
+    const excelJS = await getExcelJs();
+    const workbook = new excelJS.Workbook();
+    const worksheet = workbook.addWorksheet('Sheet1');
+    worksheet.columns = serializedColumns;
+    if (exceljsPreProcess) {
+      await exceljsPreProcess({
+        workbook,
+        worksheet
+      });
+    }
+    if (options.includeColumnGroupsHeaders) {
+      addColumnGroupingHeaders(worksheet, serializedColumns, columnGroupPaths, columnGroupDetails);
+    }
+    const includeHeaders = (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true;
+    if (includeHeaders) {
+      worksheet.addRow(serializedColumns.map(column => column.headerText));
+    }
+    createValueOptionsSheetIfNeeded(valueOptionsData, valueOptionsSheetName, workbook);
+    serializedRows.forEach(serializedRow => {
+      addSerializedRowToWorksheet(serializedRow, worksheet);
+    });
+    if (exceljsPostProcess) {
+      await exceljsPostProcess({
+        workbook,
+        worksheet
+      });
+    }
+    postMessage(await workbook.xlsx.writeBuffer());
+  });
 }

package/hooks/features/export/useGridExcelExport.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+import { DataGridPremiumProps } from '../../../models/dataGridPremiumProps';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -7,4 +8,4 @@ import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>) => void;
+export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: DataGridPremiumProps) => void;

package/hooks/features/export/useGridExcelExport.js

@@ -1,7 +1,9 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["worker", "exceljsPostProcess", "exceljsPreProcess", "columnsStyles", "includeHeaders", "getRowsToExport", "valueOptionsSheetName"];
 import * as React from 'react';
-import { useGridApiMethod, useGridLogger } from '@mui/x-data-grid';
+import { useGridApiMethod, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
-import { buildExcel } from './serializer/excelSerializer';
+import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRow } from './serializer/excelSerializer';
 import { GridExcelExportMenuItem } from '../../../components';
 
 /**
@@ -12,7 +14,7 @@ import { GridExcelExportMenuItem } from '../../../components';
  * @requires useGridParamsApi (method)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const useGridExcelExport = apiRef => {
+export const useGridExcelExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridExcelExport');
   const getDataAsExcel = React.useCallback((options = {}) => {
     var _options$getRowsToExp, _options$includeHeade, _options$includeColum;
@@ -36,18 +38,70 @@ export const useGridExcelExport = apiRef => {
       exceljsPostProcess: options == null ? void 0 : options.exceljsPostProcess
     }, apiRef.current);
   }, [logger, apiRef]);
-  const exportDataAsExcel = React.useCallback(async options => {
-    logger.debug(`Export data as excel`);
-    const workbook = await getDataAsExcel(options);
-    if (workbook === null) {
+  const exportDataAsExcel = React.useCallback(async (options = {}) => {
+    const {
+        worker: workerFn,
+        exceljsPostProcess,
+        exceljsPreProcess,
+        getRowsToExport = defaultGetRowsToExport,
+        valueOptionsSheetName = 'Options'
+      } = options,
+      cloneableOptions = _objectWithoutPropertiesLoose(options, _excluded);
+    const sendExcelToUser = buffer => {
+      const blob = new Blob([buffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      });
+      exportAs(blob, 'xlsx', options == null ? void 0 : options.fileName);
+    };
+    if (!workerFn) {
+      apiRef.current.publishEvent('excelExportStateChange', 'pending');
+      const workbook = await getDataAsExcel(options);
+      if (workbook === null) {
+        return;
+      }
+      const content = await workbook.xlsx.writeBuffer();
+      apiRef.current.publishEvent('excelExportStateChange', 'finished');
+      sendExcelToUser(content);
       return;
     }
-    const content = await workbook.xlsx.writeBuffer();
-    const blob = new Blob([content], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    if (exceljsPostProcess && process.env.NODE_ENV !== 'production') {
+      console.warn([`MUI: The exceljsPostProcess option is not supported when a web worker is used.`, 'As alternative, pass the callback to the same option in setupExcelExportWebWorker.'].join('\n'));
+    }
+    if (exceljsPreProcess && process.env.NODE_ENV !== 'production') {
+      console.warn([`MUI: The exceljsPreProcess option is not supported when a web worker is used.`, 'As alternative, pass the callback to the same option in setupExcelExportWebWorker.'].join('\n'));
+    }
+    const worker = workerFn();
+    apiRef.current.publishEvent('excelExportStateChange', 'pending');
+    worker.onmessage = async event => {
+      sendExcelToUser(event.data);
+      apiRef.current.publishEvent('excelExportStateChange', 'finished');
+      worker.terminate();
+    };
+    const exportedRowIds = getRowsToExport({
+      apiRef
+    });
+    const exportedColumns = getColumnsToExport({
+      apiRef,
+      options
     });
-    exportAs(blob, 'xlsx', options == null ? void 0 : options.fileName);
-  }, [logger, getDataAsExcel]);
+    const valueOptionsData = await getDataForValueOptionsSheet(exportedColumns, valueOptionsSheetName, apiRef.current);
+    const serializedColumns = serializeColumns(exportedColumns, options.columnsStyles || {});
+    const serializedRows = exportedRowIds.map(id => serializeRow(id, exportedColumns, apiRef.current, valueOptionsData));
+    const columnGroupPaths = exportedColumns.reduce((acc, column) => {
+      acc[column.field] = apiRef.current.unstable_getColumnGroupPath(column.field);
+      return acc;
+    }, {});
+    const message = {
+      serializedColumns,
+      serializedRows,
+      valueOptionsData,
+      columnGroupPaths,
+      columnGroupDetails: apiRef.current.unstable_getAllGroupDetails(),
+      options: cloneableOptions,
+      valueOptionsSheetName
+    };
+    worker.postMessage(message);
+  }, [apiRef, getDataAsExcel]);
   const excelExportApi = {
     getDataAsExcel,
     exportDataAsExcel
@@ -70,4 +124,5 @@ export const useGridExcelExport = apiRef => {
     }];
   }, []);
   useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
+  useGridApiOptionHandler(apiRef, 'excelExportStateChange', props.onExcelExportStateChange);
 };

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

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping' | 'componentsProps' | 'components'>) => void;
+export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping' | 'slotProps' | 'slots'>) => void;

package/index.d.ts

@@ -16,6 +16,7 @@ export * from './DataGridPremium';
 export * from './hooks';
 export * from './models';
 export * from './components';
+export { GridColumnHeaders } from '@mui/x-data-grid-pro';
 export type { DataGridPremiumProps, GridExperimentalPremiumFeatures, } from './models/dataGridPremiumProps';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.0.0-beta.4
+ * @mui/x-data-grid-premium v6.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -23,5 +23,6 @@ export * from './DataGridPremium';
 export * from './hooks';
 export * from './models';
 export * from './components';
+export { GridColumnHeaders } from '@mui/x-data-grid-pro';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexports';

package/legacy/DataGridPremium/DataGridPremium.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
 import { chainPropTypes } from '@mui/utils';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
-import { DataGridProVirtualScroller, DataGridProColumnHeaders } from '@mui/x-data-grid-pro/internals';
+import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider, useGridSelector, gridPinnedColumnsSelector } from '@mui/x-data-grid-pro';
+import { DataGridProVirtualScroller } from '@mui/x-data-grid-pro/internals';
 import { useDataGridPremiumComponent } from './useDataGridPremiumComponent';
 import { useDataGridPremiumProps } from './useDataGridPremiumProps';
 import { getReleaseInfo } from '../utils/releaseInfo';
@@ -14,6 +14,7 @@ var DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(
   var props = useDataGridPremiumProps(inProps);
   var privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
+  var pinnedColumns = useGridSelector(privateApiRef, gridPinnedColumnsSelector);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -23,8 +24,10 @@ var DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        ColumnHeadersComponent: DataGridProColumnHeaders,
         VirtualScrollerComponent: DataGridProVirtualScroller,
+        ColumnHeadersProps: {
+          pinnedColumns: pinnedColumns
+        },
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",
           releaseInfo: releaseInfo
@@ -130,10 +133,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -243,7 +248,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
-    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -552,6 +556,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onDetailPanelExpandedRowIdsChange: PropTypes.func,
+  /**
+   * Callback fired when the state of the Excel export changes.
+   * @param {string} inProgress Indicates if the task is in progress.
+   */
+  onExcelExportStateChange: PropTypes.func,
   /**
    * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
@@ -825,6 +834,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable components.
+   */
+  slots: PropTypes.object,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.

package/legacy/DataGridPremium/useDataGridPremiumComponent.js

@@ -80,7 +80,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
   useGridColumnMenu(privateApiRef);
   useGridCsvExport(privateApiRef);
   useGridPrintExport(privateApiRef, props);
-  useGridExcelExport(privateApiRef);
+  useGridExcelExport(privateApiRef, props);
   useGridClipboard(privateApiRef);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);