@mui/x-data-grid-premium 7.26.0 → 7.27.1

package/esm/hooks/features/export/serializer/setupExcelExportWebWorker.js

@@ -0,0 +1,53 @@
+import { addColumnGroupingHeaders, addSerializedRowToWorksheet, createValueOptionsSheetIfNeeded, getExcelJs } from "./utils.js";
+export function setupExcelExportWebWorker(workerOptions = {}) {
+  // eslint-disable-next-line no-restricted-globals
+  addEventListener('message', async event => {
+    const {
+      namespace,
+      serializedColumns,
+      serializedRows,
+      options,
+      valueOptionsSheetName,
+      valueOptionsData,
+      columnGroupDetails,
+      columnGroupPaths
+    } = event.data;
+
+    // workers share the pub-sub channel namespace. Use this property to filter out messages.
+    if (namespace !== 'mui-x-data-grid-export') {
+      return;
+    }
+    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/esm/hooks/features/export/serializer/utils.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const getExcelJs = async () => {
+  const excelJsModule = await import('exceljs');
+  return excelJsModule.default ?? excelJsModule;
+};
+export const addColumnGroupingHeaders = (worksheet, columns, columnGroupPaths, columnGroupDetails) => {
+  const maxDepth = Math.max(...columns.map(({
+    key
+  }) => columnGroupPaths[key]?.length ?? 0));
+  if (maxDepth === 0) {
+    return;
+  }
+  for (let rowIndex = 0; rowIndex < maxDepth; rowIndex += 1) {
+    const row = columns.map(({
+      key
+    }) => {
+      const groupingPath = columnGroupPaths[key];
+      if (groupingPath.length <= rowIndex) {
+        return {
+          groupId: null,
+          parents: groupingPath
+        };
+      }
+      return _extends({}, columnGroupDetails[groupingPath[rowIndex]], {
+        parents: groupingPath.slice(0, rowIndex)
+      });
+    });
+    const newRow = worksheet.addRow(row.map(group => group.groupId === null ? null : group?.headerName ?? group.groupId));
+
+    // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+    const lastRowIndex = newRow.worksheet.rowCount;
+    let leftIndex = 0;
+    let rightIndex = 1;
+    while (rightIndex < columns.length) {
+      const {
+        groupId: leftGroupId,
+        parents: leftParents
+      } = row[leftIndex];
+      const {
+        groupId: rightGroupId,
+        parents: rightParents
+      } = row[rightIndex];
+      const areInSameGroup = leftGroupId === rightGroupId && leftParents.length === rightParents.length && leftParents.every((leftParent, index) => rightParents[index] === leftParent);
+      if (areInSameGroup) {
+        rightIndex += 1;
+      } else {
+        if (rightIndex - leftIndex > 1) {
+          worksheet.mergeCells(lastRowIndex, leftIndex + 1, lastRowIndex, rightIndex);
+        }
+        leftIndex = rightIndex;
+        rightIndex += 1;
+      }
+    }
+    if (rightIndex - leftIndex > 1) {
+      worksheet.mergeCells(lastRowIndex, leftIndex + 1, lastRowIndex, rightIndex);
+    }
+  }
+};
+export 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);
+  });
+}
+export 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;
+  });
+}

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

