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

package/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { GridRenderContext } from '../../../models';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -6,6 +7,13 @@ type RootProps = Pick<DataGridProcessedProps, 'disableVirtualization'>;
 export type GridVirtualizationState = {
     enabled: boolean;
     enabledForColumns: boolean;
+    renderContext: GridRenderContext;
+};
+export declare const EMPTY_RENDER_CONTEXT: {
+    firstRowIndex: number;
+    lastRowIndex: number;
+    firstColumnIndex: number;
+    lastColumnIndex: number;
 };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridVirtualization(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/virtualization/useGridVirtualization.js

@@ -1,10 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
+export const EMPTY_RENDER_CONTEXT = {
+  firstRowIndex: 0,
+  lastRowIndex: 0,
+  firstColumnIndex: 0,
+  lastColumnIndex: 0
+};
 export const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
-    enabledForColumns: true
+    enabledForColumns: true,
+    renderContext: EMPTY_RENDER_CONTEXT
   };
   return _extends({}, state, {
     virtualization

package/hooks/utils/index.d.ts

@@ -4,3 +4,6 @@ export * from './useGridLogger';
 export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
+export * from './useOnMount';
+export * from './useResizeObserver';
+export * from './useRunOnce';

package/hooks/utils/index.js

@@ -3,4 +3,7 @@ export * from './useGridApiMethod';
 export * from './useGridLogger';
 export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
-export * from './useFirstRender';
+export * from './useFirstRender';
+export * from './useOnMount';
+export * from './useResizeObserver';
+export * from './useRunOnce';

package/hooks/utils/useGridAriaAttributes.js

@@ -6,7 +6,6 @@ import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../features/r
 import { useGridPrivateApiContext } from './useGridPrivateApiContext';
 import { isMultipleRowSelectionEnabled } from '../features/rowSelection/utils';
 export const useGridAriaAttributes = () => {
-  var _rootProps$experiment;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -14,7 +13,7 @@ export const useGridAriaAttributes = () => {
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
   let role = 'grid';
-  if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 && rootProps.treeData) {
+  if (rootProps.treeData) {
     role = 'treegrid';
   }
   return {

package/hooks/utils/useGridNativeEventListener.js

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { isFunction } from '../../utils/utils';
 import { useGridLogger } from './useGridLogger';
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
+  var _ref$current;
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
   const [added, setAdded] = React.useState(false);
   const handlerRef = React.useRef(handler);
+  const targetElement = isFunction(ref) ? ref() : (_ref$current = ref == null ? void 0 : ref.current) != null ? _ref$current : null;
   const wrapHandler = React.useCallback(event => {
     return handlerRef.current && handlerRef.current(event);
   }, []);
@@ -12,22 +14,15 @@ export const useGridNativeEventListener = (apiRef, ref, eventName, handler, opti
     handlerRef.current = handler;
   }, [handler]);
   React.useEffect(() => {
-    let targetElement;
-    if (isFunction(ref)) {
-      targetElement = ref();
-    } else {
-      targetElement = ref && ref.current ? ref.current : null;
-    }
     if (targetElement && eventName && !added) {
       logger.debug(`Binding native ${eventName} event`);
       targetElement.addEventListener(eventName, wrapHandler, options);
-      const boundElem = targetElement;
       setAdded(true);
       const unsubscribe = () => {
         logger.debug(`Clearing native ${eventName} event`);
-        boundElem.removeEventListener(eventName, wrapHandler, options);
+        targetElement.removeEventListener(eventName, wrapHandler, options);
       };
       apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
-  }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
+  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/hooks/utils/useResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useResizeObserver(ref: React.MutableRefObject<HTMLElement | undefined | null>, fn: (entries: ResizeObserverEntry[]) => void, enabled?: boolean): void;

package/hooks/utils/useResizeObserver.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+const isDevEnvironment = process.env.NODE_ENV === 'development';
+const noop = () => {};
+export function useResizeObserver(ref, fn, enabled) {
+  const fnRef = React.useRef(null);
+  fnRef.current = fn;
+  useEnhancedEffect(() => {
+    if (enabled === false || typeof ResizeObserver === 'undefined') {
+      return noop;
+    }
+    let frameID = 0;
+    const target = ref.current;
+    const observer = new ResizeObserver(entries => {
+      // See https://github.com/mui/mui-x/issues/8733
+      // In dev, we avoid the React warning by moving the task to the next frame.
+      // In prod, we want the task to run in the same frame as to avoid tear.
+      if (isDevEnvironment) {
+        frameID = requestAnimationFrame(() => {
+          fnRef.current(entries);
+        });
+      } else {
+        fnRef.current(entries);
+      }
+    });
+    if (target) {
+      observer.observe(target);
+    }
+    return () => {
+      if (frameID) {
+        cancelAnimationFrame(frameID);
+      }
+      observer.disconnect();
+    };
+  }, [ref, enabled]);
+}

package/hooks/utils/useRunOnce.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Runs an effect once, when `condition` is true.
+ */
+export declare const useRunOnce: (condition: boolean, effect: React.EffectCallback) => void;

package/hooks/utils/useRunOnce.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+const noop = () => {};
+
+/**
+ * Runs an effect once, when `condition` is true.
+ */
+export const useRunOnce = (condition, effect) => {
+  const didRun = React.useRef(false);
+  useEnhancedEffect(() => {
+    if (didRun.current || !condition) {
+      return noop;
+    }
+    didRun.current = true;
+    return effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [didRun.current || condition]);
+};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.8
+ * @mui/x-data-grid v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -2,6 +2,9 @@ export type { GridBaseColDef, GridStateColDef, GridSingleSelectColDef, } from '.
 export { GridVirtualScroller } from '../components/virtualization/GridVirtualScroller';
 export { GridVirtualScrollerContent } from '../components/virtualization/GridVirtualScrollerContent';
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
+export type { GridDetailPanelsProps } from '../components/GridDetailPanels';
+export type { GridPinnedRowsProps } from '../components/GridPinnedRows';
+export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
@@ -13,18 +16,17 @@ export type { GridStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
-export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+export * from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
 export type { GridSlotsComponentsProps } from '../models/gridSlotsComponentsProps';
-export type { UseGridColumnHeadersProps, GetHeadersParams, } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
+export * from '../hooks/features/columns/gridColumnsUtils';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
-export { gridColumnsStateSelector } from '../hooks/features/columns/gridColumnsSelector';
+export * from '../hooks/features/columns/gridColumnsSelector';
 export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 export type { GridColumnGroupLookup } from '../hooks/features/columnGrouping/gridColumnGroupsInterfaces';
-export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
+export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, GridPinnedColumns, GridPinnedColumnFields, GridColumnPinningState, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
@@ -54,10 +56,10 @@ export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorti
 export type { GridSortingModelApplier } from '../hooks/features/sorting/gridSortingState';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
-export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+export { dimensionsStateInitializer, useGridDimensions, } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
-export { useGridVirtualScroller, getRenderableIndexes, } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, EMPTY_DETAIL_PANELS, } from '../hooks/features/virtualization/useGridVirtualScroller';
 export * from '../hooks/features/virtualization';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
@@ -69,13 +71,14 @@ export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
-export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
+export * from '../utils/utils';
+export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export * from '../utils/getPublicApiRef';
 export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-export * from '../hooks/utils/useOnMount';
+export * from '../hooks/utils';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';

package/internals/index.js

@@ -1,6 +1,7 @@
 export { GridVirtualScroller } from '../components/virtualization/GridVirtualScroller';
 export { GridVirtualScrollerContent } from '../components/virtualization/GridVirtualScrollerContent';
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
+export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
@@ -10,13 +11,13 @@ export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../hook
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
-export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+export * from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
+export * from '../hooks/features/columns/gridColumnsUtils';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
-export { gridColumnsStateSelector } from '../hooks/features/columns/gridColumnsSelector';
+export * from '../hooks/features/columns/gridColumnsSelector';
 export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
@@ -44,9 +45,9 @@ export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
-export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+export { dimensionsStateInitializer, useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
-export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from '../hooks/features/virtualization/useGridVirtualScroller';
 export * from '../hooks/features/virtualization';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
@@ -56,11 +57,12 @@ export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
-export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
+export * from '../utils/utils';
+export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export * from '../utils/getPublicApiRef';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-export * from '../hooks/utils/useOnMount';
+export * from '../hooks/utils';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from './utils';

package/legacy/DataGrid/DataGrid.js

@@ -6,7 +6,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";
@@ -30,9 +29,7 @@ var 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, {})]
     }))
   });
 });
