@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.6

package/node/DataGrid/DataGrid.js

@@ -10,6 +10,7 @@ exports.DataGrid = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _components = require("../components");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
@@ -30,7 +31,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 = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
@@ -43,9 +44,9 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
+      sx: props.sx
+    }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
@@ -102,6 +103,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -255,11 +257,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: _propTypes.default.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/node/DataGrid/useDataGridProps.js

@@ -27,12 +27,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
-  const themedProps = (0, _utils.useProps)(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _constants.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => (0, _utils.computeSlots)({
     defaultSlots,

package/node/components/GridColumnHeaders.js

@@ -11,11 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       visibleColumns,
       sortColumnLookup,
@@ -49,9 +50,8 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
-    ref: ref
-  }, other, getInnerProps(), {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({}, other, getInnerProps(), {
+    ref: ref,
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });

package/node/components/GridFooter.js

@@ -9,6 +9,7 @@ exports.GridFooter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridRowSelectionSelector = require("../hooks/features/rowSelection/gridRowSelectionSelector");
@@ -18,7 +19,7 @@ var _GridSelectedRowCount = require("./GridSelectedRowCount");
 var _GridFooterContainer = require("./containers/GridFooterContainer");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = exports.GridFooter = (0, _forwardRef.forwardRef)(function GridFooter(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridTopLevelRowCountSelector);
@@ -32,9 +33,8 @@ const GridFooter = exports.GridFooter = /*#__PURE__*/React.forwardRef(function G
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
   const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, (0, _extends2.default)({}, rootProps.slotProps?.pagination));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });

package/node/components/GridLoadingOverlay.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _GridOverlay = require("./containers/GridOverlay");
 var _GridSkeletonLoadingOverlay = require("./GridSkeletonLoadingOverlay");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -20,23 +20,23 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["variant", "noRowsVariant", "style"];
 const LOADING_VARIANTS = {
   'circular-progress': {
-    component: _CircularProgress.default,
+    component: rootProps => rootProps.slots.baseCircularProgress,
     style: {}
   },
   'linear-progress': {
-    component: _LinearProgress.default,
+    component: rootProps => rootProps.slots.baseLinearProgress,
     style: {
       display: 'block'
     }
   },
   skeleton: {
-    component: _GridSkeletonLoadingOverlay.GridSkeletonLoadingOverlay,
+    component: () => _GridSkeletonLoadingOverlay.GridSkeletonLoadingOverlay,
     style: {
       display: 'block'
     }
   }
 };
-const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = exports.GridLoadingOverlay = (0, _forwardRef.forwardRef)(function GridLoadingOverlay(props, ref) {
   const {
       variant = 'linear-progress',
       noRowsVariant = 'skeleton',
@@ -44,13 +44,15 @@ const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwa
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const rowsCount = (0, _hooks.useGridSelector)(apiRef, _hooks.gridRowCountSelector);
   const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
+  const Component = activeVariant.component(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref,
     style: (0, _extends2.default)({}, activeVariant.style, style)
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(activeVariant.component, {})
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {

package/node/components/GridNoResultsOverlay.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridNoResultsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoResultsOverlay = exports.GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+const GridNoResultsOverlay = exports.GridNoResultsOverlay = (0, _forwardRef.forwardRef)(function GridNoResultsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noResultsOverlayLabel
   }));
 });

package/node/components/GridNoRowsOverlay.js

@@ -9,15 +9,15 @@ exports.GridNoRowsOverlay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _GridOverlay = require("./containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridNoRowsOverlay = exports.GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = exports.GridNoRowsOverlay = (0, _forwardRef.forwardRef)(function GridNoRowsOverlay(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
+    ref: ref,
     children: noRowsLabel
   }));
 });

package/node/components/GridPagination.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -64,7 +65,7 @@ const defaultLabelDisplayedRows = ({
 
 // A mutable version of a readonly array.
 
-const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+const GridPagination = exports.GridPagination = (0, _forwardRef.forwardRef)(function GridPagination(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
@@ -128,7 +129,6 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const locales = apiRef.current.getLocaleText('MuiTablePagination');
   const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref,
     component: "div",
     count: rowCount,
     page: computedPage
@@ -142,7 +142,9 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     onRowsPerPageChange: handlePageSizeChange
   }, computedProps, locales, {
     labelDisplayedRows: wrappedLabelDisplayedRows
-  }, props));
+  }, props, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/GridRow.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
@@ -32,9 +33,10 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
-const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
+const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
       rowId,
