@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/node/DataGrid/DataGrid.js

@@ -12,7 +12,6 @@ var _components = require("../components");
 var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
-var _DataGridVirtualScroller = require("../components/DataGridVirtualScroller");
 var _propValidation = require("../internals/utils/propValidation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -33,9 +32,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref
     }, props.forwardedProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {
-        VirtualScrollerComponent: _DataGridVirtualScroller.DataGridVirtualScroller
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -139,6 +136,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnSelector: _propTypes.default.bool,
+  /**
+   * If `true`, the column sorting feature will be disabled.
+   * @default false
+   */
+  disableColumnSorting: _propTypes.default.bool,
   /**
    * If `true`, the density selector is disabled.
    * @default false
@@ -175,8 +177,6 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    ariaV7: _propTypes.default.bool,
-    columnGrouping: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**

package/node/DataGrid/useDataGridComponent.js

@@ -44,6 +44,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -48,6 +48,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
+  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,

package/node/components/GridColumnHeaders.js

@@ -15,21 +15,19 @@ var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColu
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
-      columnPositions,
       columnHeaderTabIndexState,
       columnGroupHeaderTabIndexState,
       columnHeaderFocus,
       columnGroupHeaderFocus,
-      densityFactor,
       headerGroupingMaxDepth,
       columnMenuState,
       columnVisibility,
@@ -39,7 +37,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     isDragging,
-    getRootProps,
     getInnerProps,
     getColumnHeaders,
     getColumnGroupHeaders
@@ -48,12 +45,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
@@ -62,7 +57,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref
-  }, getRootProps(other), {
+  }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridColumnHeadersInner.GridColumnHeadersInner, (0, _extends2.default)({
       isDragging: isDragging
     }, getInnerProps(), {
@@ -97,14 +92,11 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
     field: _propTypes.default.string,
     open: _propTypes.default.bool.isRequired
   }).isRequired,
-  columnPositions: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
   columnVisibility: _propTypes.default.object.isRequired,
-  densityFactor: _propTypes.default.number.isRequired,
   filterColumnLookup: _propTypes.default.object.isRequired,
   hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
   headerGroupingMaxDepth: _propTypes.default.number.isRequired,
   innerRef: _utils.refType,
-  minColumnIndex: _propTypes.default.number,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/node/components/GridDetailPanels.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDetailPanels = GridDetailPanels;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function GridDetailPanels(_) {
+  return null;
+}

package/node/components/GridHeaders.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaders = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _fastMemo = require("../utils/fastMemo");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
+var _gridFilterSelector = require("../hooks/features/filter/gridFilterSelector");
+var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
+var _gridFocusStateSelector = require("../hooks/features/focus/gridFocusStateSelector");
+var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
+var _columnMenuSelector = require("../hooks/features/columnMenu/columnMenuSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function GridHeaders() {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  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 columnGroupHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  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 columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, {
+    ref: columnsContainerRef,
+    innerRef: columnHeadersRef,
+    visibleColumns: visibleColumns,
+    filterColumnLookup: filterColumnLookup,
+    sortColumnLookup: sortColumnLookup,
+    columnHeaderTabIndexState: columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+    columnHeaderFocus: columnHeaderFocus,
+    columnGroupHeaderFocus: columnGroupHeaderFocus,
+    headerGroupingMaxDepth: headerGroupingMaxDepth,
+    columnMenuState: columnMenuState,
+    columnVisibility: columnVisibility,
+    columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence: hasOtherElementInTabSequence
+  });
+}
+const MemoizedGridHeaders = exports.GridHeaders = (0, _fastMemo.fastMemo)(GridHeaders);

package/node/components/GridPinnedRows.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPinnedRows = GridPinnedRows;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function GridPinnedRows(_) {
+  return null;
+}

package/node/components/GridRow.js

@@ -26,11 +26,12 @@ var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleFie
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
+var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
-var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
+var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -38,12 +39,15 @@ const useUtilityClasses = ownerState => {
     editable,
     editing,
     selected,
+    isFirstVisible,
     isLastVisible,
     rowHeight,
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight'],
+    pinnedLeft: ['pinnedLeft'],
+    pinnedRight: ['pinnedRight']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -53,30 +57,30 @@ function EmptyCell({
   if (!width) {
     return null;
   }
-  const style = {
-    width
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${_gridClasses.gridClasses.cell} ${_gridClasses.gridClasses.withBorderColor}`,
-    style: style
-  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+    role: "presentation",
+    className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty),
+    style: {
+      '--width': `${width}px`
+    }
+  });
 }
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
-      hovered,
       rowId,
       row,
       index,
       style: styleProp,
-      position,
       rowHeight,
       className,
       visibleColumns,
       renderedColumns,
-      containerWidth,
+      pinnedColumns,
+      dimensions,
       firstColumnToRender,
-      isLastVisible = false,
+      isFirstVisible,
+      isLastVisible,
       focusedCellColumnIndexNotInRange,
       isNotVisible,
       focusedCell,
@@ -92,17 +96,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const ref = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
-  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
+  const rowNode = apiRef.current.getRowNode(rowId);
+  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const ownerState = {
     selected,
-    hovered,
+    isFirstVisible,
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit,
@@ -113,9 +119,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   React.useLayoutEffect(() => {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  }, [apiRef, rowHeight, rowId, position]);
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -137,11 +143,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     });
     resizeObserver.observe(rootElement);
     return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -197,50 +203,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const CellComponent = slots.cell === _GridCell.GridCellV7 ? _GridCell.GridCellV7 : _GridCell.GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const getCell = (column, cellProps) => {
-    // 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 disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
-    let cellIsNotVisible = false;
-    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-      cellIsNotVisible = true;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CellComponent, (0, _extends2.default)({
-      column: column,
-      width: cellProps.width,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: cellProps.showRightBorder,
-      align: column.align || 'left',
-      colIndex: cellProps.indexRelativeToAllColumns,
-      colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell), column.field);
-  };
   const sizes = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.unstable_getRowInternalSizes(rowId)), _useGridSelector.objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
-    let numberOfBaseSizes = 0;
-    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
-      const isBaseHeight = /^base[A-Z]/.test(key);
-      if (!isBaseHeight) {
-        return acc;
-      }
-      numberOfBaseSizes += 1;
-      if (size > acc) {
-        return size;
-      }
-      return acc;
-    }, 0);
+    const numberOfBaseSizes = 1;
+    const maximumSize = sizes.baseCenter ?? 0;
     if (maximumSize > 0 && numberOfBaseSizes > 1) {
       minHeight = maximumSize;
     }
@@ -285,11 +253,88 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = (0, _utils2.randomNumberBetween)(10000, 20, 80);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.PinnedPosition.NONE) => {
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+      return null;
+    }
+    let pinnedOffset;
+    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
+    // eslint-disable-next-line default-case
+    switch (pinnedPosition) {
+      case _GridCell.PinnedPosition.LEFT:
+        pinnedOffset = columnPositions[indexRelativeToAllColumns];
+        break;
+      case _GridCell.PinnedPosition.RIGHT:
+        pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
+        break;
+      case _GridCell.PinnedPosition.NONE:
+        pinnedOffset = 0;
+        break;
+    }
+    if (rowNode?.type === 'skeletonRow') {
+      const {
+        width
+      } = cellColSpanInfo.cellProps;
+      const contentWidth = Math.round(randomNumber());
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
+        width: width,
+        contentWidth: contentWidth,
+        field: column.field,
+        align: column.align
+      }, column.field);
+    }
+    const {
+      colSpan,
+      width
+    } = cellColSpanInfo.cellProps;
+    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 disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    let cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
+      column: column,
+      width: width,
+      rowId: rowId,
+      height: rowHeight,
+      align: column.align || 'left',
+      colIndex: indexRelativeToAllColumns,
+      colSpan: colSpan,
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
+    }, slotProps?.cell, {
+      pinnedOffset: pinnedOffset,
+      pinnedPosition: pinnedPosition,
+      sectionIndex: indexInSection,
+      sectionLength: sectionLength,
+      gridHasScrollX: dimensions.hasScrollX
+    }), column.field);
+  };
+
+  /* Start of rendering */
+
   if (!rowNode) {
     return null;
   }
-  const rowType = rowNode.type;
+  const leftCells = pinnedColumns.left.map((column, i) => {
+    const indexRelativeToAllColumns = i;
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _GridCell.PinnedPosition.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);
+  });
+  const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -301,35 +346,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         indexRelativeToAllColumns -= 1;
       }
     }
