@mui/x-data-grid-premium 5.11.0

package/modern/DataGridPremium/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridPremium';
+export { DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES } from './useDataGridPremiumProps';

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -0,0 +1,76 @@
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelCache, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors } from '@mui/x-data-grid-pro/internals';
+// Premium-only features
+import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
+import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
+import { useGridExcelExport } from '../hooks/features/export/useGridExcelExport';
+export const useDataGridPremiumComponent = (inputApiRef, props) => {
+  const apiRef = useGridInitialization(inputApiRef, props);
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+
+  useGridSelectionPreProcessors(apiRef, props);
+  useGridRowReorderPreProcessors(apiRef, props);
+  useGridRowGroupingPreProcessors(apiRef, props);
+  useGridTreeDataPreProcessors(apiRef, props);
+  useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
+  // Because it changes the order of the columns.
+
+  useGridColumnPinningPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
+  /**
+   * Register all state initializers here.
+   */
+
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
+  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(detailPanelStateInitializer, apiRef, props);
+  useGridInitializeState(columnPinningStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
+  useGridInitializeState(sortingStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(columnReorderStateInitializer, apiRef, props);
+  useGridInitializeState(columnResizeStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridRowGrouping(apiRef, props);
+  useGridTreeData(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
+  useGridSelection(apiRef, props);
+  useGridDetailPanel(apiRef, props);
+  useGridColumnPinning(apiRef, props);
+  useGridColumns(apiRef, props);
+  useGridRows(apiRef, props);
+  useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
+  useGridDetailPanelCache(apiRef, props);
+  const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
+  useGridEditing(apiRef, props);
+  useGridFocus(apiRef, props);
+  useGridPreferencesPanel(apiRef);
+  useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
+  useGridDensity(apiRef, props);
+  useGridColumnReorder(apiRef, props);
+  useGridColumnResize(apiRef, props);
+  useGridPagination(apiRef, props);
+  useGridRowsMeta(apiRef, props);
+  useGridRowReorder(apiRef, props);
+  useGridScroll(apiRef, props);
+  useGridInfiniteLoader(apiRef, props);
+  useGridColumnMenu(apiRef);
+  useGridCsvExport(apiRef);
+  useGridPrintExport(apiRef, props);
+  useGridExcelExport(apiRef);
+  useGridClipboard(apiRef);
+  useGridDimensions(apiRef, props);
+  useGridEvents(apiRef, props);
+  useGridStatePersistence(apiRef);
+  return apiRef;
+};

package/modern/DataGridPremium/useDataGridPremiumProps.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro';
+
+/**
+ * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
+ */
+export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, {
+  disableRowGrouping: false,
+  rowGroupingColumnMode: 'single'
+});
+export const useDataGridPremiumProps = inProps => {
+  const themedProps = useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  });
+  const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
+  const components = React.useMemo(() => {
+    const overrides = themedProps.components;
+
+    if (!overrides) {
+      return _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+    }
+
+    const mergedComponents = {};
+    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
+    });
+    return mergedComponents;
+  }, [themedProps.components]);
+  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+    localeText,
+    components,
+    signature: 'DataGridPremium'
+  }), [themedProps, localeText, components]);
+};

package/modern/components/GridExcelExportMenuItem.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridExcelExportMenuItem = props => {
+  const apiRef = useGridApiContext();
+  const {
+    hideMenu,
+    options
+  } = props;
+  return /*#__PURE__*/_jsx(MenuItem, {
+    onClick: () => {
+      apiRef.current.exportDataAsExcel(options);
+      hideMenu?.();
+    },
+    children: apiRef.current.getLocaleText('toolbarExportExcel')
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: PropTypes.func,
+  options: PropTypes.shape({
+    disableToolbarButton: PropTypes.bool
+  })
+} : void 0;
+export { GridExcelExportMenuItem };

package/modern/components/GridGroupingColumnLeafCell.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridGroupingColumnLeafCell = props => {
+  const {
+    rowNode
+  } = props;
+  const rootProps = useGridRootProps();
+  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 1 : rowNode.depth * 2;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      ml: marginLeft
+    },
+    children: props.formattedValue ?? props.value
+  });
+};
+
+export { GridGroupingColumnLeafCell };

package/modern/components/GridGroupingCriteriaCell.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['groupingCriteriaCell'],
+    toggle: ['groupingCriteriaCellToggle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export const GridGroupingCriteriaCell = props => {
+  const {
+    id,
+    field,
+    rowNode,
+    hideDescendantCount,
+    formattedValue
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
+  const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
+  const Icon = rowNode.childrenExpanded ? rootProps.components.GroupingCriteriaCollapseIcon : rootProps.components.GroupingCriteriaExpandIcon;
+
+  const handleKeyDown = event => {
+    if (event.key === ' ') {
+      event.stopPropagation();
+    }
+
+    apiRef.current.publishEvent('cellKeyDown', props, event);
+  };
+
+  const handleClick = event => {
+    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation();
+  };
+
+  const marginLeft = rootProps.rowGroupingColumnMode === 'multiple' ? 0 : rowNode.depth * 2;
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: marginLeft
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
+    })]
+  });
+};

