@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

package/DataGrid/DataGrid.js

@@ -3,43 +3,37 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [...propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
-const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
+const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    validateProps(props, propValidators);
+    validateProps(props, propValidatorsDataGrid);
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
+      sx: props.sx
+    }, props.slotProps?.root, {
       ref: ref
-    }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -60,7 +54,7 @@ DataGridRaw.propTypes = {
    * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: PropTypes.shape({
-    current: PropTypes.object.isRequired
+    current: PropTypes.object
   }),
   /**
    * The label of the Data Grid.
@@ -95,6 +89,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -248,11 +243,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -325,14 +315,6 @@ DataGridRaw.propTypes = {
     clipboardExport: PropTypes.bool,
     csvExport: PropTypes.bool
   }), PropTypes.bool]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -690,14 +672,6 @@ DataGridRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * Set of rows of type [[GridRowsProp]].
    * @default []
@@ -717,6 +691,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -763,8 +742,11 @@ DataGridRaw.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 };

package/DataGrid/useDataGridComponent.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-export declare const useDataGridComponent: (inputApiRef: React.MutableRefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").MutableRefObject<GridPrivateApiCommunity>;
+export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;

package/DataGrid/useDataGridComponent.js

@@ -41,9 +41,9 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -53,11 +53,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/DataGrid/useDataGridProps.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
-import { computeSlots, useProps } from "../internals/utils/index.js";
+import { computeSlots } from "../internals/utils/index.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
@@ -19,12 +19,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Data Grid
 
 This package is the Community plan edition of the Data Grid components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

package/colDef/gridDateOperators.d.ts

@@ -1,2 +1,3 @@
+import { GridFilterInputDateProps } from '../components/panel/filterPanel/GridFilterInputDate';
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any>[];
+export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/colDef/gridNumericOperators.d.ts

@@ -1,4 +1,7 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import type { GridFilterInputValueProps } from '../models/gridFilterInputComponent';
 import type { GetApplyQuickFilterFn } from '../models/colDef/gridColDef';
 export declare const getGridNumericQuickFilterFn: GetApplyQuickFilterFn<any, number | string | null>;
-export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
+export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any, GridFilterInputValueProps & {
+    type?: "number";
+}>[];

package/components/GridApiContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/components/GridColumnHeaders.d.ts

@@ -3,5 +3,5 @@ import { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGr
 export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
     ref?: React.Ref<HTMLDivElement>;
 }
-declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps> | React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/components/GridColumnHeaders.js

@@ -4,10 +4,11 @@ const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterCol
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -41,9 +42,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/components/GridConfigurationContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/components/GridFooter.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-declare const GridFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+import { GridFooterContainerProps } from './containers/GridFooterContainer';
+declare const GridFooter: React.ForwardRefExoticComponent<GridFooterContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridFooter };

package/components/GridFooter.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
@@ -10,7 +11,7 @@ import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
 import { GridFooterContainer } from "./containers/GridFooterContainer.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
@@ -24,9 +25,8 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/components/GridHeaders.js

@@ -18,7 +18,7 @@ function GridHeaders() {
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const hasNoCellTabIndexState = useGridSelector(apiRef, () => gridTabIndexCellSelector(apiRef) === null);
   const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
   const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
@@ -26,7 +26,7 @@ function GridHeaders() {
   const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && hasNoCellTabIndexState);
   const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,

package/components/GridLoadingOverlay.d.ts

@@ -13,5 +13,5 @@ export interface GridLoadingOverlayProps extends GridOverlayProps {
      */
     noRowsVariant?: GridLoadingOverlayVariant;
 }
-declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridLoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridLoadingOverlayProps> | React.ForwardRefExoticComponent<GridLoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export { GridLoadingOverlay };

