@mui/x-data-grid 9.13.0 → 9.15.0

package/hooks/features/dataSource/useGridDataSourcePolling.d.mts

@@ -0,0 +1,29 @@
+interface UseGridDataSourcePollingOptions {
+  /**
+   * The polling interval in milliseconds. The polling is off when it is `0` or less.
+   */
+  revalidateMs: number;
+  /**
+   * The polling is off when it is `false`.
+   */
+  isActive: boolean;
+  /**
+   * Runs when `<Activity>` shows the grid again, if the polling started before.
+   * @returns {boolean} `true` to resume the polling.
+   * @default () => true
+   */
+  shouldResume?: () => boolean;
+}
+/**
+ * Calls a revalidation callback at the `revalidateMs` interval.
+ * The polling pauses while `<Activity>` hides the grid and stops after the grid unmounts.
+ */
+export declare const useGridDataSourcePolling: ({
+  revalidateMs,
+  isActive,
+  shouldResume
+}: UseGridDataSourcePollingOptions) => {
+  startPolling: (callback: () => void) => void;
+  stopPolling: () => void;
+};
+export {};

package/hooks/features/dataSource/useGridDataSourcePolling.d.ts

@@ -0,0 +1,29 @@
+interface UseGridDataSourcePollingOptions {
+  /**
+   * The polling interval in milliseconds. The polling is off when it is `0` or less.
+   */
+  revalidateMs: number;
+  /**
+   * The polling is off when it is `false`.
+   */
+  isActive: boolean;
+  /**
+   * Runs when `<Activity>` shows the grid again, if the polling started before.
+   * @returns {boolean} `true` to resume the polling.
+   * @default () => true
+   */
+  shouldResume?: () => boolean;
+}
+/**
+ * Calls a revalidation callback at the `revalidateMs` interval.
+ * The polling pauses while `<Activity>` hides the grid and stops after the grid unmounts.
+ */
+export declare const useGridDataSourcePolling: ({
+  revalidateMs,
+  isActive,
+  shouldResume
+}: UseGridDataSourcePollingOptions) => {
+  startPolling: (callback: () => void) => void;
+  stopPolling: () => void;
+};
+export {};

