@mui/x-data-grid 7.23.5 → 7.24.0

package/internals/utils/attachPinnedStyle.d.ts

@@ -0,0 +1,2 @@
+import { PinnedColumnPosition } from '../constants';
+export declare function attachPinnedStyle(style: React.CSSProperties, isRtl: boolean, pinnedPosition: PinnedColumnPosition | undefined, pinnedOffset?: number): import("react").CSSProperties;

package/internals/utils/attachPinnedStyle.js

@@ -0,0 +1,9 @@
+import { rtlFlipSide } from "../../utils/rtlFlipSide.js";
+export function attachPinnedStyle(style, isRtl, pinnedPosition, pinnedOffset) {
+  const side = rtlFlipSide(pinnedPosition, isRtl);
+  if (!side || pinnedOffset === undefined) {
+    return style;
+  }
+  style[side] = pinnedOffset;
+  return style;
+}

package/internals/utils/getPinnedCellOffset.d.ts

@@ -1,3 +1,3 @@
-import { GridPinnedColumnPosition, gridColumnPositionsSelector } from '../../hooks/features/columns';
-import type { GridDimensions } from '../../hooks/features/dimensions';
-export declare const getPinnedCellOffset: (pinnedPosition: GridPinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, dimensions: GridDimensions) => number;
+import { PinnedColumnPosition } from '../constants';
+import { gridColumnPositionsSelector } from '../../hooks/features/columns';
+export declare const getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;

package/internals/utils/getPinnedCellOffset.js

