@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-alpha.9

package/models/api/gridColumnGroupingApi.d.ts

@@ -10,10 +10,10 @@ export interface GridColumnGroupingApi {
      * @param {string} field The field of of the column requested.
      * @returns {string[]} The id of the groups leading to the requested column.
      */
-    unstable_getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
+    getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
     /**
      * Returns the column group lookup.
      * @returns {GridColumnGroupLookup} The column group lookup.
      */
-    unstable_getAllGroupDetails: () => GridColumnGroupLookup;
+    getAllGroupDetails: () => GridColumnGroupLookup;
 }

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>;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -56,14 +56,26 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * The generic event emitter manager.
      */
     eventManager: EventManager;
+    /**
+     * The React ref of the grid main container div element.
+     */
+    mainElementRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid virtual scroller container element.
      */
-    virtualScrollerRef?: React.RefObject<HTMLDivElement>;
+    virtualScrollerRef: React.RefObject<HTMLDivElement>;
     /**
-     * The React ref of the grid main container div element.
+     * The React ref of the grid column container virtualized div element.
+     */
+    columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid column headers container element.
+     */
+    columnHeadersElementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid header filter row element.
      */
-    mainElementRef?: React.RefObject<HTMLDivElement>;
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
     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.
@@ -77,16 +89,4 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * Do not use in React components - use the `useGridRootProps` hook instead.
      */
     rootProps: GridProps;
-    /**
-     * The React ref of the grid column container virtualized div element.
-     */
-    columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * The React ref of the grid header filter row element.
-     */
-    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * The React ref of the grid column headers container element.
-     */
-    columnHeadersElementRef?: React.RefObject<HTMLDivElement>;
 }

package/models/api/gridRowsMetaApi.d.ts

@@ -31,7 +31,7 @@ export interface GridRowsMetaApi {
      * @param {string} position The position to it the row belongs to.
      * @ignore - do not document.
      */
-    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number, position: 'left' | 'center' | 'right') => void;
+    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number) => void;
     /**
      * Updates the index of the last row measured.
      * @param {number} index The row index.

package/models/api/gridVirtualizationApi.d.ts

@@ -1,4 +1,3 @@
-import { GridRenderContext } from '../params';
 export interface GridVirtualizationApi {
     /**
      * Enable/disable virtualization.
@@ -13,8 +12,8 @@ export interface GridVirtualizationApi {
 }
 export interface GridVirtualizationPrivateApi {
     /**
-     * Get the current grid rendering context.
+     * Update grid rendering context.
      * @returns {GridRenderContext} The `GridRenderContext`.
      */
-    getRenderContext: () => GridRenderContext;
+    updateRenderContext?: () => void;
 }

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams } from '../params';
+import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams, GridRenderContext } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -479,10 +479,10 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridGroupNode;
     };
     /**
-     * Fired when the rendered rows index interval changes. Called with a [[GridRenderedRowsIntervalChangeParams]] object.
+     * Fired when the rendered rows index interval changes. Called with a [[GridRenderContext]] object.
      */
     renderedRowsIntervalChange: {
-        params: GridRenderedRowsIntervalChangeParams;
+        params: GridRenderContext;
     };
     /**
      * Fired when the mode of a cell changes.

package/models/gridFilterModel.d.ts

@@ -12,7 +12,7 @@ export interface GridFilterModel {
     /**
      * - `GridLogicOperator.And`: the row must pass all the filter items.
      * - `GridLogicOperator.Or`: the row must pass at least on filter item.
-     * @default `GridLogicOperator.Or`
+     * @default `GridLogicOperator.And`
      */
     logicOperator?: GridLogicOperator;
     /**

package/models/gridSlotsComponent.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
+import type { GridRowProps } from '../components/GridRow';
+import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
+import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
+import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
@@ -100,7 +104,12 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component responsible for rendering the column headers.
      * @default DataGridColumnHeaders
      */
-    columnHeaders: React.JSXElementConstructor<any>;
+    columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
+    /**
+     * Component responsible for rendering the detail panels.
+     * @default GridDetailPanels
+     */
+    detailPanels: React.JSXElementConstructor<GridDetailPanelsProps>;
     /**
      * Footer component rendered at the bottom of the grid viewport.
      * @default GridFooter
@@ -116,6 +125,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default null
      */
     toolbar: React.JSXElementConstructor<any> | null;
+    /**
+     * Pinned rows container.
+     * @ignore - do not document
+     */
+    pinnedRows: React.JSXElementConstructor<GridPinnedRowsProps>;
     /**
      * Loading overlay component rendered when the grid is in a loading state.
      * @default GridLoadingOverlay
@@ -155,5 +169,5 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component rendered for each row.
      * @default GridRow
      */
-    row: React.JSXElementConstructor<any>;
+    row: React.JSXElementConstructor<GridRowProps>;
 }

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,5 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
+import type { Theme } from '@mui/material/styles';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
 import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