package/components/GridLoadingOverlay.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["variant", "noRowsVariant", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-import CircularProgress from '@mui/material/CircularProgress';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -12,23 +12,23 @@ import { gridRowCountSelector, useGridSelector } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LOADING_VARIANTS = {
   'circular-progress': {
-    component: CircularProgress,
+    component: rootProps => rootProps.slots.baseCircularProgress,
     style: {}
   },
   'linear-progress': {
-    component: LinearProgress,
+    component: rootProps => rootProps.slots.baseLinearProgress,
     style: {
       display: 'block'
     }
   },
   skeleton: {
-    component: GridSkeletonLoadingOverlay,
+    component: () => GridSkeletonLoadingOverlay,
     style: {
       display: 'block'
     }
   }
 };
-const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = forwardRef(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'linear-progress',
       noRowsVariant = 'skeleton',
@@ -36,13 +36,15 @@ const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOve
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
+  const Component = activeVariant.component(rootProps);
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref,
     style: _extends({}, activeVariant.style, style)
   }, other, {
-    children: /*#__PURE__*/_jsx(activeVariant.component, {})
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {

package/components/GridNoResultsOverlay.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
-export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+import { GridOverlayProps } from './containers/GridOverlay';
+export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/GridNoResultsOverlay.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+export const GridNoResultsOverlay = forwardRef(function GridNoResultsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
-  return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
     children: noResultsOverlayLabel
   }));
 });

package/components/GridNoRowsOverlay.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+import { GridOverlayProps } from './containers/GridOverlay';
+declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridNoRowsOverlay };

package/components/GridNoRowsOverlay.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
-  return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({}, props, {
+    ref: ref,
     children: noRowsLabel
   }));
 });

package/components/GridPagination.d.ts

@@ -6,5 +6,5 @@ export type WrappedLabelDisplayedRows = (args: LabelDisplayedRowsArgs & {
 interface GridPaginationOwnProps {
     component?: React.ElementType;
 }
-declare const GridPagination: React.ForwardRefExoticComponent<Omit<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps, "ref"> & React.RefAttributes<unknown>>;
+declare const GridPagination: React.ForwardRefExoticComponent<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps> | React.ForwardRefExoticComponent<Omit<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps, "ref"> & React.RefAttributes<unknown>>;
 export { GridPagination };

package/components/GridPagination.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -50,12 +51,13 @@ const defaultLabelDisplayedRows = ({
   if (!estimated) {
     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
   }
-  return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
+  const estimateLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
+  return `${from}–${to} of ${count !== -1 ? count : estimateLabel}`;
 };
 
 // A mutable version of a readonly array.
 
-const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = forwardRef(function GridPagination(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -119,7 +121,6 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const locales = apiRef.current.getLocaleText('MuiTablePagination');
   const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
-    ref: ref,
     component: "div",
     count: rowCount,
     page: computedPage
@@ -133,7 +134,9 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     onRowsPerPageChange: handlePageSizeChange
   }, computedProps, locales, {
     labelDisplayedRows: wrappedLabelDisplayedRows
-  }, props));
+  }, props, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/GridRow.d.ts

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { GridRowId, GridRowModel } from '../models/gridRows';
 import { GridPinnedColumns } from '../hooks/features/columns';
 import type { GridStateColDef } from '../models/colDef/gridColDef';
-import type { GridRenderContext } from '../models/params/gridScrollParams';
-import type { GridDimensions } from '../hooks/features/dimensions';
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     row: GridRowModel;
     rowId: GridRowId;
@@ -14,10 +12,10 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     index: number;
     rowHeight: number | 'auto';
-    offsetTop: number | undefined;
     offsetLeft: number;
-    dimensions: GridDimensions;
-    renderContext: GridRenderContext;
+    columnsTotalWidth: number;
+    firstColumnIndex: number;
+    lastColumnIndex: number;
     visibleColumns: GridStateColDef[];
     pinnedColumns: GridPinnedColumns;
     /**
@@ -25,20 +23,17 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      * If `null`, no cell in this row has focus.
      */
     focusedColumnIndex: number | undefined;
-    /**
-     * Determines which cell should be tabbable by having tabIndex=0.
-     * If `null`, no cell in this row is in the tab sequence.
-     */
-    tabbableCell: string | null;
     isFirstVisible: boolean;
     isLastVisible: boolean;
     isNotVisible: boolean;
     showBottomBorder: boolean;
+    scrollbarWidth: number;
+    gridHasFiller: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     [x: `data-${string}`]: string;
 }
-declare const MemoizedGridRow: React.ForwardRefExoticComponent<GridRowProps & React.RefAttributes<HTMLDivElement>>;
+declare const MemoizedGridRow: React.ForwardRefExoticComponent<GridRowProps> | React.ForwardRefExoticComponent<GridRowProps & React.RefAttributes<HTMLDivElement>>;
 export { MemoizedGridRow as GridRow };