@@ -1,16 +1,15 @@
-import { GridPinnedColumnPosition } from "../../hooks/features/columns/index.js";
-export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions) => {
-  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+import { PinnedColumnPosition } from "../constants.js";
+export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth) => {
   let pinnedOffset;
   switch (pinnedPosition) {
-    case GridPinnedColumnPosition.LEFT:
+    case PinnedColumnPosition.LEFT:
       pinnedOffset = columnPositions[columnIndex];
       break;
-    case GridPinnedColumnPosition.RIGHT:
-      pinnedOffset = dimensions.columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
+    case PinnedColumnPosition.RIGHT:
+      pinnedOffset = columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
       break;
     default:
-      pinnedOffset = 0;
+      pinnedOffset = undefined;
       break;
   }
   return pinnedOffset;

package/internals/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
 export * from './gridRowGroupingUtils';
+export * from './attachPinnedStyle';

package/internals/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
 export * from "./propValidation.js";
-export * from "./gridRowGroupingUtils.js";
+export * from "./gridRowGroupingUtils.js";
+export * from "./attachPinnedStyle.js";

package/locales/urPK.js

@@ -30,12 +30,11 @@ const urPKGrid = {
   toolbarExportPrint: 'پرنٹ کریں',
   toolbarExportExcel: 'ایکسل کے طور پر ڈاوٴنلوڈ کریں',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'تلاش',
+  columnsManagementNoColumns: 'کوئی کالم نہیں',
+  columnsManagementShowHideAllText: 'تمام دکھائیں/چھپائیں',
+  columnsManagementReset: 'ریسیٹ',
+  columnsManagementDeleteIconLabel: 'کلئیر',
   // Filter panel text
   filterPanelAddFilter: 'نیا فلٹر',
   filterPanelRemoveAll: 'سارے ختم کریں',
@@ -49,9 +48,9 @@ const urPKGrid = {
   filterPanelInputPlaceholder: 'ویلیو کو فلٹر کریں',
   // Filter operators text
   filterOperatorContains: 'شامل ہے',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'موجود نہیں ہے',
   filterOperatorEquals: 'برابر ہے',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'برابر نہیں ہے',
   filterOperatorStartsWith: 'شروع ہوتا ہے',
   filterOperatorEndsWith: 'ختم ہوتا ہے',
   filterOperatorIs: 'ہے',
@@ -71,9 +70,9 @@ const urPKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل ہے',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'موجود نہیں ہے',
   headerFilterOperatorEquals: 'برابر ہے',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'برابر نہیں ہے',
   headerFilterOperatorStartsWith: 'شروع ہوتا ہے',
   headerFilterOperatorEndsWith: 'ختم ہوتا ہے',
   headerFilterOperatorIs: 'ہے',

package/models/api/gridCoreApi.d.ts

@@ -13,7 +13,7 @@ export interface GridCoreApi {
      * The React ref of the grid root container div element.
      * @ignore - do not document.
      */
-    rootElementRef: React.RefObject<HTMLDivElement>;
+    rootElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -59,27 +59,27 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
     /**
      * The React ref of the grid main container div element.
      */
-    mainElementRef: React.MutableRefObject<HTMLDivElement | null>;
+    mainElementRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's virtual scroller container element.
      */
-    virtualScrollerRef: React.RefObject<HTMLDivElement>;
+    virtualScrollerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's vertical virtual scrollbar container element.
      */
-    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid's horizontal virtual scrollbar container element.
      */
-    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
+    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid column container virtualized div element.
      */
-    columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
+    columnHeadersContainerRef: React.RefObject<HTMLDivElement | null>;
     /**
      * The React ref of the grid header filter row element.
      */
-    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement | null>;
     register: <V extends 'public' | 'private', T extends V extends 'public' ? Partial<GridPublicApi> : Partial<Omit<GridPrivateApi, keyof GridPublicApi>>>(visibility: V, methods: T) => void;
     /**
      * Returns the public API.

package/models/api/gridDensityApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridDensity } from '../gridDensity';
 export interface GridDensityOption {
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
     label: string;
     value: GridDensity;
 }

package/models/colDef/gridColDef.d.ts

@@ -24,13 +24,13 @@ export type ValueOptions = string | number | {
  * Value that can be used as a key for grouping rows
  */
 export type GridKeyValue = string | number | boolean;
-export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
-export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: React.MutableRefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
-export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
-export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => F;
-export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => R;
-export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => V;
-export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => number | undefined;
+export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.RefObject<GridApiCommunity>) => boolean;
+export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: React.RefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
+export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => V;
+export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => F;
+export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => R;
+export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => V;
+export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => number | undefined;
 /**
  * Column Definition base interface.
  */
@@ -217,7 +217,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * This function can return `null` to skip filtering for this value and column.
      * @param {any} value The value with which we want to filter the column.
      * @param {GridStateColDef} colDef The column from which we want to filter the rows.
-     * @param {React.MutableRefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
+     * @param {React.RefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
      * @returns {null | GridApplyQuickFilter} The function to call to check if a row pass this filter value or not.
      */
     getApplyQuickFilterFn?: GetApplyQuickFilterFn<R, V>;

package/models/events/gridEventLookup.d.ts

@@ -583,7 +583,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
      * Fired when the content size used by the `GridVirtualScroller` changes.
      * @ignore - do not document.
      */
-    virtualScrollerContentSizeChange: {};
+    virtualScrollerContentSizeChange: {
+        params: {
+            columnsTotalWidth: number;
+            contentHeight: number;
+        };
+    };
     /**
      * Fired when the content is scrolled by the mouse wheel.
      * It's attached to the "mousewheel" event.

package/models/gridExport.d.ts

@@ -49,7 +49,7 @@ export interface GridGetRowsToExportParams<Api extends GridApiCommon = GridApiCo
     /**
      * The API of the grid.
      */
-    apiRef: React.MutableRefObject<Api>;
+    apiRef: React.RefObject<Api>;
 }
 export interface GridCsvGetRowsToExportParams<Api extends GridApiCommon = GridApiCommunity> extends GridGetRowsToExportParams<Api> {
 }

package/models/gridFilterOperator.d.ts

@@ -3,7 +3,7 @@ import { GridFilterItem } from './gridFilterItem';
 import type { GridColDef } from './colDef/gridColDef';
 import type { GridValidRowModel } from './gridRows';
 import type { GridApiCommunity } from './api/gridApiCommunity';
-type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.MutableRefObject<GridApiCommunity>) => boolean;
+type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => boolean;
 export type GetApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFn<R, V, F>;
 /**
  * Filter operator definition interface.

package/models/gridStateCommunity.d.ts

@@ -45,4 +45,8 @@ export interface GridInitialStateCommunity {
     columns?: GridColumnsInitialState;
     preferencePanel?: GridPreferencePanelInitialState;
     density?: GridDensityState;
+    scroll?: {
+        top: number;
+        left: number;
+    };
 }

package/models/props/DataGridProps.d.ts

@@ -386,7 +386,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.MutableRefObject<GridApiCommunity>;
+    apiRef?: React.RefObject<GridApiCommunity>;
     /**
      * Forwarded props for the Data Grid root element.
      * @ignore - do not document.

package/modern/DataGrid/DataGrid.js

@@ -4,14 +4,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
+import { GridRoot } from "../components/index.js";
 import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useGridAriaAttributes,
@@ -34,13 +34,12 @@ const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
-      ref: ref,
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      ref: ref
     }))
   });
 });

package/modern/DataGrid/useDataGridComponent.js

@@ -44,6 +44,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -53,7 +54,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);

package/modern/components/GridHeaders.js

@@ -18,7 +18,7 @@ function GridHeaders() {
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const hasNoCellTabIndexState = useGridSelector(apiRef, () => gridTabIndexCellSelector(apiRef) === null);
   const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
   const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
@@ -26,7 +26,7 @@ function GridHeaders() {
   const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
   const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && hasNoCellTabIndexState);
   const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
   return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,

package/modern/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", "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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,44 +11,22 @@ import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRo
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
 import { gridColumnPositionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector, objectShallowCompare } from "../hooks/utils/useGridSelector.js";
 import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../internals/constants.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
-import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
-import { gridVirtualizationColumnEnabledSelector } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EmptyCell({
-  width
-}) {
-  if (!width) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    role: "presentation",
-    className: clsx(gridClasses.cell, gridClasses.cellEmpty),
-    style: {
-      '--width': `${width}px`
-    }
-  });
-}
-process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  width: PropTypes.number.isRequired
-} : void 0;
 const GridRow = forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -61,13 +39,16 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       pinnedColumns,
       offsetLeft,
-      dimensions,
-      renderContext,
+      columnsTotalWidth,
+      firstColumnIndex,
+      lastColumnIndex,
       focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
       isNotVisible,
       showBottomBorder,
+      scrollbarWidth,
+      gridHasFiller,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -87,14 +68,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = 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) === GridRowModes.Edit;
   const editable = rootProps.editMode === GridEditModes.Row;
-  const hasColumnVirtualization = useGridSelector(apiRef, 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 = 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']
   });
@@ -210,14 +188,14 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedPosition.NONE) => {
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = 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 = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
+    const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
@@ -236,7 +214,9 @@ const GridRow = 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 === PinnedPosition.VIRTUAL;
+    const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
+    const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+    const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
     return /*#__PURE__*/_jsx(slots.cell, _extends({
       column: column,
       width: width,
@@ -249,9 +229,8 @@ const GridRow = 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);
   };
 
@@ -262,25 +241,16 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
-    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedPosition.LEFT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, 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, PinnedPosition.RIGHT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, 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, 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, PinnedColumnPosition.VIRTUAL));
   }
   for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
@@ -291,7 +261,7 @@ const GridRow = 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, PinnedPosition.VIRTUAL));
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -301,8 +271,6 @@ const GridRow = 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__*/_jsxs("div", _extends({
     "data-id": rowId,
     "data-rowindex": index,
@@ -317,11 +285,9 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       style: {
         width: offsetLeft
       }
-    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
-      width: emptyCellWidth
-    }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
+    }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
-      className: gridClasses.filler
+      className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
       pinnedRight: pinnedColumns.right.length > 0
     })]
