@mui/x-data-grid 8.18.0 → 8.20.0

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -24,6 +24,16 @@ const columnMenuStateInitializer = state => (0, _extends2.default)({}, state, {
 exports.columnMenuStateInitializer = columnMenuStateInitializer;
 const useGridColumnMenu = apiRef => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridColumnMenu');
+  const subscriptionRefs = React.useRef({});
+  const unsubscribeFromScrollChange = React.useCallback(() => {
+    subscriptionRefs.current.wheel?.();
+    subscriptionRefs.current.touchMove?.();
+  }, []);
+  const subscribeToScrollChange = React.useCallback(() => {
+    unsubscribeFromScrollChange();
+    subscriptionRefs.current.wheel = apiRef.current.subscribeEvent('virtualScrollerWheel', apiRef.current.hideColumnMenu);
+    subscriptionRefs.current.touchMove = apiRef.current.subscribeEvent('virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  }, [apiRef, unsubscribeFromScrollChange]);
 
   /**
    * API METHODS
@@ -41,6 +51,7 @@ const useGridColumnMenu = apiRef => {
           return state;
         }
         logger.debug('Opening Column Menu');
+        subscribeToScrollChange();
         return (0, _extends2.default)({}, state, {
           columnMenu: {
             open: true,
@@ -50,7 +61,7 @@ const useGridColumnMenu = apiRef => {
       });
       apiRef.current.hidePreferences();
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, subscribeToScrollChange]);
   const hideColumnMenu = React.useCallback(() => {
     const columnMenuState = (0, _columnMenuSelector.gridColumnMenuSelector)(apiRef);
     if (columnMenuState.field) {
@@ -86,12 +97,13 @@ const useGridColumnMenu = apiRef => {
     if (shouldUpdate) {
       apiRef.current.setState(state => {
         logger.debug('Hiding Column Menu');
+        unsubscribeFromScrollChange();
         return (0, _extends2.default)({}, state, {
           columnMenu: newState
         });
       });
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, unsubscribeFromScrollChange]);
   const toggleColumnMenu = React.useCallback(field => {
     logger.debug('Toggle Column Menu');
     const columnMenu = (0, _columnMenuSelector.gridColumnMenuSelector)(apiRef);
@@ -108,7 +120,5 @@ const useGridColumnMenu = apiRef => {
   };
   (0, _utils.useGridApiMethod)(apiRef, columnMenuApi, 'public');
   (0, _utils.useGridEvent)(apiRef, 'columnResizeStart', hideColumnMenu);
-  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
-  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };
 exports.useGridColumnMenu = useGridColumnMenu;

package/hooks/features/columns/useGridColumnSpanning.js

@@ -11,10 +11,15 @@ var _useGridEvent = require("../../utils/useGridEvent");
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const virtualizer = apiRef.current.virtualizer;
-  const resetColSpan = virtualizer.api.resetColSpan;
-  const getCellColSpanInfo = virtualizer.api.getCellColSpanInfo;
-  const calculateColSpan = virtualizer.api.calculateColSpan;
+  const resetColSpan = () => {
+    return apiRef.current.virtualizer.api.resetColSpan();
+  };
+  const getCellColSpanInfo = (...params) => {
+    return apiRef.current.virtualizer.api.getCellColSpanInfo(...params);
+  };
+  const calculateColSpan = (...params) => {
+    apiRef.current.virtualizer.api.calculateColSpan(...params);
+  };
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -122,7 +122,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (0, _warning.warnOnce)(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -177,7 +177,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         (0, _warning.warnOnce)(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further

package/hooks/features/dimensions/useGridDimensions.js

@@ -52,8 +52,10 @@ const EMPTY_DIMENSIONS = {
 const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
   const density = (0, _density.gridDensityFactorSelector)(apiRef);
+  const dimensionsWithStatic = (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)));
+  apiRef.current.store.state.dimensions = dimensionsWithStatic;
   return (0, _extends2.default)({}, state, {
-    dimensions: (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)))
+    dimensions: dimensionsWithStatic
   });
 };
 exports.dimensionsStateInitializer = dimensionsStateInitializer;
@@ -65,16 +67,17 @@ const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.g
   return (0, _roundToDecimalPlaces.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 function useGridDimensions(apiRef, props) {
-  const virtualizer = apiRef.current.virtualizer;
-  const updateDimensions = virtualizer.api.updateDimensions;
-  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef), [apiRef]);
   const apiPublic = {
     getRootDimensions
   };
   const apiPrivate = {
-    updateDimensions,
-    getViewportPageSize
+    updateDimensions: () => {
+      return apiRef.current.virtualizer.api.updateDimensions();
+    },
+    getViewportPageSize: () => {
+      return apiRef.current.virtualizer.api.getViewportPageSize();
+    }
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
@@ -103,6 +106,9 @@ function useGridDimensions(apiRef, props) {
     /* eslint-enable react-hooks/rules-of-hooks */
   }
   (0, _store.useStoreEffect)(apiRef.current.store, s => s.dimensions, (previous, next) => {
+    if (!next.isReady) {
+      return;
+    }
     if (apiRef.current.rootElementRef.current) {
       setCSSVariables(apiRef.current.rootElementRef.current, next);
     }

package/hooks/features/editing/useGridCellEditing.js

@@ -371,7 +371,7 @@ const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (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');
         }
       };

package/hooks/features/editing/useGridRowEditing.js

@@ -455,7 +455,7 @@ const useGridRowEditing = (apiRef, props) => {
         }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (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');
         }
       };

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

@@ -84,10 +84,8 @@ const serializeRow = ({
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (String(cellParams.formattedValue) === '[object Object]') {
-        (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.']);
-      }
+    if (String(cellParams.formattedValue) === '[object Object]') {
+      (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.']);
     }
     row.addValue(serializeCellValue(cellParams, {
       ignoreValueFormatter,

package/hooks/features/export/useGridPrintExport.js

@@ -16,15 +16,15 @@ var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _toolbar = require("../../../components/toolbar");
-var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
+var _GridVirtualScrollbar = require("../../../components/virtualization/GridVirtualScrollbar");
 var _jsxRuntime = require("react/jsx-runtime");
+const DEBUG_MODE = false;
 function raf() {
   return new Promise(resolve => {
     requestAnimationFrame(() => {
@@ -37,6 +37,10 @@ function buildPrintWindow(title) {
   iframeEl.style.position = 'absolute';
   iframeEl.style.width = '0px';
   iframeEl.style.height = '0px';
+  if (DEBUG_MODE) {
+    iframeEl.style.width = '100%';
+    iframeEl.style.height = '10000px';
+  }
   iframeEl.title = title || document.title;
   return iframeEl;
 }
@@ -104,40 +108,36 @@ const useGridPrintExport = (apiRef, props) => {
     if (!printDoc) {
       return;
     }
-    const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
+    const virtualScrollerContent = gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerContent}`);
 
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${_gridClasses.gridClasses.main}`);
     gridMain.style.overflow = 'visible';
-
-    // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
-    gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.toolbar}`)?.offsetHeight || 0;
-    let gridFooterElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.offsetHeight || 0;
+    gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerRenderZone}`).style.position = 'static';
+    virtualScrollerContent.style.flexBasis = 'auto';
+    gridClone.querySelector(`.${_gridClasses.gridClasses['scrollbar--vertical']}`)?.remove();
+    if (!(virtualScrollerContent.nextSibling instanceof HTMLElement && virtualScrollerContent.nextSibling.classList.contains(_gridClasses.gridClasses.filler))) {
+      const filler = document.createElement('div');
+      filler.style.height = _GridVirtualScrollbar.scrollbarSizeCssExpression;
+      virtualScrollerContent.insertAdjacentElement('afterend', filler);
+    }
     const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${_gridClasses.gridClasses.toolbar}`)?.remove();
-      gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter && gridFooterElement) {
       gridFooterElement.remove();
-      gridFooterElementHeight = 0;
     }
-
-    // Expand container height to accommodate all rows
-    const computedTotalHeight = rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props) + gridToolbarElementHeight + gridFooterElementHeight;
-    gridClone.style.height = `${computedTotalHeight}px`;
+    gridClone.style.height = 'auto';
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
     if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
-      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
     }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
@@ -165,13 +165,13 @@ const useGridPrintExport = (apiRef, props) => {
     }
 
     // Trigger print
-    if (process.env.NODE_ENV !== 'test') {
+    if (process.env.NODE_ENV !== 'test' && !DEBUG_MODE) {
       // wait for remote stylesheets to load
       Promise.all(stylesheetLoadPromises).then(() => {
         printWindow.contentWindow.print();
       });
     }
-  }, [apiRef, doc, props]);
+  }, [apiRef, doc]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);

package/hooks/features/filter/gridFilterUtils.js

@@ -49,24 +49,18 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
   const hasSeveralItems = model.items.length > 1;
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
-    if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
-    }
+    (0, _warning.warnOnce)(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     items = [model.items[0]];
   } else {
     items = model.items;
   }
   const hasItemsWithoutIds = hasSeveralItems && items.some(item => item.id == null);
   const hasItemWithoutOperator = items.some(item => item.operator == null);
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemsWithoutIds) {
-      (0, _warning.warnOnce)('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-    }
+  if (hasItemsWithoutIds) {
+    (0, _warning.warnOnce)('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
   }
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemWithoutOperator) {
-      (0, _warning.warnOnce)('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
-    }
+  if (hasItemWithoutOperator) {
+    (0, _warning.warnOnce)('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
   }
   if (hasItemWithoutOperator || hasItemsWithoutIds) {
     return (0, _extends2.default)({}, model, {

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

@@ -1,4 +1,4 @@
 export type { GridFilterState, GridFilterInitialState } from "./gridFilterState.js";
 export { getDefaultGridFilterModel } from "./gridFilterState.js";
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "./gridFilterSelector.js";
 export type { GridFilterActiveItemsLookup } from "./gridFilterSelector.js";

package/hooks/features/filter/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "gridExpandedSortedRowIdsSelector", {
     return _gridFilterSelector.gridExpandedSortedRowIdsSelector;
   }
 });
+Object.defineProperty(exports, "gridExpandedSortedRowIndexLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridFilterSelector.gridExpandedSortedRowIndexLookupSelector;
+  }
+});
 Object.defineProperty(exports, "gridFilterActiveItemsLookupSelector", {
   enumerable: true,
   get: function () {

package/hooks/features/filter/useGridFilter.d.ts

@@ -9,4 +9,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">, configuration: GridConfiguration) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics" | "signature">, configuration: GridConfiguration) => void;

package/hooks/features/filter/useGridFilter.js

@@ -363,7 +363,9 @@ const useGridFilter = (apiRef, props, configuration) => {
    * 1ST RENDER
    */
   (0, _useFirstRender.useFirstRender)(() => {
-    updateFilteredRows();
+    if (props.signature === 'DataGrid') {
+      updateFilteredRows();
+    }
   });
 
   /**

package/hooks/features/focus/useGridFocus.js

@@ -232,7 +232,6 @@ const useGridFocus = (apiRef, props) => {
     apiRef.current.setCellFocus(id, field);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
     if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || (0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "tabNavigation">) => void;