@mui/x-data-grid-pro 5.6.0 → 5.8.0

package/modern/components/DataGridProVirtualScroller.js

@@ -6,7 +6,7 @@ import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid';
-import { useCurrentPageRows, GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
@@ -113,7 +113,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const currentPage = useCurrentPageRows(apiRef, rootProps);
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const detailPanelsContent = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
@@ -189,18 +188,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const pinnedColumnsStyle = {
     minHeight: contentProps.style.minHeight
   };
-  const rowsLookup = React.useMemo(() => {
-    if (rootProps.getDetailPanelContent == null) {
-      return null;
-    }
-
-    return currentPage.rows.reduce((acc, {
-      id
-    }, index) => {
-      acc[id] = index;
-      return acc;
-    }, {});
-  }, [currentPage.rows, rootProps.getDetailPanelContent]);
 
   const getDetailPanels = () => {
     const panels = [];
@@ -216,12 +203,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       const id = uniqueExpandedRowIds[i];
       const content = detailPanelsContent[id]; // Check if the id exists in the current page
 
-      const exists = rowsLookup[id] !== undefined;
+      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
+      const exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
         const height = detailPanelsHeights[id];
-        const rowIndex = rowsLookup[id];
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
+        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
+        const spacingTop = sizes?.spacingTop || 0;
+        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
         panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
           style: {
             top,
@@ -252,7 +241,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: GridPinnedPosition.right
@@ -265,11 +258,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

package/modern/components/GridDetailPanelToggleCell.js

@@ -54,8 +54,9 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.
@@ -81,7 +82,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -104,7 +105,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/GridGroupingCriteriaCell.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
@@ -20,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridGroupingCriteriaCell = props => {
+export const GridGroupingCriteriaCell = props => {
   const {
     id,
     field,
@@ -74,75 +73,4 @@ const GridGroupingCriteriaCell = props => {
       children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
     })]
   });
-};
-
-process.env.NODE_ENV !== "production" ? GridGroupingCriteriaCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.any.isRequired,
-
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-
-  /**
-   * Get the cell value of a row and field.
-   * @param {GridRowId} id The row id.
-   * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
-   */
-  getValue: PropTypes.func.isRequired,
-
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.object.isRequired,
-
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-
-  /**
-   * The cell value, but if the column has valueGetter, use getValue.
-   */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
-} : void 0;
-export { GridGroupingCriteriaCell };
+};

package/modern/components/GridTreeDataGroupingCell.js

@@ -86,8 +86,9 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
 
   /**
    * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: PropTypes.object.isRequired,
+  api: PropTypes.any.isRequired,
 
   /**
    * The mode of the cell.
@@ -113,7 +114,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -137,7 +138,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/index.js

@@ -1,3 +1,4 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './GridTreeDataGroupingCell';
-export * from './GridColumnPinningMenuItems';
+export * from './GridColumnPinningMenuItems';
+export * from './GridDetailPanelToggleCell';

package/modern/hooks/features/columnPinning/useGridColumnPinning.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
 import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, GridEvents, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -175,11 +175,11 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   apiRef.current.unstable_updateControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
 import { columnPinningStateInitializer } from './useGridColumnPinning';
 import { filterColumns } from '../../../components/DataGridProVirtualScroller';
@@ -41,5 +41,5 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
   }, [disableColumnPinning, pinnedColumns]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit } from '@mui/x-data-grid/internals';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
 const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
@@ -22,19 +21,19 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+export const columnReorderStateInitializer = state => _extends({}, state, {
+  columnReorder: {
+    dragCol: ''
+  }
+});
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
-
 export const useGridColumnReorder = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnReorder');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    columnReorder: {
-      dragCol: ''
-    }
-  }));
   const dragColNode = React.useRef(null);
   const cursorPosition = React.useRef({
     x: 0,
@@ -117,7 +116,7 @@ export const useGridColumnReorder = (apiRef, props) => {
           canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
         }
 
-        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
           targetIndex: targetColVisibleIndex
         });
 

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
-import { useGridStateInit, clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -73,20 +73,20 @@ function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
 function getSeparatorSide(element) {
   return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
 }
+
+export const columnResizeStateInitializer = state => _extends({}, state, {
+  columnResize: {
+    resizingColumnField: ''
+  }
+});
 /**
  * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
 
-
 export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    columnResize: {
-      resizingColumnField: ''
-    }
-  }));
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
   const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridStateInit, useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
-export const useGridDetailPanel = (apiRef, props) => {
-  useGridStateInit(apiRef, state => {
-    return _extends({}, state, {
-      detailPanel: {
-        expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
-      }
-    });
+export const detailPanelStateInitializer = (state, props) => {
+  return _extends({}, state, {
+    detailPanel: {
+      expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
+    }
   });
+};
+export const useGridDetailPanel = (apiRef, props) => {
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
@@ -54,7 +54,7 @@ export const useGridDetailPanel = (apiRef, props) => {
 
     });
   }, [apiRef, expandedRowIds]);
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
@@ -24,5 +24,5 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
     return columnsState;
   }, [props.getDetailPanelContent]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };

package/modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
-import { useCurrentPageRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
  * Only available in DataGridPro
@@ -10,7 +10,7 @@ import { useCurrentPageRows } from '@mui/x-data-grid/internals';
  */
 export const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const currentPage = useCurrentPageRows(apiRef, props);
+  const currentPage = useGridVisibleRows(apiRef, props);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   const isInScrollBottomArea = React.useRef(false);

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-export const GROUPING_COLUMNS_FEATURE_NAME = 'grouping-columns';
+export const ROW_GROUPING_STRATEGY = 'grouping-columns';
 export const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
@@ -108,7 +109,7 @@ export const filterRowTreeFromGroupingColumns = params => {
 export const getColDefOverrides = (groupingColDefProp, fields) => {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: GROUPING_COLUMNS_FEATURE_NAME,
+      groupingName: ROW_GROUPING_STRATEGY,
       fields
     });
   }
@@ -119,4 +120,18 @@ export const mergeStateWithRowGroupingModel = rowGroupingModel => state => _exte
   rowGrouping: _extends({}, state.rowGrouping, {
     model: rowGroupingModel
   })
-});
+});
+export const setStrategyAvailability = (apiRef, disableRowGrouping) => {
+  let isAvailable;
+
+  if (disableRowGrouping) {
+    isAvailable = () => false;
+  } else {
+    isAvailable = () => {
+      const rowGroupingSanitizedModel = gridRowGroupingSanitizedModelSelector(apiRef);
+      return rowGroupingSanitizedModel.length > 0;
+    };
+  }
+
+  apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+};