@@ -136,6 +133,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
@@ -172,8 +174,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/legacy/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 var useDataGridComponent = function useDataGridComponent(inputApiRef, pro
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);

package/legacy/DataGrid/useDataGridProps.js

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

package/legacy/components/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+var _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";
-var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   var innerRef = props.innerRef,
     className = props.className,
     visibleColumns = props.visibleColumns,
     sortColumnLookup = props.sortColumnLookup,
     filterColumnLookup = props.filterColumnLookup,
-    columnPositions = props.columnPositions,
     columnHeaderTabIndexState = props.columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
     columnHeaderFocus = props.columnHeaderFocus,
     columnGroupHeaderFocus = props.columnGroupHeaderFocus,
-    densityFactor = props.densityFactor,
     headerGroupingMaxDepth = props.headerGroupingMaxDepth,
     columnMenuState = props.columnMenuState,
     columnVisibility = props.columnVisibility,
@@ -33,12 +31,10 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader
       visibleColumns: visibleColumns,
       sortColumnLookup: sortColumnLookup,
       filterColumnLookup: filterColumnLookup,
-      columnPositions: columnPositions,
       columnHeaderTabIndexState: columnHeaderTabIndexState,
       columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
       columnHeaderFocus: columnHeaderFocus,
       columnGroupHeaderFocus: columnGroupHeaderFocus,
-      densityFactor: densityFactor,
       headerGroupingMaxDepth: headerGroupingMaxDepth,
       columnMenuState: columnMenuState,
       columnVisibility: columnVisibility,
@@ -46,13 +42,12 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader
       hasOtherElementInTabSequence: hasOtherElementInTabSequence
     }),
     isDragging = _useGridColumnHeaders.isDragging,
-    getRootProps = _useGridColumnHeaders.getRootProps,
     getInnerProps = _useGridColumnHeaders.getInnerProps,
     getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
     getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
   return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
-  }, getRootProps(other), {
+  }, other, {
     children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
@@ -87,14 +82,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/legacy/components/GridDetailPanels.js

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

package/legacy/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() {
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
+  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  var columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  var columnHeadersRef = React.useRef(null);
+  var 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
+  });
+}
+var MemoizedGridHeaders = fastMemo(GridHeaders);
+export { MemoizedGridHeaders as GridHeaders };

package/legacy/components/GridPinnedRows.js

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