@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.5
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- 🚀 Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.0.0-beta.5`
+
+- [DataGrid] Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii
+- [DataGrid] Add `use client` directive to the Grid packages (#11803) @MBilalShafi
+- [DataGrid] Fix `disableResetButton` and `disableShowHideToggle` flags to not exclude each other (#12169) @adyry
+- [DataGrid] Fix cell range classnames (#12230) @romgrk
+- [DataGrid] Fix wrong offset for right-pinned columns when toggling dark/light modes (#12233) @cherniavskii
+- [DataGrid] Improve row virtualization and rendering performance (#12247) @romgrk
+- [DataGrid] Improve performance by removing `querySelector` call (#12229) @romgrk
+- [DataGrid] Fix `onColumnWidthChange` called before autosize affects column width (#12140) @shaharyar-shamshi
+- [DataGrid] Fix boolean "is" filter (#12117) @shaharyar-shamshi
+- [DataGrid] Fix `upsertFilterItems` removing filters that are not part of the update (#11954) @gitstart
+- [DataGrid] Render scrollbars only if there is scroll (#12265) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.5`, plus:
+
+- [DataGridPro] Fix column resize errors on MacOS with automatic scrollbars enabled (#12217) @cherniavskii
+- [DataGridPro] Fix lazy-loading crash (#12080) @romgrk
+- [DataGridPro] Fix useGridRows not giving error on reversed data (#10821) @martijn-basesoft
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.5`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12235) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.5`
+
+- [pickers] Fix toolbar components props handling (#12211) @LukasTy
+- [l10n] Improve Chinese (zh-CN) locale (#12245) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12192) @Luzi
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
+
+- [DateTimeRangePicker] Fix validation behavior (#12243) @LukasTy
+
+### Charts / `@mui/x-charts@7.0.0-beta.5`
+
+- [charts] Fix grid duplicated key (#12208) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@7.0.0-beta.5`
+
+- [TreeView] Add public API and expose focus method (#12143) @noraleonte
+
+### Docs
+
+- [docs] Fix image layout shift when loading @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Non breaking spaces @oliviertassinari
+- [docs] Polish the Date Picker playground (#11869) @zanivan
+- [docs] Standardize WAI-ARIA references @oliviertassinari
+
+### Core
+
+- [core] Allow local docs next.js settings (#12227) @romgrk
+- [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
+- [core] Remove `window.` reference for common globals @oliviertassinari
+- [core] Use runtime agnostic setTimeout type @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix missing non breaking spaces @oliviertassinari
+- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Fix missing permission reset @oliviertassinari
+
 ## 7.0.0-beta.4
 
 _Feb 23, 2024_
@@ -49,7 +132,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
    <DateField
   -  selectedSections={{ startIndex: 0, endIndex: 0 }}
   +  selectedSections={0}
-  
+
      // If the field has 3 sections
   -  selectedSections={{ startIndex: 0, endIndex: 2 }}
   +  selectedSections="all"
@@ -68,20 +151,20 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
   +     enableAccessibleFieldDOMStructure,
         // ... rest of the props you are using
       } = props;
-  
+
       return ( /* Some UI to edit the date */ )
     }
-  
+
     function MyCustomField(props) {
       const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
         ...props,
   +     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
   +     enableAccessibleFieldDOMStructure: false,
       });
-  
+
       return <MyCustomTextField ref={ref} {...fieldResponse} />;
     }
-  
+
     function App() {
       return <DatePicker slots={{ field: MyCustomField }} />;
     }
@@ -2352,6 +2435,47 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.6
+
+_Mar 1, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.6`
+
+- [DataGrid] Fix error when existing rows are passed to `replaceRows` (@martijn-basesoft)
+
+#### `@mui/x-data-grid-pro@6.19.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.6`.
+
+#### `@mui/x-data-grid-premium@6.19.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.6`, plus:
+
+- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.6`
+
+- [l10n] Improve Chinese (zh-CN) locale (#12250) @headironc
+- [l10n] Improve Korean (ko-KR) locale (#12186) @Luzi
+
+#### `@mui/x-date-pickers-pro@6.19.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.6`.
+
+### Docs
+
+- [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii
+
 ## 6.19.5
 
 _Feb 23, 2024_
@@ -2394,8 +2518,8 @@ Same changes as in `@mui/x-date-pickers@6.19.5`.
 
 - [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy
 - [docs] Fix 301 redirection to StackBlitz @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
-- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
+- [docs] Fix 301 to Material UI @oliviertassinari
 - [docs] Fix 404 links to translation source @oliviertassinari
 - [docs] Fix dead link to translations @oliviertassinari
 - [docs] Fix the Treemap illustration (#12189) @danilo-leal
@@ -4264,7 +4388,7 @@ We'd like to offer a big thanks to the 13 contributors who made this release pos
 
 #### `@mui/x-data-grid@6.9.1`
 
-- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
 - [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
 - [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
 - [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
@@ -4395,7 +4519,7 @@ Same changes as in `@mui/x-date-pickers@6.9.0`.
 - [docs] Fix random screenshot generation (#9364) @cherniavskii
 - [docs] Remove random generation from chart doc example (#9343) @flaviendelangle
 - [docs] Sync h1 with sidenav link (#9252) @oliviertassinari
-- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
+- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari
 
 ### Core
 
@@ -4722,8 +4846,8 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - [DataGrid] Fix DataGrid rendering in JSDOM (#8968) @cherniavskii
 - [DataGrid] Fix layout when rendered inside a parent with `display: grid` (#8577) @cherniavskii
-- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
-- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
+- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp
+- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii
 - [DataGrid] Extract `baseChip` slot (#8748) @cherniavskii
 - [DataGridPremium] Implement Clipboard import (#7389) @cherniavskii
 - [l10n] Improve French (fr-FR) locale (#8825) @allereaugabriel
@@ -4773,7 +4897,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu
 - [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii
 - [DataGrid] Remove unwarranted warning log (#8847) @romgrk
-- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
+- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii
 - [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii
 
 ### `@mui/x-date-pickers@6.3.1` / `@mui/x-date-pickers-pro@6.3.1`
@@ -4824,7 +4948,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste
 - [DataGrid] Avoid passing `api` prop to div (#8679) @someden
 - [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw
-- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
+- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
 - [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas
 - [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii
 - [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii
@@ -4886,7 +5010,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
-- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
 - [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
 - [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
 - [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw

package/DataGrid/DataGrid.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/colDef/gridBooleanOperators.js

@@ -5,7 +5,7 @@ export const getGridBooleanOperators = () => [{
     if (!filterItem.value) {
       return null;
     }
-    const valueAsBoolean = filterItem.value === 'true';
+    const valueAsBoolean = String(filterItem.value) === 'true';
     return value => {
       return Boolean(value) === valueAsBoolean;
     };

package/components/GridRow.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { GridRowId, GridRowModel } from '../models/gridRows';
 import type { GridPinnedColumns } from '../hooks/features/columns';
 import type { GridStateColDef } from '../models/colDef/gridColDef';
-import type { GridVirtualizationState } from '../hooks/features/virtualization';
+import type { GridRenderContext } from '../models/params/gridScrollParams';
 import type { GridDimensions } from '../hooks/features/dimensions';
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    row: GridRowModel;
     rowId: GridRowId;
     selected: boolean;
     /**
@@ -13,28 +14,25 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     index: number;
     rowHeight: number | 'auto';
-    offsets: GridVirtualizationState['offsets'];
+    offsetTop: number | undefined;
+    offsetLeft: number;
     dimensions: GridDimensions;
-    firstColumnToRender: number;
-    lastColumnToRender: number;
+    renderContext: GridRenderContext;
     visibleColumns: GridStateColDef[];
-    renderedColumns: GridStateColDef[];
     pinnedColumns: GridPinnedColumns;
     /**
      * Determines which cell has focus.
      * If `null`, no cell in this row has focus.
      */
-    focusedCell: string | null;
+    focusedColumnIndex: number | undefined;
     /**
      * Determines which cell should be tabbable by having tabIndex=0.
      * If `null`, no cell in this row is in the tab sequence.
      */
     tabbableCell: string | null;
-    row?: GridRowModel;
     isFirstVisible: boolean;
     isLastVisible: boolean;
-    focusedCellColumnIndexNotInRange?: number;
-    isNotVisible?: boolean;
+    isNotVisible: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;

package/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,7 +21,6 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
-import { randomNumberBetween } from '../utils/utils';
 import { PinnedPosition } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -65,16 +64,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       rowHeight,
       className,
       visibleColumns,
-      renderedColumns,
       pinnedColumns,
-      offsets,
+      offsetLeft,
       dimensions,
-      firstColumnToRender,
+      renderContext,
+      focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
-      focusedCellColumnIndexNotInRange,
       isNotVisible,
-      focusedCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -95,6 +92,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  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 ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const ownerState = {
@@ -245,13 +245,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const randomNumber = randomNumberBetween(10000, 20, 80);
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedPosition.NONE) => {
-    var _editRowsState$rowId$, _editRowsState$rowId;
+    var _cellColSpanInfo$cell, _cellColSpanInfo$cell2, _editRowsState$rowId$, _editRowsState$rowId;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+    if (cellColSpanInfo != null && cellColSpanInfo.spannedByColSpan) {
       return null;
     }
+    const width = (_cellColSpanInfo$cell = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.width) != null ? _cellColSpanInfo$cell : column.computedWidth;
+    const colSpan = (_cellColSpanInfo$cell2 = cellColSpanInfo == null ? void 0 : cellColSpanInfo.cellProps.colSpan) != null ? _cellColSpanInfo$cell2 : 1;
     let pinnedOffset;
     // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
     // eslint-disable-next-line default-case
@@ -263,26 +264,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
         break;
       case PinnedPosition.NONE:
+      case PinnedPosition.VIRTUAL:
         pinnedOffset = 0;
         break;
     }
     if ((rowNode == null ? void 0 : rowNode.type) === 'skeletonRow') {
       var _column$align;
-      const {
-        width
-      } = cellColSpanInfo.cellProps;
-      const contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         width: width,
-        contentWidth: contentWidth,
+        height: rowHeight,
         field: column.field,
         align: (_column$align = column.align) != null ? _column$align : 'left'
       }, column.field);
     }
-    const {
-      colSpan,
-      width
-    } = cellColSpanInfo.cellProps;
     const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
@@ -292,10 +286,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     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;
-    }
+    const cellIsNotVisible = pinnedPosition === PinnedPosition.VIRTUAL;
     return /*#__PURE__*/_jsx(slots.cell, _extends({
       column: column,
       width: width,
@@ -331,18 +322,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   });
   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];
-    let indexRelativeToAllColumns = firstColumnToRender + i;
-    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
-      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
-      } else {
-        indexRelativeToAllColumns -= 1;
-      }
-    }
-    const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
-    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
+  if (hasVirtualFocusCellLeft) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedPosition.VIRTUAL));
+  }
+  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+    const column = visibleColumns[i];
+    const indexInSection = i - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, i, middleColumnsLength));
+  }
+  if (hasVirtualFocusCellRight) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -368,7 +357,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: gridClasses.cellOffsetLeft,
       style: {
-        width: offsets.left
+        width: offsetLeft
       }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
@@ -422,13 +411,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       width: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
-  firstColumnToRender: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
-  focusedCell: PropTypes.string,
-  focusedCellColumnIndexNotInRange: PropTypes.number,
+  focusedColumnIndex: PropTypes.number,
   /**
    * 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.
@@ -436,19 +423,21 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: PropTypes.number.isRequired,
   isFirstVisible: PropTypes.bool.isRequired,
   isLastVisible: PropTypes.bool.isRequired,
-  isNotVisible: PropTypes.bool,
-  lastColumnToRender: PropTypes.number.isRequired,
-  offsets: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired
-  }).isRequired,
+  isNotVisible: PropTypes.bool.isRequired,
+  offsetLeft: PropTypes.number.isRequired,
+  offsetTop: PropTypes.number,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   pinnedColumns: PropTypes.object.isRequired,
-  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object,
+  renderContext: PropTypes.shape({
+    firstColumnIndex: PropTypes.number.isRequired,
+    firstRowIndex: PropTypes.number.isRequired,
+    lastColumnIndex: PropTypes.number.isRequired,
+    lastRowIndex: PropTypes.number.isRequired
+  }).isRequired,
+  row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/cell/GridCell.d.ts

@@ -4,7 +4,8 @@ import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
 export declare enum PinnedPosition {
     NONE = 0,
     LEFT = 1,
-    RIGHT = 2
+    RIGHT = 2,
+    VIRTUAL = 3
 }
 export type GridCellProps = {
     align: GridAlignment;

package/components/cell/GridCell.js

@@ -20,6 +20,7 @@ export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
   PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
   PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
 const EMPTY_CELL_PARAMS = {
@@ -132,10 +133,13 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     classes: rootClasses,
     getCellClassName
   } = rootProps;
-  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+
+  // There is a hidden grid state access in `applyPipeProcessor('cellClassName', ...)`
+  const pipesClassName = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
     id: rowId,
     field
-  });
+  }).filter(Boolean).join(' '));
+  const classNames = [pipesClassName];
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
@@ -331,7 +335,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
   pinnedOffset: PropTypes.number.isRequired,
-  pinnedPosition: PropTypes.oneOf([0, 1, 2]).isRequired,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   sectionIndex: PropTypes.number.isRequired,
   sectionLength: PropTypes.number.isRequired,

package/components/cell/GridSkeletonCell.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface GridSkeletonCellProps {
     width: number;
-    contentWidth: number;
+    height: number | 'auto';
     field: string;
     align: string;
 }
@@ -9,4 +9,5 @@ declare function GridSkeletonCell(props: React.HTMLAttributes<HTMLDivElement> &
 declare namespace GridSkeletonCell {
     var propTypes: any;
 }
-export { GridSkeletonCell };
+declare const Memoized: typeof GridSkeletonCell;
+export { Memoized as GridSkeletonCell };

package/components/cell/GridSkeletonCell.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "align", "width", "contentWidth"];
+const _excluded = ["field", "align", "width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '../../utils/fastMemo';
+import { randomNumberBetween } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const randomWidth = randomNumberBetween(10000, 20, 80);
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -22,7 +25,7 @@ function GridSkeletonCell(props) {
   const {
       align,
       width,
-      contentWidth
+      height
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -31,14 +34,18 @@ function GridSkeletonCell(props) {
     align
   };
   const classes = useUtilityClasses(ownerState);
+  const contentWidth = Math.round(randomWidth());
   return /*#__PURE__*/_jsx("div", _extends({
     className: classes.root,
     style: {
-      width
+      height,
+      maxWidth: width,
+      minWidth: width
     }
   }, other, {
     children: /*#__PURE__*/_jsx(Skeleton, {
-      width: `${contentWidth}%`
+      width: `${contentWidth}%`,
+      height: 25
     })
   }));
 }
@@ -48,8 +55,9 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   align: PropTypes.string.isRequired,
-  contentWidth: PropTypes.number.isRequired,
   field: PropTypes.string.isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   width: PropTypes.number.isRequired
 } : void 0;
-export { GridSkeletonCell };
+const Memoized = fastMemo(GridSkeletonCell);
+export { Memoized as GridSkeletonCell };

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -37,7 +37,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const checkboxElement = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRef = useForkRef(checkboxElement, ref);
-  const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {
     const params = {
       value: event.target.checked,
@@ -46,10 +45,13 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0 && element) {
-      element.tabIndex = -1;
+    if (tabIndex === 0) {
+      const element = apiRef.current.getCellElement(id, field);
+      if (element) {
+        element.tabIndex = -1;
+      }
     }
-  }, [element, tabIndex]);
+  }, [apiRef, tabIndex, id, field]);
   React.useEffect(() => {
     if (hasFocus) {
       var _checkboxElement$curr;

package/components/columnsManagement/GridColumnsManagement.js

@@ -156,7 +156,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
-    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {