@mui/x-data-grid 7.23.3 → 7.23.4

package/modern/DataGrid/DataGrid.js

@@ -3,6 +3,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 { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
@@ -23,7 +24,7 @@ if (process.env.NODE_ENV !== 'production') {
   // 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') {
@@ -36,9 +37,9 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
+      sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });

package/modern/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/modern/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/modern/components/GridLoadingOverlay.js

@@ -5,6 +5,7 @@ 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 { GridOverlay } from "./containers/GridOverlay.js";
 import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -28,7 +29,7 @@ const LOADING_VARIANTS = {
     }
   }
 };
-const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = forwardRef(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'circular-progress',
       noRowsVariant = 'circular-progress',
@@ -39,9 +40,9 @@ const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOve
   const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref,
     style: _extends({}, activeVariant.style, style)
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/_jsx(activeVariant.component, {})
   }));
 });

package/modern/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/modern/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/modern/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";
@@ -55,7 +56,7 @@ const defaultLabelDisplayedRows = ({
 
 // 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 +120,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 +133,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/modern/components/GridRow.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
@@ -48,7 +49,7 @@ process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
   // ----------------------------------------------------------------------
   width: PropTypes.number.isRequired
 } : void 0;
-const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
+const GridRow = forwardRef(function GridRow(props, refProp) {
   const {
       selected,
       rowId,
@@ -303,13 +304,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
   const emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
     className: clsx(...rowClassNames, classes.root, className),
     style: style
   }, ariaAttributes, eventHandlers, other, {
+    ref: handleRef,
     children: [leftCells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: gridClasses.cellOffsetLeft,

package/modern/components/GridRowCount.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -30,7 +31,7 @@ const GridRowCountRoot = styled('div', {
   display: 'flex',
   margin: theme.spacing(0, 2)
 }));
-const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+const GridRowCount = forwardRef(function GridRowCount(props, ref) {
   const {
       className,
       rowCount,
@@ -45,10 +46,10 @@ const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props,
   }
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));
 });

package/modern/components/GridSelectedRowCount.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -38,7 +39,7 @@ const GridSelectedRowCountRoot = styled('div', {
     height: 'auto'
   }
 }));
-const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+const GridSelectedRowCount = forwardRef(function GridSelectedRowCount(props, ref) {
   const {
       className,
       selectedRowCount
@@ -49,10 +50,10 @@ const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelected
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: rowSelectedText
   }));
 });

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
@@ -34,7 +35,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
   const rootProps = useGridRootProps();
   const {
     slots
@@ -172,9 +173,9 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
   };
   useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
-    className: classes.root,
-    ref: handleRef
+    className: classes.root
   }, props, {
+    ref: handleRef,
     children: children
   }));
 });

package/modern/components/cell/GridActionsCellItem.js

@@ -6,9 +6,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {
     const {
@@ -21,13 +22,13 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick
     }, rootProps.slotProps?.baseIconButton, {
+      ref: ref,
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })

package/modern/components/cell/GridCell.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -76,7 +77,7 @@ let warnedOnce = false;
 
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
-const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
+const GridCell = forwardRef(function GridCell(props, ref) {
   const {
       column,
       rowId,
@@ -313,7 +314,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
     className: clsx(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
@@ -333,6 +333,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onKeyUp: publish('cellKeyUp', onKeyUp)
   }, draggableEventHandlers, other, {
     onFocus: handleFocus,
+    ref: handleRef,
     children: children
   }));
 });

package/modern/components/cell/GridEditInputCell.js

@@ -2,9 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -31,7 +33,7 @@ const GridEditInputCellRoot = styled(InputBase, {
     height: '100%'
   }
 }));
-const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridEditInputCell = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const {
       id,
@@ -79,7 +81,6 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
-    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -91,7 +92,75 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       fontSize: "small",
       color: "action"
     }) : undefined
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  debounceMs: PropTypes.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * 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,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/columnHeaders/GridBaseColumnHeaders.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const GridColumnHeadersRoot = styled('div', {
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
@@ -35,10 +36,10 @@ export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "presentation"
+    role: "presentation",
+    ref: ref
   }));
 });

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isOverflown } from "../../utils/domUtils.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -30,7 +31,7 @@ const GridColumnHeaderTitleRoot = styled('div', {
   fontWeight: 'var(--unstable_DataGrid-headWeight)',
   lineHeight: 'normal'
 });
-const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+const ColumnHeaderInnerTitle = forwardRef(function ColumnHeaderInnerTitle(props, ref) {
   // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
   // See https://github.com/mui/mui-x/pull/14482
   const {
@@ -40,10 +41,11 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -4,12 +4,13 @@ const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizin
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { GridColumnHeaderTitle } from "./GridColumnHeaderTitle.js";
 import { GridColumnHeaderSeparator } from "./GridColumnHeaderSeparator.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
       colIndex,
@@ -54,7 +55,6 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: handleRef,
     className: clsx(classes.root, headerClassName),
     style: _extends({}, style, {
       height,
@@ -65,6 +65,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     "aria-colindex": colIndex + 1,
     "aria-sort": ariaSort
   }, other, {
+    ref: handleRef,
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
       draggable: isDraggable,

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,7 +27,7 @@ const GridIconButtonContainerRoot = styled('div', {
   visibility: 'hidden',
   width: 0
 }));
-export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+export const GridIconButtonContainer = forwardRef(function GridIconButtonContainer(props, ref) {
   const {
       className
     } = props,
@@ -34,8 +35,9 @@ export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function Gr
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,6 +4,7 @@ const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(props, ref) {
   const {
       field,
       id,
@@ -82,7 +83,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   const label = apiRef.current.getLocaleText(checked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    ref: handleRef,
     tabIndex: tabIndex,
     checked: checked,
     onChange: handleChange,
@@ -94,7 +94,9 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: handleRef
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------