@mui/x-data-grid 8.0.0-alpha.7 → 8.0.0-alpha.9

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,22 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
+import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
 import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.js";
 import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../../utils/cellBorderUtils.js";
+import { PinnedColumnPosition } from "../../../internals/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -44,10 +45,8 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
-  const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -84,18 +83,10 @@ export const useGridColumnHeaders = props => {
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: currentContext = renderContext,
-      maxLastColumn = visibleColumns.length
+      renderContext: currentContext = renderContext
     } = params || {};
-    let firstColumnToRender;
-    let lastColumnToRender;
-    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
-      firstColumnToRender = 0;
-      lastColumnToRender = maxLastColumn;
-    } else {
-      firstColumnToRender = currentContext.firstColumnIndex;
-      lastColumnToRender = currentContext.lastColumnIndex;
-    }
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -104,7 +95,7 @@ export const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
@@ -125,33 +116,6 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
-  const getCellOffsetStyle = ({
-    pinnedPosition,
-    columnIndex,
-    computedWidth
-  }) => {
-    let style;
-    const isLeftPinned = pinnedPosition === GridPinnedColumnPosition.LEFT;
-    const isRightPinned = pinnedPosition === GridPinnedColumnPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      if (pinnedPosition === 'left') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-      if (pinnedPosition === 'right') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-    }
-    return style;
-  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -166,14 +130,15 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
-      const siblingWithBorderingSeparator = pinnedPosition === GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -186,12 +151,11 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller,
+        pinnedOffset: pinnedOffset,
         isLastUnpinned: isLastUnpinned,
-        isSiblingFocused: isSiblingFocused
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -203,18 +167,15 @@ export const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
+        position: PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+        renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
+        position: PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
@@ -273,14 +234,11 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === 'left') {
+      if (pinnedPosition === PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
@@ -296,10 +254,9 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: indexInSection,
-        sectionLength: visibleColumnGroupHeader.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection),
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -317,7 +274,7 @@ export const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: GridPinnedColumnPosition.LEFT,
+            position: PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -329,7 +286,7 @@ export const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: GridPinnedColumnPosition.RIGHT,
+            position: PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -344,11 +301,12 @@ export const useGridColumnHeaders = props => {
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     getFillers,
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
+    getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'

package/hooks/features/columnMenu/useGridColumnMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const columnMenuStateInitializer: GridStateInitializer;
@@ -6,4 +6,4 @@ export declare const columnMenuStateInitializer: GridStateInitializer;
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)
  */
-export declare const useGridColumnMenu: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridColumnMenu: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -40,7 +40,6 @@ export const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -82,7 +81,6 @@ export const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;
+export declare const useGridColumnResize: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -44,13 +44,13 @@ export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialStat
     initialState: GridColumnsInitialState | undefined;
     columnVisibilityModel?: GridColumnVisibilityModel;
     keepOnlyColumnsToUpsert: boolean;
-    apiRef: React.MutableRefObject<GridApiCommunity>;
+    apiRef: RefObject<GridApiCommunity>;
 }) => GridColumnsState;
 export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
     firstColumnToRender: number;
-    apiRef: React.MutableRefObject<GridApiCommon>;
+    apiRef: RefObject<GridApiCommon>;
     firstRowToRender: number;
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/useGridColumnSpanning.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnSpanning: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridColumnSpanning: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/columns/useGridColumns.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'slots' | 'slotProps' | 'disableColumnSelector' | 'signature'>): void;
+export declare function useGridColumns(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'slots' | 'slotProps' | 'disableColumnSelector' | 'signature'>): void;

package/hooks/features/density/useGridDensity.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;
+export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
@@ -6,5 +6,5 @@ import { GridStateInitializer } from '../../utils/useGridInitializeState';
 type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
-export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
 export {};

package/hooks/features/dimensions/useGridDimensions.js

@@ -15,6 +15,7 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -220,9 +221,6 @@ export function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       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.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;

package/hooks/features/editing/useGridCellEditing.js

@@ -338,7 +338,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/#server-side-persistence.'], 'error');
+          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');
         }
       };
       try {

package/hooks/features/editing/useGridEditing.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;

package/hooks/features/editing/useGridRowEditing.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;

package/hooks/features/editing/useGridRowEditing.js

@@ -414,7 +414,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/#server-side-persistence.'], 'error');
+          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');
         }
       };
       try {

package/hooks/features/events/useGridEvents.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;
+export declare function useGridEvents(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import type { GridCsvExportOptions, GridRowId } from '../../../../models';
 import type { GridCellParams } from '../../../../models/params/gridCellParams';
 import type { GridStateColDef } from '../../../../models/colDef/gridColDef';
@@ -12,7 +13,7 @@ interface BuildCSVOptions {
     rowIds: GridRowId[];
     csvOptions: Required<Pick<GridCsvExportOptions, 'delimiter' | 'includeColumnGroupsHeaders' | 'includeHeaders' | 'shouldAppendQuotes' | 'escapeFormulas'>>;
     ignoreValueFormatter: boolean;
-    apiRef: React.MutableRefObject<GridApiCommunity>;
+    apiRef: RefObject<GridApiCommunity>;
 }
 export declare function buildCSV(options: BuildCSVOptions): string;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
@@ -8,4 +8,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;
+export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
@@ -7,4 +7,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridSorting (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;
+export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridExportOptions, GridCsvGetRowsToExportParams } from '../../../models/gridExport';
 import { GridStateColDef } from '../../../models/colDef/gridColDef';
@@ -7,7 +7,7 @@ interface GridGetColumnsToExportParams {
     /**
      * The API of the grid.
      */
-    apiRef: React.MutableRefObject<GridApiCommunity>;
+    apiRef: RefObject<GridApiCommunity>;
     options: GridExportOptions;
 }
 export declare const getColumnsToExport: ({ apiRef, options, }: GridGetColumnsToExportParams) => GridStateColDef[];

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

@@ -36,7 +36,7 @@ export declare const gridFilteredDescendantCountLookupSelector: import("../../..
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, any[] | undefined, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Does not contain the collapsed children.

package/hooks/features/filter/gridFilterSelector.js

@@ -49,7 +49,12 @@ export const gridFilteredDescendantCountLookupSelector = createSelector(gridFilt
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
+export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, gridRowMaximumTreeDepthSelector, gridFilterModelSelector, gridQuickFilterValuesSelector, (visibleRowsLookup, sortedRows, maxDepth, filterModel, quickFilterValues) => {
+  if (maxDepth < 2 && !filterModel.items.length && !quickFilterValues?.length) {
+    return sortedRows;
+  }
+  return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
+});
 
 /**
  * Get the id of the rows accessible after the filtering process.

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridFilterItem, GridFilterModel } from '../../../models';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
@@ -6,18 +6,18 @@ import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterV
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterItem;
-export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
+export declare const cleanFilterItem: (item: GridFilterItem, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterItem;
+export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterModel;
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
+export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
     cleanedFilterItems?: GridFilterItem[];
 };
-export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
 export {};

package/hooks/features/filter/gridFilterUtils.js

@@ -19,7 +19,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -133,7 +133,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -181,7 +181,7 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">) => void;

package/hooks/features/focus/useGridFocus.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;
+export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;

package/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const headerFilteringStateInitializer: GridStateInitializer;
-export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;
+export declare const useGridHeaderFiltering: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;