@mui/x-data-grid 8.0.0-alpha.7 → 8.0.0-alpha.8

package/modern/locales/trTR.js

@@ -100,6 +100,8 @@ const trTRGrid = {
   'headerFilterOperator>=': 'Büyük veya eşit',
   'headerFilterOperator<': 'Küçüktür',
   'headerFilterOperator<=': 'Küçük veya eşit',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'herhangi',
   filterValueTrue: 'doğru',

package/modern/locales/ukUA.js

@@ -117,6 +117,8 @@ const ukUAGrid = {
   'headerFilterOperator>=': 'Більше або дорівнює',
   'headerFilterOperator<': 'Менше ніж',
   'headerFilterOperator<=': 'Менше або дорівнює',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'будь-який',
   filterValueTrue: 'так',

package/modern/locales/urPK.js

@@ -102,6 +102,8 @@ const urPKGrid = {
   'headerFilterOperator>=': 'ذیادہ یا برابر ہے',
   'headerFilterOperator<': 'کم ہے',
   'headerFilterOperator<=': 'کم یا برابر ہے',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'کوئی بھی',
   filterValueTrue: 'صحیح',

package/modern/locales/viVN.js

@@ -102,6 +102,8 @@ const viVNGrid = {
   'headerFilterOperator>=': 'Lớn hơn hoặc bằng',
   'headerFilterOperator<': 'Nhỏ hơn',
   'headerFilterOperator<=': 'Nhỏ hơn hoặc bằng',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: 'bất kỳ giá trị nào',
   filterValueTrue: 'Có',

package/modern/locales/zhCN.js

@@ -100,6 +100,8 @@ const zhCNGrid = {
   'headerFilterOperator>=': '大于或等于',
   'headerFilterOperator<': '小于',
   'headerFilterOperator<=': '小于或等于',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: '任何',
   filterValueTrue: '真',

package/modern/locales/zhHK.js

@@ -102,6 +102,8 @@ const zhHKGrid = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: '任何',
   filterValueTrue: '真的',

package/modern/locales/zhTW.js

@@ -102,6 +102,8 @@ const zhTWGrid = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '小於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
+
   // Filter values text
   filterValueAny: '任何值',
   filterValueTrue: '真',

package/modern/material/index.js

@@ -61,7 +61,8 @@ const iconSlots = {
   loadIcon: GridLoadIcon,
   filterPanelAddIcon: GridAddIcon,
   filterPanelRemoveAllIcon: GridDeleteForeverIcon,
-  columnReorderIcon: GridDragIcon
+  columnReorderIcon: GridDragIcon,
+  menuItemCheckIcon: GridCheckIcon
 };
 const baseSlots = {
   baseBadge: MUIBadge,

package/modern/utils/cellBorderUtils.js

@@ -1,14 +1,14 @@
-import { GridPinnedColumnPosition } from "../hooks/features/columns/gridColumnsInterfaces.js";
+import { PinnedColumnPosition } from "../internals/constants.js";
 export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
-  if (pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell) {
+  if (pinnedPosition === PinnedColumnPosition.LEFT && isSectionLastCell) {
     return true;
   }
   if (showCellVerticalBorderRootProp) {
-    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+    if (pinnedPosition === PinnedColumnPosition.LEFT) {
       return true;
     }
-    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+    if (pinnedPosition === PinnedColumnPosition.RIGHT) {
       return !isSectionLastCell;
     }
     // pinnedPosition === undefined, middle section
@@ -17,5 +17,5 @@ export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectio
   return false;
 };
 export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
-  return pinnedPosition === GridPinnedColumnPosition.RIGHT && indexInSection === 0;
+  return pinnedPosition === PinnedColumnPosition.RIGHT && indexInSection === 0;
 };

package/modern/utils/domUtils.js

@@ -153,7 +153,7 @@ const findPinnedHeaders = ({
   const elements = [];
   api.columnHeadersContainerRef.current.querySelectorAll(`.${gridClasses[position === 'left' ? 'columnHeader--pinnedLeft' : 'columnHeader--pinnedRight']}`).forEach(element => {
     const currentColIndex = parseCellColIndex(element);
-    if (currentColIndex !== null && filterFn(currentColIndex)) {
+    if (currentColIndex !== null && filterFn(currentColIndex, element)) {
       elements.push(element);
     }
   });
@@ -174,7 +174,12 @@ export function findRightPinnedHeadersBeforeCol(api, col, isRtl) {
     api,
     position: isRtl ? 'left' : 'right',
     colIndex,
-    filterFn: index => isRtl ? index > colIndex : index < colIndex
+    filterFn: (index, element) => {
+      if (element.classList.contains(gridClasses['columnHeader--last'])) {
+        return false;
+      }
+      return isRtl ? index > colIndex : index < colIndex;
+    }
   });
 }
 export function findGridHeader(api, field) {

package/modern/utils/rtlFlipSide.js

@@ -0,0 +1,22 @@
+import { PinnedColumnPosition } from "../internals/constants.js";
+export const rtlFlipSide = (position, isRtl) => {
+  if (!position) {
+    return undefined;
+  }
+  if (!isRtl) {
+    if (position === PinnedColumnPosition.LEFT) {
+      return 'left';
+    }
+    if (position === PinnedColumnPosition.RIGHT) {
+      return 'right';
+    }
+  } else {
+    if (position === PinnedColumnPosition.LEFT) {
+      return 'right';
+    }
+    if (position === PinnedColumnPosition.RIGHT) {
+      return 'left';
+    }
+  }
+  return undefined;
+};

package/node/DataGrid/DataGrid.js

@@ -41,13 +41,12 @@ const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref)
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.slotProps?.root, {
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
+      ref: ref
     }))
   });
 });

package/node/DataGrid/useDataGridComponent.js

@@ -50,6 +50,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
@@ -59,7 +60,6 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);

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

