@mui/x-data-grid-premium 7.25.0 → 7.27.0

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

@@ -0,0 +1,36 @@
+import type * as Excel from 'exceljs';
+import type { GridColumnGroupLookup } from '@mui/x-data-grid/internals';
+import type { GridExcelExportOptions } from '../gridExcelExportInterface';
+export declare const getExcelJs: () => Promise<typeof Excel>;
+export 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 addColumnGroupingHeaders: (worksheet: Excel.Worksheet, columns: SerializedColumns, columnGroupPaths: Record<string, string[]>, columnGroupDetails: GridColumnGroupLookup) => void;
+export type SerializedColumns = Array<{
+    key: string;
+    width: number;
+    style: Partial<Excel.Style>;
+    headerText: string;
+}>;
+export type ValueOptionsData = Record<string, {
+    values: (string | number)[];
+    address: string;
+}>;
+export declare function addSerializedRowToWorksheet(serializedRow: SerializedRow, worksheet: Excel.Worksheet): void;
+export declare function createValueOptionsSheetIfNeeded(valueOptionsData: ValueOptionsData, sheetName: string, workbook: Excel.Workbook): Promise<void>;
+export interface ExcelExportInitEvent {
+    namespace?: string;
+    serializedColumns: SerializedColumns;
+    serializedRows: SerializedRow[];
+    valueOptionsSheetName: string;
+    columnGroupPaths: Record<string, string[]>;
+    columnGroupDetails: GridColumnGroupLookup;
+    valueOptionsData: ValueOptionsData;
+    options: Omit<GridExcelExportOptions, 'exceljsPreProcess' | 'exceljsPostProcess' | 'columnsStyles' | 'valueOptionsSheetName'>;
+}

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addColumnGroupingHeaders = void 0;
+exports.addSerializedRowToWorksheet = addSerializedRowToWorksheet;
+exports.createValueOptionsSheetIfNeeded = createValueOptionsSheetIfNeeded;
+exports.getExcelJs = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+const getExcelJs = async () => {
+  const excelJsModule = await Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require('exceljs')));
+  return excelJsModule.default ?? excelJsModule;
+};
+exports.getExcelJs = getExcelJs;
+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 (0, _extends2.default)({}, 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);
+    }
+  }
+};
+exports.addColumnGroupingHeaders = addColumnGroupingHeaders;
+function addSerializedRowToWorksheet(serializedRow, worksheet) {
+  const {
+    row,
+    dataValidation,
+    outlineLevel,
+    mergedCells
+  } = serializedRow;
+  const newRow = worksheet.addRow(row);
+  Object.keys(dataValidation).forEach(field => {
+    newRow.getCell(field).dataValidation = (0, _extends2.default)({}, 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;
+  });
+}

package/hooks/features/export/useGridExcelExport.js

@@ -96,15 +96,22 @@ const useGridExcelExport = (apiRef, props) => {
     const valueOptionsData = await (0, _excelSerializer.getDataForValueOptionsSheet)(exportedColumns, valueOptionsSheetName, apiRef.current);
     const serializedColumns = (0, _excelSerializer.serializeColumns)(exportedColumns, options.columnsStyles || {});
     apiRef.current.resetColSpan();
-    const serializedRows = exportedRowIds.map(id => (0, _excelSerializer.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 = (0, _excelSerializer.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/hooks/utils/useGridApiContext.d.ts

@@ -1,2 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridApiCommon } from '@mui/x-data-grid';
 import { GridApiPremium } from '../../models/gridApiPremium';
-export declare const useGridApiContext: () => import("react").RefObject<GridApiPremium>;
+export declare const useGridApiContext: <Api extends GridApiCommon = GridApiPremium>() => RefObject<Api>;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.25.0
+ * @mui/x-data-grid-premium v7.27.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/DataGridPremium/DataGridPremium.js

@@ -20,6 +20,10 @@ const configuration = {
   }
 };
 const releaseInfo = getReleaseInfo();
+const watermark = /*#__PURE__*/_jsx(Watermark, {
+  packageName: "x-data-grid-premium",
+  releaseInfo: releaseInfo
+});
 let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
@@ -41,10 +45,7 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/_jsx(Watermark, {
-        packageName: "x-data-grid-premium",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });
@@ -893,6 +894,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -32,7 +32,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(aggregationStateInitializer, apiRef, props);
@@ -42,8 +41,8 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
@@ -53,11 +52,12 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);

package/modern/hooks/features/aggregation/gridAggregationUtils.js

@@ -107,7 +107,7 @@ export const addFooterRows = ({
     }
   };
   const updateRootGroupFooter = groupNode => {
-    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer' && groupNode.children.length > 0;
     if (shouldHaveFooter) {
       const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({

package/modern/hooks/features/aggregation/useGridAggregation.js

@@ -31,7 +31,6 @@ export const useGridAggregation = (apiRef, props) => {
     const currentModel = gridAggregationModelSelector(apiRef);
     if (currentModel !== model) {
       apiRef.current.setState(mergeStateWithAggregationModel(model));
-      apiRef.current.forceUpdate();
     }
   }, [apiRef]);
   const applyAggregation = React.useCallback(() => {
@@ -74,7 +73,6 @@ export const useGridAggregation = (apiRef, props) => {
 
     // Re-apply the column hydration to wrap / unwrap the aggregated columns
     if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
-      apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
   }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);

package/modern/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
-import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
+import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -15,13 +15,10 @@ const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the s
 
 export const useGridCellSelection = (apiRef, props) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
-  const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef(null);
   const lastMouseDownCell = React.useRef(null);
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef(null);
-  const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
@@ -75,6 +72,7 @@ export const useGridCellSelection = (apiRef, props) => {
       finalEndColumnIndex = startColumnIndex;
     }
     const visibleColumns = apiRef.current.getVisibleColumns();
+    const visibleRows = getVisibleRows(apiRef);
     const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
     const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
     const newModel = keepOtherSelected ? _extends({}, apiRef.current.getCellSelectionModel()) : {};
@@ -87,7 +85,7 @@ export const useGridCellSelection = (apiRef, props) => {
       }, {});
     });
     apiRef.current.setCellSelectionModel(newModel);
-  }, [apiRef, visibleRows.rows]);
+  }, [apiRef]);
   const getSelectedCellsAsArray = React.useCallback(() => {
     const selectionModel = apiRef.current.getCellSelectionModel();
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
@@ -186,6 +184,7 @@ export const useGridCellSelection = (apiRef, props) => {
       if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
         return;
       }
+      const dimensions = gridDimensionsSelector(apiRef.current.state);
       const {
         x: mouseX,
         y: mouseY
@@ -228,7 +227,7 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef, dimensions, totalHeaderHeight]);
+  }, [apiRef, totalHeaderHeight]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -245,6 +244,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (!virtualScrollerRect) {
       return;
     }
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     const {
       x,
       y
@@ -270,7 +270,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -330,6 +330,7 @@ export const useGridCellSelection = (apiRef, props) => {
     } else if (event.key === 'ArrowLeft') {
       endColumnIndex -= 1;
     }
+    const visibleRows = getVisibleRows(apiRef);
     if (endRowIndex < 0 || endRowIndex >= visibleRows.rows.length) {
       return;
     }
@@ -382,6 +383,7 @@ export const useGridCellSelection = (apiRef, props) => {
     id,
     field
   }) => {
+    const visibleRows = getVisibleRows(apiRef);
     if (!visibleRows.range || !apiRef.current.isCellSelected(id, field)) {
       return classes;
     }
@@ -430,7 +432,7 @@ export const useGridCellSelection = (apiRef, props) => {
       newClasses.push(gridClasses['cell--rangeRight']);
     }
     return newClasses;
-  }, [apiRef, visibleRows.range, visibleRows.rows]);
+  }, [apiRef]);
   const canUpdateFocus = React.useCallback((initialValue, {
     event,
     cell
@@ -451,6 +453,7 @@ export const useGridCellSelection = (apiRef, props) => {
     if (apiRef.current.getSelectedCellsAsArray().length <= 1) {
       return value;
     }
+    const sortedRowIds = gridSortedRowIdsSelector(apiRef);
     const cellSelectionModel = apiRef.current.getCellSelectionModel();
     const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
     const sortedSelectedRowIds = sortedRowIds.filter(id => unsortedSelectedRowIds.includes(`${id}`));
@@ -476,7 +479,7 @@ export const useGridCellSelection = (apiRef, props) => {
       return acc === '' ? rowString : [acc, rowString].join('\r\n');
     }, '');
     return copyData;
-  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds]);
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);
   useGridRegisterPipeProcessor(apiRef, 'cellClassName', addClassesToCells);
   useGridRegisterPipeProcessor(apiRef, 'canUpdateFocus', canUpdateFocus);

package/modern/hooks/features/clipboard/useGridClipboardImport.js

@@ -255,7 +255,6 @@ export const useGridClipboardImport = (apiRef, props) => {
   const onProcessRowUpdateError = props.onProcessRowUpdateError;
   const getRowId = props.getRowId;
   const enableClipboardPaste = !props.disableClipboardPaste;
-  const rootEl = apiRef.current.rootElementRef?.current;
   const logger = useGridLogger(apiRef, 'useGridClipboardImport');
   const splitClipboardPastedText = props.splitClipboardPastedText;
   const {
@@ -278,6 +277,7 @@ export const useGridClipboardImport = (apiRef, props) => {
         return;
       }
     }
+    const rootEl = apiRef.current.rootElementRef?.current;
     if (!rootEl) {
       return;
     }
@@ -318,7 +318,7 @@ export 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/modern/hooks/features/export/index.js

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