@mui/x-data-grid 7.23.6 → 7.24.1

package/context/GridContextProvider.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
 import { GridConfiguration } from '../models/configuration/gridConfiguration';
 type GridContextProviderProps = {
-    privateApiRef: React.MutableRefObject<GridPrivateApiCommunity>;
+    privateApiRef: RefObject<GridPrivateApiCommunity>;
     configuration: GridConfiguration;
     props: {};
     children: React.ReactNode;

package/hooks/core/pipeProcessing/useGridPipeProcessing.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 /**
  * Implement the Pipeline Pattern
@@ -29,4 +29,4 @@ import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
  *   * a processor is registered.
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
-export declare const useGridPipeProcessing: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;
+export declare const useGridPipeProcessing: (apiRef: RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.RefObject<PrivateApi>, group: G, callback: () => void) => void;
+export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessorName, GridStrategyProcessor } from './gridStrategyProcessingApi';
-export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends GridStrategyProcessorName>(apiRef: React.RefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;
+export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends GridStrategyProcessorName>(apiRef: RefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessorName, GridStrategyProcessingLookup } from './gridStrategyProcessingApi';
 export declare const GRID_DEFAULT_STRATEGY = "none";
@@ -45,4 +45,4 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * - sorting algorithm.
  * - filtering algorithm.
  */
-export declare const useGridStrategyProcessing: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;
+export declare const useGridStrategyProcessing: (apiRef: RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridApiInitialization.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 export declare function unwrapPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(publicApi: Api): PrivateApi;
-export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.RefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): React.RefObject<PrivateApi>;
+export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): RefObject<PrivateApi>;

package/hooks/core/useGridInitialization.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.RefObject<Api> | undefined, props: DataGridProcessedProps) => React.RefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api> | undefined, props: DataGridProcessedProps) => import("react").RefObject<PrivateApi>;

package/hooks/core/useGridIsRtl.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridIsRtl: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;
+export declare const useGridIsRtl: (apiRef: RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridLocaleText.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLocaleText: (apiRef: React.RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "localeText">) => void;
+export declare const useGridLocaleText: (apiRef: RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "localeText">) => void;

package/hooks/core/useGridLoggerFactory.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLoggerFactory: (apiRef: React.RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "logger" | "logLevel">) => void;
+export declare const useGridLoggerFactory: (apiRef: RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "logger" | "logLevel">) => void;

package/hooks/core/useGridRefs.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.RefObject<PrivateApi>) => void;
+export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/hooks/core/useGridStateInitialization.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.RefObject<PrivateApi>) => void;
+export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;
+export declare const useGridClipboard: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -7,4 +7,4 @@ export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;
+export declare const useGridColumnGrouping: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -6,8 +6,9 @@ import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
 import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
 import { GridColumnMenuState } from '../columnMenu';
-import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
+import { GridColumnVisibilityModel, gridColumnPositionsSelector } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
+import { PinnedColumnPosition } from '../../../internals/constants';
 export interface UseGridColumnHeadersProps {
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
@@ -23,7 +24,7 @@ export interface UseGridColumnHeadersProps {
     hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    position?: GridPinnedColumnPosition;
+    position?: PinnedColumnPosition;
     renderContext?: GridColumnsRenderContext;
     maxLastColumn?: number;
 }
@@ -46,11 +47,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         right: GridStateColDef[];
     };
     visibleColumns: GridStateColDef[];
-    getCellOffsetStyle: ({ pinnedPosition, columnIndex, computedWidth, }: {
-        pinnedPosition?: GridPinnedColumnPosition;
-        columnIndex: number;
-        computedWidth: number;
-    }) => React.CSSProperties | undefined;
+    columnPositions: number[];
     getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
     getColumnHeadersRow: () => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
@@ -59,6 +56,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         lastColumnToRender: number;
     };
     getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