@@ -5,7 +5,7 @@ import { useGridApiMethod, useGridLogger, useGridApiOptionHandler } from '@mui/x
 import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
 import { buildExcel, getDataForValueOptionsSheet, serializeColumns, serializeRowUnsafe } from "./serializer/excelSerializer.js";
 import { GridExcelExportMenuItem } from "../../../components/index.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -13,7 +13,6 @@ import { GridExcelExportMenuItem } from "../../../components/index.js";
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridExcelExport = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridExcelExport');
   const getDataAsExcel = React.useCallback((options = {}) => {
@@ -89,15 +88,22 @@ export const useGridExcelExport = (apiRef, props) => {
     const valueOptionsData = await getDataForValueOptionsSheet(exportedColumns, valueOptionsSheetName, apiRef.current);
     const serializedColumns = serializeColumns(exportedColumns, options.columnsStyles || {});
     apiRef.current.resetColSpan();
-    const serializedRows = exportedRowIds.map(id => serializeRowUnsafe(id, exportedColumns, apiRef, valueOptionsData, {
-      escapeFormulas: options.escapeFormulas ?? true
-    }));
+    const serializedRows = [];
+    for (let i = 0; i < exportedRowIds.length; i += 1) {
+      const id = exportedRowIds[i];
+      const serializedRow = serializeRowUnsafe(id, exportedColumns, apiRef, valueOptionsData, {
+        escapeFormulas: options.escapeFormulas ?? true
+      });
+      serializedRows.push(serializedRow);
+    }
     apiRef.current.resetColSpan();
     const columnGroupPaths = exportedColumns.reduce((acc, column) => {
       acc[column.field] = apiRef.current.getColumnGroupPath(column.field);
       return acc;
     }, {});
     const message = {
+      // workers share the pub-sub channel namespace. Use this property to filter out messages.
+      namespace: 'mui-x-data-grid-export',
       serializedColumns,
       serializedRows,
       valueOptionsData,

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
   _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
 import * as React from 'react';
-import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
+import { GRID_STRING_COL_DEF, gridRowIdSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
 import { isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
 import { GridGroupingColumnFooterCell } from "../../../components/GridGroupingColumnFooterCell.js";
 import { GridGroupingCriteriaCell } from "../../../components/GridGroupingCriteriaCell.js";
@@ -138,8 +138,8 @@ export const createGroupingColDefForOneGroupingCriteria = ({
       return '';
     },
     valueGetter: (value, row, column, apiRef) => {
-      const rowId = apiRef.current.getRowId(row);
-      const rowNode = apiRef.current.getRowNode(rowId);
+      const rowId = gridRowIdSelector(apiRef.current.state, row);
+      const rowNode = gridRowTreeSelector(apiRef)[rowId];
       if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
         return undefined;
       }
@@ -230,8 +230,8 @@ export const createGroupingColDefForAllGroupingCriteria = ({
       }));
     },
     valueGetter: (value, row) => {
-      const rowId = apiRef.current.getRowId(row);
-      const rowNode = apiRef.current.getRowNode(rowId);
+      const rowId = gridRowIdSelector(apiRef.current.state, row);
+      const rowNode = gridRowTreeSelector(apiRef)[rowId];
       if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
         return undefined;
       }

package/esm/setupExcelExportWebWorker.js

@@ -0,0 +1 @@
+export { setupExcelExportWebWorker } from "./hooks/features/export/serializer/setupExcelExportWebWorker.js";

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczODg4MjgwMDAwMA==";
+  const releaseInfo = "MTc0MDQzODAwMDAwMA==";
   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/hooks/features/aggregation/createAggregationLookup.js

@@ -32,7 +32,7 @@ const getAggregationCellValue = ({
     //     A.B.A
     //     A.B.B
     const rowNode = apiRef.current.getRowNode(rowId);
-    if (rowNode.type === 'group') {
+    if (rowNode?.type === 'group') {
       return;
     }
     if (typeof aggregationFunction.getCellValue === 'function') {

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridFilterOperator } from '@mui/x-data-grid-pro';
-import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
+import { type GridBaseColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
-import { GridAggregationRule } from './gridAggregationInterfaces';
+import type { GridAggregationRule } from './gridAggregationInterfaces';
 declare const AGGREGATION_WRAPPABLE_PROPERTIES: readonly ["valueGetter", "valueFormatter", "renderCell", "renderHeader", "filterOperators"];
 type WrappableColumnProperty = (typeof AGGREGATION_WRAPPABLE_PROPERTIES)[number];
 interface GridColDefWithAggregationWrappers extends GridBaseColDef {

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -9,6 +9,7 @@ exports.wrapColumnWithAggregationValue = exports.unwrapColumnFromAggregation = v
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _gridAggregationSelectors = require("./gridAggregationSelectors");
 var _GridFooterCell = require("../../../components/GridFooterCell");
 var _GridAggregationHeader = require("../../../components/GridAggregationHeader");
@@ -20,7 +21,7 @@ const getAggregationValueWrappedValueGetter = ({
   getCellAggregationResult
 }) => {
   const wrappedValueGetter = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId?.(row);
+    const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef.current.state, row);
     const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
     if (cellAggregationResult != null) {
       return cellAggregationResult?.value ?? null;
@@ -43,7 +44,7 @@ const getAggregationValueWrappedValueFormatter = ({
     return valueFormatter;
   }
   const wrappedValueFormatter = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
+    const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef.current.state, row);
     if (rowId != null) {
       const cellAggregationResult = getCellAggregationResult(rowId, column.field);
       if (cellAggregationResult != null) {
@@ -102,7 +103,8 @@ const getWrappedFilterOperators = ({
       return null;
     }
     return (value, row, column, api) => {
-      if (getCellAggregationResult(apiRef.current.getRowId(row), column.field) != null) {
+      const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef.current.state, row);
+      if (getCellAggregationResult(rowId, column.field) != null) {
         return true;
       }
       return filterFn(value, row, column, api);
@@ -141,7 +143,7 @@ const wrapColumnWithAggregationValue = ({
 }) => {
   const getCellAggregationResult = (id, field) => {
     let cellAggregationPosition = null;
-    const rowNode = apiRef.current.getRowNode(id);
+    const rowNode = (0, _xDataGridPro.gridRowTreeSelector)(apiRef)[id];
     if (rowNode.type === 'group') {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -263,7 +263,6 @@ const useGridClipboardImport = (apiRef, props) => {
   const onProcessRowUpdateError = props.onProcessRowUpdateError;
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
-  const rootEl = apiRef.current.rootElementRef?.current;
   const logger = (0, _internals.useGridLogger)(apiRef, 'useGridClipboardImport');
   const splitClipboardPastedText = props.splitClipboardPastedText;
   const {
@@ -286,6 +285,7 @@ const useGridClipboardImport = (apiRef, props) => {
         return;
       }
     }
+    const rootEl = apiRef.current.rootElementRef?.current;
     if (!rootEl) {
       return;
     }
@@ -326,7 +326,7 @@ const useGridClipboardImport = (apiRef, props) => {
       paginationMode
     });
     cellUpdater.applyUpdates();
-  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, rootEl, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError, getRowId, enableClipboardPaste, splitClipboardPastedText, pagination, paginationMode, onBeforeClipboardPasteStart, logger]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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

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

package/hooks/features/export/index.js

@@ -9,7 +9,7 @@ var _exportNames = {
 Object.defineProperty(exports, "setupExcelExportWebWorker", {
   enumerable: true,
   get: function () {
-    return _excelSerializer.setupExcelExportWebWorker;
+    return _setupExcelExportWebWorker.setupExcelExportWebWorker;
   }
 });
 var _gridExcelExportInterface = require("./gridExcelExportInterface");
@@ -24,4 +24,4 @@ Object.keys(_gridExcelExportInterface).forEach(function (key) {
     }
   });
 });
-var _excelSerializer = require("./serializer/excelSerializer");
+var _setupExcelExportWebWorker = require("./serializer/setupExcelExportWebWorker");

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

@@ -1,18 +1,11 @@
 import type * as Excel from 'exceljs';
 import { RefObject } from '@mui/x-internals/types';
 import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
-import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
+import { GridStateColDef } from '@mui/x-data-grid/internals';
 import { 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;
-    }[];
-}
+import { SerializedColumns, SerializedRow, ValueOptionsData } from './utils';
+export type { ExcelExportInitEvent } from './utils';
 /**
  * FIXME: This function mutates the colspan info, but colspan info assumes that the columns
  * passed to it are always consistent. In this case, the exported columns may differ from the
@@ -37,17 +30,7 @@ export declare const serializeColumn: (column: GridColDef, columnsStyles: Column
         fill?: Excel.Fill | undefined;
     };
 };
-type SerializedColumns = Array<{
-    key: string;
-    width: number;
-    style: Partial<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 extends Pick<GridExcelExportOptions, 'exceljsPreProcess' | 'exceljsPostProcess'>, Pick<Required<GridExcelExportOptions>, 'valueOptionsSheetName' | 'includeHeaders' | 'includeColumnGroupsHeaders' | 'escapeFormulas'> {
     columns: GridStateColDef[];
@@ -55,14 +38,3 @@ interface BuildExcelOptions extends Pick<GridExcelExportOptions, 'exceljsPreProc
     columnsStyles?: ColumnsStylesInterface;
 }
 export declare function buildExcel(options: BuildExcelOptions, apiRef: RefObject<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 {};