-    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (rowType !== 'skeletonRow') {
-        const {
-          colSpan,
-          width
-        } = cellColSpanInfo.cellProps;
-        const cellProps = {
-          width,
-          colSpan,
-          showRightBorder: rootProps.showCellVerticalBorder,
-          indexRelativeToAllColumns
-        };
-        cells.push(getCell(column, cellProps));
-      } else {
-        const {
-          width
-        } = cellColSpanInfo.cellProps;
-        const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
-          width: width,
-          contentWidth: contentWidth,
-          field: column.field,
-          align: column.align
-        }, column.field));
-      }
-    }
+    const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
   }
-  const emptyCellWidth = containerWidth - columnsTotalWidth;
   const eventHandlers = row ? {
     onClick: publishClick,
     onDoubleClick: publish('rowDoubleClick', onDoubleClick),
@@ -338,18 +357,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
+  const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
+  const emptyCellWidth = Math.max(0, expandedWidth);
   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, hovered && 'Mui-hovered'),
+    className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
     style: style
   }, eventHandlers, other, {
-    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
+    children: [leftCells, cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
+    }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "presentation",
+      style: {
+        flex: '1'
+      }
+    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
+      pinnedRight: pinnedColumns.right.length > 0
     })]
   }));
 });
@@ -358,7 +386,41 @@ 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 "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  containerWidth: _propTypes.default.number.isRequired,
+  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,
+    hasScrollX: _propTypes.default.bool.isRequired,
+    hasScrollY: _propTypes.default.bool.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,
   firstColumnToRender: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
@@ -371,14 +433,15 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: _propTypes.default.number.isRequired,
-  isLastVisible: _propTypes.default.bool,
+  isFirstVisible: _propTypes.default.bool.isRequired,
+  isLastVisible: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
-  position: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
+  pinnedColumns: _propTypes.default.object.isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   row: _propTypes.default.object,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,

package/node/components/GridScrollbarFillerCell.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridScrollbarFillerCell = GridScrollbarFillerCell;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const classes = {
+  root: (0, _constants.getDataGridUtilityClass)('scrollbarFiller'),
+  header: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--header'),
+  borderTop: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--borderTop'),
+  pinnedRight: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--pinnedRight')
+};
+const Style = (0, _styles.styled)('div')({
+  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+  alignSelf: 'stretch',
+  [`&.${classes.borderTop}`]: {
+    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+  },
+  [`&.${classes.pinnedRight}`]: {
+    backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  },
+  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
+    position: 'sticky',
+    right: 0
+  },
+  [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: {
+    transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)'
+  }
+});
+function GridScrollbarFillerCell({
+  header,
+  borderTop = true,
+  pinnedRight
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Style, {
+    role: "presentation",
+    className: (0, _clsx.default)(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+  });
+}