package/modern/components/GridRowGroupableColumnMenuItems.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridRowGroupableColumnMenuItems = props => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+
+  if (!column?.groupable) {
+    return null;
+  }
+
+  const ungroupColumn = event => {
+    apiRef.current.removeRowGroupingCriteria(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const groupColumn = event => {
+    apiRef.current.addRowGroupingCriteria(column.field);
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const name = columnsLookup[column.field].headerName ?? column.field;
+
+  if (rowGroupingModel.includes(column.field)) {
+    return /*#__PURE__*/_jsx(MenuItem, {
+      onClick: ungroupColumn,
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
+    });
+  }
+
+  return /*#__PURE__*/_jsx(MenuItem, {
+    onClick: groupColumn,
+    children: apiRef.current.getLocaleText('groupColumn')(name)
+  });
+};
+
+process.env.NODE_ENV !== "production" ? GridRowGroupableColumnMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridRowGroupableColumnMenuItems };

package/modern/components/GridRowGroupingColumnMenuItems.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
+import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from '../hooks/features/rowGrouping/gridRowGroupingUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GridRowGroupingColumnMenuItems = props => {
+  const {
+    column,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+
+  const renderUnGroupingMenuItem = field => {
+    const ungroupColumn = event => {
+      apiRef.current.removeRowGroupingCriteria(field);
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const name = columnsLookup[field].headerName ?? field;
+    return /*#__PURE__*/_jsx(MenuItem, {
+      onClick: ungroupColumn,
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
+    }, field);
+  };
+
+  if (!column || !isGroupingColumn(column.field)) {
+    return null;
+  }
+
+  if (column.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: rowGroupingModel.map(renderUnGroupingMenuItem)
+    });
+  }
+
+  return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field));
+};
+
+process.env.NODE_ENV !== "production" ? GridRowGroupingColumnMenuItems.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  column: PropTypes.object,
+  onClick: PropTypes.func
+} : void 0;
+export { GridRowGroupingColumnMenuItems };

package/modern/components/index.js

@@ -0,0 +1 @@
+export * from './GridExcelExportMenuItem';

package/modern/hooks/features/export/gridExcelExportInterface.js

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

package/modern/hooks/features/export/index.js

@@ -0,0 +1 @@
+export * from './gridExcelExportInterface';

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

