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

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

@@ -26,7 +26,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 = [];
@@ -71,11 +71,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;
@@ -137,13 +139,14 @@ const defaultColumnsStyles = {
     numFmt: 'dd.mm.yyyy hh:mm'
   }
 };
-const serializeColumn = (column, columnsStyles) => {
+export const serializeColumn = (column, columnsStyles) => {
   const {
     field,
     type
   } = column;
   return {
     key: field,
+    headerText: 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
@@ -151,19 +154,18 @@ const serializeColumn = (column, columnsStyles) => {
     style: _extends({}, type && defaultColumnsStyles?.[type], columnsStyles?.[field])
   };
 };
-const addColumnGroupingHeaders = (worksheet, columns, api) => {
+const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGroupDetails) => {
   const maxDepth = Math.max(...columns.map(({
-    field
-  }) => api.unstable_getColumnGroupPath(field)?.length ?? 0));
+    key
+  }) => columnGroupPaths[key]?.length ?? 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,
@@ -205,13 +207,75 @@ 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) => {
+    const singleSelectColumn = column;
+    const formattedValueOptions = getFormattedValueOptions(singleSelectColumn, singleSelectColumn.valueOptions, api);
+    const header = column.headerName ?? 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 = {}
@@ -219,7 +283,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,
@@ -227,47 +292,20 @@ 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 => column.headerName ?? 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 => {
-      const formattedValueOptions = getFormattedValueOptions(column, column.valueOptions, api);
-      valueOptionsWorksheet.getColumn(column.field).values = [column.headerName ?? 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({
@@ -276,4 +314,50 @@ export async function buildExcel(options, api) {
     });
   }
   return workbook;
+}
+export function setupExcelExportWebWorker(workerOptions = {}) {
+  // eslint-disable-next-line no-restricted-globals
+  addEventListener('message', async event => {
+    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.includeHeaders ?? 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/modern/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 = {}) => {
     logger.debug(`Get data as excel`);
@@ -35,18 +37,70 @@ export const useGridExcelExport = apiRef => {
       exceljsPostProcess: 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?.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?.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
@@ -68,4 +122,5 @@ export const useGridExcelExport = apiRef => {
     }];
   }, []);
   useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
+  useGridApiOptionHandler(apiRef, 'excelExportStateChange', props.onExcelExportStateChange);
 };

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

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from './icons';
+const iconsSlots = {
+  ColumnMenuUngroupIcon: GridWorkspacesIcon,
+  ColumnMenuGroupIcon: GridGroupWorkIcon,
+  ColumnMenuAggregationIcon: GridFunctionsIcon
+};
+const materialSlots = _extends({}, iconsSlots);
+export default materialSlots;

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3Nzc5ODAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DataGridPremium/DataGridPremium.js

@@ -22,6 +22,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
   const props = (0, _useDataGridPremiumProps.useDataGridPremiumProps)(inProps);
   const privateApiRef = (0, _useDataGridPremiumComponent.useDataGridPremiumComponent)(props.apiRef, props);
   (0, _xLicensePro.useLicenseVerifier)('x-data-grid-premium', releaseInfo);
+  const pinnedColumns = (0, _xDataGridPro.useGridSelector)(privateApiRef, _xDataGridPro.gridPinnedColumnsSelector);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -31,8 +32,10 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridBody, {
-        ColumnHeadersComponent: _internals.DataGridProColumnHeaders,
         VirtualScrollerComponent: _internals.DataGridProVirtualScroller,
+        ColumnHeadersProps: {
+          pinnedColumns
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicensePro.Watermark, {
           packageName: "x-data-grid-premium",
           releaseInfo: releaseInfo
@@ -139,10 +142,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   columnVisibilityModel: _propTypes.default.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: _propTypes.default.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: _propTypes.default.object,
   /**
@@ -252,7 +257,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: _propTypes.default.shape({
     columnGrouping: _propTypes.default.bool,
     lazyLoading: _propTypes.default.bool,
-    rowPinning: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -561,6 +565,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onDetailPanelExpandedRowIdsChange: _propTypes.default.func,
+  /**
+   * Callback fired when the state of the Excel export changes.
+   * @param {string} inProgress Indicates if the task is in progress.
+   */
+  onExcelExportStateChange: _propTypes.default.func,
   /**
    * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
@@ -834,6 +843,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: _propTypes.default.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overrideable components.
+   */
+  slots: _propTypes.default.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/node/DataGridPremium/useDataGridPremiumComponent.js

@@ -87,7 +87,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridColumnMenu)(privateApiRef);
   (0, _internals.useGridCsvExport)(privateApiRef);
   (0, _internals.useGridPrintExport)(privateApiRef, props);
-  (0, _useGridExcelExport.useGridExcelExport)(privateApiRef);
+  (0, _useGridExcelExport.useGridExcelExport)(privateApiRef, props);
   (0, _internals.useGridClipboard)(privateApiRef);
   (0, _internals.useGridDimensions)(privateApiRef, props);
   (0, _internals.useGridEvents)(privateApiRef, props);

package/node/DataGridPremium/useDataGridPremiumProps.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridPremiumProps = exports.DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
 var _aggregation = require("../hooks/features/aggregation");
 var _dataGridPremiumDefaultSlotsComponents = require("../constants/dataGridPremiumDefaultSlotsComponents");
+const _excluded = ["components", "componentsProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -26,27 +29,28 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xData
   getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline'
 });
 exports.DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES;
+const defaultSlots = (0, _internals.uncapitalizeObjectKeys)(_dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
 const useDataGridPremiumProps = inProps => {
-  const themedProps = (0, _styles.useThemeProps)({
-    props: inProps,
-    name: 'MuiDataGrid'
-  });
+  const _useThemeProps = (0, _styles.useThemeProps)({
+      props: inProps,
+      name: 'MuiDataGrid'
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themedProps = (0, _objectWithoutPropertiesLoose2.default)(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGridPro.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
-  const components = React.useMemo(() => {
-    const overrides = themedProps.components;
-    if (!overrides) {
-      return (0, _extends2.default)({}, _dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(_dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
-      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
-    });
-    return mergedComponents;
-  }, [themedProps.components]);
+  const slots = React.useMemo(() => (0, _internals.computeSlots)({
+    defaultSlots,
+    components,
+    slots: themedProps.slots
+  }), [components, themedProps.slots]);
   return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+    slotProps: themedProps.slotProps ?? componentsProps,
     localeText,
-    components,
+    slots,
     signature: 'DataGridPremium'
-  }), [themedProps, localeText, components]);
+  }), [themedProps, componentsProps, localeText, slots]);
 };
 exports.useDataGridPremiumProps = useDataGridPremiumProps;

package/node/components/GridAggregationHeader.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridAggregationHeader = GridAggregationHeader;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -64,10 +65,10 @@ function GridAggregationHeader(props) {
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     classes: rootProps.classes,
     colDef
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   if (!aggregation) {
     return null;

package/node/components/GridColumnMenuAggregationItem.js

@@ -66,7 +66,7 @@ function GridColumnMenuAggregationItem(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     disableRipple: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuAggregationIcon, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {

package/node/components/GridColumnMenuRowGroupItem.js

@@ -36,7 +36,7 @@ function GridColumnMenuRowGroupItem(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: ungroupColumn,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuUngroupIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {

package/node/components/GridColumnMenuRowUngroupItem.js

@@ -42,7 +42,7 @@ function GridColumnMenuRowUngroupItem(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: ungroupColumn,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuUngroupIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
@@ -53,7 +53,7 @@ function GridColumnMenuRowUngroupItem(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
     onClick: groupColumn,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnMenuGroupIcon, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuGroupIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {

package/node/components/GridExcelExportMenuItem.js

@@ -48,6 +48,7 @@ process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {
     getRowsToExport: _propTypes.default.func,
     includeColumnGroupsHeaders: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
-    valueOptionsSheetName: _propTypes.default.string
+    valueOptionsSheetName: _propTypes.default.string,
+    worker: _propTypes.default.func
   })
 } : void 0;

package/node/components/GridFooterCell.js

@@ -42,9 +42,7 @@ function GridFooterCell(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterCellRoot, (0, _extends2.default)({
     ownerState: ownerState,

package/node/components/GridGroupingCriteriaCell.js

@@ -41,7 +41,7 @@ function GridGroupingCriteriaCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
-  const Icon = rowNode.childrenExpanded ? rootProps.components.GroupingCriteriaCollapseIcon : rootProps.components.GroupingCriteriaExpandIcon;
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
   const handleKeyDown = event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid unfolding the row and also scrolling to bottom
@@ -76,13 +76,13 @@ function GridGroupingCriteriaCell(props) {
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseIconButton, (0, _extends2.default)({
+      children: filteredDescendantCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         size: "small",
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
-      }, rootProps.componentsProps?.baseIconButton, {
+      }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           fontSize: "inherit"
         })

package/node/components/index.js

@@ -24,7 +24,7 @@ Object.keys(_GridExcelExportMenuItem).forEach(function (key) {
     }
   });
 });
-var _icons = require("./icons");
+var _icons = require("../material/icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;