@@ -18,6 +18,7 @@ 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");
@@ -28,14 +29,12 @@ 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 _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
@@ -48,13 +47,16 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       visibleColumns,
       pinnedColumns,
       offsetLeft,
-      dimensions,
-      renderContext,
+      columnsTotalWidth,
+      firstColumnIndex,
+      lastColumnIndex,
       focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
       isNotVisible,
       showBottomBorder,
+      scrollbarWidth,
+      gridHasFiller,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -74,14 +76,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   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 gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
-  const hasColumnVirtualization = (0, _useGridSelector.useGridSelector)(apiRef, _hooks.gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
-  const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
-  const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
+  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']
   });
@@ -197,14 +196,14 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.PinnedPosition.NONE) => {
+  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,
@@ -223,7 +222,9 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
     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,
@@ -236,9 +237,8 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
-      sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasFiller: gridHasFiller
+      showLeftBorder: showLeftBorder,
+      showRightBorder: showRightBorder
     }, slotProps?.cell), column.field);
   };
 
@@ -249,25 +249,16 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   }
   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));
-  }
-  let firstColumnIndex;
-  let lastColumnIndex;
-  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
-    firstColumnIndex = 0;
-    lastColumnIndex = visibleColumns.length;
-  } else {
-    firstColumnIndex = renderContext.firstColumnIndex;
-    lastColumnIndex = renderContext.lastColumnIndex;
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
@@ -278,7 +269,7 @@ const GridRow = (0, _forwardRef.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,
@@ -315,48 +306,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.
@@ -365,6 +322,7 @@ 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,
@@ -372,22 +330,12 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   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/GridSkeletonLoadingOverlay.js

@@ -12,15 +12,19 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
+var _constants = require("../internals/constants");
 var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
 var _domUtils = require("../utils/domUtils");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
+var _rtlFlipSide = require("../utils/rtlFlipSide");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const SkeletonOverlay = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
@@ -48,6 +52,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
   const {
     slots
   } = rootProps;
+  const isRtl = (0, _RtlProvider.useRtl)();
   const classes = useUtilityClasses({
     classes: rootProps.classes
   });
@@ -63,18 +68,12 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);
   const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
   const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisiblePinnedColumnDefinitionsSelector);
-  const getPinnedStyle = React.useCallback((computedWidth, index, position) => {
-    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(position, computedWidth, index, positions, dimensions);
-    return {
-      [position]: pinnedOffset
-    };
-  }, [dimensions, positions]);
   const getPinnedPosition = React.useCallback(field => {
     if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
-      return _hooks.GridPinnedColumnPosition.LEFT;
+      return _constants.PinnedColumnPosition.LEFT;
     }
     if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
-      return _hooks.GridPinnedColumnPosition.RIGHT;
+      return _constants.PinnedColumnPosition.RIGHT;
     }
     return undefined;
   }, [pinnedColumns.left, pinnedColumns.right]);
@@ -85,13 +84,15 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
       for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
         const column = columns[colIndex];
         const pinnedPosition = getPinnedPosition(column.field);
-        const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
-        const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
-        const sectionLength = pinnedPosition ? pinnedColumns[pinnedPosition].length // pinned section
+        const isPinnedLeft = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+        const isPinnedRight = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
+        const pinnedSide = (0, _rtlFlipSide.rtlFlipSide)(pinnedPosition, isRtl);
+        const sectionLength = pinnedSide ? pinnedColumns[pinnedSide].length // pinned section
         : columns.length - pinnedColumns.left.length - pinnedColumns.right.length; // middle section
-        const sectionIndex = pinnedPosition ? pinnedColumns[pinnedPosition].findIndex(col => col.field === column.field) // pinned section
+        const sectionIndex = pinnedSide ? pinnedColumns[pinnedSide].findIndex(col => col.field === column.field) // pinned section
         : colIndex - pinnedColumns.left.length; // middle section
-        const pinnedStyle = pinnedPosition && getPinnedStyle(column.computedWidth, colIndex, pinnedPosition);
+        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+        const pinnedStyle = (0, _utils.attachPinnedStyle)({}, isRtl, pinnedPosition, (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
         const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
         const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex);
@@ -105,7 +106,6 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
           width: emptyCellWidth,
           empty: true
         }, `skeleton-filler-column-${i}`);
-        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
@@ -137,7 +137,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
       }, `skeleton-row-${i}`));
     }
     return array;
-  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, dimensions.hasScrollY, dimensions.scrollbarSize, getPinnedPosition, getPinnedStyle]);
+  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions, positions, getPinnedPosition, isRtl]);
 
   // Sync the column resize of the overlay columns with the grid
   const handleColumnResize = params => {
@@ -151,8 +151,8 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
     }
     const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
     const pinnedPosition = getPinnedPosition(colDef.field);
-    const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
-    const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
+    const isPinnedLeft = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+    const isPinnedRight = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     const currentWidth = getComputedStyle(cells[0]).getPropertyValue('--width');
     const delta = parseInt(currentWidth, 10) - width;
     if (cells) {