@@ -8,6 +9,8 @@ import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFi
  * The state of `DataGrid`.
  */
 export interface GridStateCommunity {
+    theme: Theme;
+    dimensions: GridDimensionsState;
     rows: GridRowsState;
     visibleRowsLookup: GridVisibleRowsLookupState;
     rowsMeta: GridRowsMetaState;
@@ -17,6 +20,7 @@ export interface GridStateCommunity {
     columns: GridColumnsState;
     columnGrouping: GridColumnsGroupingState;
     columnMenu: GridColumnMenuState;
+    pinnedColumns: GridColumnPinningState;
     sorting: GridSortingState;
     focus: GridFocusState;
     tabIndex: GridTabIndexState;

package/models/index.d.ts

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/index.js

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/params/index.d.ts

@@ -11,4 +11,3 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
 export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';

package/models/params/index.js

@@ -10,5 +10,4 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';
+export * from './gridMenuParams';

package/models/props/DataGridProps.d.ts

@@ -25,21 +25,11 @@ import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationModel } from '../gridPaginationProps';
 export interface GridExperimentalFeatures {
-    /**
-     * Enables the column grouping.
-     */
-    columnGrouping: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
      */
     warnIfFocusStateIsNotSynced: boolean;
-    /**
-     * Enables accessibility improvements that will be enabled by default in v7.
-     * If you rely on the v6 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-     * @default false
-     */
-    ariaV7: boolean;
 }
 /**
  * The props users can give to the `DataGrid` component.
@@ -173,7 +163,12 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableMultipleRowSelection: boolean;
     /**
-     * If `true`, sorting with multiple columns is disabled.
+     * If `true`, the column sorting feature will be disabled.
+     * @default false
+     */
+    disableColumnSorting: boolean;
+    /**
+     * If `true`, the sorting with multiple columns is disabled.
      * @default false
      */
     disableMultipleColumnsSorting: boolean;

package/modern/DataGrid/DataGrid.js

@@ -5,7 +5,6 @@ import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../compon
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
-import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,9 +24,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref
     }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        VirtualScrollerComponent: DataGridVirtualScroller
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -131,6 +128,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnSelector: PropTypes.bool,
+  /**
+   * If `true`, the column sorting feature will be disabled.
+   * @default false
+   */
+  disableColumnSorting: PropTypes.bool,
   /**
    * If `true`, the density selector is disabled.
    * @default false
@@ -167,8 +169,6 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV7: PropTypes.bool,
-    columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**

package/modern/DataGrid/useDataGridComponent.js

@@ -20,7 +20,7 @@ import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection
 import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
-import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+import { dimensionsStateInitializer, useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
@@ -38,6 +38,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -39,6 +39,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
+  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,

package/modern/components/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -10,18 +10,16 @@ import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
-      columnPositions,
       columnHeaderTabIndexState,
       columnGroupHeaderTabIndexState,
       columnHeaderFocus,
       columnGroupHeaderFocus,
-      densityFactor,
       headerGroupingMaxDepth,
       columnMenuState,
       columnVisibility,
@@ -31,7 +29,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     isDragging,
-    getRootProps,
     getInnerProps,
     getColumnHeaders,
     getColumnGroupHeaders
@@ -40,12 +37,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
@@ -54,7 +49,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
   });
   return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
-  }, getRootProps(other), {
+  }, other, {
     children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
@@ -89,14 +84,11 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
     field: PropTypes.string,
     open: PropTypes.bool.isRequired
   }).isRequired,
-  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
   columnVisibility: PropTypes.object.isRequired,
-  densityFactor: PropTypes.number.isRequired,
   filterColumnLookup: PropTypes.object.isRequired,
   hasOtherElementInTabSequence: PropTypes.bool.isRequired,
   headerGroupingMaxDepth: PropTypes.number.isRequired,
   innerRef: refType,
-  minColumnIndex: PropTypes.number,
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;

package/modern/components/GridDetailPanels.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridDetailPanels(_) {
+  return null;
+}

package/modern/components/GridHeaders.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { fastMemo } from '../utils/fastMemo';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from '../hooks/features/focus/gridFocusStateSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridHeaders() {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  const columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef
+  });
+  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
+    ref: columnsContainerRef,
+    innerRef: columnHeadersRef,
+    visibleColumns: visibleColumns,
+    filterColumnLookup: filterColumnLookup,
+    sortColumnLookup: sortColumnLookup,
+    columnHeaderTabIndexState: columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+    columnHeaderFocus: columnHeaderFocus,
+    columnGroupHeaderFocus: columnGroupHeaderFocus,
+    headerGroupingMaxDepth: headerGroupingMaxDepth,
+    columnMenuState: columnMenuState,
+    columnVisibility: columnVisibility,
+    columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence: hasOtherElementInTabSequence
+  });
+}
+const MemoizedGridHeaders = fastMemo(GridHeaders);
+export { MemoizedGridHeaders as GridHeaders };

package/modern/components/GridPinnedRows.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridPinnedRows(_) {
+  return null;
+}