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

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/GridHeaders.js

@@ -26,7 +26,7 @@ function GridHeaders() {
   const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
   const columnHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
+  const hasNoCellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef) === null);
   const columnGroupHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
   const columnGroupHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector);
@@ -34,7 +34,7 @@ function GridHeaders() {
   const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
   const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && hasNoCellTabIndexState);
   const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, (0, _extends2.default)({
     ref: columnsContainerRef,

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");
@@ -58,12 +59,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 = 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);
@@ -127,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
@@ -141,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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -13,10 +14,13 @@ 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 _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _cellBorderUtils = require("../utils/cellBorderUtils");
 var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
@@ -27,14 +31,21 @@ var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
-var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _createSelector = require("../utils/createSelector");
 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 _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const isRowReorderingEnabledSelector = (0, _createSelector.createSelector)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, rowReordering) => {
+  if (!rowReordering) {
+    return false;
+  }
+  const isEditingRows = !(0, _isObjectEmpty.isObjectEmpty)(editRows);
+  return !isEditingRows;
+});
+const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
       rowId,
@@ -46,13 +57,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       pinnedColumns,
       offsetLeft,
-      dimensions,
-      renderContext,
+      columnsTotalWidth,
+      firstColumnIndex,
+      lastColumnIndex,
       focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
       isNotVisible,
       showBottomBorder,
+      scrollbarWidth,
+      gridHasFiller,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -69,16 +83,15 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
-  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
+  const rowReordering = rootProps.rowReordering;
+  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
+  const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, rowId);
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   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;
+  const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
+  const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= lastColumnIndex;
   const classes = (0, _composeGridClasses.composeGridClasses)(rootProps.classes, {
     root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
   });
@@ -151,8 +164,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const rowReordering = rootProps.rowReordering;
-  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), _useGridSelector.objectShallowCompare);
+  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), undefined, _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -194,14 +206,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.PinnedPosition.NONE) => {
+
+  /* Start of rendering */
+  if (!rowNode) {
+    return null;
+  }
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
-    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(_GridCell.gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
+    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
@@ -211,16 +228,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         align: column.align
       }, column.field);
     }
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    const cellIsNotVisible = pinnedPosition === _GridCell.PinnedPosition.VIRTUAL;
+    const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
+    const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+    const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
       column: column,
       width: width,
@@ -229,35 +246,29 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
-      sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasFiller: gridHasFiller
+      showLeftBorder: showLeftBorder,
+      showRightBorder: showRightBorder,
+      row: row,
+      rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
-
-  /* Start of rendering */
-
-  if (!rowNode) {
-    return null;
-  }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
-    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _GridCell.PinnedPosition.LEFT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _constants.PinnedColumnPosition.LEFT);
   });
   const rightCells = pinnedColumns.right.map((column, i) => {
     const indexRelativeToAllColumns = visibleColumns.length - pinnedColumns.right.length + i;
-    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, _GridCell.PinnedPosition.RIGHT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, _constants.PinnedColumnPosition.RIGHT);
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
   if (hasVirtualFocusCellLeft) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {
@@ -266,7 +277,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
   if (hasVirtualFocusCellRight) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -277,13 +288,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,
@@ -303,48 +314,14 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  dimensions: _propTypes.default.shape({
-    bottomContainerHeight: _propTypes.default.number.isRequired,
-    columnsTotalWidth: _propTypes.default.number.isRequired,
-    contentSize: _propTypes.default.shape({
-      height: _propTypes.default.number.isRequired,
-      width: _propTypes.default.number.isRequired
-    }).isRequired,
-    groupHeaderHeight: _propTypes.default.number.isRequired,
-    hasScrollX: _propTypes.default.bool.isRequired,
-    hasScrollY: _propTypes.default.bool.isRequired,
-    headerFilterHeight: _propTypes.default.number.isRequired,
-    headerHeight: _propTypes.default.number.isRequired,
-    headersTotalHeight: _propTypes.default.number.isRequired,
-    isReady: _propTypes.default.bool.isRequired,
-    leftPinnedWidth: _propTypes.default.number.isRequired,
-    minimumSize: _propTypes.default.shape({
-      height: _propTypes.default.number.isRequired,
-      width: _propTypes.default.number.isRequired
-    }).isRequired,
-    rightPinnedWidth: _propTypes.default.number.isRequired,
-    root: _propTypes.default.shape({
-      height: _propTypes.default.number.isRequired,
-      width: _propTypes.default.number.isRequired
-    }).isRequired,
-    rowHeight: _propTypes.default.number.isRequired,
-    rowWidth: _propTypes.default.number.isRequired,
-    scrollbarSize: _propTypes.default.number.isRequired,
-    topContainerHeight: _propTypes.default.number.isRequired,
-    viewportInnerSize: _propTypes.default.shape({
-      height: _propTypes.default.number.isRequired,
-      width: _propTypes.default.number.isRequired
-    }).isRequired,
-    viewportOuterSize: _propTypes.default.shape({
-      height: _propTypes.default.number.isRequired,
-      width: _propTypes.default.number.isRequired
-    }).isRequired
-  }).isRequired,
+  columnsTotalWidth: _propTypes.default.number.isRequired,
+  firstColumnIndex: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
   focusedColumnIndex: _propTypes.default.number,
+  gridHasFiller: _propTypes.default.bool.isRequired,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
@@ -353,29 +330,19 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isFirstVisible: _propTypes.default.bool.isRequired,
   isLastVisible: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
+  lastColumnIndex: _propTypes.default.number.isRequired,
   offsetLeft: _propTypes.default.number.isRequired,
-  offsetTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
   pinnedColumns: _propTypes.default.object.isRequired,
-  renderContext: _propTypes.default.shape({
-    firstColumnIndex: _propTypes.default.number.isRequired,
-    firstRowIndex: _propTypes.default.number.isRequired,
-    lastColumnIndex: _propTypes.default.number.isRequired,
-    lastRowIndex: _propTypes.default.number.isRequired
-  }).isRequired,
   row: _propTypes.default.object.isRequired,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  scrollbarWidth: _propTypes.default.number.isRequired,
   selected: _propTypes.default.bool.isRequired,
   showBottomBorder: _propTypes.default.bool.isRequired,
-  /**
-   * Determines which cell should be tabbable by having tabIndex=0.
-   * If `null`, no cell in this row is in the tab sequence.
-   */
-  tabbableCell: _propTypes.default.string,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;
 const MemoizedGridRow = exports.GridRow = (0, _fastMemo.fastMemo)(GridRow);

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/GridScrollArea.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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
   }));
 });