@mui/x-data-grid 8.9.1 → 8.9.2

package/esm/locales/plPL.js

@@ -3,8 +3,8 @@ const plPLGrid = {
   // Root
   noRowsLabel: 'Brak danych',
   noResultsOverlayLabel: 'Nie znaleziono wyników.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Brak kolumn',
+  noColumnsOverlayManageColumns: 'Zarządzaj kolumnami',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -36,8 +36,7 @@ const plPLGrid = {
   // toolbarPivot: 'Pivot',
 
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'Asystent AI',
   // Columns management text
   columnsManagementSearchTitle: 'Szukaj',
   columnsManagementNoColumns: 'Brak kolumn',
@@ -155,18 +154,18 @@ const plPLGrid = {
   collapseDetailPanel: 'Zwiń',
   // Pagination
   paginationRowsPerPage: 'Wierszy na stronę:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} z ${count !== -1 ? count : `więcej niż ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `około ${estimated}` : `więcej niż ${to}`;
+    return `${from}–${to} z ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Przejdź do pierwszej strony';
@@ -219,19 +218,18 @@ const plPLGrid = {
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
-  // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantPanelTitle: 'Asystent AI',
+  aiAssistantPanelClose: 'Zamknij asystenta AI',
+  aiAssistantPanelNewConversation: 'Nowa konwersacja',
+  aiAssistantPanelConversationHistory: 'Historia konwersacji',
+  aiAssistantPanelEmptyConversation: 'Brak historii poleceń',
+  aiAssistantSuggestions: 'Sugestie',
   // Prompt field
   promptFieldLabel: 'Wprowadź polecenie',
   promptFieldPlaceholder: 'Wpisz polecenie…',
   promptFieldPlaceholderWithRecording: 'Wpisz lub nagraj polecenie…',
   promptFieldPlaceholderListening: 'Nasłuchiwanie polecenia…',
-  // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSpeechRecognitionNotSupported: 'Rozpoznawanie głosu nie jest obsługiwane przez Twoją przeglądarkę.',
   promptFieldSend: 'Wyślij',
   promptFieldRecord: 'Nagrywaj',
   promptFieldStopRecording: 'Zatrzymaj nagrywanie'

package/esm/models/api/gridApiCommon.d.ts

@@ -1,3 +1,4 @@
+import type { Virtualizer } from '@mui/x-virtualizer';
 import type { GridColumnApi } from "./gridColumnApi.js";
 import type { GridColumnMenuApi } from "./gridColumnMenuApi.js";
 import type { GridCoreApi, GridCorePrivateApi } from "./gridCoreApi.js";
@@ -31,5 +32,7 @@ import type { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridColumnResizeApi } from "../../hooks/features/columnResize/index.js";
 import type { GridPivotingPrivateApiCommunity } from "../../hooks/features/pivoting/gridPivotingInterfaces.js";
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {}
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi, GridPivotingPrivateApiCommunity {}
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi, GridPivotingPrivateApiCommunity {
+  virtualizer: Virtualizer;
+}
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {}

package/esm/models/api/gridColumnSpanning.d.ts

@@ -19,16 +19,10 @@ export interface GridColumnSpanningPrivateApi {
   resetColSpan: () => void;
   /**
    * Calculate column spanning for each cell in the row
-   * @param {Object} options The options to apply on the calculation.
-   * @param {GridRowId} options.rowId The row id
-   * @param {number} options.minFirstColumn First visible column index
-   * @param {number} options.maxLastColumn Last visible column index
-   * @param {GridStateColDef[]} options.columns List of columns to calculate colSpan for
+   * @param {GridRowId} rowId The row id
+   * @param {number} minFirstColumn First visible column index
+   * @param {number} maxLastColumn Last visible column index
+   * @param {GridStateColDef[]} columns List of columns to calculate colSpan for
    */
-  calculateColSpan: (options: {
-    rowId: GridRowId;
-    minFirstColumn: number;
-    maxLastColumn: number;
-    columns: GridStateColDef[];
-  }) => void;
+  calculateColSpan: (rowId: GridRowId, minFirstColumn: number, maxLastColumn: number, columns: GridStateColDef[]) => void;
 }

package/esm/models/props/DataGridProps.d.ts

@@ -196,6 +196,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default 150
    */
   filterDebounceMs: number;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  columnFilterDebounceMs: number;
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
    * @default 56

package/esm/utils/roundToDecimalPlaces.d.ts

@@ -1 +1 @@
-export declare function roundToDecimalPlaces(value: number, decimals: number): number;
+export { roundToDecimalPlaces } from '@mui/x-internals/math';

package/esm/utils/roundToDecimalPlaces.js

@@ -1,3 +1 @@
-export function roundToDecimalPlaces(value, decimals) {
-  return Math.round(value * 10 ** decimals) / 10 ** decimals;
-}
+export { roundToDecimalPlaces } from '@mui/x-internals/math';

package/hooks/core/useGridVirtualizer.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+type RootProps = DataGridProcessedProps;
+/**
+ * Virtualizer setup
+ */
+export declare function useGridVirtualizer(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
+export {};

package/hooks/core/useGridVirtualizer.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridVirtualizer = useGridVirtualizer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _math = require("@mui/x-internals/math");
+var _store = require("@mui/x-internals/store");
+var _xVirtualizer = require("@mui/x-virtualizer");
+var _useFirstRender = require("../utils/useFirstRender");
+var _createSelector = require("../../utils/createSelector");
+var _useGridSelector = require("../utils/useGridSelector");
+var _gridDimensionsSelectors = require("../features/dimensions/gridDimensionsSelectors");
+var _density = require("../features/density");
+var _gridColumnsSelector = require("../features/columns/gridColumnsSelector");
+var _gridRowsSelector = require("../features/rows/gridRowsSelector");
+var _useGridVisibleRows = require("../utils/useGridVisibleRows");
+var _pagination = require("../features/pagination");
+var _gridFocusedVirtualCellSelector = require("../features/virtualization/gridFocusedVirtualCellSelector");
+var _rowSelection = require("../features/rowSelection");
+var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultValues");
+var _gridRowsUtils = require("../features/rows/gridRowsUtils");
+var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+function identity(x) {
+  return x;
+}
+const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _gridColumnsSelector.gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return (0, _math.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
+
+/**
+ * Virtualizer setup
+ */
+function useGridVirtualizer(apiRef, rootProps) {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    listView
+  } = rootProps;
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
+  const pinnedColumns = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+  const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
+  const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef);
+  const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
+
+  /* TODO: extract dimensions code */
+  const contentHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridContentHeightSelector);
+  const verticalScrollbarWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
+  const hasFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const {
+    autoHeight
+  } = rootProps;
+  const scrollReset = listView;
+
+  // <DIMENSIONS>
+  const density = (0, _useGridSelector.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
+  const baseRowHeight = (0, _gridRowsUtils.getValidRowHeight)(rootProps.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.rowHeightWarning);
+  const rowHeight = Math.floor(baseRowHeight * density);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * density);
+  const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
+  const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
+  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
+  const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
+  const dimensions = {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    columnsTotalWidth,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  };
+
+  // </DIMENSIONS>
+
+  // <ROWS_META>
+  const dataRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
+  const pagination = (0, _useGridSelector.useGridSelector)(apiRef, _pagination.gridPaginationSelector);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
+  const {
+    getRowHeight,
+    getEstimatedRowHeight,
+    getRowSpacing
+  } = rootProps;
+  // </ROWS_META>
+
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
+  const virtualizer = (0, _xVirtualizer.useVirtualizer)({
+    scrollbarSize: rootProps.scrollbarSize,
+    dimensions,
+    initialState: {
+      scroll: rootProps.initialState?.scroll,
+      dimensions: apiRef.current.state.dimensions,
+      rowSpanning: apiRef.current.state.rowSpanning,
+      virtualization: apiRef.current.state.virtualization
+    },
+    isRtl,
+    rows: currentPage.rows,
+    range: currentPage.range,
+    rowIdToIndexMap: currentPage.rowIdToIndexMap,
+    rowCount,
+    columns: visibleColumns,
+    pinnedRows,
+    pinnedColumns,
+    refs: {
+      container: apiRef.current.mainElementRef,
+      scroller: apiRef.current.virtualScrollerRef,
+      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+    },
+    hasColSpan,
+    contentHeight,
+    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
+    autoHeight,
+    getRowHeight: React.useMemo(() => {
+      if (!getRowHeight) {
+        return undefined;
+      }
+      return rowEntry => getRowHeight((0, _extends2.default)({}, rowEntry, {
+        densityFactor: density
+      }));
+    }, [getRowHeight, density]),
+    getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight((0, _extends2.default)({}, rowEntry, {
+      densityFactor: density
+    })) : undefined, [getEstimatedRowHeight, density]),
+    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing((0, _extends2.default)({}, rowEntry, visibility, {
+      indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+    })) : undefined, [apiRef, getRowSpacing]),
+    applyRowHeight: (0, _useEventCallback.default)((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
+    focusedVirtualCell: (0, _useEventCallback.default)(() => focusedVirtualCell),
+    rowBufferPx: rootProps.rowBufferPx,
+    columnBufferPx: rootProps.columnBufferPx,
+    resizeThrottleMs: rootProps.resizeThrottleMs,
+    onResize: (0, _useEventCallback.default)(size => apiRef.current.publishEvent('resize', size)),
+    onWheel: (0, _useEventCallback.default)(event => {
+      apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+    }),
+    onTouchMove: (0, _useEventCallback.default)(event => {
+      apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+    }),
+    onRenderContextChange: (0, _useEventCallback.default)(nextRenderContext => {
+      apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
+    }),
+    onScrollChange: (scrollPosition, nextRenderContext) => {
+      apiRef.current.publishEvent('scrollPositionChange', {
+        top: scrollPosition.top,
+        left: scrollPosition.left,
+        renderContext: nextRenderContext
+      });
+    },
+    scrollReset,
+    getColspan: (rowId, column) => {
+      if (typeof column.colSpan === 'function') {
+        const row = apiRef.current.getRow(rowId);
+        const value = apiRef.current.getRowValue(row, column);
+        return column.colSpan(value, row, column, apiRef) ?? 0;
+      }
+      return column.colSpan ?? 0;
+    },
+    renderRow: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
+      row: params.model,
+      rowId: params.id,
+      index: params.rowIndex,
+      selected: isRowSelected(params.id),
+      offsetLeft: params.offsetLeft,
+      columnsTotalWidth: columnsTotalWidth,
+      rowHeight: params.baseRowHeight,
+      pinnedColumns: pinnedColumns,
+      visibleColumns: params.columns,
+      firstColumnIndex: params.firstColumnIndex,
+      lastColumnIndex: params.lastColumnIndex,
+      focusedColumnIndex: params.focusedColumnIndex,
+      isFirstVisible: params.isFirstVisible,
+      isLastVisible: params.isLastVisible,
+      isNotVisible: params.isVirtualFocusRow,
+      showBottomBorder: params.showBottomBorder,
+      scrollbarWidth: verticalScrollbarWidth,
+      gridHasFiller: hasFiller
+    }, rootProps.slotProps?.row), params.id),
+    renderInfiniteLoadingTrigger: id => apiRef.current.getInfiniteLoadingTriggerElement?.({
+      lastRowId: id
+    })
+  });
+
+  // HACK: Keep the grid's store in sync with the virtualizer store. We set up the
+  // subscription in the render phase rather than in an effect because other grid
+  // initialization code runs between those two moments.
+  //
+  // TODO(v9): Remove this
+  (0, _useFirstRender.useFirstRender)(() => {
+    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
+    apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
+  });
+  (0, _store.useStoreEffect)(virtualizer.store, identity, (_, state) => {
+    if (state.dimensions !== apiRef.current.state.dimensions) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        dimensions: state.dimensions
+      }));
+    }
+    if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        rowsMeta: state.rowsMeta
+      }));
+    }
+    if (state.virtualization !== apiRef.current.state.virtualization) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        virtualization: state.virtualization
+      }));
+    }
+  });
+  apiRef.current.register('private', {
+    virtualizer
+  });
+}

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

@@ -31,7 +31,7 @@ export interface GetHeadersParams {
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
   renderContext: GridColumnsRenderContext;
   leftRenderContext: {

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -18,7 +19,6 @@ var _useGridEvent = require("../../utils/useGridEvent");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
-var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
@@ -59,7 +59,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
+  const offsetLeft = (0, _xVirtualizer.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
   const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
@@ -92,7 +92,8 @@ const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = currentContext.lastColumnIndex;
+    // HACK: renderContext ins't always synchronized, this should be handled properly.
+    const lastColumnToRender = Math.min(currentContext.lastColumnIndex, visibleColumns.length);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridColumnSpanning = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridEvent = require("../../utils/useGridEvent");
 /**
@@ -13,36 +11,10 @@ var _useGridEvent = require("../../utils/useGridEvent");
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const lookup = React.useRef({});
-  const getCellColSpanInfo = (rowId, columnIndex) => {
-    return lookup.current[rowId]?.[columnIndex];
-  };
-  const resetColSpan = () => {
-    lookup.current = {};
-  };
-
-  // Calculate `colSpan` for each cell in the row
-  const calculateColSpan = React.useCallback(({
-    rowId,
-    minFirstColumn,
-    maxLastColumn,
-    columns
-  }) => {
-    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
-      const cellProps = calculateCellColSpan({
-        apiRef,
-        lookup: lookup.current,
-        columnIndex: i,
-        rowId,
-        minFirstColumnIndex: minFirstColumn,
-        maxLastColumnIndex: maxLastColumn,
-        columns
-      });
-      if (cellProps.colSpan > 1) {
-        i += cellProps.colSpan - 1;
-      }
-    }
-  }, [apiRef]);
+  const virtualizer = apiRef.current.virtualizer;
+  const resetColSpan = virtualizer.api.resetColSpan;
+  const getCellColSpanInfo = virtualizer.api.getCellColSpanInfo;
+  const calculateColSpan = virtualizer.api.calculateColSpan;
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
@@ -54,62 +26,4 @@ const useGridColumnSpanning = apiRef => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnOrderChange', resetColSpan);
 };
-exports.useGridColumnSpanning = useGridColumnSpanning;
-function calculateCellColSpan(params) {
-  const {
-    apiRef,
-    lookup,
-    columnIndex,
-    rowId,
-    minFirstColumnIndex,
-    maxLastColumnIndex,
-    columns
-  } = params;
-  const columnsLength = columns.length;
-  const column = columns[columnIndex];
-  const row = apiRef.current.getRow(rowId);
-  const value = apiRef.current.getRowValue(row, column);
-  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
-  if (!colSpan || colSpan === 1) {
-    setCellColSpanInfo(lookup, rowId, columnIndex, {
-      spannedByColSpan: false,
-      cellProps: {
-        colSpan: 1,
-        width: column.computedWidth
-      }
-    });
-    return {
-      colSpan: 1
-    };
-  }
-  let width = column.computedWidth;
-  for (let j = 1; j < colSpan; j += 1) {
-    const nextColumnIndex = columnIndex + j;
-    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
-    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-      const nextColumn = columns[nextColumnIndex];
-      width += nextColumn.computedWidth;
-      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
-        spannedByColSpan: true,
-        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
-        leftVisibleCellIndex: columnIndex
-      });
-    }
-    setCellColSpanInfo(lookup, rowId, columnIndex, {
-      spannedByColSpan: false,
-      cellProps: {
-        colSpan,
-        width
-      }
-    });
-  }
-  return {
-    colSpan
-  };
-}
-function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
-  if (!lookup[rowId]) {
-    lookup[rowId] = {};
-  }
-  lookup[rowId][columnIndex] = cellColSpanInfo;
-}
+exports.useGridColumnSpanning = useGridColumnSpanning;