@@ -76,6 +78,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
+  const hasColumnVirtualization = (0, _useGridSelector.useGridSelector)(apiRef, _hooks.gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -257,7 +260,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {
@@ -277,13 +289,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
     className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     style: style
   }, ariaAttributes, eventHandlers, other, {
+    ref: handleRef,
     children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,

package/node/components/GridRowCount.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -38,7 +39,7 @@ const GridRowCountRoot = (0, _system.styled)('div', {
   display: 'flex',
   margin: theme.spacing(0, 2)
 }));
-const GridRowCount = exports.GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+const GridRowCount = exports.GridRowCount = (0, _forwardRef.forwardRef)(function GridRowCount(props, ref) {
   const {
       className,
       rowCount,
@@ -53,10 +54,10 @@ const GridRowCount = exports.GridRowCount = /*#__PURE__*/React.forwardRef(functi
   }
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridRowCountRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));
 });

package/node/components/GridSelectedRowCount.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -46,7 +47,7 @@ const GridSelectedRowCountRoot = (0, _system.styled)('div', {
     height: 'auto'
   }
 }));
-const GridSelectedRowCount = exports.GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+const GridSelectedRowCount = exports.GridSelectedRowCount = (0, _forwardRef.forwardRef)(function GridSelectedRowCount(props, ref) {
   const {
       className,
       selectedRowCount
@@ -57,10 +58,10 @@ const GridSelectedRowCount = exports.GridSelectedRowCount = /*#__PURE__*/React.f
   const classes = useUtilityClasses(ownerState);
   const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridSelectedRowCountRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
+    ref: ref,
     children: rowSelectedText
   }));
 });

package/node/components/GridSkeletonLoadingOverlay.js

@@ -12,6 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
@@ -42,7 +43,7 @@ const useUtilityClasses = ownerState => {
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _forwardRef.forwardRef)(function GridSkeletonLoadingOverlay(props, forwardedRef) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     slots
@@ -180,9 +181,9 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
   };
   (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
-    className: classes.root,
-    ref: handleRef
+    className: classes.root
   }, props, {
+    ref: handleRef,
     children: children
   }));
 });

package/node/components/cell/GridActionsCellItem.js

@@ -10,12 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"],
   _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
-const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (!props.showInMenu) {
     const {
@@ -28,13 +28,13 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       onClick?.(event);
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick
     }, rootProps.slotProps?.baseIconButton, {
+      ref: ref,
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })
@@ -54,13 +54,12 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     ref: ref
   }, other, {
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: icon
-    }), label]
+    iconStart: icon,
+    children: label
   }));
 });
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {

package/node/components/cell/GridCell.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
@@ -84,7 +85,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 = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const {
       column,
       rowId,
@@ -321,7 +322,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    ref: handleRef,
     className: (0, _clsx.default)(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
@@ -341,6 +341,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onKeyUp: publish('cellKeyUp', onKeyUp)
   }, draggableEventHandlers, other, {
     onFocus: handleFocus,
+    ref: handleRef,
     children: children
   }));
 });

package/node/components/cell/GridEditInputCell.js

@@ -9,9 +9,11 @@ exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -39,7 +41,7 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
     height: '100%'
   }
 }));
-const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       id,
@@ -87,7 +89,6 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     }
   }, [hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCellRoot, (0, _extends2.default)({
-    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -99,7 +100,75 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
       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.default.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
+  debounceMs: _propTypes.default.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  isProcessingProps: _propTypes.default.bool,
+  isValidating: _propTypes.default.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.default.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: _propTypes.default.any
+} : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
 exports.renderEditInputCell = renderEditInputCell;

package/node/components/cell/GridSkeletonCell.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _utils2 = require("../../utils/utils");
@@ -90,7 +89,7 @@ function GridSkeletonCell(props) {
       minWidth: width
     }, style)
   }, other, {
-    children: !empty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, skeletonProps))
+    children: !empty && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSkeleton, (0, _extends2.default)({}, skeletonProps))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +36,7 @@ const GridColumnHeadersRoot = (0, _system.styled)('div', {
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
@@ -43,10 +44,10 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "presentation"
+    role: "presentation",
+    ref: ref
   }));
 });