@@ -332,48 +298,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.shape({
-    bottomContainerHeight: PropTypes.number.isRequired,
-    columnsTotalWidth: PropTypes.number.isRequired,
-    contentSize: PropTypes.shape({
-      height: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired
-    }).isRequired,
-    groupHeaderHeight: PropTypes.number.isRequired,
-    hasScrollX: PropTypes.bool.isRequired,
-    hasScrollY: PropTypes.bool.isRequired,
-    headerFilterHeight: PropTypes.number.isRequired,
-    headerHeight: PropTypes.number.isRequired,
-    headersTotalHeight: PropTypes.number.isRequired,
-    isReady: PropTypes.bool.isRequired,
-    leftPinnedWidth: PropTypes.number.isRequired,
-    minimumSize: PropTypes.shape({
-      height: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired
-    }).isRequired,
-    rightPinnedWidth: PropTypes.number.isRequired,
-    root: PropTypes.shape({
-      height: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired
-    }).isRequired,
-    rowHeight: PropTypes.number.isRequired,
-    rowWidth: PropTypes.number.isRequired,
-    scrollbarSize: PropTypes.number.isRequired,
-    topContainerHeight: PropTypes.number.isRequired,
-    viewportInnerSize: PropTypes.shape({
-      height: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired
-    }).isRequired,
-    viewportOuterSize: PropTypes.shape({
-      height: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequired
-    }).isRequired
-  }).isRequired,
+  columnsTotalWidth: PropTypes.number.isRequired,
+  firstColumnIndex: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
   focusedColumnIndex: PropTypes.number,
+  gridHasFiller: PropTypes.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.
@@ -382,6 +314,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isFirstVisible: PropTypes.bool.isRequired,
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool.isRequired,
+  lastColumnIndex: PropTypes.number.isRequired,
   offsetLeft: PropTypes.number.isRequired,
   offsetTop: PropTypes.number,
   onClick: PropTypes.func,
@@ -389,22 +322,12 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   pinnedColumns: PropTypes.object.isRequired,
-  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,
+  scrollbarWidth: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired,
   showBottomBorder: PropTypes.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.string,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
 const MemoizedGridRow = fastMemo(GridRow);