+    getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;
     isDragging: boolean;
     getInnerProps: () => {
         role: string;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,22 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
+import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
 import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.js";
 import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../../utils/cellBorderUtils.js";
+import { PinnedColumnPosition } from "../../../internals/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -44,10 +45,8 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
-  const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -84,18 +83,10 @@ export const useGridColumnHeaders = props => {
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: currentContext = renderContext,
-      maxLastColumn = visibleColumns.length
+      renderContext: currentContext = renderContext
     } = params || {};
-    let firstColumnToRender;
-    let lastColumnToRender;
-    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
-      firstColumnToRender = 0;
-      lastColumnToRender = maxLastColumn;
-    } else {
-      firstColumnToRender = currentContext.firstColumnIndex;
-      lastColumnToRender = currentContext.lastColumnIndex;
-    }
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -104,7 +95,7 @@ export const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
@@ -125,33 +116,6 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
-  const getCellOffsetStyle = ({
-    pinnedPosition,
-    columnIndex,
-    computedWidth
-  }) => {
-    let style;
-    const isLeftPinned = pinnedPosition === GridPinnedColumnPosition.LEFT;
-    const isRightPinned = pinnedPosition === GridPinnedColumnPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      if (pinnedPosition === 'left') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-      if (pinnedPosition === 'right') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-    }
-    return style;
-  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -166,14 +130,15 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
-      const siblingWithBorderingSeparator = pinnedPosition === GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -186,12 +151,11 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller,
+        pinnedOffset: pinnedOffset,
         isLastUnpinned: isLastUnpinned,
-        isSiblingFocused: isSiblingFocused
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -203,18 +167,15 @@ export const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
-        position: GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
+        position: PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+        renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
+        position: PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
@@ -273,14 +234,11 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === 'left') {
+      if (pinnedPosition === PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
@@ -296,10 +254,9 @@ export const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: indexInSection,
-        sectionLength: visibleColumnGroupHeader.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection),
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -317,7 +274,7 @@ export const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: GridPinnedColumnPosition.LEFT,
+            position: PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -329,7 +286,7 @@ export const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: GridPinnedColumnPosition.RIGHT,
+            position: PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -344,11 +301,12 @@ export const useGridColumnHeaders = props => {
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     getFillers,
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
+    getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'

package/hooks/features/columnMenu/useGridColumnMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const columnMenuStateInitializer: GridStateInitializer;
@@ -6,4 +6,4 @@ export declare const columnMenuStateInitializer: GridStateInitializer;
  * @requires useGridColumnResize (event)
  * @requires useGridInfiniteLoader (event)
  */
-export declare const useGridColumnMenu: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridColumnMenu: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -40,7 +40,6 @@ export const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -82,7 +81,6 @@ export const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;
+export declare const useGridColumnResize: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -193,8 +193,10 @@ export const useGridColumnResize = (apiRef, props) => {
     const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
     const columnWidthDiff = newWidth - refs.initialColWidth;
-    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
-    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    if (columnWidthDiff > 0) {
+      const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+      apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    }
     refs.colDef.computedWidth = newWidth;
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -44,13 +44,13 @@ export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialStat
     initialState: GridColumnsInitialState | undefined;
     columnVisibilityModel?: GridColumnVisibilityModel;
     keepOnlyColumnsToUpsert: boolean;
-    apiRef: React.MutableRefObject<GridApiCommunity>;
+    apiRef: RefObject<GridApiCommunity>;
 }) => GridColumnsState;
 export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
     firstColumnToRender: number;
-    apiRef: React.MutableRefObject<GridApiCommon>;
+    apiRef: RefObject<GridApiCommon>;
     firstRowToRender: number;
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/useGridColumnSpanning.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnSpanning: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridColumnSpanning: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/columns/useGridColumns.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'slots' | 'slotProps' | 'disableColumnSelector' | 'signature'>): void;
+export declare function useGridColumns(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'slots' | 'slotProps' | 'disableColumnSelector' | 'signature'>): void;

package/hooks/features/density/useGridDensity.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;
+export declare const useGridDensity: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
@@ -6,5 +6,5 @@ import { GridStateInitializer } from '../../utils/useGridInitializeState';
 type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
-export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export declare function useGridDimensions(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
 export {};

package/hooks/features/dimensions/useGridDimensions.js

@@ -15,6 +15,7 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -237,9 +238,6 @@ export function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

package/hooks/features/editing/useGridCellEditing.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;
+export declare const useGridCellEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;

package/hooks/features/editing/useGridEditing.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;
+export declare const useGridEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;

package/hooks/features/editing/useGridRowEditing.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;
+export declare const useGridRowEditing: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;

package/hooks/features/events/useGridEvents.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;
+export declare function useGridEvents(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;