package/hooks/features/dataSource/useGridDataSourcePolling.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourcePolling = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+/**
+ * Calls a revalidation callback at the `revalidateMs` interval.
+ * The polling pauses while `<Activity>` hides the grid and stops after the grid unmounts.
+ */
+const useGridDataSourcePolling = ({
+  revalidateMs,
+  isActive,
+  shouldResume = () => true
+}) => {
+  const pollingIntervalRef = React.useRef(null);
+  const pollingCallbackRef = React.useRef(null);
+  // `false` while Activity is hidden or after unmount, so a late response cannot restart polling.
+  const isPollingAllowed = React.useRef(true);
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = (0, _useEventCallback.default)(callback => {
+    stopPolling();
+    // Keep the callback while Activity is hidden to resume the polling on show.
+    pollingCallbackRef.current = callback;
+    if (!isPollingAllowed.current || !isActive || revalidateMs <= 0) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(callback, revalidateMs);
+  });
+  React.useEffect(() => {
+    if (!isActive || revalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [isActive, revalidateMs, stopPolling]);
+  const canResume = (0, _useEventCallback.default)(shouldResume);
+  React.useEffect(() => {
+    isPollingAllowed.current = true;
+    // Activity runs the effects again when it shows the grid, so resume the paused polling.
+    if (pollingCallbackRef.current && canResume()) {
+      startPolling(pollingCallbackRef.current);
+    }
+    return () => {
+      isPollingAllowed.current = false;
+      stopPolling();
+    };
+  }, [startPolling, stopPolling, canResume]);
+  return {
+    startPolling,
+    stopPolling
+  };
+};
+exports.useGridDataSourcePolling = useGridDataSourcePolling;

package/hooks/features/dataSource/useGridDataSourcePolling.mjs

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+/**
+ * Calls a revalidation callback at the `revalidateMs` interval.
+ * The polling pauses while `<Activity>` hides the grid and stops after the grid unmounts.
+ */
+export const useGridDataSourcePolling = ({
+  revalidateMs,
+  isActive,
+  shouldResume = () => true
+}) => {
+  const pollingIntervalRef = React.useRef(null);
+  const pollingCallbackRef = React.useRef(null);
+  // `false` while Activity is hidden or after unmount, so a late response cannot restart polling.
+  const isPollingAllowed = React.useRef(true);
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = useEventCallback(callback => {
+    stopPolling();
+    // Keep the callback while Activity is hidden to resume the polling on show.
+    pollingCallbackRef.current = callback;
+    if (!isPollingAllowed.current || !isActive || revalidateMs <= 0) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(callback, revalidateMs);
+  });
+  React.useEffect(() => {
+    if (!isActive || revalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [isActive, revalidateMs, stopPolling]);
+  const canResume = useEventCallback(shouldResume);
+  React.useEffect(() => {
+    isPollingAllowed.current = true;
+    // Activity runs the effects again when it shows the grid, so resume the paused polling.
+    if (pollingCallbackRef.current && canResume()) {
+      startPolling(pollingCallbackRef.current);
+    }
+    return () => {
+      isPollingAllowed.current = false;
+      stopPolling();
+    };
+  }, [startPolling, stopPolling, canResume]);
+  return {
+    startPolling,
+    stopPolling
+  };
+};

package/hooks/features/dataSource/utils.d.mts

@@ -3,7 +3,7 @@ export declare enum DataSourceRowsUpdateStrategy {
   Default = "set-flat-rows",
   LazyLoading = "replace-row-range",
   GroupedData = "set-grouped-rows",
-  LazyLoadedGroupedData = "replace-grouped-row-range",
+  LazyLoadedGroupedData = "replace-grouped-row-range"
 }
 /**
  * Provides better cache hit rate by:

package/hooks/features/dataSource/utils.d.ts

@@ -3,7 +3,7 @@ export declare enum DataSourceRowsUpdateStrategy {
   Default = "set-flat-rows",
   LazyLoading = "replace-row-range",
   GroupedData = "set-grouped-rows",
-  LazyLoadedGroupedData = "replace-grouped-row-range",
+  LazyLoadedGroupedData = "replace-grouped-row-range"
 }
 /**
  * Provides better cache hit rate by:

package/hooks/features/dataSource/utils.mjs

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 export let DataSourceRowsUpdateStrategy = /*#__PURE__*/function (DataSourceRowsUpdateStrategy) {
   DataSourceRowsUpdateStrategy["Default"] = "set-flat-rows";
   DataSourceRowsUpdateStrategy["LazyLoading"] = "replace-row-range";

package/hooks/features/density/useGridDensity.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useGridLogger } from "../../utils/useGridLogger.mjs";

package/hooks/features/dimensions/useGridDimensions.d.mts

@@ -3,7 +3,7 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
 import type { GridDimensions } from "./gridDimensionsApi.mjs";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'height' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -3,7 +3,7 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridDimensions } from "./gridDimensionsApi.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'height' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -11,7 +11,7 @@ exports.useGridDimensions = useGridDimensions;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _platform = require("@base-ui/utils/platform");
-var _store = require("@mui/x-internals/store");
+var _useStoreEffect = require("@mui/x-internals/useStoreEffect");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
@@ -96,7 +96,7 @@ function useGridDimensions(apiRef, props) {
       if (!getRootDimensions().isReady) {
         return;
       }
-      if (size.height === 0 && !errorShown.current && !props.autoHeight && !_platform.platform.env.jsdom) {
+      if (size.height === 0 && props.height == null && !errorShown.current && !props.autoHeight && !_platform.platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }
@@ -107,7 +107,7 @@ function useGridDimensions(apiRef, props) {
     });
     /* eslint-enable react-hooks/rules-of-hooks */
   }
-  (0, _store.useStoreEffect)(apiRef.current.store, s => s.dimensions, (previous, next) => {
+  (0, _useStoreEffect.useStoreEffect)(apiRef.current.store, s => s.dimensions, (previous, next) => {
     if (!next.isReady) {
       return;
     }

package/hooks/features/dimensions/useGridDimensions.mjs

@@ -1,9 +1,9 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { platform } from '@base-ui/utils/platform';
-import { useStoreEffect } from '@mui/x-internals/store';
+import { useStoreEffect } from '@mui/x-internals/useStoreEffect';
 import { useGridEventPriority } from "../../utils/useGridEvent.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { createSelector } from "../../../utils/createSelector.mjs";
@@ -87,7 +87,7 @@ export function useGridDimensions(apiRef, props) {
       if (!getRootDimensions().isReady) {
         return;
       }
-      if (size.height === 0 && !errorShown.current && !props.autoHeight && !platform.env.jsdom) {
+      if (size.height === 0 && props.height == null && !errorShown.current && !props.autoHeight && !platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }

package/hooks/features/editing/useGridCellEditing.js

@@ -382,7 +382,7 @@ const useGridCellEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+          (0, _warning.errorOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'].join('\n'));
         }
       };
       try {

package/hooks/features/editing/useGridCellEditing.mjs

@@ -1,13 +1,13 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/toPropertyKey";
+import _extends from "@babel/runtime/helpers/extends";
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
-import { warnOnce } from '@mui/x-internals/warning';
+import { errorOnce } from '@mui/x-internals/warning';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
@@ -375,7 +375,7 @@ export const useGridCellEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+          errorOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'].join('\n'));
         }
       };
       try {

package/hooks/features/editing/useGridEditing.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { useGridCellEditing } from "./useGridCellEditing.mjs";

package/hooks/features/editing/useGridRowEditing.js

@@ -472,7 +472,7 @@ const useGridRowEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+          (0, _warning.errorOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'].join('\n'));
         }
       };
       try {

package/hooks/features/editing/useGridRowEditing.mjs

@@ -1,15 +1,15 @@
 'use client';
 
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _toPropertyKey from "@babel/runtime/helpers/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { warnOnce } from '@mui/x-internals/warning';
+import { errorOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.mjs";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.mjs";
@@ -465,7 +465,7 @@ export const useGridRowEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+          errorOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'].join('\n'));
         }
       };
       try {

package/hooks/features/export/serializers/csvSerializer.js

@@ -86,7 +86,7 @@ const serializeRow = ({
     const cellParams = getCellParams(id, column.field);
     if (String(cellParams.formattedValue) === '[object Object]') {
       if (process.env.NODE_ENV !== 'production') {
-        (0, _warning.warnOnce)(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+        (0, _warning.warnOnce)(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.'].join('\n'));
       }
     }
     row.addValue(serializeCellValue(cellParams, {
@@ -104,13 +104,13 @@ function buildCSV(options) {
     ignoreValueFormatter,
     apiRef
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+  const CSVBody = rowIds.map(id => serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
     ignoreValueFormatter,
     csvOptions
-  })}\r\n`, '').trim();
+  })).join('\r\n');
   if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
@@ -146,6 +146,6 @@ function buildCSV(options) {
     mainHeaderRow.addValue(column.headerName || column.field);
   });
   headerRows.push(mainHeaderRow);
-  const CSVHead = `${headerRows.map(row => row.getRowString()).join('\r\n')}\r\n`;
-  return `${CSVHead}${CSVBody}`.trim();
+  const CSVHead = headerRows.map(row => row.getRowString()).join('\r\n');
+  return rowIds.length > 0 ? `${CSVHead}\r\n${CSVBody}` : CSVHead;
 }

package/hooks/features/export/serializers/csvSerializer.mjs

@@ -78,7 +78,7 @@ const serializeRow = ({
     const cellParams = getCellParams(id, column.field);
     if (String(cellParams.formattedValue) === '[object Object]') {
       if (process.env.NODE_ENV !== 'production') {
-        warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+        warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.'].join('\n'));
       }
     }
     row.addValue(serializeCellValue(cellParams, {
@@ -96,13 +96,13 @@ export function buildCSV(options) {
     ignoreValueFormatter,
     apiRef
   } = options;
-  const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
+  const CSVBody = rowIds.map(id => serializeRow({
     id,
     columns,
     getCellParams: apiRef.current.getCellParams,
     ignoreValueFormatter,
     csvOptions
-  })}\r\n`, '').trim();
+  })).join('\r\n');
   if (!csvOptions.includeHeaders) {
     return CSVBody;
   }
@@ -138,6 +138,6 @@ export function buildCSV(options) {
     mainHeaderRow.addValue(column.headerName || column.field);
   });
   headerRows.push(mainHeaderRow);
-  const CSVHead = `${headerRows.map(row => row.getRowString()).join('\r\n')}\r\n`;
-  return `${CSVHead}${CSVBody}`.trim();
+  const CSVHead = headerRows.map(row => row.getRowString()).join('\r\n');
+  return rowIds.length > 0 ? `${CSVHead}\r\n${CSVBody}` : CSVHead;
 }

package/hooks/features/export/useGridPrintExport.js

@@ -98,7 +98,7 @@ const useGridPrintExport = (apiRef, props) => {
     }, []);
     apiRef.current.setRows(newRows);
   }, [apiRef]);
-  const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
+  const handlePrintWindowLoad = React.useCallback(async (printWindow, options) => {
     const normalizeOptions = (0, _extends2.default)({
       copyStyles: true,
       hideToolbar: false,
@@ -107,7 +107,7 @@ const useGridPrintExport = (apiRef, props) => {
     }, options);
     const printDoc = printWindow.contentDocument;
     if (!printDoc) {
-      return;
+      return false;
     }
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
@@ -136,6 +136,8 @@ const useGridPrintExport = (apiRef, props) => {
       gridFooterElement.remove();
     }
     gridClone.style.height = 'auto';
+    gridClone.style.minHeight = '0';
+    gridClone.style.maxHeight = 'none';
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
     if (!normalizeOptions.hideFooter && gridFooterElement) {
@@ -166,16 +168,23 @@ const useGridPrintExport = (apiRef, props) => {
     if (normalizeOptions.copyStyles) {
       const rootCandidate = gridRootElement.getRootNode();
       const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
-      stylesheetLoadPromises = (0, _export.loadStyleSheets)(printDoc, root);
+      stylesheetLoadPromises = (0, _export.loadStyleSheets)(printDoc, root, {
+        onStylesheetError: normalizeOptions.onStylesheetError
+      });
+    }
+
+    // wait for remote stylesheets to load
+    const loaded = await Promise.all(stylesheetLoadPromises);
+    if (loaded.includes(false)) {
+      // `onStylesheetError` cancelled the print
+      return false;
     }
 
     // Trigger print
     if (process.env.NODE_ENV !== 'test' && !DEBUG_MODE) {
-      // wait for remote stylesheets to load
-      Promise.all(stylesheetLoadPromises).then(() => {
-        printWindow.contentWindow.print();
-      });
+      printWindow.contentWindow.print();
     }
+    return true;
   }, [apiRef, doc]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
     // Remove the print iframe
@@ -228,21 +237,36 @@ const useGridPrintExport = (apiRef, props) => {
     const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
       doc.current.body.appendChild(printWindow);
-      // In test env, run the all pipeline without waiting for loading
-      handlePrintWindowLoad(printWindow, options);
-      handlePrintWindowAfterPrint(printWindow);
+      // In test env, run the all pipeline without waiting for the iframe to load or the print dialog
+      try {
+        await handlePrintWindowLoad(printWindow, options);
+      } finally {
+        handlePrintWindowAfterPrint(printWindow);
+      }
     } else {
-      printWindow.onload = () => {
-        handlePrintWindowLoad(printWindow, options);
-        const mediaQueryList = printWindow.contentWindow.matchMedia('print');
-        mediaQueryList.addEventListener('change', mql => {
-          const isAfterPrint = mql.matches === false;
-          if (isAfterPrint) {
+      await new Promise((resolve, reject) => {
+        printWindow.onload = () => {
+          const mediaQueryList = printWindow.contentWindow.matchMedia('print');
+          mediaQueryList.addEventListener('change', mql => {
+            const isAfterPrint = mql.matches === false;
+            if (isAfterPrint) {
+              handlePrintWindowAfterPrint(printWindow);
+            }
+          });
+          handlePrintWindowLoad(printWindow, options).then(printed => {
+            if (!printed) {
+              // The print dialog never opens, so restore the grid here
+              handlePrintWindowAfterPrint(printWindow);
+            }
+            resolve();
+          }, error => {
+            // The print dialog never opens, so restore the grid here
             handlePrintWindowAfterPrint(printWindow);
-          }
-        });
-      };
-      doc.current.body.appendChild(printWindow);
+            reject(error);
+          });
+        };
+        doc.current.body.appendChild(printWindow);
+      });
     }
   }, [props, logger, apiRef, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint, updateGridRowsForPrint]);
   const printExportApi = {