@@ -0,0 +1,216 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '@mui/x-data-grid-pro';
+import { buildWarning } from '@mui/x-data-grid/internals';
+
+const getExcelJs = () => import('exceljs');
+
+const warnInvalidFormattedValue = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the Excel export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+
+const getFormattedValueOptions = (colDef, valueOptions, api) => {
+  if (!colDef.valueOptions) {
+    return [];
+  }
+
+  let valueOptionsFormatted = valueOptions;
+
+  if (colDef.valueFormatter) {
+    valueOptionsFormatted = valueOptionsFormatted.map(option => {
+      if (typeof option === 'object') {
+        return option;
+      }
+
+      const params = {
+        field: colDef.field,
+        api,
+        value: option
+      };
+      return String(colDef.valueFormatter(params));
+    });
+  }
+
+  return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
+};
+
+const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
+  const row = {};
+  const dataValidation = {};
+  const firstCellParams = api.getCellParams(id, columns[0].field);
+  const outlineLevel = firstCellParams.rowNode.depth;
+  columns.forEach(column => {
+    const cellParams = api.getCellParams(id, column.field);
+
+    switch (cellParams.colDef.type) {
+      case 'singleSelect':
+        {
+          if (typeof cellParams.colDef.valueOptions === 'function') {
+            // If value option depends on the row, set specific options to the cell
+            // This dataValidation is buggy with LibreOffice and does not allow to have coma
+            const valueOptions = cellParams.colDef.valueOptions({
+              id,
+              row,
+              field: cellParams.field
+            });
+            const formattedValueOptions = getFormattedValueOptions(cellParams.colDef, valueOptions, api);
+            dataValidation[column.field] = {
+              type: 'list',
+              allowBlank: true,
+              formulae: [`"${formattedValueOptions.map(x => x.toString().replaceAll(',', 'CHAR(44)')).join(',')}"`]
+            };
+          } else {
+            // If value option is defined for the column, refer to another sheet
+            dataValidation[column.field] = {
+              type: 'list',
+              allowBlank: true,
+              formulae: [defaultValueOptionsFormulae[column.field]]
+            };
+          }
+
+          const formattedValue = api.getCellParams(id, column.field).formattedValue;
+
+          if (process.env.NODE_ENV !== 'production') {
+            if (String(cellParams.formattedValue) === '[object Object]') {
+              warnInvalidFormattedValue();
+            }
+          }
+
+          row[column.field] = formattedValue?.label ?? formattedValue;
+          break;
+        }
+
+      case 'boolean':
+      case 'number':
+        row[column.field] = api.getCellParams(id, column.field).value;
+        break;
+
+      case 'date':
+      case 'dateTime':
+        {
+          // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
+          // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
+          // About Date.UTC(): https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
+          const date = api.getCellParams(id, column.field).value; // value may be `undefined` in auto-generated grouping rows
+
+          if (!date) {
+            break;
+          }
+
+          const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+          row[column.field] = utcDate;
+          break;
+        }
+
+      case 'actions':
+        break;
+
+      default:
+        row[column.field] = api.getCellParams(id, column.field).formattedValue;
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (String(cellParams.formattedValue) === '[object Object]') {
+            warnInvalidFormattedValue();
+          }
+        }
+
+        break;
+    }
+  });
+  return {
+    row,
+    dataValidation,
+    outlineLevel
+  };
+};
+
+const defaultColumnsStyles = {
+  [GRID_DATE_COL_DEF.type]: {
+    numFmt: 'dd.mm.yyyy'
+  },
+  [GRID_DATETIME_COL_DEF.type]: {
+    numFmt: 'dd.mm.yyyy hh:mm'
+  }
+};
+
+const serializeColumn = (column, columnsStyles) => {
+  const {
+    field,
+    type
+  } = column;
+  return {
+    key: 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
+    width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
+    style: _extends({}, type && defaultColumnsStyles?.[type], columnsStyles?.[field])
+  };
+};
+
+export async function buildExcel(options, api) {
+  const {
+    columns,
+    rowIds,
+    includeHeaders,
+    valueOptionsSheetName,
+    exceljsPreProcess,
+    exceljsPostProcess,
+    columnsStyles = {}
+  } = options;
+  const excelJS = await getExcelJs();
+  const workbook = new excelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Sheet1');
+  worksheet.columns = columns.map(column => serializeColumn(column, columnsStyles));
+
+  if (exceljsPreProcess) {
+    await exceljsPreProcess({
+      workbook,
+      worksheet
+    });
+  }
+
+  if (includeHeaders) {
+    worksheet.addRow(columns.map(column => column.headerName || column.field));
+  }
+
+  const columnsWithArrayValueOptions = columns.filter(column => column.type === 'singleSelect' && 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}`;
+    });
+  }
+
+  rowIds.forEach(id => {
+    const {
+      row,
+      dataValidation,
+      outlineLevel
+    } = 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;
+    }
+  });
+
+  if (exceljsPostProcess) {
+    await exceljsPostProcess({
+      workbook,
+      worksheet
+    });
+  }
+
+  return workbook;
+}

package/modern/hooks/features/export/useGridExcelExport.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useGridApiMethod, useGridLogger } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
+import { buildExcel } from './serializer/excelSerializer';
+import { GridExcelExportMenuItem } from '../../../components';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridExcelExport = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridExcelExport');
+  const getDataAsExcel = React.useCallback((options = {}) => {
+    logger.debug(`Get data as excel`);
+    const getRowsToExport = options.getRowsToExport ?? defaultGetRowsToExport;
+    const exportedRowIds = getRowsToExport({
+      apiRef
+    });
+    const exportedColumns = getColumnsToExport({
+      apiRef,
+      options
+    });
+    return buildExcel({
+      columns: exportedColumns,
+      rowIds: exportedRowIds,
+      includeHeaders: options.includeHeaders ?? true,
+      valueOptionsSheetName: options?.valueOptionsSheetName || 'Options',
+      columnsStyles: options?.columnsStyles,
+      exceljsPreProcess: options?.exceljsPreProcess,
+      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) {
+      return;
+    }
+
+    const content = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([content], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    });
+    exportAs(blob, 'xlsx', options?.fileName);
+  }, [logger, getDataAsExcel]);
+  const excelExportApi = {
+    getDataAsExcel,
+    exportDataAsExcel
+  };
+  useGridApiMethod(apiRef, excelExportApi, 'GridExcelExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    if (options.excelOptions?.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/_jsx(GridExcelExportMenuItem, {
+        options: options.excelOptions
+      }),
+      componentName: 'excelExport'
+    }];
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
+};

package/modern/hooks/features/index.js

@@ -0,0 +1,3 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './rowGrouping';
+export * from './export';